Introduction to JSF Core Tags Library

SHARE & COMMENT :

1) Introduction

This article introduces about the various Core Tags that are available in JSF. Tags represent some set of Actions that will be executed in the Server. This article assumes the reader to have a fair bit of knowlege in Java Server Faces. If not, then they can visit the Introductory Article in JSF in javabeat. For more information and resources about Java Server Faces. This article will start off with the Major Classification of Core JSF Tags and then will explain in depth about the various different types of Tags that are available in each category. Wherever and whenever possible, Code Snippets are given to make the understanding of the Tags much clearer.

2) Core Tag Library

The Core Tags that are available in Java Server Faces are categorized as follows. Here the categorization is given based on the Functionality of the Tags. They are,

Following sections explains the various above mentioned Tags in greater detail.

3) View Tags

3.1) Introduction

View Tags are Container Tags and they used to hold or Group Multiple UI Components. Following are the identified Tags in the JSF Core Library that comes under this category.

  • View Tag
  • Sub View Tag

Subsequent sections will discuss both the View Tags in greater detail.

3.2) View Tag

The View Tag is used to hold all the UI Components in the Display. View Tag can contain a Mix of Html Tags, JSF Core and Custom Tags. The View Tag as identified by <f:view> Tag and it usually contains a set of Form Tags (<h:form>) along with other Action Tags. Localization for the Messages associated with the Component can also be specified in the View Tag. The syntax definition of this View Tag is given below,

<f:view locale = "localeCodeValue" beforeMethod = "method" afterPhase = "method">
<!-- Html and JSF Tags goes here -->
</fview>


Following is an example for the View Tag, that holds a Form Component, which is turn is having two Text Components along with a Submit Button.

<f:view locale = "ja" beforeMethod = "#{MyPhaseListener.beforePhase}"
afterMethod = "#{MyPhaseListener.afterPhase}" >

<h:form>
<p>User name:
<h:inputText value = "#{UserBean.userName}" id = "userNameTextField"
required = "true">
</h:inputText>

<p>Password:
<h:inputSecret value = "#{UserBean.password}" id = "passwordTextField"
required = "true">
</h:inputText>

<h:commandButton value = "Submit" action = "submit"/>

</h:form>

</f:view>

In the above code snippet, the locale is set to Japanse (‘ja’ is the Locale Code name for Japanese) and also the the Phase Listener methods is made to call before and after through the help of ‘beforeMethod’ and ‘afterMethod’ attributes.

3.3) Sub View Tag

Sub View represents a portion of the Display in the Entire Page. Sub View may be useful in situations where there is a need for a Main Page which is getting information fetched independently from Different Views. If we wish to represent a portion of a JSP Page as a Sub View, then it has to be embedded into the Sub View Tag with the help of Import/Include Tags (<c:import>, <jsp:include>), and then the Sub View Tag can be embedded within the View Tag. This Tag is identified by <f:subview> and following is the syntax definition for this Tag,


<f:subview id = "SubViewId">
</f:subview>

Assume that there is a Web Page contains several sections like Footer, Header and Advertisements along with other contents. Then subview will be one possible solution for such a kind of View Representation. Consider the following sample which illustrates this,


<f:view>
<f:subview id = "header">
<jsp:include page = "header.jsp"/>
<-- Other Elements Here -->
</f:subview>

<f:subview id = "footer">
<jsp:include page = "footer.jsp"/>
<-- Other Elements Here -->
</f:subview>

<f:subview id = "advertisements">
<jsp:include page = "advertisements.jsp"/>
<-- Other Elements Here -->
</f:subview>
</f:view>

4) Select Tags

4.1) Introduction

These are tags used to select Single or Multiple Entries from Select Components Like List-Box, Check-Box or a Radio-Button. They usually appear as Child Tags under the Select Component Tags and they are used to represent and select Values. The identified Select tags are given as follows.

  • Select Item Tag
  • Select Items Tag

4.2) Select Item Tag

This Tag adds a Single Item to a Single or a Multi Components like (Check-Box, Radio-Button or List). This Tag always appear as Child Tag for the Single/Multi Select Components. The value can be either given in Static or Dynamic form. Below is the syntax definition of the Tag,


<h:selectItem id = "Id" description = "Some Description" itemValue = "itemValue"
itemLabel = "itemLabel" value = "selectValue">
</h:selectItem>

Let us see the static way of giving values with the help of Select Item Tag. Assume that we want to represent a Season List Box Item populated with static values like ‘Summer’, ‘Winter’, ‘Spring’ and ‘Autumn’. They we could use the following to achieve that,


<h:selectManyMenu id = "seasonListBox">
<f:selectItem itemValue = "Summer_Season" itemLabel = "Summer Season">
<f:selectItem itemValue = "Winter_Season" itemLabel = "Winter Season">
<f:selectItem itemValue = "Spring_Season" itemLabel = "Spring Season">
<f:selectItem itemValue = "Autumn_Season" itemLabel = "Autumn Season">
</h:selectManyMenu>

