pem overview20090130

© Copyright IBM Corporation 2008

IBM Global Business Services

IBM WebSphere Portal Experience Modeler

Brian L. Brinker

30 January 2009

Experience Modeler Overview | Confidential | December 21, 2009 2



Topics

Introduction- PEM defined- Skills needed- History- Architecture- Prototyping: essential components

Schema

Programming model

Eclipse functionality- Workspace, perspective, editors, and views- Toolbars

Project structure

Themes- CSS (“Theme”) Editor- Template nesting

Content Linking- Via the UI- Otherwise

Summary

Resources- Help docs- IBM BVA DitL QuickPlace




Portal Experience Modeler defined

Creates UI “visualizations” of web-based applications using standard, open source technologies

Stores site map and page layouts in a hierarchical data structure (a single XML file) – a tree; this tree may be queried for information about the design or transformed into another XML format as an input for other applications

Maintains all links between components; these links are portable from one project to another

Theme code dynamically generates navigation modules, based upon demo contents

Projects comprised of modular, loosely coupled components: themes, page subtrees, portlets, etc.

Does not assume that all users have no technical ability -- yet may be used in that manner

The IBM WebSphere Portal Experience Modeler (PEM) is a web application prototyping framework and development environment

with the following features

“The wonder is that we see these trees and do not wonder more.” -- Emerson

Introduction > PEM defined




Skills required

Author- Interacts with subject matter experts to gather relevant application knowledge- Analyzes the needs of the organization and accordingly designs the taxonomy of the various

application functionalities- Depicts compelling storylines for each persona’s desired capabilities- Captures/modifies images- May do light coding of HTML, Javascript, and CSS

Developer- Employs presentation-layer development skills such as HTML, CSS, JavaScript, & Flash in order

to create new content modules and themes- May use the XML skills XSLT and XPath to create new functionalities that leverage the

underlying XML data structure, or to heavily modify existing theme and portlet logic- Creates/manipulates graphical images

There are many ways to use the PEM; differing skill sets thus define two broad roles

Projects may be modified or constructed without the services of a developer through the use of pre-existing modules

Introduction > Skills required




Timeline

2nd Quarter, 2004 Portal Demo Builder

original design finished on time, proving intended functionality

2nd Quarter, 2006 PEM version 2.1 released

2004 2005 2006 2007

1st Quarter, 2004 Java Swing version of

PEM (the Portal Demo Builder) begins development

1st Quarter, 2005 Portal Demo Builder shown at

Software University session and open lab

Plans for Eclipse-based version 2.0 begun

3rd Quarter, 2007 PEM version 3.1

released, featuring new “Preview Centric” design approach and standard Eclipse editors

2009

Portal Experience Modeler development history

Introduction > History

The Portal Experience Modeler continues to grow in functionality and in adoption, worldwide

1st Quarter, 2009 Version 3.4 to be

released in Q1

1st Quarter, 2007 PEM version 3.0

development completed, porting the PEM to Eclipse

3rd Quarter, 2005 Last Portal Demo Builder

version (1.3) released Adopted by users in

Europe, Asia, and South America




Portal Experience Modeler

Portal Experience Modeler Architecture

Introduction > Architecture

Design XML

Portlet, Skin, and Theme XSLT Templates

File creation and editing

XML trans-formation

Output parsing Demo output

(HTML, images, CSS, JS, etc.)

The Portal Experience Modeler is powered by open source technologies

Demo project(new or from asset repository)




Analysis

Flow Content

Four essential components of a prototype

Introduction> Prototyping: essential components

This process is generally iterative and its steps may occur in any order after an initial analysis phase

Structure

Analysis: the process of gathering the information required to implement the remaining components

Structure: refers to the taxonomy of the design, or its hierarchical organization (the tree); into this framework goes the content

Content: the “portlets,” including text, images, and behavior

Flow: the series of links from one content module to the next that articulates the storyline of the prototype and emulates application behavior




PEM schema

PEM schema

The PEM schema reduces the risk that designs will be difficult or impossible to implement

The schema imposes the structure of a true web app




Programming model

The data structure that under-girds each PEM design contains useful information that may be harvested

The means to extract this information is via understanding of the PEM XML schema

The programming language used to transform PEM design XML is XSLT; XSLT uses XPath to traverse the XML tree structure (and to also do string and math operations)

PEM design metrics may be surfaced as HTML, SVG, or plain text

Examples of the kind of information that may be obtained:- Portlet lists and counts- Count of pages within the application- Meta data regarding SOA services used to implement certain portlet content, as gathered

The data structure of a PEM design reveals meaningful information about the prototyped application

The ability to surface application metrics differentiates the PEM from other design tools

Programming model




