My project over the last several years, the Portal Experience Modeler, allows users to depict UIs of web-based applications. Uses XML to model the sitemap and page layouts. The XML is transformed via XSLT into HTML, CSS, and Javascript.

1. IBM WebSphere Portal Experience Modeler Brian L. Brinker 30 January 2009

6. Portal Experience Modeler Architecture Portal Experience Modeler 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)

7. 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 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 Analysis Flow Content Structure

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

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

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

12. 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…

13. 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 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 Directories

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

15. 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)