Using Core Tags, Html Tags
JSF provides useful special tags to develop views. Each
tag gives rise to an associated component. JSF tags can be categorized in two
standard JSF tag libraries:
1. JSF Core Tags Library and
2. 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
%>
<f:view>
<h:form>
</h:form>
</f:view> |
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.
1. 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 example:
| <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="#{MyBean.execute}">
</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. |
2. 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
For example:
<f:view>
<h:outputText value="label"
/>
</f:view> |
f: view tag is used to create top
level view and is a container for all JSF component tags on a page. |
<h:inputText id="txt_id"
value="txt_value">
<f:validator validatorId="Txt_Validator"
/> </h:inputText> |
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. |
Example Page:
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<f:view>
<h:form id="loginForm">
<center>
<h:panelGrid columns="3" style="font-weight:bold;">
<h:outputText value="User Name"/>
<h:inputText id="uname" required="true" value="#{LoginBean.username}"/>
<h:message for="uname" style="color:red"/>
<h:outputText value="Password" />
<h:inputSecret id="pwd" required="true" value="#{LoginBean.password}"/>
<h:message for="pwd" style="color:red"/>
<h:outputText value="" />
<h:commandButton value="Submit" action="#{LoginBean.checkUser}"/>
</h:panelGrid>
</center>
</h:form>
</f:view>
</body>
</html> |
Download
code for all examples
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
