workplace, portal, & collaboration software presentation subtitle: 20pt arial regular, teal r045...

Workplace, Portal, & Collaboration Software

IBM Workplace & Portal STEW © 2005 IBM Corporation

Customizing your Portal

2



Objectives of this presentation

This presentation will introduce you to: Themes in Portal

Skins in Portal

Development of new Themes in Portal

Whenever you see this . It points out a new enhancement of version 5.1

3



Agenda

Introduction to Themes Themes

Skins

Cascading Style Sheets

Tag Libraries

SPI/

Summary

4



What are Themes?

Themes give a web site a common look and feel

Generally a centralized location holds information about:

GraphicsFontsColorsLogosTitlesCommon name for Tabs

5



What are Themes in Portal?

Themes and Skins provide Portal users with:

Branding Overall user experience Navigations

6



Themes and Skins

Themes and skins control every element of how the page looks: colors, fonts, spacing, images, navigation, rows, columns, and portlets

Themes and skins can be applied to any group of pages, any time

Themes do most of the hard work for cross-browser support and 508 accessibility

7



Themes and Skins in PortalPortion of Browser which is part of the Theme

Portion of Browser which is a portlet

Portion of Portlet which is part of the Skin

8



Components of Themes

Themes are composed of elements defined in several locations

These elements are included within:

A set of JSPs Cascading Style Sheets (CSS) Images

9



Where can you find Portal Thmes

Language Dependant Styles for IE}

Location for Standard JSPs (Home, Login…)

10



File types you will find

The themes and skins consist of 3 kinds of files

Java Server Pages

which are used to generate the appropriate HTML-tags

Cascading Style Sheets

which are used to apply styles to links, tables etc.

Static content

like Images to add for example a logo.

11



File Dependencies

Default.jsp

Head.jsp ext.../headinclude.jsp Styles.css HelpStyles.css

extension/taglibinclude.jsp

extension/PageBeginInclude.jsp

ToolBarInclude.jsp

PlaceBarInclude.jsp PageBarInclude.jsp

extension/PageEndInclude.jsp

wpsMainContent -> Home.jsp

Control.jsp BidiInclude.jsp ShowTools.jsp

LayeredContainer.jsp ColumnContainer.jsp UnlayeredContainer-V.jsp

RowContainer.jsp UnlayeredContainer-H.jsp

NavigationTreeInclude.jsp

LWP_Styles.css

AdminLinkBarInclude.jsp SearchBarinclude.jsp

12



Before Customizing Themes Follow these steps to enable automatic JSP reloading:

Open the file was_root/config/cells/node_name/applications/wps.ear/deployments/wps/wps.war/WEB-INF/ ibm-web-ext.xmi

Find reloadingEnabled entry in this file:

Example:

<webappext:WebAppExtension xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:webappext="webappext.xmi" xmlns:webapplication="webapplication.xmi" xmlns:commonext="commonext.xmi" xmlns:common="common.xmi" xmi:id="IBM_WPS_Ext" reloadInterval="3" reloadingEnabled="false" fileServingEnabled="true" directoryBrowsingEnabled="false" serveServletsByClassnameEnabled="false" preCompileJSPs="false">

Change the value for reloadingEnabled to true and Save

Restart the portal server.

13



After Customizing Themes

After changing a theme’s JSP file (any jsp file): Always open the Default.jsp

Change something (add a space and delete it)

Save the Default.jsp

This provides the Portal server with a signal to re-compile the jsp files

14



How to add a new Theme ?

To add a theme to the configuration of the Portal you have to

Copy the theme directory to the <was_root>/installedApps/<node>/wps.ear/wps.war/themes/html directory

Add the theme in the administrative portlets

Click on Administration -> Portal User Interface -> Themes and Skins

Click on Add new theme Insert a name and the name of the theme-directory for example

‘MyTheme’ if it is located in <was_root>/installedApps/<node>/wps.ear/wps.war/themes/html/MyTheme

15



Customizing Navigation in Themes

Three components are used to display navigation PlaceBarInclude.jsp

Can be used to display first level of navigation PageBarInclude.jsp

Can be used to display second level of navigation NavigationTreeInclude.jsp

Can be used to display all remaining levels Navigation is moved to this file. Not in skin anymore.