The above code populates a List-Box Component with Values like ‘Summer Season’, ‘Winter Season’, ‘Spring Season’ and ‘Autumn Season’. Note that the value corresponding to ‘itemLabel’ attribute is the one that will be shown to the Clients. The actual value that is sent to the Server is the corresponding value of the attribute ‘itemValue’. Now let us see how to display the value dynamically. For that, the ‘value’ attribute must be specified with the appropriate JSF EL Expression pointing to a Managed Bean Property. Examine the following code,


<h:selectSingleMenu id = "managerListBox">
<f:selectItem value = "#{User.manager}" >
</h:selectSingleMenu>

4.3) Select Items Tag

If Select Item Tag is used to represent a single Value for a Component, then Select Items Tag is used to represent a Collection of Values. As like Select Item Tag, this Tag should appear as a Child Element for the Select Controls (List-Box, Check-Box or Radio-Buttons). This Tag is identified by <f:selectItems> and the following is the syntax representation for the same.


<f:selectItems id = "Id" value = "valueSet">
</f:selectItems>

The ‘value’ attribute must be a JSF EL Expression and it must return a Collection type (List or Set) or a Array type. If the return Type is a Map, then the Map Keys will correpond to the ‘itemLabel’ attribute with the Map Values corresponding to the ‘itemValue’ attributes. Suppose that we have a List of Employees maintained in Backing Bean called Employee and we wish to display the Set of Employee Names in a List Box, then the following Code will help.

Following is the listing of Employee.java which holds a collection of employee names in a List.

Employee.java

 package model;

public class Employee{

private List allEmployeeNames;

public List getEmployeeNames(){
 return allEmployeeNames;
 }

public void setEmployeeNames(List allEmployeeNames){
 this.allEmployeeNames = allEmployeeNames;
 }
 }

And the corresponding JSF Code will look something like the below,


<h:selectManyMenu id = "managerListBox">
<f:selectItems value = "#{Employee.allEmployeeNames}" >
</h:selectManyMenu>

5) Facet Tag

One of the interesting Tag available in JSF Core Tag library is the Facet Tag. One can normally see the usage of a facet Tag in the case of a Complex UI Components (PanelGrid and DataTable) that has Parent-Child Relationship. Before illustrating the uage of Facet, let us look into the sample of Data Table. The DataTable Component identified by (<h:dataTable>)
contains a series of Column Elements (identified by <h:column>) thereby forming a Tabular Structure. Here is the Syntax Definition of the <h:dataTable> Tag.


<h:dataTable value = "Values" var = "BeanName">

<h:column>
<!-- Display of the 1st Column -->
</h:column>

<h:column>
<!-- Display of the 2nd Column -->
</h:column>

...

<h:column>
<!-- Display of the 3rd Column -->
</h:column>

</h:dataTable>

The attribute ‘value’ represents a Collection (or an Array) which is to be iterated over. And the attribute ‘var’ refers to the named identifer for each and every element being iterated. For example, if we have want to display the name, age and the city of an User in an Application in a Tabular Format with the help of <h:dataTable> tag, then we would have written the following code snippet.


<h:dataTable value = "#{UserManager.allUsers}" var = "anUser">

<h:column>
<h:outputText value = "Name"/>
<h:outputText value = "#{anUser.name}"/>
</h:column>

<h:column>
<h:outputText value = "Age"/>
<h:outputText value = "#{anUser.age}"/>
</h:column>

<h:column>
<h:outputText value = "Country"/>
<h:outputText value = "#{anUser.country}"/>
</h:column>

</h:dataTable>

And correspondingly, we would have got the following set of Java Classes for the same. One is the Backing Bean by name UserManager having a property called allUsers, which is of a Collection type. The other Class is the User class which is having name, age and city as properties. Following is the snippet code for UserManager.java class.

UserManager.java

 public class UserManager{

private List allUsers;

public List getAllUsers(){
 return allUsers;
 }

public void setAllUsers(List allUsers){
 this.allUsers = allUsers;
 }
 }

Following is the listing for the Java Class User.

User.java

 public class User{

private String name;
 private int age;
 private String city;

public String User(){
 }

public String getName(){
 return name;
 }

public void setName(String name){
 this.name = name;
 }

// Getters and Setters for age and country goes here.

}

Following would be a sample output (with some sample values) in the Browser if the form containing the above dataTable Tag is rendered.

Sample Output

 Name Age Country
David 33 Sweden
 Johnson 32 Australia
 Adams 43 Japan

Let us come back to the purpose of using Facets here. This dataTable UI Component is a Complex Component which has Child Tags representing the Column Values taken from the User Bean. The Labels ‘Name’, ‘Age’ and ‘Country’, though are part of the DataTable Tag don’t form the Child Elements for this Tag. Such Tags (or UI Components) which are logically Child Components for some Parent Component, but strictly speaking don’t have a defined relation-ship are candidates for Facets. During Rendering of the Parent Component, all the Facet Tags will also be rendered. In our case, the Labels ‘Name’, ‘Age’ and ‘Country’ can be surrounded with Facet Tags like the following,


