slide deck

IBM Digital Experience Version 8.5
May 9, 2014
What's New in Themes in WebSphere Portal 8.5
Stephan Hesmer
© 2014 International Business Machines Corporation
1
Agenda
●
Overview
●
TopNavigation Removal
●
Profile Updates
●
Dojo Story
●
Unsupported themes
●
New features, how they make themes simpler and how do they differ from before
●
●
Simplification, Simplification, Simplification
Theme Analyzer updates in 8.5
Overview
 Theme Architecture in WebSphere Portal 8.5 did not change. It has been the same since
7.0.0.2.
– Modularized Themes
 This should allow you to migrate more quickly and with less pain than before.
 There have been no major changes, the main focus in this release was on simplification,
serviceability and mobile support for worklight.
TopNavigation Removal
 The TopNav known from the old themes has been removed from desktop view. The TopNav itself still exists, but it is
hidden on desktops.
 If a you want the TopNav back then you can update the dynamic content spot definition in your themes plugin.xml
 From:
<sub-contribution type="markup" ref-id="85theme_topNav">
<uri value="mvc:smartphone/tablet@res:{war:contextroot}/themes/html/dynamicSpots/navigation.jsp?
rootClass=wpthemeHeaderNav&rootLabel=Portal&startLevel=0&primeRoot=true"/>
</sub-contribution>
 To:
<sub-contribution type="markup" ref-id="85theme_topNav">
<uri value="res:{war:context-root}/themes/html/dynamicSpots/navigation.jsp?
rootClass=wpthemeHeaderNav&rootLabel=Portal&startLevel=0&primeRoot=true"/>
</sub-contribution>
Profile Updates
 A few new standard profiles have been added. The main ones are:
– Lightweight and Lightweight with Dojo
– Deferred and Deferred with Dojo
– Basic Content and Basic Content with Dojo
 Full Profile was removed from the system
– We hope that this will avoid performance problems. Instead you need to identify the module you need by using the
Theme Analyzer and add that to your own custom profile
– A good starting point is the Basic Content Profile
 Profiles can be hidden as well now. The ones listed above are not hidden, but there are around 8 more hidden profiles
available in the system.
– Within the Edit Page Properties Dialog one can only select visible profiles.
– The hidden ones can be seen in the Theme Analyzer.
– If you want to set a hidden theme on a page you can do this as before by setting the page metadata
“resourceaggregation.profile” to point to the profile file.
Dojo Story
 Dojo 1.9 is the new level of Dojo that is supported
– We ship with 1.9.3, we are updating to a new third dot release in a CF if required. No major updates.
 With the new toolbar isolation in WebSphere Portal 8.5 there is no requirement for Dojo on the page
anymore even within Page Edit Mode.
– In WebSphere Portal 8.0 we only had Page View Mode dojoless, and Page Edit Mode still loaded
Dojo into the main browser DOM
 Unfortunately not all component were rewritten to be dojoless. The following components and features still
require Dojo and will load it into the main browser DOM. If you want a truly dojo free theme you cannot
use those features.
– Module: wcm_inplaceEdit (part of profile Deferred and Basic Content)
– Module: wp_federated_documents_picker
– Module: wp_content_mapping_picker
– Search and Tag Center Profile (which also include enabler/builder)
Unsupported Themes
 All 6.x Themes are no longer supported, even if they were shipped with Portal 7.
– The only supported themes are: PageBuilder2, Portal 7.0.0.2, Portal 8.0 and Portal 8.5
• What guidance will be provided provide to prospective WebSphere Portal and Web Content Manager V8.5
customers on how to plan and manage the theme updates they'll need to make when upgrading from
previous versions to the new modular theme?
1. There is still support for older themes on WebSphere Portal V8.0.0.1.
2. Regardless of the theme or Portal environment versions you are using, not all new V8 features are
supported if the theme is not modularized. If you want to take advantage of new features, you need
to move to the new theme architecture; this will also be a benefit to migration of themes going
forward.
3. Video on Developing Themes for Exceptional Web Experience: https://ibm.biz/BdRMtL
4. Understanding the Modular Theme Architecture: https://ibm.biz/BdRMtC
5. Article: How to convert a theme to the modular architecture introduced in WebSphere Portal 8.0:
http://www.ibm.com/developerworks/library/mo-modular-themes/index.html
New Feature List
 Dynamic Content Spot Updates
