IBM Connect: Designing and Developing Portal Themes

IBM Connect had a great session on implementing portal themes in WebSphere Portal 8.  Stephan Hesmer, Portal Frontend and Design Lead from IBM presented a technical session on implementing themes and skins.  Portal themes are an extremely powerful, efficient and effective way to implement user experiences in WebSphere Portal.

Key points that resonated from the session are:

The following technologies and concepts are implemented

• Modularization
• Portlet and iWidget support
• Static html templates for theme, skin and layouts

Theme modularization is a new and key capability which enables optimization via 3 aspects:

1. It minimizes download size (only download what is needed and turn of features not needed)
2. It minimizes requests (Resource aggregation reduces http requests)
3. It runs less code which means better performance

The modularization can reduce page sizes and number of requests by up to 70% over the portal 7 theme.  This is a very welcome change which allows you to  optimize your themes without having to update code.

Theme 101

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

WebDAV is used for static files

• Theme war files have been split into dynamic and static content.  Dynamic resides in a WAR file while CSS, HTML, JavaScript etc are stored in WebDav
• This allows for separation of concerns.  Static resources do not need code updates to deploy
• WebDAV server acts like a generic file server

Static Template Details

There are 3 localized  templates out of the box.

• Themes (theme.html)
• Skins (skin.html)
• layout (layout.html)

The static content templates can be updated to modify overall layouts.  They will also reference dynamic content spots which in turn reference JSPs.

EL Bean

A Theme Expression Logic (EL) Bean has been implemented to simplify code. This includes access to:

• Portal models
• Metadata
• Resource environment providers

Menu Framework

The menu framework simplifies creating portlet and page menus.

• Menus are defined by JSON
• Menu items can reference modules (such as Tagging and Rating)

Theme Optimization

One can pick and choose what features they want to optimized theme performance.

• Modules can be used to select what components, capabilities and features should be included.  They are Theme module – json that can be used via WebDAV and System module – plugin.xml
• Contributions – Formalization of the single markup fragment that a module can inject to a larger page
• Capabilities – They are contributed as part of modules.  For example theme metadata can be defined to define a capability as “dojo” and implement a dynamic behavior based on that capability

Development Tips and Tricks

• Development mode – turn this on to disable caching and hot deploys
• Turn on remote debugging (loads JavaScript individually and uncompressed)
• Use theme scoped modules to reference JavaScript and CSS

WebSphere Portal 8 themes and skins are really at the heart of delivering great customer experiences.  They allow great flexibility for implementing patterns such as responsive designs, provide separations of concerns for  code and layouts, are more efficient through modularization and provide a forward looking UI platform to support industry trends to come.