<h:dataTable value = "#{UserManager.allUsers}" var = "anUser">

<h:column>
<facet name = "NameLabel">
<h:outputText value = "Name">
</facet>
<h:outputText value = "#{anUser.name}">
</h:column>

<h:column>
<facet name = "AgeLabel">
<h:outputText value = "Age">
</facet>
<h:outputText value = "#{anUser.age}">
</h:column>

<h:column>
<facet name = "CountryLabel">
<h:outputText value = "Country">
</facet>
<h:outputText value = "#{anUser.country}">
</h:column>

</h:dataTable>

6) Miscellaneous Tags

6.1) Introduction

Let us see the miscellaneous set of Tags in detail. The following list down the Left-over Tags.

  • Attribute Tag
  • Param Tag
  • Load Bundle Tag
  • Verbatim Tag

6.2) Attribute Tag

The Attribute Tag is used to represent an attribute for the enclosing UI Component. An attribute for a Component is encapsulated in the form of Name and Value. This tag is identified by <f:attribute>. Following is the syntax definition of the Attribute Tag.

<f:attribute name = "attrName" value = "attrValue">
</f:attribute>

For example, the following code snippet associated two attributes (disabled and read-only) to a Text-Field UI Component.

<h:inputText id = "userNameTextField">
<f:attribute name = "disabled" value = "true"/>
<f:attribute name = "readonly" value = "false"/>
</h:inputText>

6.3) Param Tag

The Param Tag which is identified by <f:param> is used to pass parameters to the enclosing UI Components. This Tag always appears as a Child Tag for the Input/Action UI Components. Let us look into the Syntax Declaration.

<param name = "paramName" value = "paramValue">
<param>

Look into the following code snippet about the usage of Param Tags. In the First case, the value of the Param Tags are passed to the Placeholders for the String to be displayed. Whereas, in the second case, when used along with a Command Button/Link, the Component receiving the Request would found the Name/Value Parameters appended to it.

<h:outputFormat value = "Welcome to {0} company">
<f:param value = "ABC"/>
<h:output>
<h:commandLink action = "#{SomeAction}">
<f:param name = "Param1" value = "Value1"/>
<f:param name = "Param2" value = "Value2"/>
<h:commandLink>

6.4) Load Bundle Tag

The Load Bundle Tag is used to load the Bundle (containing the various Components Display Name along with Messages) for an Application. Following is the syntax of <f:loadBundle> Tag.

<loadBundle basename = "PathToPropFile" var = "refName">
<loadBundle>

For example, to load the Bundle File name called ‘MyBundle’ and then to use the various resources in some UI Components, the following can be used for,

<loadBundle basename = "resources/en/MyBundle" var = "myBundle">
<h:outputText id = "userNameTextField" value = "#{myBundle.userNameMessage}">
</h:output>
<loadBundle>

6.5) Verbatim Tag

This Tag is often used when we want to display a Mix of Html and Other Core Tags. This Tag is identified as <h:verbatim> and by default the characters (like <, >, etc.) are not escaped. Is is very equivalent to the Html <Pre> Tag. Consider the following sample,

<f:verbatim>
<P>This is a Html Paragraph
</f:verbatim>

7) Conclusion

This Article is all about Core JSF Tags. Starting with the Broder Level of Classification of the JSF Core Tags, it then brought into picture the various different set of tags that are available. The Various Different Set of Tags like Validator Tags, Converter Tags, Listener Tags, View Tags, Select Tags and Miscellaneous Tags are given healthier discussions along with some sample programs.
Javabeat has published many of the good articles related to Java Server Faces (JSF). This list will help you to learn the basic concepts on JSF and how to start using in your projects, please have a look on these articles when time permits. Don’t forget to leave your feedback on the comments section. This helps us to provide better content for you.

The above article would provide the higher level of understanding on each concept.  If you would like to know all the features in detail, please buy any of the JSF books listed in the book recommendations for Java Server Faces (JSF). Hope this helps you!!

If you would like to receive future mails on Java articles, please subscribe here.

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Comments

  1. It’s great….

  2. Abu Turab says:

    appreciated..

  3. Abu Turab says:

    appreciated..

  4. Abu Turab says:

    appreciated..

  5. Abu Turab says:

    appreciated..

  6. Abu Turab says:

    appreciated..

  7. Abu Turab says:

    appreciated..

  8. Abu Turab says:

    appreciated..

Trackbacks

  1. [...] many built-in validators available in JSF. You can learn about the predefined tags in the article Introduction to JSF Core Tags Library . If you are new to JSF please read this article Introduction to Java Server Faces.The sample [...]

  2. [...] Bindings between JSF UI Components and Validation Logic can be done with ease with the help of JSF Core Tags. Four JSF Core Tags are available for doing Validation on the JSF UI Components. They [...]

Speak Your Mind

*

Close
Please support the site
By clicking any of these buttons you help our site to get better