|Home > Documentation > Developing > Tutorials > Developing Web applications > Developing JavaServer faces applications > Developing a Simple JavaServer Faces application|
|Developing applications with AJAX and JSF||Developing JavaServer faces applications||Developing user interface with JSF|
This application will make you understand how Model (M), View (V), Controller (C) architecture is implemented in JavaServer Faces. This application will make use of UI components, Validator, Navigation and Bean component available with JSF.
This application will take a user First Name and Last Name. Later these fields will be validated by JSF and using the controller bean and Navigation rule the output will be displayed. This application will also introduce a UI component which is a submit button.
To run this tutorial, as a minimum you will be required to have installed the following prerequisite software:
Details on installing eclipse are provided in the Development environment section. This tutorial is organized in the following sections:
Once you have all the prerequisites installed, follow the following steps to create a project with Eclipse.
The Model as suggested by MVC architecture handles data and logic of the application. In an enterprise application. Java Beans are used to represent collection of data and operation on that data. In JSF we use Java Beans to define the Model.
WebContent/WEB-INF/faces-config.xml. Double click on the file. This will open the Faces Configuration Editor.
login.jsp. Select Finish.
myfaces_core.tldto this folder.
welcome.jspwith data Lets now try to understand what each line of code represents.
login.jspdefines two tag libraries These two sets of tags are defined by JSF. The first one with the namespace "h" is used to generate html views. The second one with the namespace "f" handles the core functionalities of JSF like type conversions, validations and listeners for input from user.
The code <f:validateLength minimum="4" maximum="10"/> defines the input text length to be minimum of 4 characters and maximum of 10 characters. This is the standard validation provided by core tag libraries. Other examples of validators are Validate Long Range tag, Validate Double Range tag , and so on. JSF also provides a Validator interface which can be implemented to create custom validators.
The code <h:message for="" style="color: red;"/> defines the error message. When the user inputs the controller validates each of the inputs. If the inputs are invalid Controller displays the same page again with an error message for the errors. The color:red suggests that the error message will be displayed in red color.
This step uses the JSP page navigation in the order of user inputs and validation by controller. If all the inputs are valid than the controller performs the action as suggested by the HTML form. This action is submitted by the HTML form as a command button.
The code in the
input.jsp <h:commandButton id="submit" action="validated" value="Enter" /> checks to determine if all the inputs are valid. This is the button which submits the form to controller if all inputs are valid. In this case the commandButton tells the controller to execute the validated action if all the inputs are valid.
The pages navigation in a JSF applicaiton is defined by
faces-config.xml. Follow the steps before to define the pages navigation.
login.jspas shown in the figure and select OK.
welcome.jsppage on the Navigation Rule window. See the figure below:
faces-config.xml. This rule instructs the Controller that if all the inputs are valid from a form in the
/pages/login.jsp, and the action is validated, then go to page
index.jspunder WebContent as follows: What is the
login.jsfin the forward path tag. If you look at the
web.xml, *.jsf is used as the URL pattern to suggest that forwarded page be taken care by Java Server Faces Servlet.
Right click on the project SimpleJSF and select Run As -> Run On Server. This will deploy the sample on the Apache Geronimo Server and a Login page will be launched.
Lets give some sample inputs:
Sample Input #1:
First Name: Mickey
Last Name: Mouse
Both the First Name as well as Last Name fulfills the validation rules, so this form will be submitted to controller and according to the navigation rule controller will launch a
Sample Input #2:
First Name: Mic
Last Name: Mouse
First Name should be minimum of length=4 but in this case First Name is of length=3. In this case validation will fail and an error message will be generated by controller for First Name field.
Sample Input #3:
First Name: Mickey
Last Name: Mo
Last Name should be minimum of length=3 but in this case Last Name is of length=2. In this case validation will fail and an error message will be generated by controller for Last Name field.