What is Page Builder 2 theme ?
Over the time ,WebSphere portal has designed different themes namely, Portal, PortalWeb 2 and Page Bulider themes. Page Builder 2 theme is the second iteration after its inception in WebSphere portal 6.1.5.
- Page builder themes provides both server side and client side aggregation.
- It makes use of latest web technologies like HTML 5 and CSS 3.
- It provides in-page administrative tasks like creation of pages, adding tags, adding portlets to pages and changing styles and skins instead of using administrative portlets from the administrative pane.
- Uses WebDAV to store static files of theme.
Process Flow
The following is the process flow of the Page builder 2 theme describing different files involved in the process. The few important components which builds the theme are
- Default.jsp
- bootstrap.jspf
- bootstrapPortal.jspf
- Theme.html
- Dynamic content spot mappings
Default.jsp
File Location: C:\IBM\WebSphere\PortalServer\theme\wp.mashup.cc.theme\installedApps\wp.mashup.cc.theme.ear\PageBuilder2.war\themes\html\Default.jsp
Default.jsp is the starting point for the page builder theme. The three main functions of this page are
- Initialize values using jspf files
- Determine the theme template
- Forward control to render tag for final markup.
The following is the code snippet from Default.jsp highlighting its functionalities.
This jsp page includes the jsp fragments (.jspf) which complies into a servlet. The two jspf files included in the page are
- bootstrap.jspf
- bootstrapPortal.jspf
These files are used to initialize the values for the theme, bootstrap.jspf is used to initialize the context and set different URI components. bootstrapPortal.jspf is used to set different variables like portalRoot, isUserLoggedIn, isPageRenderModeCSA and many others. For full list of the variables look into the files (file location mentioned above).
Once the values are initialized, the next important thing it does is to determine the template for the theme. By default in absence of any template it will point to the template in WEB DAV. If nothing is changed it will be set the themeTemplateURI to theme.html
Then control is passed to <r:datasource> where it takes the themeTemplateURI and mine type. It is responsible to parse and resolve all the dynamic content spots.
Theme.html
By default all the static files are stored in the WEB DAV for portal 7. We need to connect and get those for doing any modifications or looking at it. Luckily we have a copy of theme.html stored in JCRFileStore in local (we are not sure whether the changes made to these files is equivalent to the changes made to WEB DAV files, But both appears to be same).
File Location: C:\IBM\WebSphere\wp_profile\temp\node1\WebSphere_Portal\JCRFileStore\filestore\fs-type1\themes\PageBuilder2\theme.html
(Do not make any changes to files in JCRFileStore, these are only for only debugging purposes)
Theme.html contains the Dynamic Content Spot mappings for different of the page. The following are few of them.
- Banner Navigation
- Search
- Banner common actions
- Tab navigation
- Page Toolbar
- Layout
The following figure highlights different features of the theme
And many others related to ASA (active server analytics), for further details check ASA.
Every Dynamic content spot has relation as “dynamic Content” in its tag.
We can find the all the defined dynamic content spots in portal administration console under
Resources -> Resource environment -> Resource Environment providers -> WP_DynamicContentSpotMappings -> Custom properties.
These dynamic content spot will aggregate to generate the complete html for the theme. The following diagram consolidates the theme process flow.
Useful Links and references
2. Consolidated Steps for Creating Custom Custom Themes in WP7
3. Connecting to the Portal WebDav