– Definition of dynamic spots now in modules
– Dynamic Content Spot Debugging
– mc datasource (Module Choice)
 Simple Modules
 WebDAV readme files
 Theme Validation now prominently visible in the main
admin toolbar menu
 Theme Analyzer Improvements
– Size Explorer
– Cache Groups
– Enhanced Validation Capabilities
 JSON Schema files in WebDAV
– Control Center
 Device class equations
– Client Tracing
 New EL Beans
– Export Module Titles and Descriptions as CSV
 Programming Model updates
 Miscellaneous (Resiliency, ...)
Dynamic Content Spot Updates
 Dynamic Content Spots can be defined as part of a module definition since 8.0.0.1. In Portal 8.5 we switched the
OOB Theme to use this feature exclusively since this provides an inline mechanism to provide the mappings instead
of storing them in the WAS REP.
– Removed from WAS Resource Environment Providers
– Part of a new module which is define in the theme war file's plugin.xml. Content snippet:
<extension id="wp_dynamicContentSpots_85" point="com.ibm.portal.resourceaggregator.module">
<module id="wp_dynamicContentSpots_85">
<contribution type="dyn-cs">
<sub-contribution type="markup" ref-id="85theme_footer">
<uri value="res:{war:context-root}/themes/html/dynamicSpots/footer.jsp"/>
</sub-contribution>
<sub-contribution type="markup" ref-id="85theme_crumbTrail">
<uri value="res:{war:context-root}/themes/html/dynamicSpots/crumbTrail.jsp?
rootClass=wpthemeCrumbTrail&startLevel=2"/>
</sub-contribution>
<sub-contribution type="markup" ref-id="85theme_topNav">
<uri value="mvc:smartphone/tablet@res:{war:context-root}/themes/html/dynamicSpots/navigation.jsp?
rootClass=wpthemeHeaderNav&rootLabel=Portal&startLevel=0&primeRoot=true"/>
</sub-contribution>
...
</contribution>
</module>
</extension>
–
Dynamic Content Spot Debugging
 Dynamic Content Spots can now be visually debugged. This feature can be turned on and off using the Theme
Analyzer's Control Center.
– This allows to identify the part on the page that were contributed by what dynamic content spot and also the
location of the dynamic content spot
Dynamic Content Spot Updates
 The Dynamic Spot Content Mapping Service was enhanced to allow the filtering of dynamic spots based on the fact
whether the module associated with the dynamic spot is part of the current profile or not.
 The format used in 8.0 is deprecated. Example:
– res:/wps/themeModules/modules/asa/jsp/asaPortlet.jsp, wp_analytics
 New format uses the mc schema which stands for module choice
– mc:wp_analytics@res:/wps/themeModules/modules/asa/jsp/asaPortlet.jsp
Simple Modules
 Quick and simple way to define a new module through folders and
files.
 Simply create a new folder, drop a file in it and be done.
– Still requires clearing the Theme Cache by using the Theme
Analyzer
 readme files within all well-defined folders of WebDAV provide
inline help right where you need it.
– Also available in contributions, layout-templates, profiles, and
the main directory
Simple Modules
 The idea behind simple modules is to provide 80% of the capabilities of modules through a simpler model making it quicker
and more 'natural' to use modules.
 High level overview of supported features
