Page Comparison

Technology stack

1. Java SE 6 Update 24
2. Apache Ant 1.7.1
   1. Ant is used to build Java applications
   2. Ant supplies developers with built-in tasks to compile, assemble & test
3. Apache Maven 2.2+
   1. Maven is a project management tool that provides a standard way to build projects
   2. Manages project dependencies
4. Apache Tomcat 6.x
   1. Implementation of Java Servlet and JavaServer Pages technologies
5. uPortal source

Define theme & skin

What is a theme?

1. A theme provides structure or layout for the portal
2. Similar to a skeleton, a blueprint or the framework of buildings
3. It is the underlying HTML code of the portal, which is developed using XSLT technology

What is a skin?

1. A skin consists of the portal's color scheme, text styles and images (visual appearance)
2. Developed with Cascading Style Sheets (CSS) and image files
3. Remember to disable the portal's aggregation of CSS and Javascript resources (Portlet Administration)

Create a skin

Demo

1. Location of skins:
   1. uportal-war/src/main/webapp/media/skins/universality
2. Copy stable skin as a starting point
3. Rename new skin
4. Register new skin (skinList.xml)
5. Adjust skin configuraiton (skin.xml)
6. Deploy new skin to Servlet container

   Code Block
   // From command-line ant deploy-war

7. View & select new skin in the gallery
   1. Inspect portal link tags, which should point to your new skin
8. Create alias, short-cuts & copy commands for faster development

Customize skin

CSS stack

1. CSS stack is defined in skin.xml
2. Styles common to all skins are imported from common_skin.xml to skin.xml
3. Third-party libraries (Fluid, jQuery) live in the ResourceServingWebapp within Tomcat
4. Most development occurs in portal.css

CSS stack illustrated

Demo

1. Header
2. Page Bar
3. Web Search
4. Tabs
5. Portlet Containers
6. Footer

Create child skin

What is a child skin?

1. A child skin is a variation of an existing skin
2. A child skin inherits style definitions from the parent skin
3. A child skin overrides styles defined by the parent

Demo

1. Copy stable skin as a starting point
2. Rename new skin
3. Register new skin (skinList.xml)
4. Adjust skin configuration (skin.xml)
5. Add CSS overrides
6. Deploy new skin to Tomcat (ant deploy-war)
7. View & select new skin in the gallery
8. Create alias, short-cuts & copy commands for faster development

Examine theme

What is a theme?

1. A theme provides structure or layout for the portal
2. Similar to a skeleton, a blueprint or the framework of a building
3. It is the underlying HTML code of the portal, which is developed using XSLT technology

What is a theme?

What is XSLT?

1. XSLT stands for XSL Transformations
2. XML-based language used for the transformation of XML documents into other documents such as HTML
3. XSLT uses XPath to navigate XML

How does XSLT work?

Suggested work flow

1. Work in the uPortal source code
2. Copy changed files from your source code to your deployed code
3. Copy changed files from your source code to your deployed code
4. Setup up alias / copy commands for faster development

Demo

1. Location:
   1. /uportal-war/src/main/resources/layout/theme/universality
2. Theme consists of 7 major files:
   1. universality.xsl
   2. page.xsl
   3. navigation.xsl
   4. components.xsl
   5. columns.xsl
   6. content.xsl
   7. preferences.xsl
3. Change the portal through configuration:
   1. Show or hide tab flyout menus
   2. Add a sidebar to the portal
   3. Add a page title to the portal
   4. Add additional links
   5. Remove the web search from the header

Common issues

1. Typos & syntax errors in xsl files
2. Incorrect copy commands
3. uPortal aggregation enabled
4. Tomcat fails to shutdown
5. Leverage logs
   1. location: tomcat/logs
   2. catalina.out
   3. uPortal.log

Environment checklist

Download & install

• Java SE 6 Update 24
• Apache Ant 1.7.1
  • Ant is used to build Java applications
  • Ant supplies developers with built-in tasks to compile, assemble & test
• Apache Maven 2.2+
  • Maven is a project management tool that provides a standard way to build projects
  • Manages project dependencies
• Apache Tomcat 6.x
• Implementation of Java Servlet and JavaServer Pages technologies
• uPortal source

Recommended

• Download Java, Ant & Maven to common area specific to your OS
  • Linux (/home/username/opt)
  • Windows (C:\Program Files)
• Download uPortal & Tomcat to the same project folder
• Aptana (eclipse)
• M2Eclipse plugin
• Subversion plugin
• Setup alias or short-cuts for long or repetitive commands

Environment Variables

# Java
export JAVA_HOME=/path/jdk1.6.0_24
export PATH=$PATH:$JAVA_HOME/bin

# Maven
export M2_HOME=/path/apache-maven-2.2.1
export PATH=$PATH:$M2_HOME/bin

# Ant
export ANT_HOME=/path/apache-ant-1.7.1
export PATH=$PATH:$ANT_HOME/bin

Memory settings

• Tune JVM with JAVA_OPTS variable
• -Xmx – maximum amount of memory allocated to JVM
• -Xms – initial amount of memory allocated allocated to JVM
• -XX:MaxPermSize – maximum amount of memory for PermGen. Is used by the JVM to hold loaded classes.

# Java
export JAVA_HOME=/path/jdk1.6.0_24
export JAVA_OPTS="-XX:MaxPermSize=256m -Xms728m -Xmx1024m"
export PATH=$PATH:$JAVA_HOME/bin

Tomcat Settings

Shared Libraries

• uPortal places libraries in CATALINA_BASE/shared/lib
• Tomcat 6.0 does not allow libraries to be loaded from CATALINA_BASE/shared/lib

shared.loader=${catalina.base}/shared/classes,${catalina.base}/shared/lib/*.jar

Shared Sessions

• Enable the sharing of user session data between portlets & the portal
• Add emptySessionPath parameter

<Connector port="8080" protocol="HTTP/1.1"
	connectionTimeout="20000" redirectPort="8443"
	emptySessionPath="true"/>

GZipping portal's HTML content

• Add compression parameter
• Add compressableMimeType parameter

<Connector port="8080" protocol="HTTP/1.1"
     connectionTimeout="20000" redirectPort="8443"
     emptySessionPath="true" compression="on"
     compressableMimeType="text/html,text/xml,text/plain"/>

Portal Settings

• Configure build.properties
  • Set server.home property to Tomcat directory
  • Used by Ant to deploy compiled uPortal.war to Tomcat

##### Replace server.home with the location of Tomcat 6 on your machine #####
# path to tomcat binaries
server.home=/path/apache-tomcat-6.0.32

• Configure log4j.properties to output portal's XML string to uPortal.log
• Portal XML string is a useful visual tool when working with the portal's theme layer

## Uncomment to see the XML at various stages in the rendering pipeline
log4j.logger.org.jasig.portal.rendering.LoggingStAXComponent=DEBUG, R
log4j.additivity.org.jasig.portal.rendering.LoggingStAXComponent=false

Build the portal

• Execute all ant commands from the command-line
• All ant commands are executed against the uPortal source directory
• Build uPortal source code and deploy to our servlet container (Tomcat)
• ant -p
  • List of ant commands available
• ant hsql
  • Starts the database
• ant initportal
  • Runs all the targets necessary to deploy the portal and prepare the portal database
  • Should only be executed once
  • -Dmaven.test.skip=true
    • Can be added to skip tests when building

Start the portal

• Server start up
  • Tomcat/bin/startup.sh (linux)
  • Tomcat/bin/startup.bat (windows)
• Local login:
  • http://localhost:8080/uPortal/Login?userName=admin&password=admin
• Portlet Administration
  • Toggle JS/CSS Aggregation

Recommended

• Setup alias or short-cuts for long or repetitive copy commands
  • Copy files from the Theme (source) to the Theme (deployed)
  • Copy files from the Skin (source) to the Skin (deployed)