05 - Page Builder Customization1

Application Integration
with WebSphere Portal V7.0

Page Builder theme customization
IBM Innovation Center Dallas, TX
2010 IBM Corporation
WebSphere Portal | IBM Innovation Center - Dallas
Agenda
A brief journey of Portal themes and Layouts (version 5.1 to version 7.0)
Page Builder Theme Architecture
Page Builder Basics
Creating a New theme using WebDAV Overview
Creating a New Style - Overview
Creating a New Layout - Overview
Page Builder Best Practices
Theme migration from v6.0/v6.1 to 7.0
Slide 2
A brief journey of Portal themes and Layouts (version 5.1 to version 7.0)
V6.0
Page Meta Data, Theme Policy
Flyout, CSS, Launch Button
table based layouts
V5.1
Easy to understand
Light Weight, table based layouts
V6.1
Theme Customizer
Dynamic QuickLink Shelf
Search Widget (Dojo)
Web 2.0 Theme, LiveText,
Themes in .war files
CSA/SSA concept
V7.0
WebDAV support,
Lesser OOTB styles than V6.1.5
Restructuring of folder
Deprecation of good old themes
Portal Theme only for Administrative UI
V6.1.5
Introducing Page Builder UI
Navigation iWidget
Hybrid Approach towards
aggregation
Lotus OneUI based
Slide 3
Portal 7 Themes
Shipped two themes in Portal Version 7
Page Builder (aka CSA 2)
Replaces the Page Builder theme from 6.1.5
Portal
Introduced in Portal 6.1 and continues to be used for the administration pages
Customers can continue to use these if they desire, but we

won't be shipping:
Previous CSA theme, named PortalWeb2
Mashup Integration for stand alone Mashup themes
Slide 4
CSA2 Theme Architecture: Web Aggregation

Framework
Client Browser
Portal Server
Navigation
Content
Layout
Fragment
Slide 5
Presentation Layer - the 'Theme (Web 2.0)

Client Browser
Portal Server
CSS
JS
Navigation
Content
Layout
Fragment
JSP
HTML
XSLT
Slide 6
Server-Side Aggregation - SSA

Client Browser
Portal Server
CSS
JSP
Model SPI/JSP tags
JS
Navigation
Content
Layout
Fragment
Slide 7
Client-Side Aggregation - CSA

Client Browser
Portal Server
JS
CSS
JSP
REST / ATOM API
bootstrap
Navigation
Content
Layout
Fragment
XSLT
Slide 8
Page Builder - Hybrid
Slide 9
Mashup Center - CSA
Slide 10
Page Builder2 - CSA2
Slide 11
Page Builder - CSA2 Key Features

Single consistent theme architecture
Client Side and Server Side Aggregation support
Portlet and iWidget support
Static html templates: theme, skin, layouts, with WebDAV editing
Dynamic-content provides means to inject server side logic into static
templates without inserting code.
Based on Dojo 1.4
Slide 12
Page Builder theme

The Page Builder theme is a replacement of the Tab Menu - Page
Builder theme introduced with the 6.1.5 feature pack
Pages assigned the Page Builder theme can be rendered in Client Side
Aggregation (CSA) mode or Server Side Aggregation (SSA)
The Page Builder theme provides a set of rendering capabilities that can
be used by components being rendered on corresponding portal pages:
Mix both, iwidgets and portlets on your pages
Switch between server-side and client side rendering of your pages
Leverage HTML design skills, tools, and artifacts
Control page layout via pre-defined HTML-based layout templates
Make use of IBM iWidget (v2.1) and Mashup Enabler (v2.4) JavaScript APIs
Customer can create custom themes based on the Page Builder theme
Slide 13
WebDAV
Web Server/Portal Server (in development) acts like a generic file
server
Clients can "mount" shared folders over HTTP that behave much like other
network file systems
Adobe Dreamweaver and Photoshop can mount WebDAV for direct editing
Portal 7 WebDAV entry points:

http://<server name>:<port>/wps/mycontenthandler/dav/fs-type1
http://<server name>:<port>/wps/mycontenthandler/dav/themelist/
http://<server name>:<port>/wps/mycontenthandler/dav/skinlist/
Slide 14
WebDAV How it works technically

Operating System
Tool
i.e. notepad.exe
TextPad
Any system tool
WebSphere Portal
WebDAV
Client
e.g. WebFolders
GNOME
WebDrive
...
HTTP
WebDAV
Servlet
wp.webdav.ear
WebDAV
Service
WebDAV
Service
WebDAV
Service
DB
wp.portaladmin.war
( more services in the future)
The actual OS functionality is an implementation detail of the OS. Typical WebDAV clients map
the WebDAV hierarchy to the filesystem. Others have special WebDAV browsers (e.g.
Dreamweaver)
Slide 15
Static Templates
Static templates are stored in WebDAV
Themes
theme.html
/fs-type1/themes/<theme name>/
Skins
skin.html
/fs-type1/skins/<skin name>/
Layouts
layout.html
/fs-type1/layout-templates/<layout name>/
When editing using OOB templates, remember they are localized!

You must edit the localized template to see changes
Localized templates example:
/fs-type1/themes/PageBuilder2/nls/theme_en.html
Slide 16
Theme.html example:
The links to the localized
templates, this is a shortened
version, usually lists all 31 locales.
Bidi and locale build

Bidi replacement variable
replacement variables
This is a variable that will be

replaced with localized text
during the build process to create a
localized template.
Dynamic spots for:

Banner Navigation
Search
Common Actions
These dynamic spots map to JSPs
stored in the Page Builder ear.
This dynamic spot does not map to a

JSP, but a reserved word for the live
text parser: lm:template.
Slide 17
iWidgets
An iWidget is a portable browser-oriented component
Portal supports only iWidgets written to comply with the iWidget
specification 2.1
iWidget Wrapper portlet
Registered iWidgets become available to the portal administration via
corresponding iWidget Wrapper portlet clones. These are created during the
iWidget registration process.
Slide 18
iWidgets
Load iWidgets from:
A location that the portal can access via HTTP routed through the portal Ajax
Proxy
A server relative URL that is relative to the portal server
A location within the portal WebDAV file store that is identified by a corresponding
portal WebDAV URI
Register iWidgets using:

Configuration task: register-iwidget-definition
ConfigEngine.bat register-iwidget-definition -DIWidgetDefinition=iwidget_Definition_URL
iWidget registration via static page deployment
Slide 19
Page Builder Basics - Navigation Widget

Often Requested drop
down
Configurable rendering
Supports top level links

Supports dropdown
navigation menus
Drag and drop page

reordering
Works against dojo
treeModel backed by a
datastore
Allows reuse against different

backends
Works in Portal and Mashup
pages
Slide 20
Page Builder Basics - JSPs

JSPs are used for bootstrapping and dynamic content spots
CSS and Dojo included by:
head.jsp
Theme/Enabler/Portal Configuration included by:

config.jsp = includes live text service and cache priming
configGlobal.jsp = cached forever, until server restart
configDynamic.jsp = cached only for current page request
Location:
<portal_root>\theme\wp.mashup.cc.theme\installedApps\wp.mashup.cc.theme.ear\PageBuilder2.war\themes\html
Reloading theme JSPs in a dev environment

Portal Theme:
<portal_root>\installer\wp.ear\installableApps\wps_theme.ear\wps_theme.war\WEB-INF\ibm-web-ext.xmi
<wp_profile>\config\cells\<cell_name>\applications\wps_theme.ear\deployments\wps_theme\wps_theme.war\WEB-INF\ibmweb-ext.xmi
PageBuilder Theme:
<wp_profile>\config\cells\<cell_name>\applications\wps.ear\deployments\wps\wps.war\WEB-INF\ibm-web-ext.xml
<wp_profile>\installedApps\<cell_name>\wps.ear\wps.war\WEB-INF\ibm-web-ext.xml
Slide 21
Page Builder Basics Add Content
Slide 22
Page Builder Basics - Change Style
This is different than what was in v6.1.5, where more styles were provided out of box
Slide 23
Page Builder Basics - Change Layout
Slide 24
Page Builder Basics - Layout Details

