Page History

...

This application will make you understand how Model (M), View (V), Controller (C) architecture is implemented in Java Server JavaServer Faces. This application will make use of UI components, Validator, Navigation and Bean component available with JSF.

This application has the following pre-requisites:

• WTP 2.0.1 - Download for wtp-all-in-one-sdk-win32

• Apache Geronimo 2.1- Download for AG 2.1 

• Geronimo Eclipse Plugin (GEP) 2.1 - Download for AG Eclipse plugin

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.

The application development will take you through the following

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:

• Sun JDK 6.0+ (J2SE 1.6)
• Eclipse IDE for Java EE Developers, which is platform specific
• Apache Geronimo Eclipse Plugin 2.1.x
• Apache Geronimo Server 2.1.x

  Geronimo version 2.1.x, Java 1.5 runtime, and Eclipse Ganymede are used is used in this tutorial but other versions can be used instead (e.g., Geronimo version 2.2, Java 1.6, Eclipse Europa)

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, Once you have all the pre-requisites installed follow the following steps to create a project with Eclipse.

Setting Eclipse for

...

application development

1. Launch Eclipse and Create create a dynamic web Web project as shown in the figure.
   Image Removed Image Added
   
   
   
2. Give the fields for the Web Project as shown in the following figure
   Image Removed.
   Image Added
   
   
   
3. Select Finish.
4. Right click on the SimpleJSF project and select Properties, then select Project Facets.
5. Check the box for JavaServerFaces and under the version Version tab select 1.2 as the version
   Image Removed. Select the Further configuration required... indicator to display the JSF Capabilities pane.
   Image Added
   
   
   
6. On the JSF Capabilities Once done you can give default values for web module and Geronimo Deployment Plan. On the JSF capabilities window check the box and select new as shown in the figure.
   Image Removed Image Added
   
   
   
7. The next window suggests is used to create a JSF Implementation library. Give the library name as JSFCustomLibrary and add the following jars. Select Finish once done. See the figure below:
   • <GERONIMO_HOME>\repository\commons-beanutils\commons-beanutils\1.67.10\commons-beanutils-1.67.10.jar
   • <GERONIMO_HOME>\repository\commons-collections\commons-collections\3.12\commons-collections-3.12.jar
   • <GERONIMO_HOME>\repository\commons-digester\commons-digester\1.8\commons-digester-1.8.jar
   • <GERONIMO_HOME>\repository\commons-logging\commons-logging\1.0.4\commons-logging-1.0.4.jar
   • <GERONIMO_HOME>\repository\org\apache\myfaces\core\myfaces-api\1.2.23\myfaces-api-1.2.23.jar
   • <GERONIMO_HOME>\repository\org\apache\myfaces\core\myfaces-impl\1.2.23\myfaces-impl-1.2.23.jar!JSFCustomLibrary.GIF!
     Image Removed
     
     Image Added
     
     
     
8. Check Deploy and modify the URL pattern to *.jsf as shown in the figure. Select Finish.
   Image Removed Image Added
   
   
   This finishes the setting up of the Eclipse IDE for application development.

Define and Implement the application Model (M)

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.

1. Under the project explorer right click on the SimpleJSF project and create a new class.
   Image Removed Image Added
   
   
   
2. Fill the New Java Class form with jsf as the package name and FirstName as the bean class name. Select Finish once done.
   Image Removed
   Image Added
   
   
   
3. Add the following code to the FirstName bean class. :
   Code BlockJAVAJAVAborderStylesolidtitleFirstName.java package jsf; public class FirstName { String username; public String getName() { return username; } public void setName(String name) { username = name; } }
   
4. Create a second Bean class LastName and add the following code to the class

...

1. : JAVAsolidLastName.java

...

1. package

...

1. jsf;

...

1. public

...

1. class

...

1. LastName

...

1. {

...

1. String

...

1. lastname;

...

1. public

...

1. String

...

1. getLName()

...

1. {

...

1. return

...

1. lastname;

...

1. }

...

1. public

...

1. void

...

1. setLName(String

...

1. lname)

...

1. {

...

1. lastname

...

1. =

...

1. lname;

...

1. }

...

1. }

...

1. This completes the Model definition and implementation of the bean

...

1. classes.

Define and implement Model (M) objects to Controller

