05 - Page Builder Customization1

8/9/2019 05 - Page Builder Customization1

1/47

2010 IBM Corporation

IBM Innovation Center Dallas, TX

Application Integrationwith WebSphere Portal V7.0

Page Builder theme customization


2/47

WebSphere Portal | IBM Innovation Center - Dallas

Slide 2

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


3/47


Slide 3

A brief journey of Portal themes and Layouts (version 5.1 to version 7.0)

V5.1Easy to understand

Light Weight, table based layouts

V6.0Page Meta Data, Theme Policy

Flyout, CSS, Launch Button

table based layouts

V6.1Theme Customizer

Dynamic QuickLink Shelf

Search Widget (Dojo)

Web 2.0 Theme, LiveText,Themes in .war files

CSA/SSA concept

V7.0WebDAV support,

Lesser OOTB styles than V6.1.5

Restructuring of folder

Deprecation of good old themes

Portal Theme only for Administrative UIV6.1.5

Introducing Page Builder UI

Navigation iWidget

Hybrid Approach towards

aggregation

Lotus OneUI based


4/47


Slide 4

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 wewon't be shipping:

Previous CSA theme, named PortalWeb2

Mashup

Integration for stand alone Mashup

themes


5/47


Slide 5

CSA2 Theme Architecture: Web Aggregation

FrameworkClient Browser Portal Server

Navigation Content

Layout Fragment


6/47


Slide 6

Presentation Layer - the 'Theme (Web 2.0)

Client Browser Portal Server

Navigation Content

Layout Fragment

JSP

HTML

JS

CSS

XSLT


7/47


Slide 7

Server-Side Aggregation - SSA


Navigation Content

Layout Fragment

JSP

JS

CSS

ModelSPI/J

SPtags


8/47


Slide 8

Client-Side Aggregation - CSA


Navigation Content

Layout Fragment

JSP

JS

CSS

bootstrap

REST/AT

OMA

PI

XSLT


9/47


Slide 9

Page Builder - Hybrid


10/47


11/47


Slide 11

Page Builder2 - CSA2


12/47


Slide 12

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 statictemplates without inserting code.

Based on Dojo 1.4


13/47


Slide 13

Page Builder theme

The Page Builder theme is a replacement of the Tab Menu - PageBuilder 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 canbe 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


14/47


Slide 14

WebDAV

Web Server/Portal Server (in development) acts like a generic file

server

Clients can "mount" shared folders over HTTP that behave much like othernetwork 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/


15/47


Slide 15

WebDAV How it works technically

Tooli.e. notepad.exeTextPad

WebDAV

ClientWebDAV

Servlet

WebDAV

ServiceWebDAV

ServiceWebDAV

ServiceDB

Operating System

HTTP

WebSphere

Portal

Any system tool e.g. WebFolders

GNOME

WebDrive

...

wp.webdav.ear wp.portaladmin.war

( more services in the future)

The actual OS functionality is an implementation detail of the OS. Typical WebDAV

clients mapthe WebDAV

hierarchy to the filesystem. Others have special WebDAV

browsers (e.g.Dreamweaver)


16/47


17/47


Slide 17

Theme.html example:

Dynamic spotsfor:

Banner Navigation

SearchCommon Actions

These dynamic spots map to JSPsstored in the Page Builder ear.

The links to the localized

templates,this is a shortened

version, usually lists all 31 locales.

This is a variable that will be

replaced with localized text

during the build process to create alocalized template.

Bidi replacement variable

This dynamic spot does not map to aJSP, but a reserved word for the livetext parser:lm:template.

Bidi replacement variableBidi and locale buildreplacement variables


18/47


Slide 18

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.


19/47


Slide 19

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


20/47


Slide 20

Page Builder Basics - Navigation Widget

Often Requested dropdown

Configurable rendering

Supports top level links

Supports dropdown

navigation menus

Drag and drop pagereordering

Works against dojotreeModel

backed by adatastore

Allows reuse against differentbackends

Works in Portal and Mashup

pages


21/47


Slide 21

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\ibm-web-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


22/47


23/47


24/47


Slide 24

Page Builder Basics - Change Layout


25/47


Slide 25

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


26/47


Slide 26

Page Builder Basics - Rendering Modes

Pages assigned the Page Builder theme can be rendered in Client Side Agg regation (CSA)mode or Server Side Agg regation (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


27/47


Slide 27

Page Builder basics - Menus

Page Builder basics - Menus

W bS h P l | IBM I i C D ll


28/47


Slide 28

Browsing themes/skins using WebDAV : Overview

MS Windows built-in

W bS h P t l | IBM I ti C t D ll


29/47


Slide 29

Creating a New theme using WebDrive : Overview

Creating an empty folder

wwctp.csa2.theme

in X: drive

First we copied csa2.theme

folderinto 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.



30/47


Slide 30

Theme related WebDAV layers

Themelist

Skinlist

Portal ReleaseDB

FileStore

XmlAccess

Theme/Skin Descriptors

com.ibm.portal.theme.template.ref=dav:fs-type1/...

Virtual

f iles

File Cache

Themes and SkinsPortlet



31/47


Slide 31

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.


32/47

WebSphere Portal | IBM Innovation Center Dallas


33/47


Slide 33

Creating a New Style : 2 of 3



34/47


Slide 34

Creating a New Style : 3 of 3



35/47


Slide 35

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



36/47


Slide 36

Creating a New Layout : Overview (2 of 2)

Copy C:\temp\4ColumnEqual

into X:\

as shown:



37/47


Slide 38


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



38/47


Slide 39


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 asperformance 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 aconcern, hence make sure IHS (HTTP Server) caching is ON for JS& CSS caching.



39/47


Slide 40

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



40/47


Slide 41

Firebug Inspector


41/47



42/47


Slide 43

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 :



43/47

p |

Slide 44


While migrating v6.0 theme to v7.0, context menu service may not

work insideoriginal themes head.jspf. In that case, you will have to replace the following line:

with

And

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)



44/47

p |

Slide 45


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.



45/47

p |

Slide 46

Updating custom themes and skins to remove hardcodedcontext 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

Change the display name,

Context root for the themes/

Skins by updating

application.xml

Bundle the EAR file again

and redeploy on WAS



46/47

p |

Slide 47


47/47

2010 IBM Corporation

IBM Innovation Center Dallas, TX

End of Presentation

05 - Page Builder Customization1

Documents

Transcript of 05 - Page Builder Customization1