Professional Documents
Culture Documents
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
Slide 4
Portal Server
Navigation
Content
Layout
Fragment
Slide 5
Portal Server
CSS
JS
Navigation
Content
Layout
Fragment
JSP
HTML
XSLT
Slide 6
Portal Server
CSS
JSP
JS
Navigation
Content
Layout
Fragment
Slide 7
Portal Server
JS
CSS
JSP
REST / ATOM API
bootstrap
Navigation
Content
Layout
Fragment
XSLT
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
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
Slide 14
Tool
i.e. notepad.exe
TextPad
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>/
Slide 16
Theme.html example:
The links to the localized
templates, this is a shortened
version, usually lists all 31 locales.
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
Slide 19
Slide 20
Location:
<portal_root>\theme\wp.mashup.cc.theme\installedApps\wp.mashup.cc.theme.ear\PageBuilder2.war\themes\html
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
Slide 22
This is different than what was in v6.1.5, where more styles were provided out of box
Slide 23
Slide 24
Slide 25
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
Reduce network overhead caused by page interactions (avoid full page refreshes)
Or by directly modifying the corresponding page meta data (using XmlAccess, Portal Scripting,
WebDAV, or REST/Java APIs).
com.ibm.portal.rendertype.version=2.0
This page meta data is inherited along the content hierarchy as you would expect
Slide 26
Slide 27
Slide 28
Slide 29
Themelist
Virtual
f iles
XmlAccess
Theme/Skin Descriptors
com.ibm.portal.theme.template.ref=dav:fs-type1/...
Skinlist
FileStore
File Cache
Slide 30
Click "yes" if you are asked if you want to overwrite existing files (i.e. in this case
the virtual theme files)
Optional:
wwctp.csa2.theme/css/red/red.css
[theme_dir]/system/styles.json
Slide 33
Slide 34
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
Slide 36
Slide 38
Slide 40
Firebug Inspector
Slide 41
Slide 43
And
There could be other issues like some JavaScript errors or search tag not working,
which needs to be fixed case-by-case.
Slide 44
Slide 45
To
Bundle the EAR file again
and redeploy on WAS
<link rel="styleSheet"
href='<portal-logic:urlFindInTheme
file="css/SomeStyles.css" />' type="text/css" />
Slide 46
Slide 47
End of Presentation