Creating Responsive Portal Applications with Red Hat JBoss Portal 6.1 Beta

September 23, 2013

Portal

One Design – Everywhere!

How can you design portlets and portal applications that are useable on desktop browsers, but also useable on a mobile platform, such as a smartphone or a tablet?  That is typically a problem with existing portal implementations and difficult to deal with.  In fact, some may need to resort to custom code that will check for mobile devices based on user agents, and then redirecting mobile user to a different website.

We’ll get into redirects in detail in another article!  But, wouldn’t it be better if you can design a portal application that just works on different devices?

With JBoss Portal 6.1, you can apply a new look and feel called Responsive Skin to your Portal application, and subsequently, apply Responsive Design practices to your portlets.  With Responsive Design practices, Portal, and your portlets, can display properly on different screen sizess – so that the site is useable on mobile devices as well as desktop devices.

Responsive Design

Responsive website can provide great usability to a range of different devices.

Responsive Skin

JBoss Portal 6.1 comes with a Mobile extension.  This extension provides additional Mobile friendly features, including a Mobile site that uses Responsive Skin.

A portal needs to use Responsive Skin in order to provide fluid layout changes on different devices.

A portal needs to use Responsive Skin in order to provide fluid layout changes on different devices.

Moreover, it’s also important to set Viewport property initial-viewport to 1.0 – so that your website will appear properly in different screen sizes.

Set initial-scale to make sure the website displays properly on different screen sizes.

Set initial-scale to make sure the website displays properly on different screen sizes.

Reponsive Portlets

When using the Mobile portal site that’s pre-configured with Responsive Skin and Viewport properly set, you can drop in portlets that can respond to different screen sizes.  This can be done mostly by using CSS3′s Media Query – so that you can apply different layout or look and feel to your Portlet based on the screen dimension.

In the MDBlog example, when viewing the article on a desktop browser, associated tag words for the article will appear on the right side of the article.

MDBlog layout responds to screen dimensions.  In desktop dimensions, it displays tags on the right hand side.

MDBlog layout responds to screen dimensions. In desktop dimensions, it displays tags on the right hand side.

However, when you reduce the screen dimension, MDBlog will respond and move the tags to the bottom, and hide other elements on the page.  In addition, JBoss Portal also condenses its top administration toolbar and menu bar into smaller, mobile-friendly, user interface.

Both JBoss Portal Platform and the MDBlog Portlet renders differently on smaller screens.

Both JBoss Portal and the MDBlog Portlet renders differently on smaller screens.

MDBlog moves tags from the right hand side to the bottom of the page when viewed on smaller screens.

MDBlog moves tags from the right hand side to the bottom of the page when viewed on smaller screens.

This is accomplished with CSS3′s Media Query – by applying different rules based on the screen width.  The CSS3 snippet is as follows:

@media only screen and (max-width: 980px) {
 .mdblogContent {
 width: 100%;
 }
 .mdblogTags {
 float: none;
 clear: both;
 }
 .mdblogTags ul li{
 float: left;
 }
.mdblogPages {
 display: none;
 }
}
@media only screen and (min-width: 980px) {
 .mdblogContent {
 width: 90%;
 }
 .mdblogTags, .mdblogPages {
 float: right;
 width: 10%;
 }
.mdblogTags ul li{
 float: none;
 clear: both;
 }
}

Hope you enjoyed this new feature – feel free to download and try MDBlog in your JBoss Portal 6.1 Beta.  In the next article, we’ll discuss Mobile Redirect feature for portal sites that don’t use responsive design.

,

About Ray Tsang

Ray has worked with technology all his career. Ray was a manager at a global consulting company before taking time off to backpack around Asia. Ray joined Red Hat at the beginning of 2012 as a Solution Architect focusing on Red Hat Middleware products including JBoss Data Grid and JBoss Portal Platform.

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

Follow

Get every new post delivered to your Inbox.

Join 104 other followers

%d bloggers like this: