Wp8.5 p06 themes basics

Themes Basics
IBM WebSphere Portal 8.5 Workshop
IBM Ecosystem Development
Duration: 45 min

© 2014 IBM Corporation2
Agenda
 Theme Overview
— Intro
— Theme Optimization
 Basics of Theme Framework
— Static Resources & WebDAV
— Templates
— Modules & Profiles
— Dynamic Content Spots
— Portlet Dependencies
— Best Practices
 Theme Optimization Analyzer

A Brief Journey of Portal Themes and Layouts (version 6.1 to 8.0)
V6.1
Theme Customizer
Dynamic QuickLink Shelf
Search Widget (Dojo)
Web 2.0 Theme, LiveText,
Themes in .war files
CSA/SSA concept
V7.0
WebDAV support,
Lesser OOTB styles than V6.1.5
Restructuring of folder
Deprecation of good old themes
“Portal” Theme only for Administrative UI
V6.1.5
Introducing Page Builder UI
Navigation iWidget
Hybrid Approach towards
aggregation
Lotus OneUI based
V8.0
Introducing Theme 8.0 using
modularization architecture, replace
all previous themes

Themes and Skins
 Build your own themes to define the overall look and feel of the pages
 Branding, logos, colors, fonts, navigation, headers, footers
 Theme can be profiled to change its behavior
 Each micro-site and even page can have different themes
— Allows you to target the audience
 Skin defines the contour and actions of a portlet (content/application)

Theme & Skin Elements
 Theme artifacts
— Navigation
— Search bar
— User Information
— Footer
— Static Resources
 Skin artifacts
— Shown “around” a portlet
or piece of content on
the page

Portal 8.5 Theme
 Theme Architecture in WebSphere Portal 8.5 did not change
— Same theme modularization architecture since Portal 7.0.0.2
— The main focus in this release was on simplification, serviceability and mobile support
for Worklight.
 Ships one theme – named “Portal 8.5”
— Out-of-the-box comes with 7 visible profiles
— Dynamic and static files
● Static templates: theme, skin, layouts
● WebDAV editing
— Dynamic content provides means to inject server-side logic into static templates
without inserting code
 Key features
— Toolbar Isolation / Authoring Experience
— Modularization (Theme Optimization)
— Theme analyzing capabilities
— Dojo 1.9.x in the box
— jQuery 1.10.x in the box
Note:
WebSphere Portal is framework agnostic as
much as possible to allow customers to choose
whichever framework they want.

Theme Optimization
 The modularized theme provides a very flexible framework
— Minimizes download size by giving you the control to specify just the capabilities that
are needed for a certain scenario or use case
— Minimizes the number of requests by combining necessary resources.
— Modules can be developed independent of each other
 Theme optimization uses Modules and Profiles to achieve flexibility that allows
to achieve a better theme performance.
— Ability to turn on and off an arbitrary number of features for certain pages
— Ability to pull in theme resources only when needed (deferred load)
— Minimize the number of requests to load required elements
● Resource aggregation
— Minimize download size
● Control the capabilities that are needed for a certain scenario

Theme Optimization - Terminology
 Modules
— Components of the theme defining a single feature (or capabilities) that contributes
various artifacts to the page
● Javascript, CSS, markup
— Can be reused across multiple themes
● Global (System-wide) vs. Scoped (Theme specific)
— Three ways to define a Module
● plugin.xml, contribution json file, simple module (folder structure)
 Profiles
— Set of modules that are scoped to a theme or page
● JSON file
— A default profile is used if no page specific profile has been defined.
 Capabilities
— Contributed as part of individual modules
— Previously defined as theme metadata
● For example: the Dojo Module defines the capability “dojo”

Theme Resources
 Static Resources
— JavaScript, CSS, HTML Markup, images
— Templates for page rendering
— Stored in WebDAV server
 Dynamic Resources
— Rendered through JSPs
— Fills in areas in the web page
— Stored within a WAR file
 Dynamic Content Spot References (Optional)