Layout shelf configuration: dynamically loaded from WebDAV, so
just add a new layout, and it will show up in the shelf
Key elements
class=component-container: this is semantic tag which
creates/renders a container
class=ibmDndColumn: enables drag and drop to/from the container
class=hiddenWidgetsContainer: location for non-visual widgets which
participate in the page via wiring/events, but aren't rendered
class=ibmRowContainer/ibmColumnContainer: Controls the layout of
widgets within the container
Slide 25
Page Builder Basics - Rendering Modes
Pages assigned the Page Builder theme can be rendered in Client Side Aggregation (CSA)
mode or Server Side Aggregation (SSA)
Client side aggregation means: the portal page is aggregated by JavaScript code executed in
the browser from fragments retrieved by (concurrent) AJAX requests
Leverage computing power in the client (off-loading the server)
Leverage increased cacheability of page fragments
Reduce network overhead caused by page interactions (avoid full page refreshes)
Rendering mode can be set via the Page Properties portlet
Or by directly modifying the corresponding page meta data (using XmlAccess, Portal Scripting,
WebDAV, or REST/Java APIs).
CSA mode: com.ibm.portal.rendertype=iwidget and
com.ibm.portal.rendertype.version=2.0
SSA mode: com.ibm.portal.rendertype=ssa
This page meta data is inherited along the content hierarchy as you would expect
Slide 26
Page Builder basics - Menus

Page Builder basics - Menus
Slide 27
Browsing themes/skins using WebDAV : Overview

MS Windows built-in
Slide 28
Creating a New theme using WebDrive : Overview
First we copied csa2.theme folder

into c:\temp as wwctp.csa2.theme
and then modified the files inside the
c:\temp\wwctp.csa2.theme. Then
copied the contents from
c:\temp\wwctp.csa2.theme into
X:\wwctp.csa2.theme folder.
Creating an empty folder

wwctp.csa2.theme in X: drive
Slide 29
Theme related WebDAV layers

Portal Release
DB
Themelist
Virtual
f iles
XmlAccess
Theme/Skin Descriptors
Themes and Skins

Portlet
com.ibm.portal.theme.template.ref=dav:fs-type1/...
Skinlist
FileStore
File Cache
Slide 30
Steps to create a new Page Builder Theme

Using WebDAV client, create a new folder in dav:themelist for your theme
(e.g. wwctp.csa2.theme)
Copy the contents of dav:themelist/csa2.theme/ to
dav:themelist/wwctp.csa2.theme/
Click "yes" if you are asked if you want to overwrite existing files (i.e. in this case
the virtual theme files)
Optional:
Adjust theme title and description in dav:themelist/wwctp.csa2.theme/metadata/...
Symmetric approach for cloning the Page Builder skins

Note: Generally observed, modifying the files in a location outside
WebDAV/WebDrive mapping (e.g. c:\temp) and then copying into
WebDrive folder takes immediate effect.
Slide 31
Creating a New Style : Overview (1 of 3)

Create or modify alternate style sheet
Stylesheets in /[theme_dir]/css/ folder, e.g.
wwctp.csa2.theme/css/red/red.css
Add to 'Change Style' shelf configuration
[theme_dir]/system/styles.json
Use Firebug to find DOM elements and styles to override.

Test styles in Firebug, then copy/paste into server CSS through
WebDrive
Slide 32
Creating a New Style : 2 of 3
Slide 33
Creating a New Style : 3 of 3
Slide 34
Creating a New Layout : Overview (1 of 2)

Map the layout templates entry point using WebDrive as shown:
Copy X:\3ColumnEqual folder as c:\temp\4ColumnEqual

Modify the following files:
C:\temp\4ColumnEqual\metadata.properties
C:\temp\4ColumnEqual\layout.css
C:\temp\4ColumnEqual\layout.html
C:\temp\4ColumnEqual\icon.gif
C:\temp\4ColumnEqual\metadata\localized_en.properties
Slide 35
Creating a New Layout : Overview (2 of 2)

Copy C:\temp\4ColumnEqual into X:\ as shown:
Slide 36

Simplifying Markup
One of the aspects of the total response time we have control over is the
page size
PageBuilder theme uses a fixed-width, div-based layout, dont change it
manually to % and table based layout
Use AJAX only where it makes sense
Reducing what is downloaded, the PageBuilder theme uses a

technique known as CSS spriting to combine all the images in the
CSS into a single image
One big image is built containing all of the CSS images
A single image is selected by setting a known offset and size in the CSS
properties
Slide 38

Always compact and minify your JavaScript
Browser parsing time increases greatly with size
Don't include unnecessary JavaScript!
What you can do on the client will continue to increase as

performance increases
Don't forget about your IE6 users though!
Sadly, a large number of users still use older browsers if it ain't broke,
they won't upgrade
Use Firebug extensively it is your friend!!! (debug CSS and

layout issues)
The empty page (page without any portlet/widget) size is still a
concern, hence make sure IHS (HTTP Server) caching is ON for JS
& CSS caching.
Slide 39
Develop your theme on a test page

An error in your theme code can prevent you from accessing your portal
During theme development and testing, create one or more test pages and only
apply your new theme to the test pages
Avoid testing your theme on the page that is initially selected when you log in
Do not set your new theme as portal default until after thorough testing
Slide 40
Firebug Inspector
Slide 41
Theme migration from v6.0/v6.1 to 7.0 (1 of 5)

Migrating themes and skins from V6.1 to V7.0 is not so difficult and
sometimes requires minor changes in some JSPF files
You can still bundle old traditional themes/skins in V7.0 wps.ear file but
this is not recommended. E.g. after copying V6.1.5 Portal theme folder into
V7.0 wps.ear themes folder as GoodOldPortal, you may encounter the
following error:
00000030 webapp E com.ibm.ws.webcontainer.webapp.WebApplogServletError SRVE0293E: [Servlet Error][/themes/html/GoodOldPortal/js.jsp]: com.ibm.ws.jsp.JspCoreException:
/themes/html/GoodOldPortal/js.jsp(27,119) JSPG0036E: Failed to find resource
/themes/html/psw/com/ibm/psw/wcl/renderers/menu/html/context_ie.js at
com.ibm.ws.jsp.translator.document.Jsp2Dom.getJspDocumentAsJspPage(Jsp2Dom.java:518) at
com.ibm.ws.jsp.translator.document.Jsp2Dom.getJspDocument(Jsp2Dom.java:196)
This can be easily fixed by updating js.jspf of GoodOldPortal theme folder:

<%@ include file="../psw/com/ibm/psw/wcl/renderers/menu/html/context_ie.js" %> with
<%@ include file="/peopleawareness/context_ie.js" %>
<%@ include file="../psw/com/ibm/psw/wcl/renderers/menu/html/context_ns6.js" %>
<%@ include file="/peopleawareness/context_ns6.js" %>
Slide 42

When migrating your themes, be aware of the following
considerations:
Migrated themes should be applied to the same pages that they were designed for
in the earlier version.
Migrated themes should be used with the same skins as in the earlier version.
Some skins in the current version take advantage of functions that were not
available in the earlier version (e.g. Page Builder)
When you migrate customized themes, make sure that the current theme's header
file (usually either head.jspf or head_externalJS.jspf) includes the following line at
the end, just before </head>:
<script type="text/javascript"
src="/wps_semanticTag/javascript/semanticTagService.js?language=<%= userLocale
%>" ></script>
Slide 43

While migrating v6.0 theme to v7.0, context menu service may not work inside
original themes head.jspf. In that case, you will have to replace the following line:
And
<portal-logic:urlFindInTheme file="psw/com/ibm/psw/wcl/renderers/menu/html/context_ie.js" /> with

<portal-logic:urlFind file="/peopleawareness/context_ie.jscontext_ie.js"/>
<portal-logic:urlFindInTheme file="psw/com/ibm/psw/wcl/renderers/menu/html/context_ns6.js" /> with
<portal-logic:urlFind file="/peopleawareness/context_ns6.js"/>
There could be other issues like some JavaScript errors or search tag not working,
which needs to be fixed case-by-case.
Acme Theme (v6.0)
Portal Theme (v6.1.5)
Slide 44