16



Accessing navigation information

There are two options to get information about navigational structure of the portal

By using the Model SPI

More options But needs to code java

By using the supplied Custom Tag Libraries

Not all information available Easier to develop

17



Available Themes

Admin

Admin with left navigation

Corporate

Engineering

Finance

Science

WebSphere

Home

18



Admin with left navigation Has its own NavigationTreeInclude.jsp to

display images in front of the nodes. only the subpages of the chosen node

are displayed

every top-node can have a gif-file displayed (30*32).

You have to give the node a custom unique name (f.x. node1) (see later on how to do that)

Put the gif-file in the theme directory with a name equal to the unique name

19



Virtual Portal and Themes

As a new feature for WP 5.1 virtual portals are added. To support different themes for login edit my profile etc. Those functions had to be implemented as portlets.

The links in ToolBarInclude.jsp now use urlGeneration to point to the correct pages.

At the moment Rational Application Developer Portal Tooling does not import virtual site structure.

20



Available Skins

Shadow Album Outline Hint NoSkin NoBorder Clear Fade Diamonds

Pinstripe Wave Corner Corner – High Performance Echo* IFrame

Album Shadow Wave IFrame Corner

21



Available Skins (2)

Iframe for long running portlets.

displays a Portlet as an Iframe inside a page

to display more portlets on a page

can be used to detach a portlet from portalpage using Netscapes 'Open This Frame in a new window‚

22



Style Sheets in Themes and Skins

Style Sheets define the style of fonts, colors, size and so on. In Portal there are three main Style Sheet files:

Styles.css See appendix for further information what styles are

available. With RAD a new preview modus is available to use

a packaged html-file to preview changes. HelpStyles.css

Used in Common PIM Portlet / Search Center LWP_Styles.css

Used in Common PIM Portlet / People Picker / Portal Doc Mgr

23



How to find the correct Stylesheet

Start looking in the directory <style_root> = <was_root>/installedApps/<node>/wps.ear/wps.war/themes/html/

To find the correct stylesheet you need to know what browser do you use ?

If you use IE then all css-files are located in the subdirectory <style_root>/ie

All other css-files are in <style_root>

what language is the default language of your browser ?

For english for example use the subdirectory en.

24



Taglibs in Themes and Skins

portal.tld includes basic tags for use in theme

portal-internal.tld Internal to properly display administrative portlets

adminlinkinfo -> used to initialize the variables wpsContentNode and wpsCompositionNode

portlet.tld Includes tags for use in portlets

25



Taglibs in Themes and Skins

menu.tld / people.tld ( same as personTag.tld ) integrated through ext../TagLibInclude.jsp

JSTL definition files added to enable disconnected support of Java Server Pages

Standard Tag Library

c.tld ( core ) / x.tld (xml ) / fmt.tld ( output formatting )

Others available in <wp_root>/shared/app/WEB-INF/tld

26



Tags in portal.tld urlFindInTheme

Used to query the uri to an image file starting the search in the current Theme directory

urlFindInSkin Used to query the uri to an image file starting the search in the current Skin

directory if

Enables to use conditions inside themes and skins

Available conditions are for example :

loggedIn / navigationAvailable / screen

See http://publib.boulder.ibm.com/pvc/wp/510/ent/en/InfoCenter/wps/dgn_ptltld.html for more information

27



Custom Tags used in Navigation (1)

all tags included in portal.tld wps:if

nodeInSelectionPath="Yes|No"

showTools="Yes|No" wps:navigation

attribute:

startLevel used to determine the starting level of the displayed navigation

stopLevel used to determine the stoping level of the displayed navigation

f.x. <wps:navigation startLevel= “2“ stoplevel= “2“>

Used inside the PlaceBarInclude.jsp to display only the places. startlevel of a subsequent Navigation-tag is the stoplevel of the

preceeding navigation tag if it is ommitted.

28




scripting variable available inside navigation tag wpsNavNode

can use the Content Model ( see Model SPI ) to query type of component

getContentNode().getContentNodeType() (String) needs import of com.ibm.portal.content.ContentNodeType com.ibm.portal.content.ContentNodeType.LABEL (String) com.ibm.portal.content.ContentNodeType.EXTERNALURL