— Allows for indirection of the JSP with the static
template
Header / Navigation
Page Layout
Footer

WebDAV
 Web Server (in this case Portal) acts like a generic file server
— Clients can "mount" shared folders over HTTP that behave much like other network file
systems
— Adobe Dreamweaver and Photoshop can mount WebDAV for direct editing
 Theme static resources are stored within a WebDAV server
 Main Portal 8.5 WebDAV entry point
— http://<host_name>:<port>/wps/mycontenthandler/dav/fs-type1
● For themes, skins, layout templates, common-resources
 Administrative WebDAV entry points (not to be used for themes configuration!)
— used to define new themes and skins
— http://<host_name>:<port>/wps/mycontenthandler/dav/themelist/
— http://<host_name>:<port>/wps/mycontenthandler/dav/skinlist/

WebDAV – How it Works
 The actual OS functionality is an implementation detail of the OS. Typical WebDAV
clients map the WebDAV hierarchy to the filesystem. Others have special WebDAV
browsers (e.g. Dreamweaver)
Tool
i.e. notepad.exe
TextPad
WebDAV
Client
WebDAV
Servlet
WebDAV
ServiceWebDAV
ServiceWebDAV
Service
Operating System
HTTP
WebSphere Portal
Any system tool e.g. WebFolders
GNOME
WebDrive
...
DB

Static Resources Reconfiguration
 The Theme can be reconfigured to use a WAR file for static
resources
 In this case it is recommended to use one EAR file with two distinct
WAR files, one for dynamic resources, one for static resources.
 Important Portal schemas used within themes
— res: used to load/include dynamic resources. This will cause the servlet engine
to be invoked (request dispatcher) and therefore will evaluate JSPs
— dav: used to load static resources from WebDAV
— war: used to load static resources from a WAR file. If a JSP is loaded with this
schema it will not be evaluated and returned as is.
● for security purposes one has to explicitly define within each WAR file which resources are
allowed to be served back.

Static Templates
 Static templates are stored in WebDAV
 Themes
— theme.html in
/fs-type1/themes/<theme-name>/
 Skins
— skin.html in
/fs-type1/themes/Portal8.5/skins/<skin-name>/
 Layouts
— layout.html in
/fs-type1/themes/Portal8.5/layout-templates/<layout-name>/
 When editing using OOB templates, remember they are localized!
— You must edit the localized template to see changes
— Localized templates example:
/fs-type1/themes/Portal8.5/nls/theme_en.html

Theme Templates
 theme.html

Skins
 skin.html

Layouts
 layout.html

Layouts – Location of Files
 Configure which layouts to
show in the palette or add your
own in layouts.json within
WebDAV
 Add your own layout templates
or change existing ones in the
layout-templates folder of
WebDAV

Dynamic Content Spots
 Dynamic spots
— Microformat defined in theme.html and other static files
— <a rel='dynamic-content' href='<URI>'/>
— Parsed at runtime, href resolved and response streamed out
 Dynamic spot registry
— Modules are able to contribute dynamic content spots with the
— contribution type dyn-cs from within a plugin.xml.
— Deprecated: WAS environment provider holds dynamic content spot mappings
 Examples
— <a rel='dynamic-content' href='res:/MyTheme/banner_nav.jsp'/>
— <a rel='dynamic-content' href='dyn-cs:id:bannerNav'/>

 Dynamic Content Spot Registry with Modules
— Location of the dynamic content spot's default theme
plugin.xml:
<PortalServer>/theme/wp.theme.themes/default85/inst
alledApps/DefaultTheme85.ear/DefaultTheme85.war/WEB
-INF/plugin.xml
— The module that defines the dynamic content spots must be
part of the profile
— Allows to easily switch between different “implementations”
of the same dynamic content spot id by using a different
profile
— Allows to overwrite a dynamic content spot by overriding the
id within a new module.
Note: The new module must prereq the module with the old dynamic
content spot

 Theme 8.5 plugin.xml