If some customers are still on V5.x (unfortunately), then it is better to redevelop new
themes rather trying to migrate.
Migration does not upgrade themes from an earlier version to use new functionality
present in V7.0 (or newer)
With V7.0, custom themes and skins that are present in the wps.ear file on the
source server prior to migration are consolidated in the MigratedThemes.ear file on
the target server after migration.
Custom themes or skins that contain hardcoded references to the portal's
context root (e.g. "/wps") can cause problems since post migration the context
root is modified.
Slide 45
Updating custom themes and skins to remove hardcoded

context root references (5 of 5)
Rather than modifying your custom themes and skins manually each time
you change the context root, you can update your themes and skins to
remove the hardcoded references and instead use dynamic references
that work properly regardless of the context root.
Extract the MigratedThemes

EAR from WAS using the
admin console/wsadmin.
Expand the MigratedThemes

EAR either using WinZip or
EARExpander command
(<was_profile_root>/bin)
Update the custom themes &

skins to remove any hardcoded
context root (e.g. path to JSPs,
JavaScript/images/CSS files etc)
From
<link rel="styleSheet"
href="/wps/themes/html/css/SomeStyles.css"
type="text/css" />
To
Bundle the EAR file again
and redeploy on WAS
Change the display name,

Context root for the themes/
Skins by updating
application.xml
<link rel="styleSheet"
href='<portal-logic:urlFindInTheme
file="css/SomeStyles.css" />' type="text/css" />
Slide 46
Slide 47
End of Presentation
IBM Innovation Center Dallas, TX
2010 IBM Corporation

05 - Page Builder Customization1

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

05 - Page Builder Customization1

Enviado por

Direitos autorais:

Formatos disponíveis

Application Integration

with WebSphere Portal V7.0

IBM Innovation Center Dallas, TX

2010 IBM Corporation

WebSphere Portal | IBM Innovation Center - Dallas

WebSphere Portal | IBM Innovation Center - Dallas

WebSphere Portal | IBM Innovation Center - Dallas

Customers can continue to use these if they desire, but we

WebSphere Portal | IBM Innovation Center - Dallas

CSA2 Theme Architecture: Web Aggregation

WebSphere Portal | IBM Innovation Center - Dallas

Presentation Layer - the 'Theme (Web 2.0)

WebSphere Portal | IBM Innovation Center - Dallas

Server-Side Aggregation - SSA

Model SPI/JSP tags

WebSphere Portal | IBM Innovation Center - Dallas

Client-Side Aggregation - CSA

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder - Hybrid

WebSphere Portal | IBM Innovation Center - Dallas

Mashup Center - CSA

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder2 - CSA2

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder - CSA2 Key Features

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder theme

WebSphere Portal | IBM Innovation Center - Dallas

Portal 7 WebDAV entry points:

WebSphere Portal | IBM Innovation Center - Dallas

WebDAV How it works technically

Any system tool

WebSphere Portal | IBM Innovation Center - Dallas

When editing using OOB templates, remember they are localized!

WebSphere Portal | IBM Innovation Center - Dallas

Bidi and locale build

This is a variable that will be

Dynamic spots for:

This dynamic spot does not map to a

WebSphere Portal | IBM Innovation Center - Dallas

WebSphere Portal | IBM Innovation Center - Dallas

Register iWidgets using:

iWidget registration via static page deployment

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder Basics - Navigation Widget

Supports top level links

Drag and drop page

Allows reuse against different

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder Basics - JSPs

Theme/Enabler/Portal Configuration included by:

Reloading theme JSPs in a dev environment

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder Basics Add Content

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder Basics - Change Style

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder Basics - Change Layout

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder Basics - Layout Details

WebSphere Portal | IBM Innovation Center - Dallas

Page Builder Basics - Rendering Modes

Leverage computing power in the client (off-loading the server)