Transcript skinning-uportal

Skinning uPortal:
For Developers
Matthew Polizzotti
Senior UX Developer
Unicon, Inc.
Westin Westminster
Standley I
25-May-2011
© Copyright Unicon, Inc., 2008. Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/us/
Agenda
1. Technology stack
2. Define theme & skin
3. Create skin
4. Customize skin
2
Agenda
5. Create child skin
6. Examine theme
7. Common issues
8. Environment checklist
3
Technology stack
4
Technology stack

Java SE 6 Update 24

Apache Ant 1.7.1

Apache Maven 2.2+

Apache Tomcat 6.x (Servlet spec. 2.5+)

uPortal trunk
Ensure compatible versions:
uPortal Manual
5
Define theme & skin
6
What is a theme?



A theme provides structure or layout for
the portal
Similar to a skeleton, a blueprint or the
framework of a building
It is the underlying HTML code of the
portal, which is developed using XSLT
technology
7
What is a skin?



A skin consists of the portal's color
scheme, text styles and images (visual
appearance)
Developed with Cascading Style
Sheets (CSS) and image files
Remember to disable the portal's
aggregation of CSS and Javascript
resources (Portlet Administration)
8
Create skin
9
Demo

Location of skins:

uportal-war/src/main/webapp/
media/skins/universality

Copy stable skin as a starting point

Rename new skin

Register new skin

skinList.xml
10
Demo

Adjust skin configuration


Deploy new skin to Tomcat



skin.xml
ant deploy-war
View & select new skin in the gallery
Create alias, short-cuts & copy
commands for faster development
11
Questions
12
Customize skin
13
CSS stack




CSS stack is defined in skin.xml
Styles common to all skins are
imported from common_skin.xml
to skin.xml
Third-party libraries (Fluid, jQuery)
live in the ResourceServing
Webapp within Tomcat
Most development occurs in
portal.css
14
CSS stack
15
Demo

Header

Page Bar

Web Search

Tabs

Portlet Containers

Footer
16
Questions
17
Create child skin
18
What is a child skin?



A child skin is a variation of
an existing skin
A child skin inherits style
definitions from the parent
skin
A child skin overrides styles
defined by the parent
19
Demo

Copy stable skin as a starting point

Rename new skin

Register new skin


skinList.xml
Adjust skin configuration

skin.xml
20
Demo


Add CSS overrides
Deploy new skin to Tomcat



ant deploy-war
View & select new skin in the
gallery
Create alias, short-cuts & copy
commands for faster development
21
Questions
22
Examine theme
23
What is a theme?



A theme provides structure or layout for
the portal
Similar to a skeleton, a blueprint or the
framework of a building
It is the underlying HTML code of the
portal, which is developed using XSLT
technology
24
What is a theme?
Example:
25
What is XSLT?



XSLT stands for XSL Transformations
XML-based language used for the
transformation of XML documents
into other documents such as HTML
XSLT uses XPath to navigate XML
26
How does XSLT work?
27
Suggested work flow




Work in the uPortal source code
Copy changed files from your source
code to your deployed code
Changes made to deployed
environment can be easily lost or
overridden
Setup up alias / copy commands for
faster development
28
Demo

Location:


/up-trunk/uportal/war/src/main/resources/
layout/theme/universality
Theme consists of 7 major files:

universality.xsl

page.xsl

navigation.xsl

components.xsl

columns.xsl

content.xsl

preferences.xsl
29
Demo

Change the portal through
configuration

Flyout menus

Web search

Additional links

Sidebar
30
Questions
31
Common Issues
32
Common Issues

Typos & syntax errors in xsl files

Incorrect copy commands

uPortal aggregation enabled

Tomcat fails to shutdown

Leverage logs

uPortal.log

catalina.out
33
Environment checklist
34
Download & Install

Java SE 6 Update 24

Apache Ant 1.7.1

Apache Maven 2.2+

Apache Tomcat 6.x (Servlet spec. 2.5+)

uPortal trunk
Ensure compatible versions:
uPortal Manual
35
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
36
Recommended

Aptana 3.0 (eclipse)

M2Eclipse Plugin

Subversion Plugin or other SVN client

Setup alias or short-cuts for long or
repetitive commands

uPortal source directory

Theme directory

Skin directory
37
Environment Variables
Example: .bashrc
# 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
Make Java, Maven & Ant libs available across your OS.
38
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
Prevent out of memory errors
39
Memory Settings
Example: .bashrc
# Java
export JAVA_HOME=/path/jdk1.6.0_24
export JAVA_OPTS="-XX:MaxPermSize=256m -Xms728m -Xmx1024m"
export PATH=$PATH:$JAVA_HOME/bin
40
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
Example: CATALINA_BASE/conf/catalina.properties
shared.loader=${catalina.base}/shared/classes,${catalina.bas
e}/shared/lib/*.jar
41
Tomcat Settings

Shared Sessions

Enable the sharing of user session data between
portlets & the portal

Add emptySessionPath parameter
Example: CATALINA_BASE/conf/server.xml
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000" redirectPort="8443"
emptySessionPath="true"/>
42
Tomcat Settings

GZipping portal's HTML content

Add compression parameter

Add compressableMimeType parameter
Example: CATALINA_BASE/conf/server.xml
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000" redirectPort="8443"
emptySessionPath="true" compression="on"
compressableMimeType="text/html,text/xml,text/plain"/>
43
Portal Settings

Configure build.properties

Set server.home property to Tomcat directory

Used by Ant to deploy compiled uPortal.war to
Tomcat
Example: /up-trunk/build.properties
##### Replace server.home with the location of Tomcat 6 on
your machine #####
# path to tomcat binaries
server.home=/path/apache-tomcat-6.0.32
44
Portal Settings


Configure log4j.properties to output XML to
uPortal.log
Portal XML string is a useful visual tool when
working with the portal's theme layer
Example: /up-trunk/uportal-war/src/main/webapp/WEB-INF/log4j.properties
## 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.LoggingStAXCompo
nent=false
45
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)
46
Build the Portal

ant -p


ant hsql


List of all ant commands
Starts the database
ant initportal

Runs all the targets necessary to deploy the
portal and prepare the portal database

Should be executed only once

-Dmaven.test.skip=true
47
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
48
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)
49
Questions & Answers
Matthew Polizzotti
Senior UX Developer
Unicon, Inc.
[email protected]
www.unicon.net
50