theme_en.html
<PortalServer>/theme/wp.theme.themes/default85/installedApps/
DefaultTheme85.ear/DefaultTheme85.war/themes/html/dynamicSpots
Theme Web App (.ear)

Rendering Flow
Request
Default.jsp
theme.html Various dynamic
Content spots JSPs
layout.html
Theme WAR Theme WARPortal
Portal
Fetch info
from models
such as
navigation nodes
skin.html
Include portlets
WebDAV WebDAV WebDAV Portlet WAR
EL Beans, Model API,...

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.
— Doesn't support all features of the
plugin.xml or json definition
 Readme files within all well-defined
folders of WebDAV provide inline help
right where you need it.

Simple Modules
 Simple modules provide 80% of the capabilities 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

Comparison of ways to define a Module
 System Module - plugin.xml  Theme Module - theme.json
 Theme Module - Simple  File Content of Simple Module
title.en=Skin Action Demo
description.en=...
jquery_1_10_2
localization.properties:
prereqs.properties:

Theme Profiles
 Out-of-the-box theme profiles
— Lightweight: This profile includes the minimal modules
required to render a portlet on a page.
— Lightweight with Dojo: Same as Lightweight but
additionally provides base Dojo.
— Deferred: This is the default profile. This will load the same
modules as the lightweight profile in view mode, but when
entering edit mode or opening the Actions menu will load
the deferred modules as well.
— Deferred with Dojo: Same as Deferred but additionally
provides base Dojo.
— Basic Content: This profile contains everything required for
viewing and editing content as well as capabilities such as
tagging & rating, person card and social rendering.
— Basic Content with Dojo: Same as Basic Content but
additionally provides base Dojo.
— WebDock: Use this when you want to use the web dock
portlet.
— … plus 8 hidden profiles used internally
 “Full” profile was removed from the
system
— To avoid performance problems.
— Use Basic Content profile as the starting point
● use Theme Analyzer portlet to determine required
modules
Note:
Dojo remains the strategic
JavaScript platform, but …
● In Portal 8.5 there is no requirement for
loading Dojo on the page even in the Page
Edit Mode
● Some components still require Dojo, for
example the WCM inline editing

Theme Optimization – Deferred Modules/Profile
 The Module Framework allows a profile to specify
whether or not it wants to make a particular module
deferred.
 By default, a module is loaded when the initial page
loads, but modules that are specified as deferred
modules are loaded after the page loads, triggered
through JavaScript code (part of the i$ JavaScript API
specification for Module “wp_client_ext” ) :
 Only a subset of contributions can be loaded deferred:
— CSS
— JavaScript code
— non-head contributed markup
{ "moduleIDs": [
"getting_started_module",
"wp_theme_portal_85",
"wp_dynamicContentSpots_85",
"wp_toolbar_host_view",
"wp_portlet_css",
"wp_one_ui",
"wp_one_ui_dijit",
"wp_client_ext",
"wp_status_bar",
"wp_theme_menus",
"wp_theme_skin_region",
"wp_theme_high_contrast",
"wp_layout_windowstates",
"wp_portal",
"wp_analytics_aggregator",
"wp_oob_sample_styles",
"wp_ic4_wai_resources",
"wp_worklight_ext",
"wp_social_rendering_85",
"wp_sametime_proxy"
],
"deferredModuleIDs": [
"wp_toolbar_host_edit",
"wp_analytics_tags",
"wp_contextmenu_live_object",
"wp_content_targeting_cam",
"wcm_inplaceEdit"
],
.....
]}
profile_deferred.json

Portlet Dependencies on Theme Capabilities
 Often portlets depend on certain client-side features/capabilities to be available in
the page such as the existence of Dojo or jQuery
 With the concept of portlet dependencies a portlet developer can define which of
those are required so that the portlet will only be rendered if all requirements have
been fulfilled
 Portal offers a filtering feature for standard portlets (JSR 168/286)
