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 functionality.

1. 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.
      
2. Downloading and exploring MyFaces examples integrated with Tomahawk
   If you are beginner in the field of JSF framework then really its necessary to follow the examples provided by any source. Here apache itself has provided examples in a zipped format. These examples are good implementation of Tomahawk components.
     
3. 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.
    
4. 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.

• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk 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 password.
    
• Tomahawk 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".
    
• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk dataTable tag :
  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.
    
• Tomahawk panelGrid 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 specified columns.
    
• Tomahawk panelGroup 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. 
    
• Tomahawk 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.
   
• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk selectBooleanCheckbox tag :
  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.
    
• Tomahawk selectManyCheckbox tag :
  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 or vertically.
    
• Tomahawk selectOneListbox tag :
  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 or f:selectItems.
    
• Tomahawk selectManyListbox tag :
  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 the document.
    
• 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.
   
• Tomahawk selectOneCountry tag :
  This tag is used to create the component which displays the list of countries in selection box according to the locale.
    
• Tomahawk selectOneLanguage tag :
  This tag is used to create the component which displays the list of languages in selection box according to the locale.
    
• Tomahawk 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.
    
• Tomahawk 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.
    
• Tomahawk 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. 
    
• Tomahawk validateCreditCard tag :
  This tag is used to validate a Credit Card Number entered 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.
    
• Tomahawk documentHead 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.
    
• Tomahawk documentBody tag :
  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.
    
• Tomahawk saveState 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.
    
• Tomahawk inputDate tag :
  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 inputHtml tag :
  This tag is used to create the Kupu text editor. To know about this you can visit the web site http://kupu.oscom.org. The important thing about this tag is that it supports one editor per page.
    
• 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. 
    
• Tomahawk inputCalendar tag :
  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. 
    
• Tomahawk jscookMenu tag
  This tag is used to create menu component in the page. To display the items navigationMenuItem or navigationMenuItems tag are used.
   
• Tomahawk navigationMenuItem 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. 
   
• Tomahawk navigationMenuItems tag
  This tag is used to provide the menu items and sub items. This is the replacement of using many navigationMenuItem tags for items. 
    
• Tomahawk inputFileUpload tag
  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.
    
• Tomahawk dataScroller 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.
  
• Tomahawk pannelTabbedPane tag
  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 side.
  
• Tomahawk pannelTab tag
  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.

Back To JSF Tutorial

Recommend the tutorial