User Interface

Customizing your uPortal's content, look and feel.

Structures, themes, and skins

uPortal look and feel is determined by the structure, theme, and skin.

Structures

A user layout is stored in the database as an XML document representing a generic tree of content. It does not contain any structural information or markup. uPortal retrieves the layout XML from the database and applies an XSL stylesheet to it. This stylesheet defines the structure for the content. The output from this stylesheet will be a new XML document that organizes the abstract nodes into structural layout elements like channels, columns and tabs.

The advantage of separating the content from the structure is that a variety of different page layouts can be created by simply by creating new structural XSL stylesheets. For example, a structural stylesheet can be written that will create a layout that renders channels within columns underneath in addition to a list of tabs. Another one can be created to define a vertical tree next to the columns and channels. In another example, the content from the layout node tree can be transformed into a "mobile" or "compact" structure for small-display devices like smart phones. In fact, there is no limit to types of page layouts that can be created as long as an XSL stylesheet can be written to represent it.

Themes

What is a theme?

1. It provides structure or layout for the portal

2. It is similar to a skeleton, a blueprint or the framework of buildings (see image)

3. It is the underlying HTML code of the portal, which is developed using XSLT technology

What is XSLT?

1. XSLT stands for XSL Transformations

2. XML-based language used for the transformation of XML documents into other documents such as HTML

3. XSLT uses XPath to navigate XML

How does XSLT work?

After the content has been given a structure, it is next given a theme. The theme transforms the structural XML into a final output markup, such as various forms of HTML (HTML4, XHTML, etc.) for a browser or WML for a cell phone. To apply a theme to the layout, the XML output from the structural stylesheet is transformed through a second XSL stylesheet. This "themed" output is combined with the channel content rendering to produce the markup that will be sent back to the client. Many different theme stylesheets can be written to transform the same structural XML into different markup formats.

Skins

What is a skin?

1. It consists of the portal's color scheme, text styles and images (visual appearance)

2. It is developed with Cascading Style Sheets (CSS) and image files

Skins are the term that uPortal uses for Cascading Style Sheets. If you are reading this manual then chances are you already know about CSS and can skip down to the next paragraph. Otherwise, the basic thing to know about CSS is that it represents a grouping of colors, fonts, presentation elements, and images that are applied to or combined with the themed markup to render the display of the page in the browser. CSS in not written in XML, like XSLT, but it shares some similarities with this format. A CSS file contains the presentation rules to apply to elements in the markup. Multiple CSS files can be combined – that's partly where the "cascading" term comes from. CSS can even be contained in the markup itself.

The use of CSS, or skins, allows users to personalize their portal look without the need to make changes to the markup. Multiple skins can exist within a single theme – the theme merely points to which skin will be used. To change the skin, the user simply changes the location of the skin directory to which the theme points. The user has the ability to change the skin of their portal in the preferences section. Users can change skins without even refreshing the page. This change will take place instantly, and will not affect the content other than to render it in a different presentation.

uPortal Rendering Pipeline

uPortal's rendering process is best understood as a pipe through which content flows and is transformed along the way. Layout XML from the layout manager enters the structural stylesheet and is transformed into structure elements such as tabs and columns. The theme stylesheet then transforms it into markup and links it to skins based on class and id attributes. The skin, including CSS definitions and actual images, applies the final layer where the pixels meet the browser.