|Home > Documentation > Developer's guide > Tutorials > JavaServer Faces > Developing a Simple JavaServer Faces application|
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.
Briefly describing the application, 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:
The application development will take you through the following
Once you have all the pre-requisites installed follow the following steps to create a project with Eclipse
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.
This completes the Model definition and implementation of bean class.
#To add these two TLD's in the application, In Eclipse Under project Explorer right click on WEB-INF. Create a folder tld. Copy myfaces-html.tld and myfaces_core.tld to this folder.
#Next step is to populate login.jsp and welcome.jsp with data
Lets now try to understand what each line of code represents.
These two sets of tags are defined by JSF. First one with the namespace "h" is used to generate html views. Second one with the namespace "f" handles the core functionalities of JSF like type conversions, validations and listeners for input from user.
Represents the input tag. id="firstName" and value="firstName.name"
comes from the Managed Bean. Use the Faces Configuration Editor, Select firstName bean under Managed Bean tab. The Managed Bean Name is firstName. See the figure below
This completes the implementation of View(V) in the application.
The other tags <f:validateLength> and <h:commandButton> will be explained in the next section.
The <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 etc. 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 suggests 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 for as a command button.
The code in the input.jsp <h:commandButton id="submit" action="validated" value="Enter" /> suggests that 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 is defined by faces-config.xml. Follow the underlined steps to define the pages navigation.
Now what is this login.jsf in the forward path. 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.
This completes the Application Development process. Next step is to deploy and test the application.
Right Click on the project SimpleJSF and Select Run As-> Run On Server. This will deploy the sample on Apache Geronimo Server and a Login page will be launched.
Lets give some sample inputs
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 welcome.jsp page.
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.
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.