JSF application typically uses JSP pages to represent views. JSF provides useful special tags to enhance these views. Each tag gives rise to an associated component. JSF provides 43 tags in two standard JSF tag libraries:
-
JSF Core Tags Library and
-
JSF Html Tags Library
Even a very simple page uses tags from both libraries.
<%@ taglib uri=”http://java.sun.com/jsf/core “ prefix=”f” %>
<%@ taglib uri=”http://java.sun.com/jsf/html “ prefix=”h” %>
……………
……………
In the above code fragment we have imported two JSF tag libraries with the help of taglib directive. JSF Core Tag Library contains set of JSF core tags while JSF Html Tags Library contains set of html tags. Prefix is used to use tags defined in tag library. Here we are using conventional names f and h for Core & Html tags respectively. We have the choice to choose any name for the prefixes.
-
JSF Html Tags:
These tags represent html components like text fields, buttons, form.
Html tags can be divided into following categories:
Inputs (inputText, inputTextarea)
Outputs (outputText, outputLabel)
Commands (commandButton)
Selections (selectOneRadio, selectOneListbox, selectOneMenu for radio buttons, list boxes, menu etc)
Layouts (panelGrid)
Data table (dataTable)
Errors and messages (message, messages)
Some examples have been given below to understand how to use these tags and its attributes:<h:inputText id=”ID1” value=”value”/>
creates a single line text input control where id attribute is used to uniquely identify the component rendered by this tag and value attribute sets the current value of the component.<h:outputText id="ID2" value="Welcome"/>
creates a single line text output where id attribute uniquely identifies the rendered component and current value is set by value attribute .
<h:commandButton
id="submit"
value="go"
action="nextPage">
</h:commandButton>
creates a command button where value attribute sets the value that is displayed on the button when it is rendered and action attribute is used to invoke a method defined in backing bean when a user does an action on the component .According to the return of the invoked method it is determined which view is to be displayed next.
In JSF Html Tag Library there are 25 core tags .All JSF Html Tags :
- column creates column in a dataTable
- commandButton creates button
- commandLink creates link that acts like a pushbutton
- dataTable creates a table control
- form creates a form
- graphicImage displays an image
- inputHidden creates hidden field
- inputSecret creates input control for password
- inputText creates text input control (single line)
- inputTextarea creates text input control (multiline)
- message displays the most recent message for a component
- messages displays all messages
- outputFormat creates outputText, but formats compound messages
- outputLabel creates label
- outputLink creates anchor
- outputText creates single line text output
- panelGrid creates html table with specified number of columns
- panelGroup used to group other components where the specification requires one child element
- selectBooleanCheckbox creates checkbox
- selectManyCheckbox creates set of checkboxes
- selectManyListbox creates multiselect listbox
- selectManyMenu creates multiselect menu
- selectOneListbox creates single select listbox
- selectOneMenu creates single select menu
- selectOneRadio creates set of radio buttons
-
JSF Core Tags:
These tags allows you to take advantages of features of JSF framework, like validation, conversion , event handling. Core library is stepchild of Html library. i.e. core library supports the html library. Core tag library also contains tags for views and sub-views , loading resource bundle, adding arbitrary text to a page. Some examples of JSF core tags are:
f: view tag is used to create top level view
f: subview tag is used to create subview of a view.
f: validator tag is used to add a validator to a component.
f: converter tag is used to add an arbitrary converter to a component.
f: actionListener tag is used to add an action listener to a component.
f:valueChangeListener tag is used to add a valuechange listener to a component
Some examples have been given below to understand how to use these tags:
<f:view locale="en">
</f:view>
f: view tag is used to create top level view and is a container for all JSF component tags on a page. Where locale attribute provides several options for presenting localized views of your application. Here "en" represents English and if we give velue "fr" to locale attribute then french view will be displayed. So this attribute is useful for internationalization purpose.
head
view
<f:subview id="sub_id">
</f:subview>
Here f:subview tag is like container for the JSF components contained in an included JSP page (second.jsp).
<f:validator validatorId="Txt_Validator" />
The Validator tag registers a Validator on the component associated with the enclosing tag. In validatorId field, we give the value of one of the validator-id element of a validator in your Faces configuration file.
In JSF Core Tag Library there are 18 core tags .
All JSF Core Tags:
- f :view Creates the top-level view
- f:subview Creates a subview of a view
- f:attribute Adds an attribute to a component
- f:param Constructs a parameter component
- f:converter Adds an arbitrary converter to a component
- f:converterDateTime Adds a datetime converter to a component
- f:converterNumber Adds a number converter to a component
- f:actionListener Adds an action listener to a component
- f:valueChangeListener Adds a valuechange listener to a component
- f:validator dds a validator to a component
- f:validateDoubleRange Validates a double range for a component’s value
- f:validateLength Validates the length of a component’s value
- f:validateLongRange Validates a long range for a component’s value
- f:facet Adds a facet to a component
- f:loadBundle Loads a resource bundle, stores properties as a Map
- f:selectitems Specifies items for a select one or select many component
- f:selectitem Specifies an item for a select one or select many component
- f:verbatim Adds markup to a JSF page
