Download - 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
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 3
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 4
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 5
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 6
IBM Global Business Services
© Copyright IBM Corporation 2009
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)
Experience Modeler Overview | Confidential | December 21, 2009 7
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 8
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 9
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 10
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 11
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 12
IBM Global Business Services
© Copyright IBM Corporation 2009
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…
Experience Modeler Overview | Confidential | December 21, 2009 13
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 14
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 15
IBM Global Business Services
© Copyright IBM Corporation 2009
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)
Experience Modeler Overview | Confidential | December 21, 2009 16
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 17
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 18
IBM Global Business Services
© Copyright IBM Corporation 2009
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
Experience Modeler Overview | Confidential | December 21, 2009 19
IBM Global Business Services
© Copyright IBM Corporation 2009
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