Page Builder theme - IBM

®

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://:/wps/mycontenthandler/dav/fs-type1 – http://:/wps/mycontenthandler/dav/themelist/ – http://:/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//

 Skins – skin.html – /fs-type1/skins//

 Layouts – layout.html – /fs-type1/layout-templates//

 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: – \theme\wp.mashup.cc.theme\installedApps\wp.mashup.cc.theme.ear\PageBuilder2.war\themes\html

 Reloading theme JSPs in a dev environment – Portal Theme: \installer\wp.ear\installableApps\wps_theme.ear\wps_theme.war\WEB-INF\ibm-web-ext.xmi \config\cells\\applications\wps_theme.ear\deployments\wps_theme\wps_theme.war\WEB-INF\ibmweb-ext.xmi

– PageBuilder Theme: \config\cells\\applications\wps.ear\deployments\wps\wps.war\WEB-INF\ibm-web-ext.xml \installedApps\\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


Page Builder Best Practices  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, don’t 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


Page Builder Best Practices  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 theme’s 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: – with – – – Slide 42


Theme migration from v6.0/v6.1 to 7.0 (2 of 5)  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 : –

Slide 43


Theme migration from v6.0/v6.1 to 7.0 (3 of 5)  While migrating v6.0 theme to v7.0, context menu service may not work inside original theme’s “head.jspf”. In that case, you will have to replace the following line: – – And – –

with with

 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


Theme migration from v6.0/v6.1 to 7.0 (4 of 5)  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 (/bin)

Update the custom themes & skins to remove any hardcoded context root (e.g. path to JSPs, JavaScript/images/CSS files etc) From

To Bundle the EAR file again and redeploy on WAS

Change the display name, Context root for the themes/ Skins by updating application.xml

Slide 46


Slide 47

®

End of Presentation

IBM Innovation Center – Dallas, TX

© 2010 IBM Corporation

Page Builder theme - IBM

Page Builder theme - IBM

Suggest Documents

program - TED Page Builder

program - TED Page Builder

RJ10540 Cover Page - IBM Research

Vocabulary Builder Vocabulary Builder

global_Witness WWW.globalWitness.org march ... - TED Page Builder

global_Witness WWW.globalWitness.org march ... - TED Page Builder

Fax cover page (Business theme)

Fax cover page (Business theme)

Page 1 theme MPLEMENTATION RECORD, REPLAY, REFLECT ...

Fax cover page (Business theme)

theme & description theme & description theme ... - Praxis Auril

Theme

Page 1 IBM Copyright > ^ David Raften [email protected] Page 2

Theme:

Theme

Theme:

Builder Application

Builder Testimonials

TUNE BUILDER

TUNE BUILDER

modular oven brochure page 2 - The Owner-Builder Book

Page 1 FINANCE '72 Syndications Provide Major Builder Market By ...

Builder Application

IBM