1. In an a JSF application controller the Controller is implemented by a configuration file called WebContent/WEB-INF/faces-config.xml. Double Click click on the file. This will open a the Faces Configuration Editor.
   Image Removed Image Added
   
   
   
2. Select the ManagedBean tab in the editor. Choose Select the request Managed Bean of scope request Element and select Add. 
   Image Removed
   Image Added
   
   
   
3. Choose the Using the an existing java Java class option, select Browse. Give the search element as FirstName and select ok OK.
   Image Removed
   Image Added
   
   
   
4. Select Finish on the next window. Similarly add the other bean LastName. Now select the Source tab in the Faces configuration Editor. It displays the bean components (i.e., the Model) in the controller.
   Image Removed
   Image Added
   
   
   This completes the description of Model to Controller.

Define and implement View (V) in application

1. Right Click click on WebContent and create a New Folder new folder with the name pages.
   Image Removed Image Added
   
   
   
2. Right Click click on pages folder and create a jsp page JSP called login.jsp. Select Finish.
   Image Removed Image Added
   
   
   
3. Similarly create another jsp JSP page called welcome.jsp.
   
   
4. Moving forward now Now we now have to include the Tag Library Descriptors (TLD) in our application.
   Geronimo comes packaged with the TLD's required for application. The TLD's, which can be found in No FormatborderStyle:
   solidtitleLocation of TLD <GERONIMO_HOME>\repository\org\apache\myfaces\core\myfaces-impl\1.2.23\myfaces-impl-1.2.23.jar\META-INF\myfaces-html.tld and <GERONIMO_HOME>\repository\org\apache\myfaces\core\myfaces-impl\1.2.23\myfaces-impl-1.2.23.jar\META-INF\myfaces_core.tld
   #To
5. To add these two TLD's in the application, In Eclipse Under project in Eclipse under the Project Explorer right click on WEB-INF. Create a folder called tld. Copy myfaces-html.tld and myfaces_core.tld to this folder.
   
   
6. #Next The next step is to populate login.jsp and welcome.jsp with data Code BlockActionScriptActionScriptborderStylesolidtitledata ActionScriptsolidlogin.jsp <%@ taglib uri="/WEB-INF/tld/myfaces-html.tld" prefix="h" %> <%@ taglib uri="/WEB-INF/tld/myfaces_core.tld" prefix="f" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Welcome to Apache Geronimo</title> </head> <body> <f:view> <h1><h:outputText value="Welcome to Apache Geronimo" /></h1> <h:form> h1> <h:form> <h:message for="firstName" style="color: red;" /> <h:message for="lastName" style="color: red;" /> <br> <h:outputText value="Enter your first name" /> <br> <h:inputText id="firstName" value="#{firstName.name}" required="true"> <f:validateLength minimum="4" maximum="10" /> </h:inputText> <br> <h:outputText value="Enter your last name" /> <br> <h:inputText id="lastName" value="#{lastName.LName}" required="true"> <f:validateLength minimum="3" maximum="10" /> </h:inputText> <br> inputText> <br> <h:commandButton id="submit" action="validated" value="Enter" /> </h:form> </f:view> </body> </html> Code BlockActionScriptActionScriptborderStylesolidtitlewelcome.jsp <%@ taglib uri="/WEB-INF/tld/myfaces-html.tld" prefix="h"%> <%@ taglib uri="/WEB-INF/tld/myfaces_core.tld" prefix="f"%> <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Welcome</title> </head> <body> <f:view> <h3><h:outputText value="You have successfully Logged logged in: " /> <h:outputText value="#{firstName.name} " /> <h:outputText value="#{lastName.LName}" /> <h:outputText value="!" /></h3> </f:view> </body> </html> Lets now try to understand what each line of code represents.
   • The first two lines in login.jsp defines two tag libraries
   Code BlockActionScriptborderStyle
   • ActionScript
   title
   • solid
   • Code Snippet from login.jsp
   • <%@
   • taglib
   • uri="/WEB-INF/tld/myfaces-html.tld"
   • prefix="h"
   • %>
   • and
   • <%@
   • taglib
   • uri="/WEB-INF/tld/myfaces_core.tld"
   • prefix="f"
   • %>
   • These two sets of tags are defined by JSF.

