Customizing your Portal

1. Customizing your Portal Title slide

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: • Graphics • Fonts • Colors • Logos • Titles • Common 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 Portal Portion of Browser which is part of the Theme Portion of Portlet which is part of the Skin Portion of Browser which is a portlet

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 Location for Standard JSPs (Home, Login…) } Language Dependant Styles for IE

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. extension/taglibinclude.jsp ext.../headinclude.jsp LWP_Styles.css SearchBarinclude.jsp Styles.css HelpStyles.css extension/PageBeginInclude.jsp ToolBarInclude.jsp AdminLinkBarInclude.jsp PageBarInclude.jsp NavigationTreeInclude.jsp PlaceBarInclude.jsp wpsMainContent -> Home.jsp LayeredContainer.jsp UnlayeredContainer-V.jsp ColumnContainer.jsp RowContainer.jsp UnlayeredContainer-H.jsp BidiInclude.jsp ShowTools.jsp Control.jsp extension/PageEndInclude.jsp File Dependencies Default.jsp Head.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. Shadow Album Outline Hint NoSkin NoBorder Clear Fade Diamonds Pinstripe Wave Corner Corner – High Performance Echo* IFrame Available Skins 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. Custom Tags used in Navigation (2) • 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. Custom Tags used in Navigation (3) • 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. Custom Tags used in Navigation (4) • 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. Custom Tags used in Navigation (5) • 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. Custom Tags used in Navigation (6) • 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. Custom Tags used in Navigation (7) • 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.