– prereq definition, title and description, capabilities
– head, config and menu contributions supported (nothing else)
– Resources can be defined in the two formats (same for js and css)
• *.js/*.js.uncompressed.js
• *.min.js/*.js
– Device classes are supported
 Not supported
– No versioning of modules or prereqs
– No active content such as JSPs
 All details are documented in the readme.txt in WebDAV and the Infocenter.
JSON schemas
 JSON schemas have been made available to verify the JSON
files of profile and module contributions for validity.
 They can be found in WebDAV in the folders contributions
and profiles
Device class equations
 Device class equations provide an enhanced device selection mechanism. Example equations:
– android+smartphone
– worklight+(ios/android)
– (android/ios)+smartphone+!blackberry
 Equations can be used
– in module sub contributions to select an individual resources
– within a mvc datasource uri to delegate more fine-grained to certain endpoints
– As part of the portal:if tag within JSPs
New EL Beans
 There are two new EL Beans introduced
– ProfileListBean
– ProfileBean
 Example:
<div>Current Theme: ${wp.themeList.current.title}</div>
<div>Current Profile URI: ${wp.themeList.current.profiles.current.uri}</div>
<div>Current Profile RelativePath:
${wp.themeList.current.profiles.current.relativePath}</div>
<div>Current Profile Title: ${wp.themeList.current.profiles.current.title}</div>
<div>Current Profile Description: ${wp.themeList.current.profiles.current.description}</div>
<div>Current Profile Metadata (Hidden):
${wp.themeList.current.profiles.current.metadata['com.ibm.portal.Hidden']}</div>
<div>
All Profiles
<c:forEach var="profile" items="${wp.themeList.current.profiles}"
varStatus="profileStatus">
${profile.title} / ${profile.relativePath}<br/>
</c:forEach>
</div>
Programming Model updates
 Contribution URIs for Web Modules
– {war:context-root}
– This variable fetches the context root of the containing WAR file and inserts it in place. It only works for modules
defined as part of a WAR file. This does not work for modules defined in WebDAV or somewhere else in the
classloading hierarchy, for example, a shared application.
 Example:
<contribution type="head">
<sub-contribution type="css">
<uri value="res:{war:context-root}/css/helloWorld.css" />

<uri type="rtl" value="res:{war:context-root}/css/helloWorld_rtl.css" />

<uri deviceClass="tablet+iOS" value="res:{war:context-root}/css/helloWorld_iPad.css" />
</sub-contribution>
<sub-contribution type="js">
<uri value="res:{war:context-root}/js/helloWorldHead.js" />
</sub-contribution>
<sub-contribution type="markup">
<uri value="res:{war:context-root}/markup/helloWorldHead.html" />
</sub-contribution>
</contribution>
Miscellaneous
 Javascript isolation within combined requests
 Individual resources from modules cannot crash the full theme anymore
 Load only JSON files in well known folders such as contributions/profiles
 Missing ending slash on theme ref metadata will not cause error any longer
 Greater Performance for development mode
 Profile Description is shown in Edit Page Properties
 All modules received title and descriptions
 Minor updates to profile and module JSON/XML handling. E.g. capabilitys can now be written
also correctly like this capabilities
 No more Java Code in OOB theme JSPs
OOB Theme Modules and their dependencies
 The best view of all modules and their dependencies can be retrieved by using the Theme Analyzer.
 Additionally there is a doc article that shows (almost) all modules in the system
– http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/mp/dev-theme/themeopt_oob.dita
 Because many customers had trouble to find the module they need we introduced a new usecase based
view that explains it more high level and only explains the ones that make sense in a profile
– http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/mp/devtheme/theme_modules_features.dita
Theme Analyzer Improvements
 The Theme Validation Report Feature was introduced in Version 2.0 of the Theme Analyzer for 8.0.0.1.
 In WebSphere Portal 8.5 the Theme Validation Report capability was extended:
– More validation messages such as “EJPNO1021W: Unordered dynamic content spots found“
– Syntax checking of profiles and modules show up in the reports
 Report count now displayed in the admin navigation menu of the toolbar, immediately showing issues within the theme
or theme artifacts
Size Explorer
 The Size Explorer allows to analyze modules within profiles with regards to their size relative to
each other.
Cache Groups
 The cache group explorer allows to analyze resources of the same type which are combined into one request for better
performance. Each resource can set HTTP cache headers. Identical sets of cache headers are grouped into cache
groups. When resources are combined, the cache group with the least cachability is used.
Control Center
 Provides development utilities around themes
to easily control various capabilities. Details
can be read on the right as everything is
explain in the screen.
Client Tracing
 Instead of setting client traces via WAS REP settings as required in 8.0 one can set client traces through the UI below.
Those settings are immediately available without server restart.
 'Click to copy' allows to turn on traces on another browser. This is a two staged process. First you have to turn on the
uncompressed resources in order to be able to log traces. Second you need to turn on the actual traces on that
browser. Simply copy the provided scriplets and execute them.

Download Report