...

1. • The first one with the namespace "h" is used to generate html views.

...

1. • The second one with the namespace "f" handles the core functionalities of JSF like type conversions, validations and listeners for input from user.
   • The next few lines contains the usual html tags
   Code Block
   • ActionScript
   ActionScriptborderStyle
   • solid
   title
   • Code Snippet from login.jsp
   • <html>
   • <head>
   • <meta
   • http-equiv="Content-Type"
   • content="text/html;
   • charset=ISO-8859-1">
   • <title>Welcome
   • to
   • Apache
   • Geronimo</title>
   • </head>
   • <body>
   • The tag <f:view>
   - This tag
   • represents the start
   of JSF code. Code BlockActionScriptActionScriptborderStylesolidtitleCode Snippet from login.jsp <h:inputText
   • of JSF code.
   • This line of code Represents the input tag. The id="firstName"
   • and value="
   #{
   • firstName.name
   }" required="true"> Represents the input tag.
   • " comes from the Managed Bean. ActionScriptsolidCode Snippet from login.jsp <h:inputText id="firstName"
   and
   • value="#
   
   
   • {firstName.name}" required="true">
2. Using the
   comes from the Managed Bean. Use the Faces Configuration Editor, Select select firstName bean under Managed Bean tab. The Managed Bean Name is firstName. See the figure below!View3_new.GIF|align=center!.
   
   Image Added
   
   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.

Define the Validator Component

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 tag, Validate Double Range Tag etc 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 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.

Define and implement the View navigation by Controller (C)

This step suggests 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 for form as a command button.
The code in the input.jsp <h:commandButton id="submit" action="validated" value="Enter" /> suggests that 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 underlined steps before to define the pages navigation.

1. Launch the Faces Configuration Editor by double clicking on faces-config.xml
   
   
2. Select the Navigation Rule tab in the Configuration Editor. Under the Palette window select Page. This will select a PageFlow Page GUI object, page.
   Image Removed Image Added
   
   
   
3. Drag the mouse over the Navigation Rule Window and click on the window. This will give a Select JSP file File window. Select the login.jsp as shown in the figure and select OK.
   Image Removed
   Image Added
   
   
   
4. Similarly add the welcome.jsp page on the Navigation Rule window. See the figure below:
   Image Removed
   Image Added
   
   
   
5. Select Link from the Palette window and join the two pages as shown in the figure:
   Image Removed
   Image Added
   
   
   
6. Select the link and between the two pages and go to properties view and set the value for From Outcome field as validated. This is because of the tag <h:commandButton id="submit" action="validated" value="Enter" />. Once all the input inputs are valid the action taken is validated. See the figure.
   Image Removed Image Added
   
   
   
7. Once done have a look the source Source tab in the Faces Navigation Editor. A <navigation-rule> tag has been introduced into the faces-config.xml.   This rule suggests instructs the Controller that if you all the inputs are valid from a form in the /pages/login.jsp, and the action is 'validated', then go to page /pages/welcome.jsp.
   Image Removed
   Image Added
   
   
   
8. Now lets add a index.jsp under

...

1. WebContent as follows

...

1. : ActionScriptsolidindex.jsp

...

1. <%@

...

1. page

...

1. language="java"

...

1. contentType="text/html;

...

1. charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>

...

1. <\!DOCTYPE

...

1. html

...

1. PUBLIC

...

1. "-//W3C//DTD

...

1. HTML

...

1. 4.01

...

1. Transitional//EN"

...

1. "http://www.w3.org/TR/html4/loose.dtd">

...

1. <html>

...

1. <body>

...

1. <jsp:forward

...

1. page="/pages/login.jsf"

...

1. />

...

1. </body>

...

1. </html>

...

1. What is the login.jsf in 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.
   This completes the Application Development process.

...

1. The next step is to deploy and test the application.

Deploy and Test the application

Right Click click on the project SimpleJSF and Select select Run As -> Run On Server. This will deploy the sample on the Apache Geronimo Server and a Login page will be launched.
Image Removed Image Added


Lets give some sample inputs:
Sample Input1Input #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  will launch a welcome.jsp page. Image Removed
Image Added


Sample Input2Input #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.Image Removed
Image Added


Sample Input3Input #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.Image Removed
Image Added