JSF provides rich set of components that makes easy and fast to create GUI for web application. JSF is a specification that has been implemented by many venders like Apache, Sun, Oracle etc. Because of several implementations you may not decide which imp
Apache Myfaces and Tomahawk
JSF provides rich set of components that makes
easy and fast to create GUI for web application. JSF is a specification
that has been implemented by many venders like Apache, Sun, Oracle
etc. Because of several implementations you may not decide which
implementation to use. JSF implementations also provides many components
and many third party component vendors are available to use components
provided by them. Among these many implementations Apache MyFaces
implementation provides a lot of components that are typically needed in
creating web forms. You would not require to create your own component.
Tomahawk is a set of some new and standard components with extended
Introduction to Apache Myfaces and Tomahawk There are several implementations for JSF
specification. Sun, Apache, Oracle implementations are most popular among JSF
developers. Apache MyFaces is an Apache Software Foundation's
project .This is an open source JSF implementation.
Exploring Examples Examples provided by the myfaces-example-simple-1.1.6.war
file provides the code for every example. You can go through these examples.
In this tutorial some examples have been described to help you out
understanding the usage of components.
Tomahawk Tags : Tomahawk tags are collection of standard components with extended
functionality and many more extra set of components with rich set of
functionality. If you are going to create a robust web application in JSF
then Tomahawk will be a great weapon because it contains all commonly used
set of components with large options of functionalities.
inputText Tag : This tag is used to create the input text box in the page. The
user can enter any text in this box. This is same as html input tag
with type "text". This tag has additional feature of
displaying value only, not the widget of the box.
inputTextHelp tag : This tag is used to create the input text box in the
page with the capability of disappearing or selecting the text displayed in the
component for the help of the user.
inputSecret Tag : This tag is used to create the component that displays text in
different format. We can use this component for entering password.
This component is converted to the html input tag with type
inputHidden Tag : This tag is used to create the field that is hidden for the
user. This is the field that is used to pass the variables from one
page to another. It renders the html input element with the type
attribute set to "hidden".
inputTextarea Tag : This tag is used to create the input text area component in the
page. This component is like inputText but it can take values in
multiple lines which can be wrapped in different formats.
outputText Tag : This tag is used to render the output as text in the page. This
tag contains escape attribute which is used to specify whether the
markup used in the text to display is to be rendered or not.
outputLabel Tag: This component is used to set the label for any component in the
page. Its for attribute is used to decide the component for which it
is label. In the for attribute the id for that component is set.
This is same as html label tag.
graphicImage Tag: This tag is used to display the image on the page. This tag
renders an html "img" element. This tag renders the image
file stored in the location specified in the "value"
attribute of "graphicImage" tag. If this image file
is not present in the specified location then the value of the alt
attribute is displayed instead of the desired image file.
commandButton Tag : This tag renders an HTML submit button. You can perform any
operations at particular event by associating actionListener class
for event handling. You can associate the component with the method
of the backing bean which can return any static value that can be
used to decide the next page to render.
commandLink Tag : This tag behaves like a command button in a form. This tag can
also be used for the event handling purposes through the backing
bean. This tag has a value attribute that can be assigned to some
text which carries to the next resource when we click on the text.
message Tag :
This tag is useful in displaying the message related with a
particular component. The component for which the error message is
to be displayed is decided in for attribute of the tag. You can
display summarized message and detailed message for the component.
messages Tag : This tag is also like message tag which is also
used to show all messages at one place for the components. Two
layouts are supported for generated messages, table and list. If layout
is not specified then it takes list layout and all messages are
displayed in a line.
This tag is used to create table on the page.
In the columns of the table you can put any type of component like input
text box, output text, command button etc.<h:column> tag is
used to create column. There can be many column tags within dataTable
tag : This tag is used create compound component that
is used to layout other components. This tag renders html table with
specified no. of columns. Children of this element are rendered in
cells of the columns of the table. This tag helps to construct the table
which can automatically arrange the elements in cells of the table of
tag : This is used to create a component that acts as
a container to group a set of components. All these components are under
one component or can say one parent. So this can be useful when we want
to nest two or more components into one parent panelGrid column.
selectOneMenu tag : This is used to display the element that enables the
user to select only one among the list of available options. In the menu
only one option is displayed at a time. This tag renders an html
"select" element of size "1" with no multiple attribute.
selectManyMenu tag : This is used to select more than one items from a set
of options. This renders an html "select" element which
contains "multiple" attribute with size"1".
This renders the menu of options where only one is visible at a time.
selectOneRadio tag : This tag is used to create radio buttons on the page. It
renders html input tag with type "radio". It contains all
the features of standard jsf radio component. It's layout attribute
can take different values for layout of radio buttons.
This tag renders an html "input" tag
whose type is set to "checkbox" . If the "value" of
this component is set to "true" then a checked checkbox is
rendered. This is used when we want to give an option to the user to
select or deselect.
It is used to provide the user to select many
items from a list of options. The user can select one or more options.
This supports two layouts "lineDirection" and "pageDirection".
layout determines whether the checkboxes are laid out horizontally
This is used when you have to allow the user to select only one option
from the list. It renders an html "select" element of any
size and no"multiple" attribute. The
choices that we have to display in the list are shown by f:selectItem
This component lets you select more than one options from a set of available
options. It renders an html "select" element of specified
size with "multiple" attribute. size is used to
specify how many options are to be displayed at a time. If size is not specified
then it displays all the choices i.e. its default value is equal to no.
of available options.
Tomahawk radio tag
This component is used when selectOneRadio
component takes the value "spread" for "layout"
attribute. Using this tag we can position the radio button anywhere in
Tomahawk column tag
This tag is used for the columns of the table.
It can be used in dataTable tag instead of using h:column. Tomahawk
column tag provides many new attributes. It provides many attributes for
header and footer of the column which can be used to provide new
functionality in the columns.
Tomahawk columns tag
This tag is used to allow dynamic number of
columns for a dataTable. This creates columns iterating through
datamodel. Its "value" attribute takes all the values which
its wrapper datatable's "value" attribute can take.
validateEmail tag :
This tag is used to validate email address entered in
the field. We can render the validation message by the use of message,
detailMessage and summaryMessage attributes.
validateEqual tag :
This tag is used to validate the value against the
other component. In the for attribute we specify the id of the other
component whose value is compared to the value of the component for which the
validation is performed.
validateRegExpr tag :
This tag is used to validate a string entered
by the user. If we want the user to enter a specific pattern of string
then we can set the pattern for that component.
validateCreditCard tag :
This tag is used to validate a Credit Card
by the user. If we want the user to enter a valid Credit Card Number then
this validation can be done by this tag.
Tomahawk popup tag
This tag is used to create the popup window when user
takes the mouse on the element. This popup is created on the mouse event. It has
many attributes that can give it extra functionalities.
Tomahawk document tag
This tag is used to embed whole document into
it. It is equivalent to the HTML <html> tag. We can use this
tag in place of <html> tag in our JSP page.
tag : This tag is used to encapsulate the head of the
document . It is equivalent to the HTML <head> tag. We can use this
tag in place of <head> tag in our JSP page.
This tag is used to encapsulate the body of the
document . It is equivalent to the HTML <body> tag. We can use this
tag in place of <body> tag in our JSP page.
tag : This attribute is useful in persisting the
backing bean and its properties longer than request scope but shorter
than session scope by saving the state with the component tree.
This tag is useful in creating the component to input
the date. This tag provides many useful attributes to provide features according
to our requirement. This component can be of various types.
Tomahawk htmlTag tag
This tag is used to use html tag for its child
component. This provides "value" attribute to specify the name of the
html tag to be used.
This tag is used to create calendar component in the
page. It can be created in different styles. If rendereAsPopup attribute is set
to true then it creates an input box along with a button which when clicked
renders a popup calendar.
tag This tag is used to create menu component in the page.
To display the items navigationMenuItem or navigationMenuItems tag are used.
tag This tag is used to provide the menu items and sub
items. The label for the item is set using itemLabel attribute and the action
which is to perform is specified in action attribute.
This tag is used to provide the menu items and sub
items. This is the replacement of using many navigationMenuItem tags for items.
File uploading is the concept of uploading the file to
the server. The component for this purpose is created using <t:inputFileUpload>
tag. Do remember to include "enctype" attribute in the form
tag and set to "multipart/form-data".
Tomahawk dataList tag
This tag is like dataTable tag but the difference between the two is that it
does not render a table. In this tag the data rows are controlled and rendered
by the use of "layout" attribute. It
supports three layouts "simple", "unorderedList", "orderedList".
Tomahawk div tag
This tag is used to places an html div around its
children. So instead of using html div tag we can use JSF tomahawk's own div
tag. In this example, div tag uses style class "divStyle" that will be
effective on the particular area of captured by div tag.
The data scroller component of tomahawk is one
of the very useful component. This component can take the reference of
the UIData component like dataTable, dataList in its "for"
attribute. dataScroller tag renders a component that provides the
facility to navigate the data component by scrolling.
This tag is used to create a tabbed pane. Its has the
capability of switching the tabs at client side or server side. If its "serverSideTabSwitch"
attribute is set to true then switching is server side otherwise it is client
This tag is used with panelTabbedPane tag to
create tabs for panel. It has label attribute to give label for the tab.
CSS and Java Script can be used with the help of attributes of this tag
to give it look and functionality.