Chapter 2

Working in uPortal

Introduction to uPortal

Publishing New Channels

XHTML Design of uPortal

The Layout

Making a New Skin

Cascading Style Sheets

uPortal Graphics

Layout Fragments

Appendix A: Printable List of uPortal Graphics

Appendix B: The Default uPortal Cascading Style Sheet

GUI Format

Text Format

Note on the images in this document: Usually, the pictures that help someone understand how a program works will match exactly what that person will see on the screen of their computer. As they go from one screen to the next, the pictures in the book will move along with them so that they know that they are in the right place. A portal is very customizable in the way it looks and what options are made available for people using it. By this, each school or business can change the look and feel of their portal so that it matches their symbols and colors, as well as deciding to remove certain options and buttons. The pictures that are used in this manual were captured as uPortal was being created. It is almost certain that the look of the portal that you will be using will not match that of the one used during development. It may look different, but it will still work in the way described here.

Introduction to uPortal

uPortal is a platform for presenting aggregated content to a variety of sources, that is customizable by both the user and the administrators. It is built using a database to contain the information about each user, with XSL transformations and JAVA to take this abstract data and convert it into the final, structured layout. One of the great advantages to the uPortal design is the fact that the layout data, the structure and the look of the final layout are all independent of each other. Therefore, the information that is taken out of the database can be transformed by different XSL documents, rendering the same layout data into a wide variety of final views.

The uPortal Layout

In Chapter 1, we compared the uPortal environment to a filing cabinet. In this analogy, the entire, multi-user portal was the filing cabinet, each individual user was one drawer in the cabinet, every tab on a user's layout was referred to by the file folders in the drawer, and the content on each tab was the papers and other items in a file. Keeping with this analogy, each uPortal layout can be visualized as a two dimensional diagram, using filing cabinet, folder and file imagery:

Figure 2.1: Sample uPortal Layout Diagram

The layout shown above consists of three tabs; the first containing two colums - three channels in the first column and five in the second; the second tab has one column with two channels; and the third tab has three channels with no columns. In uPortal terms, this diagram is referred to as a node tree, which is similar to a family tree in the way in which it is referenced.

Node Trees

Each item in a user's layout is a node, starting with the user themselves being called the root node. Since the tabs are in the layer directly below and connected to the root, they are considered to be child nodes to the root and the root node is their parent. The columns and channels, then, are children to the tab that they are connected to. Nodes on the same level as each other and descended from the same parent, two tab nodes for example, are considered siblings.

Figure 2.2: Node Relationships

The image above (Fig 2.2) shows 10 nodes from the sample user layout discussed earlier. The chart below shows the relationships between these 10 nodes. Note that the order of numbering of the nodes is always top-down, left-right.

Node 1: Root Node. Parent to Nodes 2, 3 and 4.

Node 2: Folder Node. Child of Node 1. Sibling of Nodes 3 and 4. Parent to Nodes 5 and 6.

Node 3: Folder Node. Child of Node 1. Sibling of Nodes 2 and 4. Parent to Node 7.

Node 4: Folder Node. Child of Node 1. Sibling of Nodes 2 and 3. Parent to Nodes 8, 9 and 10.

Node 5: Folder Node. Child of Node 2. Sibling to Node 6.

Node 6: Folder Node. Child of Node 2. Sibling to Node 5.

Node 7: Folder Node. Child of Node 3. No Sibling Nodes.

Node 8: Channel Node. Child of Node 4. Sibling to Nodes 9 and 10.

Node 9: Channel Node. Child of Node 4. Sibling to Nodes 8 and 10.

Node 10: Channel Node. Child of Node 4. Sibling to Nodes 8 and 9.

As you can see, there are really only three types of nodes in the uPortal node tree; the one Root node, Folder nodes and Channel nodes. As mentioned briefly above, the folders are converted into tabs and columns in the uPortal layout. Just how the strucure of the layout is determined is actually not rigidly defined, and is discussed in more detail below in the section, “Structuring the Layout Data”

uPortal Data

When a user signs onto uPortal, what they are actually doing is placing a request to the database for their layout. Typically, the information for a user's layout will be stored in a database as nothing more than a collection of numbers and settings in database tables.

Figure 2.3: Database Tables

The first step toward turning this data into a much more useful, visual layout is to convert this data into an XML document. Below is an excerpt of the data XML. The full XML sample is listed in Appendix A.

Layout XML Output from Database

.

.

.

<folder ID="21" type="regular" hidden="false" unremovable="false" immutable="false" name="CWebProxy Examples" width="100">

<folder ID="25" type="regular" hidden="false" unremovable="false" immutable="false" name="Column 2" width="100">

<channel ID="26" typeID="4" hidden="false" editable="true" unremovable="false" immutable="false" name="Tomcat's Servlet Examples" description="Tomcat's Servlet Examples" title="Tomcat's Servlet Examples" class="org.jasig.portal.channels.webproxy.CWebProxy" chanID="18" fname="tomcat-servlet-examples" timeout="10000" hasHelp="true" hasAbout="true">

<parameter name="cw_passThrough" value="all" override="no"/>

<parameter name="cw_edit" value="examples/servlet_edit.html" override="no"/>

<parameter name="cw_ssl" value="XHTML.ssl" override="no"/>

<parameter name="cw_info" value="examples/servlet_info.html" override="no"/>

<parameter name="cw_xml" value="http://localhost:8080/examples/servlets/index.html" override="no"/>

<parameter name="cw_tidy" value="on" override="no"/>

<parameter name="cw_help" value="examples/servlet_help.html" override="no"/>

</channel>

</folder>

.

.

.

Structuring the Layout Data

As mentioned before, the XML document of the user layout is just generic data. It does not contain any information about framework or design for how this layout will be viewed. The next step in creating the uPortal layout that the user will see is to take this database output XML and apply it to an XSL stylesheet that will give it structure. The output from this stylesheet will be a new XML document that organizes the abstract nodes into framework layout elements like channels, columns and tabs.

The advantage of separating the data from the structure is that a variety of different structure XSL stylesheets can be written to provide for a variety of different viewing framework options. Separate structure stylesheets can be written that will create a framework for the layout to be viewed as channels within columns under and list of tabs. It may instead use a vertical tree next to the columns and channels. Any framework that someone may come up with for the layout node tree can be developed by writing an XSL stylesheet to represent it.

The image below, Figure 2.4, shows just two possible structure adaptations of the layout data. Different interpretations of a tab/column or tree/column, as well as some other, completely unrelated structures are all possible results of applying the layout XML to an XSL stylesheet. Below is an excerpt of a “tab/column” structure XML. The full XML sample is listed in Appendix A.

Structure XML Output from XSL Transform

.

.

.

<column ID="5" width="50">

<channel ID="7" chanID="14" class="org.jasig.portal.channels.CNumberGuess" description="Number Guessing Game channel" editable="false" fname="number-guessing-game" hasAbout="false" hasHelp="false" hidden="false" immutable="false" name="Number Guessing Game" timeout="10000" title="Number Guessing Game" typeID="-1" unremovable="false">

<parameter name="maxNum" override="no" value="150"/>

<parameter name="minNum" override="no" value="50"/>

</channel>

<channel ID="6" chanID="11" class="org.jasig.portal.channels.CGenericXSLT" description="Word of the Day channel" editable="false" fname="word-of-the-day" hasAbout="false" hasHelp="false" hidden="false" immutable="false" name="Word of the Day" timeout="10000" title="Word of the Day" typeID="0" unremovable="false">

<parameter name="sslUri" override="no" value="CGenericXSLT/RSS/RSS-0_9x.ssl"/>

<parameter name="xmlUri" override="no" value="http://www.dictionary.com/wordoftheday/wotd.rss"/>

</channel>

</column>

.

.

.

Figure 2.4: Two Possible Structures from One Layout

Apply the Theme and Render the Channels

After the layout data has been given a structure, it is next given a theme and a skin. Simlutaneously to this, the channel content is rendered. All of these are put together to form the final mark up that will be viewed by the user.

The theme defines what device; a web browser, a PDA, a cell phone, or some other device, will be used to view the page, and the skin is the color scheme, text styles and images that give the layout its look and feel. To apply a theme to the layout, the XML output from the structure stylesheet is transformed through a second XSL stylesheet. This stylesheet converts the structure into a final output mark up, such as XHTML for a web browser or WML for a cell phone. Similar to the layout data going into the structure, many different theme stylesheets can be written to view the same structure on multiple devices. Below is an excerpt of an XHTML theme output. The full XHTML sample is listed in Appendix A.

Theme XHTML Output from Second Transform

.

.

.

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/topborder.gif); background-repeat:repeat-x;" width="100%"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="9" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/toprightcorner.gif"></td>

</tr>

<tr>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerleftborder.gif); background-repeat:repeat-y;"><img height="1" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-semidark" nowrap="nowrap"><span class="uportal-channel-title">Daily

Business Cartoon</span></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerrightborder.gif); background-repeat:repeat-y;" class="uportal-background-dark"><img height="1" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td><img height="8" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerbottomleft.gif"></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerbottomborder.gif); background-repeat:repeat-x;"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="8" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerbottomright.gif"></td>

</tr>

.

.

.

The following images represent the same structure being viewed with two different themes, and therefore on two different devices:

Figure 2.5: Structure in HTML Theme	Figure 2.6: Structure in Palm OS Theme

Within one theme, multiple skins can give the layout even more personalization. No changes need to be made to the mark up for switching between skins, so an XSL transformation is not necessary. The theme merely points to which skin will be used. To change which skin is viewed, then, the user simply changes the location of the skin directory to which the theme points. The skins are defined using Cascading Style Sheets and graphics. The process for making a new skin is described later in this chapter.

Figure 2.7: HTML Skins

Publishing New Channels

Publishing a channel is the process of making new content available for users to subscribe to and view in their layout. Generally a channel will be given some input documents, and then uPortal will render those in their layout. uPortal channels can accept a wide variety of document types as input for channel rendering.

Select the Channel Manager icon in the header to access the Channel Manager channel. Only users with access to channel management will see this icon in their header.

Next, select whether you wish to edit an already existing channel, or to create a new one:

Figure 2.8: Channel Manager - Opening Options

The top of the Channel Manager shows the 'Workflow' for creating and editing channels. The workflow for both creating new and editing existing channels is the same. The only difference will be where in the workflow you will open the channel. New channels begin by selecting the 'Channel Type,' while working with already existing channels will start you at the 'Review.'

Figure 2.9: Channel Manager – Workflow Diagram

After the channel type has been defined, some changes may be seen in the channel manager workflow. Below is a list of the workflow elements that are consistent throughout all channel types. Followed by the specific resource needs by channel type.

Channel Type – The Channel Type defines what types of input will be needed for the channel. For example, the channel type may be RSS, a form of XML that will require the RSS feed URL as well as defining what version of RSS will be use, or it may be a Java Applet, which requires the URI information for any needed jar and class documents.

Figure 2.10: Channel Manager – Channel Type Options

Each different channel type has settings used to describe the location and types of resources needed for it. These are specialized to the channel type. After these are defined, some further settings are needed that are common to all channel types.

Applet – Renders a Java Applet in a uPortal Channel.

Image – A container for rendering media, not just graphic images. It supports any type of media that can be displayed or played through the browser including graphics, flash objects, movies and audio.

Inline Frame – Similar to the Image Channel, the Inline Frame is a container for displaying HTML content. The content in an Inline Frame channel does not go through the uPortal framework, so it does NOT have to be well formed XHTML.

RSS – Renders an RSS document of type 0.90, 0.9x or 1.0. No support is provided for RSS 1.0 modules.

Web Proxy – Similar to the Inline Frame Channel Type in that it is a contain from HTML content. However, it requires well formed XHTML and can also render an XML application.

WSRP Consumer – Renders Web Services applications as defined by the Oasis WSRP v1.0 standard.

XML Transformation – Renders an XML fragment which is validated by an XSLT stylesheet.

Custom – Customized channel content with all required resources provided by the writer of the channel.

General Settings – The general settings define the name for the channel.

Channel Title – The Channel Title is the name of the channel that will appear in the header of the channel, “Word of the Day,” when it renders in uPortal.

Channel Name – The Channel Name is how the name of the channel will appear in the content subscriber channel.

Channel Functional Name – The Channel Functional Name is used when searching for the channel using java or web services. As a target for a search, this name should be unique to avoid conflicting results.

Channel Description – A description of the channel that renders in the channel manager when editing channels.

Channel Timeout – The amount of time in milliseconds that is allotted for the channel to render before it cancels the action.

Channel Secure – A checkbox that determines if the channel renders in a secured setting, such as SHTTP.

Channel Controls -

Categories -

Groups -

Review -

HTML Design of uPortal

As described in the introduction, the structure of uPortal is independent of the imported data. This separation allows for the same information to be used for any number of output views, including an HTML page, PDA, cell phone, etc. The majority of uPortal users will be viewing their layout in a web browser. The following sections discuss how to modify the default look of the uPortal HTML design to match your institution or company, and to give your users extra options to personalize their view.

Layout

uPortal has been built using the XML family of mark up languages. For this reason, the HTML output from the theme style sheet is well formed XHTML. More information on XHTML can be found at the W3C website, or compiled into PDF form at the im+m eLibrary.

The XHTML uPortal layout consists of four tables, all set to 100% width and stacked on top of each other. These table separate the content for the Header, the Tabs, the Channels and the Footer.

Stylized Rendition of the uPortal XHTML Layout

Making a New Skin

The skin is the last step in building each page in uPortal, wrapping the layout with the color scheme and text styles. The user has the ability to change the skin of their portal in the preferences section. This change will take place instantly, and will not effect their layout.

New skins can be made and added to uPortal. Creating a new skin requires the following steps:

Making a new Cascading Style Sheet (CSS)

Modifying the skin graphics

Moving the new files into their appropriate folders and redeploying the portal

Technically, the CSS does not need to be made before the skin graphics are created. Since the CSS is used to define the color scheme of the skin, however, it will be very easy to make the new images after you have used the work on the CSS to define what the color changes need to be.

Making a new Cascading Style Sheet

uPortal uses a cascading style sheet to control the text fonts and styles, as well as the background color scheme information. Each skin uses a single style sheet for all of its styles. The styles defined in the new CSS will be translated into the look of the uPortal layout when that skin is chosen.

A stylesheet is a list of text and color information that can be viewed and modified in a word processor:

Fig 2.3.1: A Cascading Style Sheet in Text Format

or in a special program designed to view a CSS file:

Fig 2.3.2: The Same Cascading Style Sheet in WYSIWYG Format

In addition to these two viewing options, the CSS Viewer channel will show the uPortal CSS in a channel on your layout.

The images below show the more prominent uPortal styles:

Channel Styles

Layout Styles

Preferences Styles

Some other important styles that are not illustrated above:

hover uportal-channel-code

uportal-channel-table-row-even uportal-channel-table-row-odd uportal-button uportal-input-text

The entire default, uPortal skin CSS is displayed in Appendix A. Some of the styles in this CSS appear to be duplicates, such as “uportal-channel-emphasis” and “uportal-channel-strong.” Other styles may also appear to be unused, such as “uportal-crumbtrail.” These lesser used styles are included for one of two reasons. In some cases, they are legacy styles that were used in earlier version of uPortal and have remained for backwards compatibility. In other cases, extra options have been included for times when an institution may wish to have styles that are similar, yet still distinct. In all cases, no style is absolutely necessary for the portal to function. If a style is called for by the portal that is not defined in the CSS, it will be ignored and the browser default will be used in its stead. Therefore, each designer has the option to define any, all or none of the styles in the CSS when creating a new skin. It is not recommended to leave any undefined, however, as it may cause unpredictable behavior when the skin is used by uPortal.

Modifying the Skin Graphics

All of the graphic elements (Tabs, Channels, Columns and Alert Box) in uPortal have been designed to expand or contract to exactly fit the size of the content.

uPortal Tab: Browser Text Size Set to 100%

uPortal Tab: Browser Text Size Set to 500%

Each element is described in more detail below, along with the graphics it uses:

Tabs: The tabs in uPortal v2.2 actually do not use any graphics at all. They have been made entirely from table cells with background colors, and transparent gifs providing the correct spacing.

uPortal Tab: As Viewed in Browser

uPortal Tab: Table Spacing Set to 5 and Borders Turned On

The above graphic (Fig 2.x) shows how the tab in Fig 2.x would look with the table spacing and padding set to 5, and with the borders turned on. Viewing the tabs in this way shows the design using painted table rows. All of these colors are defined by the CSS. Therefore, once the CSS has been made, the tabs will instantly updated with the new colors.

The tabs are being discussed here, in the graphics section, not as a reference to the tabs, but rather why graphics are used in uPortal. The same technique of using table cells and transparent gifs could not be used for the other three graphic elements. The reason for this is due to the need for compatibility with older web browsers, Netscape 4.7 in particular. NS 4.7 can have a maximum of 4 nested tables before behavior of the browser becomes unpredictable. All of the tabs consist of just one table for each tab, containing its name, nested within the main tab table. The channels are much more complicated in their design, especially when the columns are added in preferences mode, and often include many more than 4 nested tables. The only way to create them and keep compatibility with NS 4.7, then, was to use the technique described below.

Channels: The channel design is made from a 7 row by 3 column table, as shown below. Each of the corner and transition cells contains a single image, and is filled completely by that image. These cells are set to 0% width. Each of the edge and trim cells contains a single transparent gif and has a background image, one pixel in height or width, that repeats in the x or y direction. These cells are set to 100% width to ensure that they will be the only ones that expand with whatever content is added into middle cell of the channel table.

uPortal Channel: As Normally Viewed in Browser

uPortal Channel: Stretched in 'X' Direction

uPortal Channel: Table Border and Cell Padding On

Channel Image Colors

Below is a list of the images used for creating the channel interface. Each graphic is detailed with the names of the CSS styles that match the colors used. When a color is used by name and not by CSS style, it was chosen for its use in matching the scheme as an appropriate highlight or shadowing color.

Corner Images – Full Sized Images

topleftcorner.gif – CSS colors listed below

toprightcorner.gif

bottomleftcorner.gif

bottomrightcorner.gif

Transition Images – Full Sized Images Between Edge Cells

headerbottomleft.gif

headerbottomright.gif

channeltopleft.gif

channeltopright.gif

Edge Images – Single Pixel Images

Repeat 'X' Direction – One Pixel Wide

topborder.gif

bottomborder.gif

Repeat 'Y' Direction – One Pixel High

headerleftborder.gif

headerrightborder.gif

iconbarlinesleft.gif

iconbarrightborder.gif

channelleftborder.gif

channelrightborder.gif

Trim Images – Single Pixel Wide Images, Repeat in 'X' Direction

headerbottomborder.gif

channeltopborder.gif

Other – Single Pixel High Image that Does NOT Repeat

channellinesbottom.gif

This graphic has been added to “cap off” the icon bar lines, giving them a sense of completion.

Selected Images – These images replace those in the column header when the column is selected to perform an action on it, such as moving it.

topleftcornerselected.gif

toprightcornerselected.gif

headerleftborderselected.gif

headerrightborderselected.gif

headerbottomleftselected.gif

headerbottomrightselected.gif

topborderselected.gif – previously used image

headerbottomborderselected.gif

Content Cells – The three remaining table cells

Channel Title Cell is filled with 'uportal-background-semidark' The channel title is written in 'uportal-channel-title.'

Channel Icon Bar Cell is filled with 'uportal-background-light'

Channel Content Cell is filled with 'uportal-background-content'

Columns: The columns are designed in exactly the same way as the channels, using a 7x3 table to expand around the content in the middle column of cells. The only real difference between the design of the channel and the column is the lack of a title cell in the column. The space is still there for it, but it is left as a one pixel high, dark gray line instead of filling it with text. As a more subtle difference in the column design, the padding around the icon bar is built into the icon bar itself on the column, whereas it is part of the graphics above and below the icon bar in the channel.

The graphics used for the columns are shown below. The names of the images used for the column are often the same as those in the channels, with a “G” (which originally stood for “gray,” when all of the graphics were in one directory) tacked on the end. Therefore, the channel graphic “bottomborder.gif” would be similar to the column graphic “bottomborderG.gif.” Later, the column border and the channel border images were separated into different directories, but the “G” remained as legacy.

uPortal Column: As Normally Viewed in Browser

uPortal Column: Table Border and Cell Padding On

Column Images

Corner Images – Full Sized Images

topleftcornerG.gif

toprightcornerG.gif

bottomrightcornerG.gif

bottomleftcornerG.gif

Transition Images – Full Sized Images Between Edge Cells

headerbottomleftG.gif – Note that it is full size at 1 Pixel

headerbottomrightG.gif - Note that it is full size at 1 Pixel

channeltopleftG.gif

channeltoprightG.gif

Edge Images – Single Pixel Images

Repeat 'X' Direction – One Pixel Wide

topborderG.gif

bottomborderG.gif

Repeat 'Y' Direction – One Pixel High

headerleftborderG.gif

headerrightborderG.gif

iconbarrightborderG.gif

channelleftborderG.gif

channelrightborderG.gif

Trim Images – Single Pixel Wide Images, Repeat in 'X' Direction

headerbottomborderG.gif

channeltopborderG.gif

Other – Icon Bar Lines Image that Does Not Repeat

iconbarlinesleftG.gif

Selected Images – These images replace those in the column header when the column is selected to perform an action on it, such as moving it.

headerbottomleftGselected.gif

headerbottomrightGselected.gif

headerleftborderselected.gif

headerrightborderselected.gif

topleftcornerGselected.gif

toprightcornerGselected.gif

Content Cells – The three remaining table cells

Column Title Cell is one pixel in height, and filled with 'Medium Grey - #959595'

Column Icon Bar Cell is filled with 'uportal-background-neutral-light'

Column Content Cell is filled with 'Body'

Alert Box: The alert box uses a similar architecture to the channels and columns. It only uses a 6x3 table, as it does not have a content cell.

You will notice that many of the graphics used in the alert box are the same as those used in the channels. To avoid any confusion, those graphics that are repeated will be listed here and linked to their previous listing rather than defined again.

Alert Box Images

Corner Images – Full Sized Images

topleftcornerselected.gif – previously used image

toprightcornerselected.gif – previously used image

iconbarlinesbottom.gif

prefsbottomright.gif

Transition Images – Full Sized Images Between Edge Cells

headerbottomleftselected.gif – previously used image

headerbottomrightselected.gif – previously used image

Edge Images – Single Pixel Images

Repeat 'X' Direction – One Pixel Wide

topborderselected.gif – previously used image

prefsbottom.gif

Repeat 'Y' Direction – One Pixel Wide

headerleftborderselected.gif – previously used image

iconbarlinesleft.gif – previously used image

iconbarrightborder.gif – previously used image

headerrightborderselected.gif – previously used image

Trim Images – Single Pixel Images

Repeat 'X' Direction – One Pixel Wide

headerbottomborderselected.gif

Content Cells – The three remaining table cells

Alert Box Title Cell is filled with 'uportal-background-selected.' The title is written in 'uportal-channel-title.'

Alert Box Actions Cell is filled with 'uportal-background-light.' The actions are written in 'uportal-label.'

Alert Box Extra Info Cell is filled with 'uportal-background-light.' It is set to 4 pixels high by default and gives a space for extra messages to be written out for the user, or to add some spacing between the actions and the channels.

Icons: The icon graphics are fixed in size, though new ones can be made to replace the default versions. Following is a list of all of the icons used in the Integrated Modes layout of uPortal.

Header Icons

The header icons are all made with a transparent background, to fit with most header designs.

home.gif -

sitemap.gif -

channelmanager.gif -

preferences.gif -

preferencesoff.gif -

save.gif -

logout.gif -

Preferences Icons

Tab Icons – These have also been made with a transparent background

submit.gif -

moveicon.gif -

moveiconG.gif -

languages.gif -

canicon.gif -

Column Icons

The icons used in the column preferences are all built upon the same background button. Images on the buttons were created with a transparent background and placed on the background template.

Column Button Icon Background

columnmove.gif -

columncancelmove.gif -

columnshrink.gif -

columnexpand.gif -

columnnormalize.gif -

columnlanguages.gif -

columnlanguagesG.gif -

columncan.gif -

Channel Icons

The channel icons were also built using transparent images placed onto a background template.

Channel Button Icon Background

contentmove.gif -

contentcancelmove.gif -

contenthelp.gif -

contentabout.gif -

contentedit.gif -

contentfocus.gif -

contentminimize.gif -

contentmaximize.gif -

contentdetatch.gif -

contentprint.gif -

contentreturn.gif -

contentlanguages.gif -

contentcan.gif -

Target Icons

The target icons are animate gifs that are used to show where a channel or column can be moved or added into the layout. These were made to be rather obnoxious on purpose so that they would show up really well. They are background transparent to fit into multiple skins, though the Column and Channel target are built on top of the 'uportal-background-selected' style.

Tab Target Icon

airplanetarget.gif -

Column Target Icon

add_column_ani.gif -

Channel Target Icon

add_channel_ani.gif -

Deploying Your New Skin

Each skin has its own directory in the uPortal file layout. The root directory for all skin folders is:

[uPortalRoot]/portal/webpages/media/org/jasig/portal/layout/AL_TabColumn/integratedModes

Inside that directory are the individual skin folders. Inside each skin folder will be five folders that hold all of the graphics and other files for your skin.

columnBorder – This folder contains the 26 images for the columns, both normal and selected.

icons – This folder contains all of the icons used in the skin. 41 different images are used for header, tab, column, channel and target icons.

institutional – The institutional images are any graphics that are unique to your institution or company. These include such graphics as the main header logo and footer graphics.

mainBorder – This folder contains the 32 images needed to make the channels and the alert box.

skin – This folder is where the CSS, transparent.gif (a single transparent pixel) and the skin thumbnail reside. The thumbnail is a small image of the portal with this skin applied. This is the image that will appear in the skin selector channel to give a graphic display of the skin. The default size for these thumbnail images is 120px X 90px.

Along with the individual skin directories, the root for the skins also contains the file, “skins.xml.” This file contains the names and descriptions of all of the skins available to uPortal. When you create a new skin, add a new set of <skin></skin> tags with the appropriate information about your new skin.

<?xml version="1.0"?>

<skins>

<skin>

<skin>immII</skin>

<skin-name>im+m</skin-name>

<skin-description>Based on the color scheme of the instructional media+magic web site.</skin-description>

</skin>

<skin>

<skin>hulk</skin>

<skin-name>Hulk</skin-name>

<skin-description>A Green Skin based on a big, hypothetical monster.</skin-description>

</skin>

</skins>

Layout Fragments

An Introduction to Layout Fragments

A layout fragment is a block of uPortal content, including framework elements such as tabs and columns, or tree elements, as well as channels. In the purest sense, a fragment can be a single channel, or they can be more complicated, consisting of several channels dispersed through out multiple columns and tabs. Fragments can be “pushed” out to a user, in that an author such as a professor forces the fragment to appear on the layout of each of their students, or they may be “pulled” by the user, in that a user is effectively subscribing to a large block of content all at one time. Fragments are a very useful feature for uPortal, though there are some very difficult problems to solve as development of uPortal continues.

On the lowest level, the attachment point of a layout fragment becomes an issue. Exactly, how does the fragment get added into the rest of the user’s layout? What if a developer wants to have a fragment that is channels without columns or tabs? What if they want to have a fragment with multiple tabs? How do we represent a tab/column fragment in a tree structure? There are several issues that disrupt how a fragment can work in a uPortal layout. The solution at this time is to create a base level structure for a fragment, which we will call the “foundation.” All fragments must start with this foundation. As development of uPortal and fragments continues, more options for the layout fragment foundation can be included. At the current level of uPortal development, this foundation will need to be defined as a single “Tab.” This will give the portal a place that it understands to attach the fragment. Defining the foundation in this way, then, dictates that a fragment must have one and only one tab.

On the content level, layout fragments run into issues with the permissions of the channels that are included in a fragment as compared to the users of that fragment. For a pushed fragment, it is more probable that an author will know who will receive the fragment. For example, a Biology professor who makes a fragment for a 301 class will know who has enrolled in the class. However, schedule changes make it impossible to ever be certain of this 100%. This issue is compounded for pulled fragments, as the fragment author has very little information about who will be subscribing to a fragment. What happens, then, in the inevitable condition when a layout fragment subscriber is pushed or pulling channels to which they do not have permission to include in their layout? Once again, this is a case where continued uPortal and fragment development can change how this will be handled. For the current release of uPortal, however, the fragment will be displayed to the user, although any channels that conflict with a user due to permissions will be empty.

Making a New Layout Fragment

As mentioned in the introduction, a fragment is a collection of uPortal framework and content elements. A fragment itself does not consist of any documents or files, it is merely a collection of listings in the uPortal database defining what is in the fragment and the settings that govern how it is to be used. Building a new fragment, then, consists of determining what this input will be, and then getting it into the proper database tables. Below is a description of what can go into a layout fragment (Layout Fragment Content Elements, Layout Fragment Settings and Layout Fragment Restrictions), followed by a discussion of the different methods for creating a fragment (Creating a New Fragment Using the Fragment Manager or Creating a New Pushed Fragment from the Command Line.)

Layout Fragment Content Elements

Tabs – A fragment must contain one and only one tab.

Columns – A fragment must contain at least one column, but no maximum number of columns can be added to a fragment.

Channels – Any number of channels, even zero, can be included in your fragment.

Layout Fragment Settings

A fragment can currently be either pushed OR pulled. In the future, fragments will have the ability to be both, with separate settings defined for each.

Pushed Fragment – A fragment that is forced into a user's layout. The users that have the fragment included in their layout is determined by the fragment author at the time of publishing, and is set with the “Groups” restriction.

Pulled Fragment – A fragment that is subscribed to, or requested, by a user to be added their layout. This is similar to subscribing to a channel, the only difference being that the user is subscribing to a block of content, all at one time.

Fragment Display Name – The Display name is the name of the fragment that will be seen by the fragment author when they look at the list of fragments they can work on. It will also be seen by users as the name of the fragment when they subscribe to new content for their layout.

Display Name in Author's Fragment List	Display Name in User's Publishing List

Fragment Functional Name – The Functional name is the name of the fragment that uPortal stores in the database and uses to reference the fragment when rendering a user layout.

Fragment Description – A description of the fragment as determined by the author. This description will be seen along with the Display name by the author on the list of fragments, and by users who wish to subscribe to the fragment. Typically, the description will list the content in the fragment and possibly some information about the author and pushed groups.

Layout Fragment Restrictions

Priority – Priority is a concept in Aggregated Layouts that determines the order in which the content elements in a layout will be displayed, with objects that have a higher priority value being displayed first, and therefore toward the left side.

Determining Priority

For the most part, the user determines what their layout will look like and where the tabs, columns and channels arrange with repsect to each other. When using aggregated layouts in uPortal, however, priority gives content authors and administrators some control over how their content will be viewed.

Content, as it is stored in a user's layout, is given a priority range, rather than a specific number. The exact value for each content element is applied element when the final layout is rendered. Further, more than one person can set priority ranges for the layouts. For example, the uPoral administrator may decide to set the following values for the range of priorities:

Figure 2.x: Priority Ranges

The Deparment Head can then come along and redistribute the 2000-4999 range given to them to be:

If no priority levels are set, or objects has the same range of priority, uPortal will display them in the order that they are listed in the database.

Depth – Depth is similar to “priority” in that it is concept that controls the arrangement of the layout content. Where “priority” controls the left/right alignment, “depth” regulates the top/bottom structure of the layout.

Groups -

Unremovable -

Immutable -

Hidden -

Creating a New Fragment Using the Fragment Manager

The Fragment manager is a graphic interface for creating, editing and publishing layout fragments in uPortal. Much of the Fragment manager have been completed, and the new code has already been committed to the uPortal CVS. The final product is not finished, however, and will therefore not be discussed in detail here until all parts of the workflow have been made available for use by the general uPortal community. This section is here in preparation for the soon to be released “Fragment manager.” Below is a snapshot of the working “Fragment properties” interface:

Creating a New Pushed Fragment from the Command Line

As an alternate approach to using the graphical “Fragment manager” interface, a pushed fragment can be created from scratch. This is only possible with pushed fragments, and will not work for developing a pulled fragment. Developing a fragment in this way starts by creating an XML document that describes the fragment contents and properties. This information in this document will then be directed into the appropriate tables of the database by using the ant utility. A sample XML document and its resulting fragment are shown below:

<?xml version="1.0" encoding="utf-8"?>

<fragments>

<fragment name="pfragment1.0">

<description>Sample pushed fragment.</description>

<groups>

<group>Students</group>

<group>Developers</group>

</groups>

<restrictions>

<restriction path="local" name="priority" value="0-20000"/>

<restriction path="local" name="depth" value="1"/>

<restriction path="parent" name="priority" value="1-10"/>

</restrictions>

<folder name="Sample Fragment" immutable="Y" unremovable="Y" hidden="N">

<folder name="column1" immutable="Y" unremovable="Y" hidden="N">

<channel fname="word-of-the-day" immutable="Y" unremovable="Y" hidden="N"/>

<channel fname="salon.com" immutable="Y" unremovable="Y" hidden="N"/>

</folder>

<folder name="column2" immutable="Y" unremovable="Y" hidden="N">

<channel fname="motley-fool" immutable="Y" unremovable="Y" hidden="N"/>

</folder>

</folder>

</fragment>

</fragments>

Explanation of XML Fragment Tags

Header

<?xml version="1.0" encoding="utf-8"?>

<?xml version="1.0" encoding="utf-8"?>: Opening tag for all XML documents. It is not an XML element, and does not require a closing tag.

Root

<fragments>

<fragments>: Root tag for the fragment. One and only one “fragments”	tag is required.

Fragment Header

<fragment name="pfragment1.0">

<fragment name="pfragment1.0">: Opening tag for this particular	fragment, including an attribute, “name,” that contains the unique,	functional fragment ID of the fragment. The fragment ID identifies this	fragment to uPortal.

Fragment Properties

<description>Sample pushed fragment.</description>

<groups>

<group>Students</group>

<group>Developers</group>

</groups>

<restrictions>

<restriction path="local" name="priority" value="0-20000"/>

<restriction path="local" name="depth" value="1"/>

<restriction path="parent" name="priority" value="1-10"/>

</restrictions>

<description>: Metadata about the fragment that will be shown to a user	when they are subscribing to the fragment as new content, and also seen	when the author is viewing the list of fragments in the “Fragment	manager.”

<groups>: Opening tag for the list of groups that will have the fragment	pushed out to them.

<group>: One “group” tag is needed for each group that will receive the	fragment as pushed content on their layouts. The argument of the group	tag is the string element name for the group. Currently, groups are the	only way to categorize who receives pushed content. A fragment cannot	be pushed to a single user, unless a group is made with just that user.

<restrictions>: Opening tag for the list of restrictions that will be applied	to the use of this fragment.

<restriction path="local" name="priority" value="0-20000"/>: Each	restriction requires one tag, with its values defined in the attributes. These	restrictions are:

Local Priority: defines any restriction that the fragment author decides to	put on the position of the fragment root in the layout. Can contain any	numeric string range from 0-20000.

Depth: defines any restrictions that the fragment author may place on	where in the user layout node tree the fragment can be attached. The	USER node is depth level 1, the first folder level is depth level 2, etc.	Since the fragment foundation is currently restricted to a Tab, which is	attached to the ROOT, this must be set to a value of “1.” The fragment	author will be given the ability to set this restriction once the foundation is	more open. Can contain a single string number, the range of which is	dependent on the number of levels in the layout.

Parent Priority: defines any restriction that the fragment author decides to	put on the position of the parent to which the fragment will be attached or	moved to. Can contain a numeric string range from 0-20000.

Fragment Content

<folder name="Sample Fragment" immutable="Y" unremovable="Y" hidden="N">

<folder name="column1" immutable="Y" unremovable="Y" hidden="N">

<channel fname="word-of-the-day" immutable="Y" unremovable="Y" hidden="N"/>

<channel fname="salon.com" immutable="Y" unremovable="Y" hidden="N"/>

</folder>

<folder name="column2" immutable="Y" unremovable="Y" hidden="N">

<channel fname="motley-fool" immutable="Y" unremovable="Y" hidden="N"/>

</folder>

</folder>

<folder name="Sample Fragment" immutable="Y" unremovable="Y" hidden="N">: The opening element for the actual content of the fragment. The attributes for this tag define its:

name: the display name of the fragment. This is that name that users will see in the “Fragment manager.” Can carry any string value.

immutable: defines whether changes can be made to the fragment by the user. Can carry the value of “Y” or “N.”

unremovable: defines whether the fragment can be deleted by the user. Can carry the value of “Y” or “N.”

hidden: defines whether the fragment appears in the rendered layout. Can carry the value of “Y” or “N.”

<folder name="column1" immutable="Y" unremovable="Y" hidden="N">: Opening tag for the framework elements. Uses the same attribute types as the “fragment” tab, though the values can be different.

<channel fname="word-of-the-day" immutable="Y" unremovable="Y" hidden="N"/>: Opening tag for a content channel. Also uses the same attribute types as the “fragment” tab, and the values may also be different, except “fname” is used in the place of “name.” fname is a value used by the database to locate the requested channel.

Deployment of the Fragment XML Data

Once the XML document for the new fragment has been written, the information within it needs to be put into the uPortal database for the fragment to be pushed out the appropriate users. To submit the XML data into the database:

Give the XML document a unique name such as, “bio101Fragment.xml.” Place the finished document in the following directory:

[uPortal Root]/portal/properties/al/

In there, you will find the sample fragment XML, “pushfragments.xml”	among any other fragments you may have made.

Navigate back out to the directory:

[uPortal Root]/portal/

and type the line:

ant pushfragment -DfragmentFile=/properties/al/[fragmentFileName].xml

or, using our sample fragment name from above:

ant pushfragment -DfragmentFile=/properties/al/bio101Fragment.xml

note: the path to the fragment XML file is listed in the ant target above	(/properties/al/[fragmentFileName].xml). You can, therefore, have the	XML document in another location, if the path is changed accordingly in the	ant target. This path name starts at the directory where the build.xml file is	located, which is usually also the root of the portal.

That action will take the data listed in the fragment XML document, and place it in the corresponding tables of the database. Once that is completed, all of the users listed the groups that are included in the fragment properties will see the fragment pushed onto their layout the next time they login.

Appendix A: Sample XML

A.1 Layout XML

<?xml version="1.0" encoding="UTF-8"?>

<layout>

<fragments>

<fragment ID="fr001" desc="Biology Department Fragment"/>

<fragment ID="fr002" desc="Bio101 Fragment"/>

<fragment ID="fr003" desc="Bio180 Fragment"/>

<fragment ID="fr004" desc="Bio222 Fragment"/>

</fragments>

<folder ID="userLayoutRootNode" type="regular" hidden="false" unremovable="false" immutable="false" name="root" width="100">

<folder ID="1" type="header" hidden="false" unremovable="true" immutable="true" name="Header folder" width="100">

<channel ID="3" typeID="-1" hidden="false" editable="false" unremovable="false" immutable="false" name="_Login" description="uPortal Login Channel" title="Login" class="org.jasig.portal.channels.CLogin" chanID="99" fname="portal/login/general" timeout="10000" hasHelp="true" hasAbout="true"/>

<channel ID="2" typeID="-1" hidden="false" editable="false" unremovable="false" immutable="false" name="Header" description="uPortal Header channel" title="Header" class="org.jasig.portal.channels.CHeader" chanID="10" fname="header" timeout="10000" hasHelp="false" hasAbout="false"/>

</folder>

<folder ID="4" type="regular" hidden="false" unremovable="false" immutable="false" name="Main" width="100">

<folder ID="8" type="regular" hidden="false" unremovable="false" immutable="false" name="Column 2" width="100">

<channel ID="29" typeID="3" hidden="false" editable="false" unremovable="false" immutable="false" name="Daily Business Cartoon" description="Daily Business Cartoon by Ted Goff, www.tedgoff.com" title="Daily Business Cartoon" class="org.jasig.portal.channels.CImage" chanID="1" fname="daily-business-cartoon" timeout="10000" hasHelp="false" hasAbout="false">

<parameter name="img-height" value="300" override="no"/>

<parameter name="img-link" value="http://www.tedgoff.com" override="no"/>

<parameter name="img-border" value="0" override="no"/>

<parameter name="img-uri" value="http://www.tedgoff.com/mb/images/today.gif" override="no"/>

<parameter name="img-width" value="300" override="no"/>

</channel>

</folder>

<folder ID="5" type="regular" hidden="false" unremovable="false" immutable="false" name="Column 1" width="100">

<channel ID="7" typeID="-1" hidden="false" editable="false" unremovable="false" immutable="false" name="Number Guessing Game" description="Number Guessing Game channel" title="Number Guessing Game" class="org.jasig.portal.channels.CNumberGuess" chanID="14" fname="number-guessing-game" timeout="10000" hasHelp="false" hasAbout="false">

<parameter name="maxNum" value="150" override="no"/>

<parameter name="minNum" value="50" override="no"/>

</channel>

<channel ID="6" typeID="0" hidden="false" editable="false" unremovable="false" immutable="false" name="Word of the Day" description="Word of the Day channel" title="Word of the Day" class="org.jasig.portal.channels.CGenericXSLT" chanID="11" fname="word-of-the-day" timeout="10000" hasHelp="false" hasAbout="false">

<parameter name="sslUri" value="CGenericXSLT/RSS/RSS-0_9x.ssl" override="no"/>

<parameter name="xmlUri" value="http://www.dictionary.com/wordoftheday/wotd.rss" override="no"/>

</channel>

</folder>

</folder>

<folder ID="10" type="regular" hidden="false" unremovable="false" immutable="false" name="Development" width="100">

<folder ID="11" type="regular" hidden="false" unremovable="false" immutable="false" name="Column 1" width="100">

<channel ID="18" typeID="1" hidden="false" editable="false" unremovable="false" immutable="false" name="CSS Viewer" description="CSS Viewer channel" title="CSS Viewer" class="org.jasig.portal.channels.CGenericXSLT" chanID="15" fname="css-viewer" timeout="5000" hasHelp="true" hasAbout="false">

<parameter name="sslUri" value="CGenericXSLT/CSSViewer/CSSViewer.ssl" override="no"/>

<parameter name="xmlUri" value="CGenericXSLT/CSSViewer/cssViewer.xml" override="no"/>

</channel>

<channel ID="12" typeID="-1" hidden="false" editable="false" unremovable="false" immutable="false" name="Person Attributes" description="A display of person attributes available to channels" title="Person Attributes" class="org.jasig.portal.channels.CPersonAttributes" chanID="4" fname="person-attributes" timeout="20000" hasHelp="false" hasAbout="false"/>

</folder>

<folder ID="13" type="regular" hidden="false" unremovable="false" immutable="false" name="Column 2" width="100">

<channel ID="15" typeID="1" hidden="false" editable="false" unremovable="false" immutable="false" name="uPortal Development Books" description="A list of books useful to uPortal developers" title="uPortal Development Books" class="org.jasig.portal.channels.CGenericXSLT" chanID="20" fname="uportal-development-books" timeout="20000" hasHelp="false" hasAbout="false">

<parameter name="sslUri" value="CGenericXSLT/uPortalDevBooks/uPortalDevBooks.ssl" override="no"/>

<parameter name="xmlUri" value="http://www.interactivebusiness.com/publish/uPortalDevBooks/uPortalDevBooks.xml" override="no"/>

</channel>

<channel ID="14" typeID="0" hidden="false" editable="false" unremovable="false" immutable="false" name="uPortal Developers Reference" description="uPortal Developers Reference channel" title="uPortal Developers Reference" class="org.jasig.portal.channels.CGenericXSLT" chanID="7" fname="uportal-developers-reference" timeout="10000" hasHelp="false" hasAbout="false">

<parameter name="sslUri" value="CGenericXSLT/RSS/RSS-0_9x.ssl" override="no"/>

<parameter name="xmlUri" value="http://www.princeton.edu/~mbarton/jasigdev.rss" override="no"/>

</channel>

<channel ID="37" typeID="1" hidden="false" editable="false" unremovable="false" immutable="false" name="uPortal Data Dictionary" description="uPortal Data Dictionary - descriptions for tables and attributes used in uPortal" title="uPortal Data Dictionary" class="org.jasig.portal.channels.CGenericXSLT" chanID="22" fname="uportal-data-dictionary" timeout="10000" hasHelp="false" hasAbout="false">

<parameter name="sslUri" value="CGenericXSLT/DataDictViewer/DataDictViewer.ssl" override="no"/>

<parameter name="xmlUri" value="/properties/tables.xml" override="no"/>

</channel>

<channel ID="16" typeID="-1" hidden="false" editable="false" unremovable="false" immutable="false" name="Snooper" description="Snooper channel" title="Snooper" class="org.jasig.portal.channels.CSnoop" chanID="16" fname="snooper" timeout="5000" hasHelp="true" hasAbout="false"/>

</folder>

</folder>

<folder ID="21" type="regular" hidden="false" unremovable="false" immutable="false" name="CWebProxy Examples" width="100">

<folder ID="25" type="regular" hidden="false" unremovable="false" immutable="false" name="Column 2" width="100">

<channel ID="26" typeID="4" hidden="false" editable="true" unremovable="false" immutable="false" name="Tomcat's Servlet Examples" description="Tomcat's Servlet Examples" title="Tomcat's Servlet Examples" class="org.jasig.portal.channels.webproxy.CWebProxy" chanID="18" fname="tomcat-servlet-examples" timeout="10000" hasHelp="true" hasAbout="true">

<parameter name="cw_passThrough" value="all" override="no"/>

<parameter name="cw_edit" value="examples/servlet_edit.html" override="no"/>

<parameter name="cw_ssl" value="XHTML.ssl" override="no"/>

<parameter name="cw_info" value="examples/servlet_info.html" override="no"/>

<parameter name="cw_xml" value="http://localhost:8080/examples/servlets/index.html" override="no"/>

<parameter name="cw_tidy" value="on" override="no"/>

<parameter name="cw_help" value="examples/servlet_help.html" override="no"/>

</channel>

</folder>

<folder ID="22" type="regular" hidden="false" unremovable="false" immutable="false" name="Column 1" width="100">

<channel ID="24" typeID="4" hidden="false" editable="true" unremovable="false" immutable="false" name="Tomcat's NumGuess" description="Tomcat's NumGuess" title="Tomcat's NumGuess" class="org.jasig.portal.channels.webproxy.CWebProxy" chanID="17" fname="tomcat-number-guess" timeout="10000" hasHelp="true" hasAbout="true">

<parameter name="cw_passThrough" value="application" override="no"/>

<parameter name="cw_edit" value="examples/num_edit.html" override="no"/>

