New Liferay Faces release - Portal components

Hi everyone!

As you may know there are many exciting things that had been done so far in the last year for Liferay Faces.

This is the first of a blog series about all of these improvements and new features that you will see in the next weeks, when GA release shows up.

I will start this series explaining the new features and improvements from the Liferay Faces Portal components.


Maybe you are a JSF developer. You may have discovered all great features/framework that Liferay brings to your hands for implementing all common functionality that many software projects have. But at the same time you would like your portlets to look like same portlets when developing using Liferay MVC and JSP and leveraging all the advantages these have (responsiveness, Liferay theme support..).

In Liferay Faces we had the key goal of letting JSF developers the same tools for creating the same portlet apps without losing any important component. After looking at these screenshots you will understand what I am talking about:

Both portlets are completely different in terms of used technologies. First one was created using Liferay MVC and JSP (using well known Liferay taglibs). Second one was created using Liferay Faces 4.2-m3-SNAPSHOT and JSF 2.2. Looks great doesn’t it?

But how is this possible? One of the coolest features in new Liferay Faces version is rendering portal tags natively. What does it mean? Instead of “simulating” the tag rendering content (by duplicating the html generated) the tag is rendered and the generated markup is written to a string-capturing implementation of JspWriter. Then a JSF Renderer writes this content. The concept is is illustrated by the following simple diagram:

So, doing this way, Liferay Faces ensures that content will be the exactly the same as if you were actually using the Liferay Portal JSP taglibs. Another advantage of capturing the generated markup via the JspWriter, is that is provides us with the opportunity to process that text and adding more features that those components didn’t have originally in Liferay (eg: AJAX).

Well, now that you know how this works, it’s time to review the new Liferay Faces portal components:

<portal:nav> and <portal:navBar>

<portal:nav> uses <aui:nav> for rendering the markup. If you already used it in Liferay portal, you may know this component can be responsive and be rendered like this in a mobile device (used as a child of portal:navBar):

but with the advantages of using JSF (AJAX without struggling with complex javascript). If you want more info you can go to the portal:nav showcase.


Probably one of the things used many times in a webapp project is a rich text editor. As you may know, Liferay already has one already built-in ready to use, which can be configurable to some extent through

One of the advantages of using Liferay’s editor is the Liferay’s document library integration out of the box, so you can leverage the advantage of using documents stored in Liferay without any additional development.

But we haven’t finished with this component yet! To use the maximum JSF features as possible, some JSF AJAX events were added, such as “valueChange”, “blur” or “focus” to improve the possibilities of this component in your development efforts.

For more info, please go to portal:richInputText section in the showcase.


This is one of the most number of times requested feature by Liferay Faces users. Thanks to this component, you could embed any portlet directly inside the rendered markup of a JSF portlet. You just have to set the portlet id (required) and you’re done!

You have some nice examples in showcase, like rendering a search portlet or rendering two journal articles. Very useful!


These are other components that will make your JSF portlets look exactly the same as “standard” Liferay MVC/JSP ones.

portal:header will add some formatted headers with the possibility of having a back button (with an icon) in the same format that Liferay does.

For more info please visit showcase for portal:header.

<portal:inputSearch> and <portal:navBarSearch>

These are some of the greatest taglibs that exists in Liferay IMHO. They provide some simple components for having an h:inputText that fits perfectly as a search component in the top part of your custom portlets. Together with <portal:navBar> and <portal:navBarSearch> it provides a great responsive tool for any portlet, and can coexist perfectly with <portal:nav> together:

But in Liferay Faces we added more capabilities to the component that the portal one doesn’t natively: AJAX. You can use the standard <f:ajax> nested tag to leverage all the events that Liferay Faces makes available for developers, like “blur”, “change”, “click”, “keydown”, etc. and “search” (which is the default). For more info please visit the portal:inputSearch demo in Liferay Faces showcase.

Much more to come…

In Liferay Faces team we hope you liked these new portal components and find them useful for your daily JSF portlets development. For any suggestion or feedback before the release, you can download the latest version from Liferay Faces SNAPSHOT repository and write them in Liferay Faces forums.

Please stay tuned for the next blog posts explaining the other new awesome components in this release!