Liferay 6.2 - What's new under the hood?


Written by Peter Mesotten

The release of Liferay 6.2 will be remembered as "The one with the complete UI overhaul". As much as the marketing machine of Liferay.com likes to focus on the skin of Liferay Portal, it is equally important what has changed under the hood. And how these changes on the inside affect the product on the outside. This article presents the coolest new features in Liferay Portal 6.2 EE regarding responsive design and web content management that will help both customers and implementors to create better portal solutions.
 

Responsive design

Responsive design allows the developer to create one design that scales automatically across different (mobile) devices and resolutions. Before Liferay 6.2 it was already possible to use responsive design for page layouts and theme templates. Page layouts in Liferay are column-based portlet containers, so they perfectly lend themselves to the column-based grids that most responsive frameworks are based on. Liferay themes give the developer full control over HTML, CSS and Javascript, so the inclusion of responsive frameworks is seamlessly.

At ACA, we've been implementing responsive design with Twitter Bootstrap for some time now. Bootstrap has become more or less the de facto standard if it comes to responsive web design. Our projects requiring mobile support implemented Bootstrap by implementing page layouts following the Bootstrap grid and themes that included Bootstrap CSS and Javascript. 

So what's changed? In Liferay 6.2 responsive layouts are first-class citizens. All page layouts were rewritten as Twitter Bootstrap grids and the default Liferay theme was overhauled to conform to Bootstrap CSS guidelines and components. Specifically, this has the following consequences:
 

  • Pages in Liferay have a fluid width, filling the entire screen.
  • At certain break points, the columns are split so the grid is converted to a stack.
     

  
 

But the fun doesn't stop there. Even the UI of the Control Panel, Liferay's administrative module, was rewritten in Bootstrap allowing administrators to manage their sites from any device. That being said, most administrative tasks will still be easier to accomplish on a desktop/laptop/tablet than on a mobile device. But updating, say, a user's roles on a smartphone is no longer impossible.
 

 
 

This all means that your custom mobile-ready themes and page layouts will blend wonderfully with the look-and-feel of Liferay's default theme and Control Panel.
 

Mobile previews

While properly implemented page layouts and themes form the basis of a responsive interface, the content itself is equally important. Until now it was difficult to know on beforehand if the content an editor created was looking good on handhelds too. Liferay 6.2 aids in this process by giving you the ability to show a preview of a page for different device types and resolutions.
 


 

This gives the content editor a good first look on how the final pages will look like on smartphones and tablets as well as on desktops with different resolutions.
 

Improved WCM

Liferay is not just a portal. It packages with a full-fledged Web Content Management module as well. And this WCM has become much more powerful again in Liferay 6.2.
 

Dynamic data structures

In Liferay 6.1 the concept of dynamic data lists was introduced. These allowed administrators to define custom data definitions, such as a Task or an Event. Through a couple of portlets, the portal allowed users to manipulate data based on these definitions using CRUD operations. The ultimate goal of this was to create and present user-managed data lists, hence the name of the concept.

Conceptually there was an overlap between dynamic data definitions and web content structures. Both were structured data containers that could be attached to a workflow. The advantage of structures was that its data could be internationalized and categorized. Moreover there were more publication and search indexing options. The disadvantage was that structures supported few data types and a limited form of data validation. E.g. there was no "Date" field and the only available validation option was "Required" validation.

Liferay 6.2. web content structures don't only feel like dynamic data definitions. Both concepts now share, in fact, the same underlying framework. This means that all fancy features of data definitions are available for creating web content types. In addition, web content structures didn't give away their own powerful features such as categorization and internationalization.
 


 

Structure forms can be created by drag-and-dropping and configuring ready-to-use components such as input fields, radio buttons, file uploads, ... Structure field labels can now also be translated in multiple languages.
 

Web content folders

In the Control Panel, web content items used to be organized in one flat list. True, the search was powerful enough to find the right items. But there was no way to conceptually structure your content. This has changed too in Liferay 6.2. Similar to documents, web content can now be subdivided into folders.
 


 

Recycle bin

Before Liferay 6.2, web content was either published or expired. Expired web content items were not visible on the front-end, but in the back-end they still lived alongside published items. Most of these expired items would never be published again. Deleting them, on the other hand, would mean that they could never be restored again. In other words, no room for mistakes.

Meet the Recycle Bin. This trash can is very similar to what can be seen in most operating systems. Recycle Bin can not only contain trashed web content, but also documents, blogs, wiki pages, bookmarks, ... Trashed content can be easily restored and a maximum age can be configured for assets to live in the Recycle Bin.
 


 

The Recycle Bin is per-site, so each site administrator can enforce his or her own recycling policy. Recycling can even be disabled altogether.
 


 

Application display templates

The Asset Publisher has always been one of the most useful portlets that comes for free with Liferay's default bundle. This portlet allows you to create overviews of all kinds of assets, created in the portal. Assets can be web content, documents or images, blogs, wiki pages, ...

Before Liferay 6.2, such asset lists could be visualized in 4 predefined display styles:
 

  • table: displayed the list as a table with every data field (title, description, categories, size, ...) in a separate column.
  • title list: displayed the data as a bullet list with titles that linked to the full content of the items.
  • abstracts: displayed both the title and a short description, either manually entered or automatically retrieved from the content.
  • full content: displayed the full content of every item in the list.
     

Custom display styles could be developed by implementing a JSP hook, but this proved to be cumbersome, not portable and time intensive.

In Liferay 6.2, display styles can be created at runtime in the portal by scripting an application display template. Select a scripting language of your choice (Freemarker or Velocity) and use the predefined script variables to write your own display in minutes.

E.g. this is how you write a tiny Velocity script that displays the assets' titles in a simple unordered list without linking to the full content:
 


 

As you can see, the script editor gives a nice overview of all variables you can use. Also, a small tooltip explains the meaning of each variable.

When selecting this display style, your portlet's output will look something like this:
 


 

The great thing about application display templates is that it doesn't only apply to Asset Publisher portlets. Similar templates can be created for Blogs, Categories Navigation, Documents and Media and many other default portlets of Liferay. Even your custom portlets can use the application display template API to give the users of your portlet the same flexibility.
 

Conclusion

This article presented only a handful of aspects of the new Liferay 6.2 release. The support for responsive design by implementing Bootstrap was a great decision, proving that Liferay is not lagging behind in the mobile revolution. Several improvements in the web content management system have made Liferay a better competitor with full-blown CMS products.

Of course, much more has changed in Liferay 6.2, both visible on the outside and under the hood. For more information, check out the following references:
 

« back