<parameter name="cw_ssl" value="XHTML.ssl" override="no"/>

<parameter name="cw_info" value="examples/num_info.html" override="no"/>

<parameter name="cw_xml" value="http://localhost:8080/examples/jsp/num/numguess.jsp" override="no"/>

<parameter name="cw_tidy" value="on" override="no"/>

<parameter name="cw_help" value="examples/num_help.html" override="no"/>

</channel>

<channel ID="23" typeID="4" hidden="false" editable="true" unremovable="false" immutable="false" name="Tomcat's NumGuess" description="Tomcat's NumGuess" title="Tomcat's NumGuess" class="org.jasig.portal.channels.webproxy.CWebProxy" chanID="17" fname="tomcat-number-guess" timeout="10000" hasHelp="true" hasAbout="true">

<parameter name="cw_passThrough" value="application" override="no"/>

<parameter name="cw_edit" value="examples/num_edit.html" override="no"/>

<parameter name="cw_ssl" value="XHTML.ssl" override="no"/>

<parameter name="cw_info" value="examples/num_info.html" override="no"/>

<parameter name="cw_xml" value="http://localhost:8080/examples/jsp/num/numguess.jsp" override="no"/>

<parameter name="cw_tidy" value="on" override="no"/>

<parameter name="cw_help" value="examples/num_help.html" override="no"/>

</channel>

</folder>

</folder>

<folder ID="27" type="footer" hidden="false" unremovable="false" immutable="false" name="Footer folder" width="100">

<channel ID="28" typeID="1" hidden="false" editable="false" unremovable="false" immutable="false" name="Footer" description="uPortal Footer channel" title="Footer" class="org.jasig.portal.channels.CGenericXSLT" chanID="19" fname="footer" timeout="10000" hasHelp="false" hasAbout="false">

<parameter name="sslUri" value="CGenericXSLT/footer/footer.ssl" override="no"/>

<parameter name="cacheTimeout" value="3600" override="no"/>

<parameter name="xmlUri" value="CGenericXSLT/emptyDocument.xml" override="no"/>

</channel>

</folder>

</folder>

</layout>

A.2 Structure XML

<?xml version="1.0" encoding="UTF-8"?>

<layout userLayoutRoot="root" targetAction="no targetAction parameter" targetRestriction="no targetRestriction parameter" focusedTabID="4" selectedID="" mode="preferences">

<header/>

<navigation>

<focusedTab unremovable="false" immutable="false" ID="4" name="Main"/>

<inactiveTab unremovable="false" immutable="false" ID="10" name="Development"/>

<inactiveTab unremovable="false" immutable="false" ID="21" name="CWebProxy Examples"/>

</navigation>

<actions>

<fragments>

<fragment ID="fr001" desc="Biology Department Fragment"/>

<fragment ID="fr002" desc="Bio101 Fragment"/>

<fragment ID="fr003" desc="Bio180 Fragment"/>

<fragment ID="fr004" desc="Bio222 Fragment"/>

</fragments>

</actions>

<content>

<column ID="8" width="50">

<channel ID="29" chanID="1" class="org.jasig.portal.channels.CImage" description="Daily Business Cartoon by Ted Goff, www.tedgoff.com" editable="false" fname="daily-business-cartoon" hasAbout="false" hasHelp="false" hidden="false" immutable="false" name="Daily Business Cartoon" timeout="10000" title="Daily Business Cartoon" typeID="3" unremovable="false">

<parameter name="img-height" override="no" value="300"/>

<parameter name="img-link" override="no" value="http://www.tedgoff.com"/>

<parameter name="img-border" override="no" value="0"/>

<parameter name="img-uri" override="no" value="http://www.tedgoff.com/mb/images/today.gif"/>

<parameter name="img-width" override="no" value="300"/>

</channel>

</column>

<column ID="5" width="50">

<channel ID="7" chanID="14" class="org.jasig.portal.channels.CNumberGuess" description="Number Guessing Game channel" editable="false" fname="number-guessing-game" hasAbout="false" hasHelp="false" hidden="false" immutable="false" name="Number Guessing Game" timeout="10000" title="Number Guessing Game" typeID="-1" unremovable="false">

<parameter name="maxNum" override="no" value="150"/>

<parameter name="minNum" override="no" value="50"/>

</channel>

<channel ID="6" chanID="11" class="org.jasig.portal.channels.CGenericXSLT" description="Word of the Day channel" editable="false" fname="word-of-the-day" hasAbout="false" hasHelp="false" hidden="false" immutable="false" name="Word of the Day" timeout="10000" title="Word of the Day" typeID="0" unremovable="false">

<parameter name="sslUri" override="no" value="CGenericXSLT/RSS/RSS-0_9x.ssl"/>

<parameter name="xmlUri" override="no" value="http://www.dictionary.com/wordoftheday/wotd.rss"/>

</channel>

</column>

</content>

<footer>

<channel ID="28" chanID="19" class="org.jasig.portal.channels.CGenericXSLT" description="uPortal Footer channel" editable="false" fname="footer" hasAbout="false" hasHelp="false" hidden="false" immutable="false" name="Footer" timeout="10000" title="Footer" typeID="1" unremovable="false">

<parameter name="sslUri" override="no" value="CGenericXSLT/footer/footer.ssl"/>

<parameter name="cacheTimeout" override="no" value="3600"/>

<parameter name="xmlUri" override="no" value="CGenericXSLT/emptyDocument.xml"/>

</channel>

</footer>

</layout>

A.3 XHTML Theme Output

<html>

<head>

<title>uPortal 2.2+</title>

<link href="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/immII.css" rel="stylesheet" type="text/css">

<link href="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/immII_portlet.css" rel="stylesheet" type="text/css">

<script language="JavaScript">

function openBrWindow(theURL,winName,features)

{window.open(theURL,winName,features);}

</script>

</head>

<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

<table class="uportal-background-content" cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td valign="top" align="left"><img height="102" width="426" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/institutional/mainlogo.gif"></td>

<td width="100%"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td valign="top" align="right"><table cellpadding="0" cellspacing="10" border="0">

<tr>

<td><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_root=root&amp;uP_sparam=targetRestriction&amp;targetRestriction=no targetRestriction parameter&amp;uP_sparam=targetAction&amp;targetAction=no targetAction parameter&amp;uP_sparam=selectedID&amp;selectedID=''&amp;uP_cancel_targets=true"><img border="0" title="Home" alt="Home" height="24" width="24" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/home.gif"></a></td>

<td><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_fname=layout-sitemap&amp;uP_sparam=targetRestriction&amp;targetRestriction=no targetRestriction parameter&amp;uP_sparam=targetAction&amp;targetAction=no targetAction parameter&amp;uP_sparam=selectedID&amp;selectedID=''&amp;uP_cancel_targets=true"><img border="0" title="View Sitemap" alt="View Sitemap" height="24" width="24" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/sitemap.gif"></a></td>

<td><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_fname=portal/channelmanager/general"><img border="0" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/channelmanager.gif" title="Channel Manager" alt="Channel Manager" height="24" width="24"></a></td>

<td><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_sparam=mode&amp;mode=preferences&amp;uP_sparam=focusedTabID&amp;focusedTabID=4"><img border="0" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/preferences.gif" title="Turn on Preferences" alt="Turn on Preferences" height="24" width="24"></a></td>

<td><a class="uportal-navigation-category" href="Logout"><img border="0" title="Logout" alt="Logout" height="24" width="24" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/logout.gif"></a></td>

</tr>

</table></td>

</tr>

</table>

<table class="uportal-background-content" cellpadding="0" cellspacing="0" border="0" cols="1" width="100%">

<tr>

<td valign="bottom"><table cellpadding="0" cellspacing="0" border="0">

<tr>

<td class="uportal-background-content" colspan="5"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="5" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="4"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="4" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="3"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="3" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark" nowrap="nowrap"><table cellpadding="4" cellspacing="0" border="0">

<tr>

<form action="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP" method="post" name="formRename">

<td class="navigation-selected" nowrap="nowrap">Main</td>

</form>

</tr>

</table></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr class="uportal-background-dark">

<td class="uportal-background-shadow"><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

</table></td>

<td valign="bottom"><table cellpadding="0" cellspacing="0" border="0">

<tr>

<td class="uportal-background-content" colspan="5"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="5" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="4"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="4" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="3"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="3" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med" nowrap="nowrap"><table cellpadding="4" cellspacing="0" border="0">

<tr>

<td nowrap="nowrap"><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_sparam=focusedTabID&amp;focusedTabID=57&amp;uP_sparam=mode&amp;mode=view" class="uportal-navigation-category">Sample

Fragment</a></td>

</tr>

</table></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr class="uportal-background-shadow">

<td><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

</table></td>

<td valign="bottom"><table cellpadding="0" cellspacing="0" border="0">

<tr>

<td class="uportal-background-content" colspan="5"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="5" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="4"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="4" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="3"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="3" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med" nowrap="nowrap"><table cellpadding="4" cellspacing="0" border="0">

<tr>

<td nowrap="nowrap"><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_sparam=focusedTabID&amp;focusedTabID=10&amp;uP_sparam=mode&amp;mode=view" class="uportal-navigation-category">Development</a></td>

</tr>

</table></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr class="uportal-background-shadow">

<td><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

</table></td>

<td valign="bottom"><table cellpadding="0" cellspacing="0" border="0">

<tr>

<td class="uportal-background-content" colspan="5"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="5" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="4"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="4" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="3"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="3" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med" nowrap="nowrap"><table cellpadding="4" cellspacing="0" border="0">