Typical Eclipse “perspective” configuration

Eclipse functionality > Perspective

Eclipse allows the user to configure their Experience Modeler perspective by adding/moving/removing views and editors

Modeler: XML element and attribute editor

“Portlet” Editor: XSLT template editor with logical link management and well-formed correction

Editors

Views

Navigator: allows access to project files; this shows your current Workspace

Properties: shows various element/file attributes, some of which are editable

Preview: shows real-time transform results for currently selected element in Modeler




Toolbars: Modeler

Eclipse functionality > Toolbar > Modeler

The toolbar is context-specific

“New” wizard: creates a new project or portlet

Save: writes the modified XML file to disk

Build: not used

Publish: transforms the entire demo and writes it to the output/ directory

Launch: spawns an MSIE browser window, loaded with the “splash” page

Preview: creates the view if not exists and previews selected element

Discard: removes unused portlets and skins from the project

Debug: transforms each portlet and skin in the project; reports errors found

Search: configurable; looks in folders, project, or entire workspace

Previous, Next, etc.: navigates to editors and views




Toolbars: Portlet Editor

Eclipse functionality > Toolbar > Portlet Editor

The Portlet Editor toolbar gives additional functionality

Save As: renames the portlet, managing the file name, template name, and other file references

Manage Links: creates logical links between elements

Make Well-formed: attempts to make all HTML tags conform to XML syntax rules

Same icons as with the Modeler, plus…




Project structure: shown in Navigator view

Project structure

Every PEM project follows this structure; directories should be neither manually added nor removed

includes: contains CSS used by the splash page and can be used by portlets

images: used by the splash page

Root: named for the project

Directories

output: holds the finished demo: HTML, images, CSS, etc.

portlets: contains each content module, including the files the portlets use

skins: like the portlets/ directory, holds the XSLT and any other files needed by the skin

temp: holds a saved copy of the last good version of the project.wem XML file

templates: dynamically generated portlet and skin XSLT

themes: modular themes that are available for use within the project

project.wem: the XML file that describes the sitemap and layout of each page




The Theme Editor

Themes > CSS (“Theme”) Editor

The Theme Editor allows the user to visually edit the CSS that controls the images and colors for themes that have an editor configuration

Click-map areas: activate the controls for that portion of the editable area

Editor tabs: govern which part of the theme to edit, ie: header, left navigation, footer, skins

Controls

Buttons: activate either a color picker popup for colors or a file dialog popup for images

Save, Save As: write the changes to the CSS files




Template nesting

Themes > Template nesting

Nested XSLT templates are the heart of PEM visualizations

Header

Search

Top nav

Utility link(s)

Left nav

Content

Footer

Panel(s)

Skin(s)

Portlet(s)

Theme XSLT templates may be nested in any way needed to achieve the desired look and behavior, just as the actual structure of a web application

Body

Footer link(s)




Theme navigation

Theme navigation modules surface the navigable elements within a design XML

Place, page, and subpage elements are typically rendered as HTML pages

Each element is assigned a unique identifier which is used as its file name in the output

The navigation modules use these unique identifiers to create unidirectional links to each page

Pages may optionally be linked-to, hidden, or shown but deactivated

The file name for each HTML page is based on the order of that element and its ancestor elements within their siblings in the design XML




Content Linking

Experience Modeler unidirectional logical links are formed between content modules, instead of from content to pages – this frees the user from having to know what page the link should target

Links persist from one demo project to another if the target exists and is unique

There are 26 types of links; 24 of these are maintained by the PEM UI

Physical links are never used in PEM projects since they are difficult to maintain; logical links are used instead and are maintained by the application




Summary

Summary

Modular theme and content (portlet) templates allow quick and easy demo construction from previously existing assets

The XML data structure that underlies each design contains useful information that may be surfaced via several means

Logical links within content modules created by the PEM are robust and portable to other PEM projects

Eclipse environment allows the user to configure it as needed

Theme template nesting allows construction of any page design

Extant content and support resources abound




Resources

PEM Help (Help > Help Contents > WebSphere Portal Experience Modeler Help)

IBM Business Value Assessment (BVA) Day in the Life (DitL) QuickPlace (need to register at http://ibm.com/ first, then get registered for the QP)

https://www-1.ibm.com/QuickPlace/bvaditl/Main.nsf

Contacts: - Brian Brinker [email protected] Carlos Osorio [email protected] Stuart Jeffery [email protected] Peter Funke [email protected]

PEM help assets in the tool and on the web

New content assets and help material are added every month

Resources

http://ibm.com/

https://www-1.ibm.com/QuickPlace/bvaditl/Main.nsf

mailto:[email protected]




pem overview20090130

Technology