— Filters are defined in a set of portlet preferences that declare the capabilities the portlet
depends on
 The enduser is notified with an in-place message in case the prereqs are not
fulfilled. The message contains details about what is missing
 Dependencies can only be set on capabilities, not modules
 A dependency is defined with two preferences per capability, each containing the
<name> and <value> elements.
— <preference> 1 defining the capability name
<name>capability.[sequence-number].id</name><value>”capability-name”</value>
— <preference> 2 defining the capability value
<name>capability.[sequence-number].minValue</name><value>”capability-value”</value>

Portlet Dependencies on Theme Capabilities
 Here the example lets the system
know that the portlet can only be
rendered when at least Dojo 1.6
and OneUI 3.0.1 is available on the
page
 If it is not on the page, an error
message is rendered letting the
user know what capabilities are
missing.
Note: In addition to capabilities preferences,
the portlet must define a preference that
describes whether the portlet handles the
lack of the capabilities itself or not. The
preference:
capabilities.selfManaged must be set
to false for the handling to be delegated to
Portal.

Best Practices
 Maximize performance by removing unused features
 Modularization of Portal CSS, JavaScript, and configuration/markup code
enables safe removal of features without touching code
 CSS and JavaScript for included features are combined at runtime to
reduce requests and download size
 Customers can use the modularization framework to add your own features
to the theme in a performant, maintainable fashion
 Instead of using the theme default profile you can also define an arbitrary
profile per page via the page properties dialog.

Best Practices - Putting it all together
 The profile for a given page is selected by using the theme default or - when
defined - using the one defined as page metadata. Example:
resourceaggregation.profile=profiles/profile_deferred.json
 The selected profile is read and all modules that need to be served up initially
are calculated.
 As part of this process, not only system modules are loaded but also theme
specific modules defined through the theme.json file (in fact any json file).

Best Practices - Putting it all together
 Next the theme.html file is read and processed for dynamic spots.
 The co:head dynamic spot writes out all resources applicable for the
<head> section of the page. It takes all recognized modules including their
dependencies into account.
 At last the co:config dynamic spot writes out all remaining resources of
the modules applicable to the <body> section of the page.

Best Practices - Putting it all together - Flow
1) WebDAV: Theme module folder -
every JSON file is picked up and
parsed for theme modules.
2) WebDAV: Simple Modules folder
3) WebDAV: Profile file location
4) Content of the deferred profile
5) Location in the theme.html where
all aggregated <head> resources are
injected
6) Location in the theme.html where all
aggregated config resources are
injected
1
2
3
4
6
5

Theme Optimization Analyzer Portlet
 Allows to look at all aspects of
the theme framework including
pages, profiles, modules, etc.
 Allows to display rich validation
report which analyzes the theme
for well known issues
 Allows for easier development
and troubleshooting
— Client-side JavaScript tracing
— Control Center
● Invalidate caching
● Dynamic Content Spot debugging
● Reporting
— and more...

Theme Analyzer - Examine Modules by Profile
 Provides comprehensive
Theme information
— Theme details
— Theme profiles
● including hidden
— Profile details
 Module Explorer
— Drill-down to inspect
● Modules by profile
● Module details
● Module structure and
dependencies
● Module sizes
Hidden profiles
Module Explorer

Theme Analyzer – Theme Validation Report
 Reports show errors,
warnings and informational
messages about the theme
and its corresponding
artifacts:
— Profiles
— Modules

Reference Materials
 Developing Themes for WebSphere Portal
—
http://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=Developing%20Themes
%20for%20WebSphere%20Portal
 IBM Knowledge Center (Community Articles, Product Documentation, Learning Center)
— IBM WebSphere Portal & Web Content Manager 8.5:
http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/welcome/wp_welcome.html
 DigitalExperience Developer on IBM developerWorks
—
http://www.ibmdw.net/digexp/

Wp8.5 p06 themes basics

More Related Content

What's hot (20)

Similar to Wp8.5 p06 themes basics (20)

Recently uploaded (20)

Wp8.5 p06 themes basics