<tr>

<td nowrap="nowrap"><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_sparam=focusedTabID&amp;focusedTabID=41&amp;uP_sparam=mode&amp;mode=view" class="uportal-navigation-category"></a></td>

</tr>

</table></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr class="uportal-background-shadow">

<td><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

</table></td>

<td valign="bottom"><table cellpadding="0" cellspacing="0" border="0">

<tr>

<td class="uportal-background-content" colspan="5"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="5" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="4"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="4" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content" colspan="3"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td colspan="3" class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med" nowrap="nowrap"><table cellpadding="4" cellspacing="0" border="0">

<tr>

<td nowrap="nowrap"><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_sparam=focusedTabID&amp;focusedTabID=21&amp;uP_sparam=mode&amp;mode=view" class="uportal-navigation-category">CWebProxy

Examples</a></td>

</tr>

</table></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr class="uportal-background-shadow">

<td><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="1" width="2" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

</table></td>

<td class="uportal-background-content" valign="bottom" width="100%"><table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr class="uportal-background-shadow">

<td><img height="1" width="4" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

</table></td>

</tr>

</table>

<table cellpadding="0" cellspacing="9" cols="2" border="0" width="100%">

<tr>

<td class="uportal-background-dark" width="NaN%

" valign="top"><table cellspacing="0" cellpadding="0" align="center" border="0" cols="1" width="100%">

<tr>

<td><img height="9" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/topleftcorner.gif"></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/topborder.gif); background-repeat:repeat-x;" width="100%"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="9" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/toprightcorner.gif"></td>

</tr>

<tr>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerleftborder.gif); background-repeat:repeat-y;"><img height="1" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-semidark" nowrap="nowrap"><span class="uportal-channel-title">CSS

Viewer</span></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerrightborder.gif); background-repeat:repeat-y;" class="uportal-background-dark"><img height="1" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td><img height="8" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerbottomleft.gif"></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerbottomborder.gif); background-repeat:repeat-x;"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="8" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerbottomright.gif"></td>

</tr>

<tr>

<td valign="bottom" style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/iconbarlinesleft.gif); background-repeat:repeat-y;"><img height="1" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channellinesbottom.gif"></td>

<td class="uportal-background-light" nowrap="nowrap"><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_help_target=63"><img border="0" height="23" width="26" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/contenthelp.gif" title="help" alt="help"></a><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_root=63"><img border="0" height="23" width="26" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/contentfocus.gif" title="focus" alt="focus"></a><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_tcattr=minimized&amp;minimized_channelId=63&amp;minimized_63_value=true"><img border="0" height="23" width="26" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/contentminimize.gif" title="minimize" alt="minimize"></a><a onclick="openBrWindow('tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_detach_target=63','detachedChannel','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=640,height=480')" href="#"><img border="0" height="23" width="26" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/contentdetach.gif" title="detach" alt="detach"></a><a onclick="return confirm('Are you sure you want to remove this channel?')" href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_remove_target=63"><img border="0" height="23" width="26" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/contentcan.gif" title="remove" alt="remove"></a></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/iconbarrightborder.gif); background-repeat:repeat-y;" class="uportal-background-dark"><img height="1" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td><img height="19" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channeltopleft.gif"></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channeltopborder.gif); background-repeat:repeat-x;"><img height="19" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="19" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channeltopright.gif"></td>

</tr>

<tr>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channelleftborder.gif); background-repeat:repeat-y;"><img height="1" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td width="100%"><table class="uportal-background-content" cellpadding="4" border="0" width="100%">

<tr valign="top" align="left" class="uportal-background-light">

<td class="uportal-channel-table-header">Elements</td>

<td class="uportal-channel-table-header">Example or Description</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">A.up</td>

<td width="100%" class="uportal-channel-text">A.uportal-navigation-category:visitednd

vex him.mentdocument</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">A</td>

<td><a href="#" class="">A.uportal-navigation-category:visitednd

vex him.</a></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">A.uportal</td>

<td width="100%" class="uportal-channel-text">A.uportal-navigation-category:visitednd

</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">A.uport</td>

<td width="100%" class="uportal-channel-text">A.uportal-navigation-category:visitednd

</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">A.uportal-na</td>

<td><a href="#" class="navigation">A.uportal-navigation-category:visitednd

vex him.</a></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">A.uportal-navigation</td>

<td width="100%" class="uportal-channel-text">A.uportal-navigation-category:visitednd

vex him.ment</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">A.uportal-navigati</td>

<td width="100%" class="uportal-channel-text">A.uportal-navigation-category:visitednd

vex him.ment</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">A.uportal-navigation-category</td>

<td><a href="#" class="uportal-navigation-category">A.uportal-navigation-category:visitednd

vex him.</a></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">A.uportal-navigation-category:visited</td>

<td width="100%" class="uportal-channel-text">.uportal-background-shadowghto

quiz and vex him.tion-channel elementt</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto

quiz</td>

<td width="100%" class="uportal-channel-text">.uportal-background-shadowghto

quiz and vex him.tion-channel elementt</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowgh</td>

<td><a href="#" class="uportal-navigation-channel">.uportal-background-shadowghto

quiz and vex him.</a></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto

quiz </td>

<td width="100%" class="uportal-channel-text">.uportal-background-shadowghto

quiz and vex him.tion-channel element</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto

qui</td>

<td width="100%" class="uportal-channel-text">.uportal-background-shadowghto

quiz and vex him.tion-channel element</td>

</tr>

<tr valign="top" align="left" class="uportal-background-light">

<td class="uportal-channel-table-header">Classes</td>

<td class="uportal-channel-table-header">Example or Description</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto

quiz a</td>

<td class="uportal-navigation-category-selected">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto

quiz </td>

<td class="uportal-navigation-channel-selected">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-back</td>

<td class="uportal-text">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-sh</td>

<td class="uportal-text-reversed">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background</td>

<td class="uportal-text-small">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background</td>

<td class="uportal-crumbtrail">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-backgroun</td>

<td class="uportal-copyright">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-backgr</td>

<td class="uportal-text"><input value="Submit" name="Submit" type="submit" class="uportal-button"></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-backg</td>

<td class="uportal-label">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background</td>

<td class="uportal-text"><input name="textfield" type="text" class="uportal-input-text"></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-s</td>

<td class="uportal-channel-text">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-sh</td>

<td class="uportal-channel-title">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto

</td>

<td class="uportal-channel-title-reversed">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shado</td>

<td class="uportal-channel-subtitle">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto

qui</td>

<td class="uportal-channel-subtitle-reversed">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shado</td>

<td class="uportal-channel-emphasis">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-sha</td>

<td class="uportal-channel-strong">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-s</td>

<td class="uportal-channel-code">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadow</td>

<td class="uportal-channel-copyright">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shad</td>

<td class="uportal-channel-warning">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-sh</td>

<td class="uportal-channel-error">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto</td>

<td class="uportal-channel-table-caption">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowght</td>

<td class="uportal-channel-table-header">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto

</td>

<td class="uportal-channel-table-row-even">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowghto</td>

<td class="uportal-channel-table-row-odd">.uportal-background-shadowghto

quiz and vex him.</td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background</td>

<td class="uportal-background"><img height="1" width="1" src="media/org/jasig/portal/channels/CGenericXSLT/transparent.gif" alt="interface image"></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shad</td>

<td class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/channels/CGenericXSLT/transparent.gif" alt="interface image"></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-sha</td>

<td class="uportal-background-med"><img height="1" width="1" src="media/org/jasig/portal/channels/CGenericXSLT/transparent.gif" alt="interface image"></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shado</td>

<td class="uportal-background-light"><img height="1" width="1" src="media/org/jasig/portal/channels/CGenericXSLT/transparent.gif" alt="interface image"></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowg</td>

<td class="uportal-background-content"><img height="1" width="1" src="media/org/jasig/portal/channels/CGenericXSLT/transparent.gif" alt="interface image"></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadowght</td>

<td class="uportal-background-highlight"><img height="1" width="1" src="media/org/jasig/portal/channels/CGenericXSLT/transparent.gif" alt="interface image"></td>

</tr>

<tr valign="top" align="left">

<td nowrap="nowrap" class="uportal-channel-text">.uportal-background-shadow</td>

<td class="uportal-background-shadow"><img height="1" width="1" src="media/org/jasig/portal/channels/CGenericXSLT/transparent.gif" alt="interface image"></td>

</tr>

</table></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

</table></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channelrightborder.gif); background-repeat:repeat-y;" class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td><img height="19" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/bottomleftcorner.gif"></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/bottomborder.gif); background-repeat:repeat-x;"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="19" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/bottomrightcorner.gif"></td>

</tr>

</table></td>

<td class="uportal-background-dark" width="NaN%

" valign="top"><table cellspacing="0" cellpadding="0" align="center" border="0" cols="1" width="100%">

<tr>

<td><img height="9" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/topleftcorner.gif"></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/topborder.gif); background-repeat:repeat-x;" width="100%"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="9" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/toprightcorner.gif"></td>

</tr>

<tr>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerleftborder.gif); background-repeat:repeat-y;"><img height="1" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-semidark" nowrap="nowrap"><span class="uportal-channel-title">Daily

Business Cartoon</span></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerrightborder.gif); background-repeat:repeat-y;" class="uportal-background-dark"><img height="1" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td><img height="8" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerbottomleft.gif"></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerbottomborder.gif); background-repeat:repeat-x;"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="8" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/headerbottomright.gif"></td>

</tr>

<tr>

<td valign="bottom" style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/iconbarlinesleft.gif); background-repeat:repeat-y;"><img height="1" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channellinesbottom.gif"></td>

<td class="uportal-background-light" nowrap="nowrap"><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_root=29"><img border="0" height="23" width="26" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/contentfocus.gif" title="focus" alt="focus"></a><a href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_tcattr=minimized&amp;minimized_channelId=29&amp;minimized_29_value=true"><img border="0" height="23" width="26" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/contentminimize.gif" title="minimize" alt="minimize"></a><a onclick="openBrWindow('tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_detach_target=29','detachedChannel','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=640,height=480')" href="#"><img border="0" height="23" width="26" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/contentdetach.gif" title="detach" alt="detach"></a><a onclick="return confirm('Are you sure you want to remove this channel?')" href="tag.b3d4c5c91fe931e8.render.userLayoutRootNode.uP?uP_remove_target=29"><img border="0" height="23" width="26" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/icons/contentcan.gif" title="remove" alt="remove"></a></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/iconbarrightborder.gif); background-repeat:repeat-y;" class="uportal-background-dark"><img height="1" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td><img height="19" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channeltopleft.gif"></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channeltopborder.gif); background-repeat:repeat-x;"><img height="19" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="19" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channeltopright.gif"></td>

</tr>

<tr>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channelleftborder.gif); background-repeat:repeat-y;"><img height="1" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td class="uportal-background-content"><table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td width="100%"><p align="center"></p>

<p align="center"><a href="http://www.tedgoff.com"><img border="0" height="300" width="300" src="http://www.tedgoff.com/mb/images/today.gif"></a></p>

<p align="center"><font size="2"></font></p></td>

<td><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

</table></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/channelrightborder.gif); background-repeat:repeat-y;" class="uportal-background-dark"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

</tr>

<tr>

<td><img height="19" width="20" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/bottomleftcorner.gif"></td>

<td style="background-image: url(media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/bottomborder.gif); background-repeat:repeat-x;"><img height="1" width="1" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/skin/transparent.gif"></td>

<td><img height="19" width="19" src="media/org/jasig/portal/layout/AL_TabColumn/integratedModes/immII/mainBorder/bottomrightcorner.gif"></td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

Appendix B: Printable List of uPortal Graphics

Following is a check list of all of the graphics by their name, organized by the directories in which they reside.

mainBorder: 32 Images

bottomborder.gif

bottomleftcorner.gif

bottomrightcorner.gif

channelleftborder.gif

channellinesbottom.gif

channelrightborder.gif

channeltopborder.gif

channeltopleft.gif

channeltopright.gif

headerbottomborder.gif

headerbottomborderselected.gif

headerbottomleft.gif

headerbottomleftselected.gif

headerbottomright.gif

headerbottomrightselected.gif

headerleftborder.gif

headerleftborderselected.gif

headerrightborder.gif

headerrightborderselected.gif

iconbardivider.gif

iconbardividerbottom.gif

iconbarlinesbottom.gif

iconbarlinesleft.gif

iconbarrightborder.gif

prefsbottom.gif

prefsbottomright.gif

topborder.gif

topborderselected.gif

topleftcorner.gif

topleftcornerselected.gif

toprightcorner.gif

toprightcornerselected.gif

columnBorder: 26 Images

bottomborderG.gif

bottomleftcornerG.gif

bottomrightcornerG.gif

channelleftborderG.gif

channelrightborderG.gif

channeltopborderG.gif

channeltopleftG.gif

channeltoprightG.gif

headerbottomborderG.gif

headerbottomborderselectedG.gif

headerbottomleftG.gif

headerbottomleftGselected.gif

headerbottomrightG.gif

headerbottomrightGselected.gif

headerleftborderG.gif

headerleftborderselectedG.gif

headerrightborderG.gif

headerrightborderselectedG.gif

iconbarlinesleftG.gif

iconbarrightborderG.gif

topborderG.gif

topborderGselected.gif

topleftcornerG.gif

topleftcornerGselected.gif

toprightcornerG.gif

toprightcornerGselected.gif

icons: 41 Images

add_channel_ani.gif

add_column_ani.gif

airplanetarget.gif

cancelmoveicon.gif

cancelmoveiconG.gif

canicon.gif

channelmanager.gif

columncan.gif

columncancelmove.gif

columnexpand.gif

columnlanguages.gif

columnlanguagesG.gif

columnmove.gif

columnnormalize.gif

columnshrink.gif

contentabout.gif

contentcan.gif

contentcancelmove.gif

contentdetach.gif

contentedit.gif

contentfocus.gif

contenthelp.gif

contentlanguages.gif

contentmaximize.gif

contentminimize.gif

contentmove.gif

contentprint.gif

contentreturn.gif

home.gif

languages.gif

languagesG.gif

logout.gif

moveicon.gif

moveiconG.gif

preferences.gif

preferencesoff.gif

remove.gif

return.gif

save.gif

sitemap.gif

submit.gif

Appendix C: Default uPortal Cascading Style Sheet

Appendix A: Default uPortal Cascading Style Sheet

Appendix A: Default uPortal Cascading Style Sheet - Text Format

BODY{

background: #666633;

}

A {

text-decoration : none;

color : Black;

}

A:VISITED {

color : Black;

}

A:HOVER {

color : #993333;

text-decoration: underline;

}

A.navigation {

color : #FFFFCC;

font-size : x-small;

font-weight : bold;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

}

A.navigation:visited {

color : #FFFFCC;

font-size : x-small;

font-weight : bold;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

}

A.navigation:hover {

color : #993333;

font-size : x-small;

font-weight : bold;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

text-decoration: underline;

}

.navigation-selected{

font-size : x-small;

font-weight : bold;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

color : #FFFFCC;

}

A.uportal-navigation-category{

color : Black;

font-size : x-small;

font-weight : bold;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

}

A.uportal-navigation-category:visited{

color : Black;

font-size : x-small;

font-weight : bold;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

}

A.uportal-navigation-category:hover{

color : #993333;

font-size : x-small;

font-weight : bold;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

text-decoration: underline;

}

.uportal-navigation-category-selected{

font-size : x-small;

font-weight : bold;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

color : #000000;

}

A.uportal-navigation-channel{

color : Black;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : x-small;

}

A.uportal-navigation-channel:visited{

color : Black;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : x-small;

}

A.uportal-navigation-channel:hover{

color : #993333;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : x-small;

text-decoration: underline;

}

.uportal-navigation-channel-selected{

background : Black;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : x-small;

color : White;

}

.uportal-text{

color : Black;

font-family : Georgia, "Times New Roman", Times, serif;

font-size : x-small;

}

.uportal-text-small{

color : Black;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : xx-small;

}

.uportal-button{

color : Black;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : xx-small;

background : #CCCC99;

}

.uportal-label{

color : Black;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : xx-small;

font-weight : bold;

}

.uportal-input-text{

color : Black;

font-size: x-small;

font-family: Monaco, Andale Mono, monospace;

background : #CCCC99;

}

.uportal-text-reversed{

color : White;

font-family : Georgia, "Times New Roman", Times, serif;

font-size : x-small;

}

.uportal-crumbtrail{

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : xx-small;

color : #666666;

}

.uportal-copyright{

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : xx-small;

color : Black;

font-style : italic;

}

.uportal-channel-text{

color : Black;

font-family : Georgia, "Times New Roman", Times, serif;

font-size : x-small;

}

.uportal-channel-title{

color : #FFFFCC;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : xx-small;

font-weight : bold;

}

.uportal-channel-title-reversed{

color : #663333;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : xx-small;

font-weight : bold;

}

.uportal-channel-subtitle{

color : #999999;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : x-small;

font-weight : bold;

}

.uportal-channel-subtitle-reversed{

color : #333333;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : xx-small;

font-weight : bold;

}

.uportal-channel-emphasis{

font-weight : bold;

font-size : x-small;

font-family : Georgia, "Times New Roman", Times, serif;

}

.uportal-channel-strong{

font-weight : bold;

font-size : x-small;

font-family : Georgia, "Times New Roman", Times, serif;

}

.uportal-channel-code{

color : Black;

font-size: x-small;

font-family: Monaco, Andale Mono, monospace;

}

.uportal-channel-copyright{

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : xx-small;

color : Black;

font-style : italic;

}

.uportal-channel-warning{

font-size: xx-small;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

color : #993333;

}

.uportal-channel-error{

color : #993333;

font-size: xx-small;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

}

.uportal-channel-table-caption{

color : #993333;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : x-small;

font-weight : bold;

text-align: center;

}

.uportal-channel-table-header{

color : #993333;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : x-small;

font-weight : bold;

text-align: left;

}

.uportal-channel-table-row-even{

color : Black;

font-size: xx-small;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

}

.uportal-channel-table-row-odd{

color : #666666;

font-size: xx-small;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

}

.uportal-background{

background : #000000;

}

.uportal-background-dark{

background : #666633;

}

.uportal-background-med{

background : #999966;

}

.uportal-background-light{

background : #CCCC99;

}

.uportal-background-content{

background : #FFFFCC;

}

.uportal-background-highlight{

background : #FFFF99;

}

.uportal-background-shadow{

background : #000000;

}

.uportal-background-page{

background : #FFFFFF;

}

.uportal-background-semidark{

background: #7F804D;

}

.uportal-background-selected{

background : #FF9933;

}

.uportal-background-neutral-dark{

background: #666666;

}

.uportal-background-neutral-light{

background: #CCCCCC;

}

Jon Allen

2003-12-24T15:28:11

Jon Allen