(String) com.ibm.portal.content.ContentNodeType.COMPOSITION

(String)

29




wps:navigationLoop scripting variable :

wpsNavNode ( see previous slide ) wpsNavLevel

level of navigation relative to startLevel wpsNavTreeLevel

absolute level of navigation

wps:title returns the localized name of the current node in

navigationLoop.

30




wps:navigationUrl used to generate link to navigation element currently

chosen in navigationLoop

scripting variable : type

link -> change to selected node expand -> expand selected node collapse -> collapse selected node F.x.

<a href='<wps:navigationUrl type="expand"/>' border="0">would generate a URL to set a node as expanded.

31




wps:navigationShift used to generate the links to shift through

navigation elements if space avialable doesn’t allow display of all available elements

attribute : by

number of pages which should be +/- to the current number

maxNumber maximum number of pages displayed at one

time in the navigation

32




urlGeneration contentNode

Enter the custom unique name of the ressource you are searching for here

accessControlCheck Check whether current user is allowed to

access that link / page pacCheck has been deprecated

actionName Call a specific action in a portlet

33




urlParam Use this tag to add parameters to a call. Accessing those

parameters in the portlets via getParameter(). If the ressource is a page all portlets can access the parameter.

Example of adding a link

<wps:urlGeneration contentNode="CustomUniqueName" portletWindowState="normal" accessControlCehck="NoCheck">

<wps:urlParam name="Parametername" value="test" />

<a href="<% wpsURL.write(out); %>">

</wps:urlGeneration>

34



Creating custom unique names for pages / portlets

35



Model SPI (5.1.0.1)

The Model SPI

provides information about the content ( pages, labels, ext. URLs) and about the layout of pages.

provides information in form of lists about available skins, themes, markups and languages.

is read-only.

returns the information based on a users ACL.

is available in the package com.ibm.portal

36



Model SPI (5.1.0.1)

4 packages enable access to the information com.ibm.portal.content

Access to information regarding the content f. x. what type of content it is ( page, label, url )

com.ibm.portal.navigation

Access to information regarding the navigation f. x. the selection path

com.ibm.portal.identification

Access to localized names of components com.ibm.portal.admin

Access to information about skins, themes etc.

37



Specials

Search Integration

Business Process Integration

Favorites

Inline customization

Sametime current Status window

Theme dependant Skins

38



Specials

Search Integration with Portal Search Engine now externalized into a

seperat JSP-file (SearchBarInclude.jsp)

Business Process Integration Used Tags

<wps:pendingTasks/> numberOfTasks: The number of unclaimed tasks. myTasksPageURL: The url of the page that contains the

MyTasks portlet. Not in Standard Themes

<wps:closePage/> Used to close the transient pages created by the MyTask

portlet Added in NavigationTreeInclude.jsp

39



Specials ( Favorites )

Take code in PlaceBarInclude.jsp in Standard Theme as example. Used Tags

favoritesLoop

wpsFavoritesURL variable in which the url of the favorite is accessible

wpsFavoritesTitle Name of the favorite

wpsFavoritesLevel Level of favorite when folders are used

wpsFavoritesType 0 = internal URL 1 = external URL 2 = wml-device

40



Specials ( Inline Customization ) Used tags

if showtools="yes|no" Page

See PageBarInclude.jsp for example

to call Customizer

to call Properties in case of label Portlet

externalized into ShowTools.jsp file in Control.jsp in Skin

used tags

portletMoveLeft portletMoveRight portletMoveUp portletMoveDown portletMoveDelete

urlParent

41



Specials ( Sametime current Status window )

With this script you can add a link so the user can change his/her Sametime status

A people-image needs to be added to the theme ( change_status.gif )

A message needs to be added to the engine.properties

<a href="javascript:openStatusWindow();"><img src='<wps:urlFindInTheme file="./change_status.gif"/>' WIDTH="12" HEIGHT="10" BORDER="0" alt=‘<fmt:message key=“ChangeStatus”/>'></a>

42



Specials ( Theme-dependent Skins ) Some of the supplied skins need colored images to display correctly. For example (top right corner in Engineering and Corporate) :

Album

Shadow

These images are called through the skin by using the tag urlFindInTheme When adding a new colordependent Skin you need to

