Simple JSF Application (Part I)

13 December 2007

Java Server Faces (JSF) defines three layers of architecture: component architecture, a standard UI widget, and application infrastructure. Where architecture allows standard JSF UI widgets and provide platform for third party components. JSF strictly follow MVC2 pattern, with a more stress on view side. It uses standard jsp with customized tags.

Here we will develop a simple web application to demonstrate JSF.

Consider the following jsp file called welcome.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 
<f:view>
   <html>
     <head>
       <title>
                Hello JSF
       </title>
       </head>
       <body>
        <h:form id=”formWelcome”>
         <h:outputText id=”outputWelcome” 
           value = ”Welcome to JSF World” 
           style = ”color: blue”/>
           <br/>
	<h:message id=”errors” for = “inputNumber” style = “color: red”/>
	<br/>
	<h:outputLabel for=”inputNumber”>
	<h:outputText id =”inputNumberLabel” value=”Enter number between 1 and 50”/>
	</h:outputLabel>
	<h:inputText id=”inputNumber” value=”#{welcomeBean.numControls}” required=”true”>
	<f:validateLongRange minimum=”1” maximum=”50”/>
	</h:inputText>
	<br/>
	<h:commandButton id=”submitCommand” type=”submit” value=”Submit” 
        action=”#{welcomeBean.submit}” 
        actionListener="#{welcomeBean.addControls}" immediate=”true”/>
	</h:form>
             </body>
      </html>
</f:view>

In this file, at first level imports were made. Firstly core JSF tag library get imported. It provides core tasks of validation and event handling. Next html tag library get imported, which provide custom tags for user interface components like text boxes, forms etc.

f:view tag must be present as parent tag for all tags, i.e. it should include all other tags in the file.

h:outputText tag creates an HtmlOutputText component, which displays read-only data.

h:message tag is HtmlMessage component, which displays validation errors for specific component. ‘for’ attribute tells the control for which it has to check for errors.

h:outputLabel tag creates HtmlOutputLabel component, which acts as a label for input components.

h:inputText tag creates an HtmlInputText component, which get text input. Its value is associated with a back side bean welcomeBean.

f:validateLongRange validates the input and keep it in specified range.

h:commandButton makes HtmlCommandButton component, which displays HTML form button. Value of its’ action property guide the page to desired direction.

I will write more on this in the coming days.

Related Posts: