Friday, June 11, 2010

JSF 2.0 - Automatic resource bundle resolution

User message localization is achived by placing messages in resource bundles (userLoginMessages_en_US.properties for example).

In JSF 1.2, these resource bundles had to be configured in faces-config as follows:

...

<resource-bundle>

<base-name>test.Messages</base-name> 1 References the file Messages.properties anywhere in the classpath

<var>msgs</var> 2 Messages in Messages.properties will be referenced in xhtml using "msgs" prefix e.g. #{msgs.userName}

</resource-bundle>

</application>

...

Messages in Messages.properties could then be accessed as follows in xhtml pages

<h:outputText

value="#{msgs.userNameLabel}"/>

In JSF 2.0, the faces-config entry has been made optional. To avoid making the faces-config entry,

1. Rename the properties file to match the xhtml file name. For example, if the xhtml file is named userCreate.xhtml, name the properties file as userCreate.properties.

2. Place the .xhtml and .properties files in the same directory. In our example, place userCreate.xhtml and userCreate.properties in the same directory

3. Change the references in .xhtml to #{cc.resourceBundleMap.<symbol_in_properties_file> where <symbol_in_properties_file> is any symbol in the properties file. For example, if the userCreate.properties has a line as "userNameLabel=User Name" then reference this symbol as follows

<h:outputText

value="#{cc.resourceBundleMap.userNameLabel}"/>

JSF 2.0 Templating

Templating is used to encapsulate (separate interface from implementation) and reuse page layout across. Templating can be achieved using frameworks like Tiles and SiteMesh.

In JSP, templating is achieved by defining a header.jsp and <jsp:include...> ing the header.jsp in each page. If header.jsp is changed, all pages that jsp:include header.jsp will automatically get that change. Thus the header content has been encapsulated in header.jsp and reused in multiple pages.

In JSF templating, there are 3 elements to templating

Element 1. Template

Defines layout of pages. Layout has markup to construct the structure of page (5, 6 & 7 in the example below) and sections^{not standard terminology} (1 in example below)that can be filled up with contents. Templates can optionally define default contents for sections (2 in example below defines a default, 3 and 4 don't define a default).

Example: template.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets">

<head> 5 structure of layout

<title> 6 structure of layout

<ui:insert name="title"> 1 Defines a section named "title"

Default Title 2 Default contents for the "title" section

</ui:insert>

</title>

</head>

<body>

<div class="heading"> 7 structure of layout

<ui:insert name="heading"/> 3 A section named "heading" with no default contents

</div>

<ui:insert name="content"/> 4 A section named "content" with no default contents

</div>

</body>

</html>

Element 2. Section Contents^{Not standard terminology}

^{These are contents that could go into any section defined in the template. For example, there could be one section-contents xhtml file for user login and another for new employee creation.}

^{An user login page could look like this}

Example: userLogin.xhtml

^{<html xmlns="http://www.w3.org/1999/xhtml"}

^{xmlns:ui="http://java.sun.com/jsf/facelets">}

<ui::composition>

<h:form>

<h:inputText

value="#{user.name}"/> 1 User name

<h:inputSecret

value="#{user.password}"/> 2 Password

<h:commandButton

action="#{userController.loginAction}"

<h:outputText

value="#{msgs.login}"/> 3 Login button

</h:commandButton>

</h:form>

</ui:composition>
</html>

Element 3. Composition

The composition brings the template (template.xhtml in this example) and section contents (login.xhtml) together by specifying which section contents (each in its own xhtml) should go into which sections (defined in the template)

Example: login.xhtml

^{<html xmlns="http://www.w3.org/1999/xhtml"}

^{xmlns:ui="http://java.sun.com/jsf/facelets">}

<ui:composition template="/template.xhtml"> 1 This composition will use sections defined in template.xhtml

<ui:define name="content"> 2 Child elements of this ui:define is the content of section named "content". The section named "content" is defined at 4 of template.xhtml.

<ui:include src="userLogin.xhtml"/>

</ui:define>

<ui:define name="heading">

User login heading 5 Contents of "heading" section

</ui:define>

</ui:composition>

</html> 6 This composition chooses not to override the "title" section (define at 1 of template.xhtml). So the default contents defined by template.xhtml will take effect.

By encapsulating the layout, it can be reused across multiple compositions.

[ Source ]

Friday, June 11, 2010

JSF 2.0 - Automatic resource bundle resolution

JSF 2.0 Templating

Element 1. Template

Element 2. Section ContentsNot standard terminology

Element 3. Composition

Element 2. Section Contents^{Not standard terminology}