add the colored images to every theme

remove the skin from the allowed skins of the other themes When adding a new theme you need to

add the colored images from Album, Hint and Shadow to your theme.

or remove those skins from the allowed skins of your theme Tools used are :

Page Designer of Rational Application Developer

43



Other

National Language Support

Light-Weight / High-Performance Themes & Skins

Customized Portal Information

44



Other ( National Language Support ) NLS for messages is supported by

usage of JSTL-tags found in „fmt.tld“

Need to add Taglib to jsp <%@ taglib uri="/WEB-INF/tld/fmt.tld" prefix=“fmt" %>

<fmt:bundle> Setting name of the used resource bundle

<fmt:message key=“abc”> Setting the key of the message that needs to be displayed

standard property-files are located in

<wps_root>\shared\app\wp.ui.jar To add new messages you need to add the specific resource file to the

directory <wps_root>\shared\app\nls\

45



Other ( National Language Support ) NLS for Layout by usage of tag "bidi„ for conditional positioning of

components See

http://publib.boulder.ibm.com/pvc/wp/510/ent/en/InfoCenter/wps/dgn_ptltld.html#if_bidi

NLS for Themes by usage of language specific cascaded style sheets Integration of different images for bidirectional languages

46



Other ( Lightweight Themes & Skins ) Performance optimized Standard Theme and Skins

Can be customized freely

Added as an example for customized Themes and Skins

Use <wps:StateBase/> to store base url located in Head.jsp in Standard Theme

Must set StateManagerService.properties to true to enable relative URLs

See http://publib.boulder.ibm.com/pvc/wp/510/ent/en/InfoCenter/wps/dgn_light.html for description of performance tuning options.

47



Other ( High Performance Skins ) Special Skins integrated into Portal

Cannot customize anything other than color and images and only for HTML

Available for all with portal delivered skins Three options : UnlayeredContainer / LayeredContainer /

Control

Best used when performance is the most important issueand you don’t need to customize skins.

To enable high performance themes and skins see http://publib.boulder.ibm.com/pvc/wp/510/ent/en/InfoCenter/wpf/tune_skins.html.

48



Other ( Customized Information ) Name/Title of the portal

title and title.short in engine.properties in wp.ui.jar need to be changed.

See http://publib.boulder.ibm.com/pvc/wp/510/ent/en/InfoCenter/wps/dgn_cpinf.html for more information.

Adding user information to a theme Displays all available attributes of MemberManager

Message in engine.properties

welcome = Willkommen, {0}! Needed code in Theme

<fmt:message key=„welcome“>

<fmt:param><wps:user attribute=„fullName“/></fmt:param>

</fmt:message>

49



How to customize your portal

Development Environment

Best Practices

50



Best Practices ( Recovering from a faulty theme )

Only necessary when you added the theme to the Welcome Page / First displayed page.

Actions are : Rename your theme directory.

Copy an existing functional theme to the location of the non-functional theme.

May need to touch the Default.jsp to force recompilation. Proceed with creating a new place where the theme should

be displayed and start debugging.

51



Best Practices ( buildCSS )

During development of a new theme usually only the css for the current language and the current browser is edited.

When deploying that theme to a production system you need to add css-files for all languages and supported browsers.

BuildCSS is a packaged tool which helps you generate all of the css-files using templates.

How-to description can be found in Resources-section of presentation

52



Summary

What you should have seen is

What components are used in a customized portal

How to develop Themes and Skins

How to add extra functionality in a theme

53



Information

General Information on Layout of the portal http://publib.boulder.ibm.com/pvc/wp/510/ent/en/InfoCenter/wps/dgn_lyt.html

Available Tags http://publib.boulder.ibm.com/pvc/wp/510/ent/en/InfoCenter/wps/dgn_ptltld.html

Model SPI http://pvcid.raleigh.ibm.com/wpf/ic/5101/ent/en/InfoCenter/wps/dgn_modelpkg.html



Thank you

55



Lab Alert

Please use the image: STEW05-UTIL-Dev-Tools

Your password is: passw0rd

Notice the ZERO in passw0rd

workplace, portal, & collaboration software presentation subtitle: 20pt arial regular, teal r045...

Documents