6.14. PortletFaces Liferay Theme Integration

PortletFaces offers several features that help integrate JSF portlets with the current Liferay theme.

6.14.1. ThemeDisplay

PortletFaces provides the PortletFacesContext.getThemeDisplay() method at the Java level and also the liferay.themeDisplay EL variable for getting access to the Liferay ThemeDisplay object.

6.14.2. Theme Icons

PortletFaces provides the pf:icon Facelet composite component tag that encapsulates an HTML img tag whose src attribute contains a fully qualified URL to an icon image in the current Liferay theme. Additionally, PortletFaces provides the liferay.themeImagesURL and liferay.themeImageURL Facelet composite component tags for gaining access to theme image icons.

6.14.3. Validation Messages (User Feedback)

Most of the standard JSF HTML component tags render themselves as HTML markup such as <label />, <input />, <span />, etc. and assume the current Liferay theme thanks to the power of CSS. However, the h:messages and h:message tag will not assume the current Liferay theme unless the following JSR 286 standard CSS class names are applied:

  • portlet-msg-error
  • portlet-msg-info
  • portlet-msg-warn

Example 6.58. JSR 286 standard CSS class names applied to the h:messages tag

<h:messages errorClass="portlet-msg-error" fatalClass="portlet-msg-error"
	infoClass="portlet-msg-info" warnClass="portlet-msg-warn" />
			

As a convenience, PortletFaces provides the pf:messages and pf:message Facelet composite component tags that encapsulate the h:messages and h:message tags respectively, and automatically apply the JSR 286 standard class names as shown above.

Note

When running as a portlet, the ICEfaces ice:messages and ice:message component tags automatically apply the JSR 286 standard class names as shown above. Additionally the ice:dataTable component tag will apply the following JSR 286 standard class names for alternating table rows:

  • portlet-section-alternate
  • portlet-section-body