Skin Aggregation in uPortal

uPortal uses a special maven plugin and library to control aggregating JavaScript and CSS resources.  This plugin allows developers to logically separate code into multiple files, then automatically process them at compile-time to provide the best end-user performance.  This library performs the following steps:

Step 1: Aggregate all resources in the same folder into one file

This step limits the number of HTTP requests made by the browser.  For more information, see http://developer.yahoo.com/performance/rules.html#num_http.

Step 2: Version the file by adding a hashcode to the filename

This hashcode uniquely identifies this version of the resource so that we can add long-term cache headers without risking users missing important future updates.  If any part of the code is changed, the next time uPortal is built, this resource will automatically have a new name.  This step is the source of files you may see in the deployed uPortal webapp that look something like "xwYsBSn0elAJRsNNVWr9Yw.aggr.min.css".  uPortal's codebase will automatically include the appropriately-versioned resources in the final HTML page.

To ensure the best performance, it's best to keep CSS resources in as few directories as possible.  uPortal can only aggregate CSS resources in the path to avoid breaking relative image paths.

For more on long-term cache headers, see http://developer.yahoo.com/performance/rules.html#expires.

Step 3: Minify JavaScript and CSS

Minification means eliminating all whitespace and comments, renaming variables with very small names, and some other improvements designed to make the file as small as possible.

For more information on minification, see http://developer.yahoo.com/performance/rules.html#minify.

The Skin File

Each uPortal skin has a skin.xml file in the root of its main skin directory.  This file lists the CSS and JavaScript resources used by this skin that should be included in the HTML page. Skin files may include other skin files (see the import of the common_skin.xml resources in the following example).

Resources outside of the skin (such as those in the ResourceServingWebapp) are not handled quite as automatically by the portal.  To support including un-aggregated resources for debugging modes, include both "plain" and "aggregated" versions of the resource.  

<resources xmlns="http://www.jasig.org/uportal/web/skin"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.jasig.org/uportal/web/skin https://source.jasig.org/schemas/resource-server/skin-configuration/skin-configuration-v1.2.xsd">


  <!-- Parameter passed into the theme XSLT -->
  <parameter name="fss-theme">fl-theme-mist</parameter>


  <!-- Fluid Skinning System (FSS).  Includes a CSS reset for browser normalization. -->
  <css included="plain">/ResourceServingWebapp/rs/fluid/1.4.0/fss/css/fss-framework-1.4.0.css</css>
  <css included="aggregated">/ResourceServingWebapp/rs/fluid/1.4.0/fss/css/fss-framework-1.4.0.min.css</css>


  <!-- Fluid Skinning System (FSS) theme. -->
  <css included="plain">/ResourceServingWebapp/rs/fluid/1.4.0/fss/css/fss-theme-mist.css</css>
  <css included="aggregated">/ResourceServingWebapp/rs/fluid/1.4.0/fss/css/fss-theme-mist.min.css</css>

  <!-- Default jQuery UI theme.  Point this to a custom jQuery UI theme if desired. -->
  <css included="plain">/ResourceServingWebapp/rs/jqueryui/1.8.13/theme/smoothness/jquery-ui-1.8.13-smoothness.css</css>
  <css included="aggregated">/ResourceServingWebapp/rs/jqueryui/1.8.13/theme/smoothness/jquery-ui-1.8.13-smoothness.min.css</css>

  <css import="true">../common/common_skin.xml</css>

  <!-- Visual style for the portal. -->
  <css>portal.css</css>

  <!-- Local skin override for visual style for portlet content. -->
  <css>portlet.css</css>

  <!-- Support for legacy uPortal css classes. -->
  <css>legacy.css</css>

  <!-- Optional overrides specific to IE6.  This file needs to be created if you want IE6 specific CSS. -->
  <css conditional="if IE 6">ie6.css</css>

  <js import="true">../common/common_skin.xml</js>
</resources>