Flexible Mobile Redirect with Red Hat JBoss Portal 6.1 Beta

September 30, 2013

Portal

Mobile Redirect

In the previous post, we introduced responsive designed portal and portlet to JBoss Portal 6.1.  However, if you have existing portal applications, or if you do not want to create responsive portal website – you may want to consider using mobile redirects.  JBoss Portal allows you to manage different redirect configurations, based on conditions such as User Agent string as well as JavaScript detected attributes.

Mobile Redirect

Different devices can be redirected to appropriate website to provide the best user experience.

For example, you can setup a redirect for all of the iOS devices, and a separate redirect for Android devices.  Alternatively, you can also use JavaScript to detect whether the browsing device is touch-enabled – and then redirecting them to proper destination.

But there is more.  Let’s dive into some of these features in more details from top to bottom.

Site Redirect Management

First, every JBoss Portal site can configured one to several Site Redirects.  For example, a Desktop Site can have one Mobile redirect, or the Desktop Site can have one for Mobile Phone Redirect and another for Tablet redirect.  The number of redirect configurations is flexible.  Each configuration can be given a name – and it’ll appear in the footer of the portal site.

Site Redirect Management

Every portal site can configure one or more site redirect configuration. Each configuration can target different devices.

In this example, a Desktop Site has a single redirect configuration named Mobile.  This redirect configuration can be composed by multiple conditions, for example, with User Agent string matching, or JavaScript detected values.  User Agent string matching can use regular expressions, for both “Contains” and “Does not contain” matches.

A single condition can be composed by one or many User Agent string matches or JavaScript Properties.

A single condition can be composed by one or many User Agent string matches or JavaScript Properties.

JavaScript detected values can also be used as redirect conditions.  For example, you can use JavaScript to detect screen dimensions, or whether the device is touch enabled.

JavaScript Detection

JavaScript detection can detect whether a device is touch enabled.

It’s also possible to add customized detection script as well.  All JavaScript detection logic is encapsulated in a single JavaScript snippet, located in:

$JPP_HOME/gatein/gatein.ear/portal.war/device/detection.jsp

There is a snippet in this file that will send all detected parameters to JBoss Portal, and triggering redirect conditions.

// ADD DEVICE PROPERTIES HERE
addParameter("screen.height", screen.height);
addParameter("screen.width", screen.width);
addParameter("window.devicePixelRatio", window.devicePixelRatio);
addParameter("touch.enabled", touchEnabled());
addParameter("window.innerWidth", window.innerWidth);

It’s fairly easy to add your own detection if needed.

Where to Redirect To?

So we’ve learned that it’s very easy to configure the conditions to trigger a redirect – but where can you redirect to?  Out-of-the-box, you can redirect a Desktop-oriented portal site to a Mobile-oriented portal site, or a responsive designed site.

Site Redirect Destination

Each redirect can be configured with a redirect destination.

Since both the From site and the Redirect To site have a Site Map, by default, JBoss Portal will perform page-level redirects by matching the name of the pages between two sites (a.k.a., Navigation Nodes).

By automatically matching node names in the Site Map, Portal can automatically determine redirect destinations.

By automatically matching node names in the Site Map, Portal can automatically determine redirect destinations.

But keep in mind, every site may have a different Site Map, or, navigation structure.  For example, a mobile site may have less number of pages than a desktop site.  What happens when the destination site doesn’t have the corresponding page?  There are a number of ways JBoss Portal can help you with providing the most optimal user experience:

  • Explicitly map original page to target page
  • Don’t redirect if target page does not exist
  • Redirect anyways – let the destination handle it
  • Redirect to the home page
  • Redirect to nearest parent by traversing up the Site Map

This range of customization was designed to ensure your users will have seamless experience.

Jumping Back and Forth

When a Site Redirect is enabled for a portal site, all of the redirect destinations will be shown on the footer of the original site.  So, for example, if a Desktop site was configured with a Mobile redirect – then a Mobile link would be shown at the footer of the Desktop site.  Conversely, in the Mobile site, a Desktop link can be shown in the footer.  This allows the user to explicitly specify which version of the site they would want to use – and it gives the user the ability to switch back and forth between the different versions.

Redirect Footer

For each of the configured redirects, corresponding links will show in the footer.

Most importantly, JBoss Portal can remember user’s preference of the site!

Try it out with your existing Portal application to provide seamless mobile experiences.

About Ray Tsang

Ray is a Developer Advocate for the Google Cloud Platform. Ray had extensive hands on cross-industry enterprise systems integration delivery and management experiences during his time at Accenture, managed full stack application development, DevOps, and ITOps. Ray specialized in middleware, big data, and PaaS products during his time at RedHat while contributing to open source projects, such as Infinispan. Aside from technology, Ray enjoys traveling and adventures. The opinions stated here are my own, not necessarily those of my company.

View all posts by Ray Tsang

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: