THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
| Wiki Markup |
|---|
This application will make you understand how Model(M), View(V), Controller(C) architecture is implemented in Java Server 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|http://download.eclipse.org/webtools/downloads/drops/R2.0/R-2.0.1-20070926042742/] \- Download for wtp-all-in-one-sdk-win32
* [Apache Geronimo 2.1|http://geronimo.apache.org/downloads.html]\- Download for AG 2.1
* [Geronimo Eclipse Plugin (GEP) 2.1 |http://geronimo.apache.org/development-tools.html#DevelopmentTools-GEP]\- 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
# Setting Eclipse for Application development
# Define and implement the application Model(M)
# Define and implement Model(M) objects to Controller
# Define and implement View(V) in application
# Define and implement the Validator component
# Define and implement the View navigation by Controller(C)
Once you have all the pre-requisites installed follow the following steps to create a project with Eclipse
# *Setting Eclipse for Application development*
* Launch Eclipse and Create a dynamic web project as shown in the figure
!CreateWebProject.gif!
* Give the fields for the Web Project as shown in the following figure
!WebProjectFields.GIF!
* Check the box for JavaServerFaces and under the version tab select 1.2 as the version
!ProjectFileds.GIF!
* 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
!JSFCapabilities.GIF!
* The next window suggests to create 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.6.1\commons-beanutils-1.6.1.jar
* <GERONIMO_HOME>\repository\commons-collections\commons-collections\3.1\commons-collections-3.1.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.2\myfaces-api-1.2.2.jar
* <GERONIMO_HOME>\repository\org\apache\myfaces\core\myfaces-impl\1.2.2\myfaces-impl-1.2.2.jar\!JSFCustomLibrary.GIF\!
!JSFCustomLibrary.GIF!
* Check Deploy and modify the URL pattern to \*.jsf as shown in the figure. Select Finish.
!EclipseSetUpFinal.GIF!
This finishes the setting up of Eclipse IDE for application development
2. *Define and Implement the application Model(M)*
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.
* Under the project explorer right click on the SimpleJSF project and create a new class
!Model1.GIF!
* Fill the *New Java Class* form with *jsf* as the package name and *FirstName* as the bean class name. Select Finish once done.
!Model2.GIF!
* Add the following code to the bean class.
String username;
public String getName()
{ return username ; }
public void setName(String name)
{ username=name; }
\* Create a second Bean class LastName and add the following code to the class String lastname; public String getLName()
{ return lastname; }
public void setLName(String lname)
{ lastname=lname; }
This completes the Model definition and implementation of bean class.
3. *Define and implement Model(M) objects to Controller*
* In an JSF application controller is implemented by a configuration file WebContent/WEB-INF/faces-config.xml. Double Click on the file. This will open a Faces Configuration Editor.
!ModelController.GIF!
* Select the ManagedBean tab in the editor. Choose Managed Bean of scope request and select Add.
!ModelController2.GIF!
* Using the *existing java class* option, select Browse. Give the search element as FirstName and select ok.
!ModelController3.GIF!
* 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(Model) in the controller.
!ModelController4.GIF!
This completes the description of Model to Controller.
4. *Define and implement View(V) in application*
* Right Click on WebContent and create a New Folder with the name pages
!View.GIF!
* Right Click on pages folder and create a jsp page login.jsp. Select Finish.
!View2.GIF!
* Similarly create another jsp page welcome.jsp.
* Moving forward now we now have to include Tag Library Descriptors(TLD) in our application.
Geronimo comes packaged with the TLD's required for application. The TLD's can be found in
<GERONIMO_HOME>\repository\org\apache\myfaces\core\myfaces-impl\1.2.2\myfaces-impl-1.2.2.jar\META-INF\myfaces-html.tld
and
<GERONIMO_HOME>\repository\org\apache\myfaces\core\myfaces-impl\1.2.2\myfaces-impl-1.2.2.jar\META-INF\myfaces_core.tld
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
*Login.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 id="helloForm">
<br><h:outputText value="Enter your first name"/>
<br><h:inputText value="#
{firstName.name}" />
<f:validateLength minimum="4" maximum="10"/>
<br><h:outputText value="Enter your last name"/>
<br> <h:inputText value="#{lastName.LName}" />
<f:validateLength minimum="3" maximum="10"/>
<br><h:commandButton id="submit" action="validated" value="Enter" />
</h:form>
Welcome.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/WEB-INF/tld/myfaces-html.tld" prefix="h" %>
<%@ taglib uri="/WEB-INF/tld/myfaces_core.tld" prefix="f" %>
Welcome
,
<h:outputText value="#{lastName.LName} " />
<h:outputText value="!" />
</h3>
</f:view>
</body>
</html>
Welcome.jsp
<%@ 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>Lets now try to understand what each line of code represents.The first two lines in login.jsp defines two tag libraries<%@ 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</title>
</head>
<body>
<f:view>
<h3>
<h:outputText value="You have successfully 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<%@ taglib uri="/WEB-INF/tld/myfaces-html.tld" prefix="h" %><%@ taglib uri="/WEB-INF/tld/myfaces_core.tld" prefix="f" %>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.
The next few lines contains the usual html definitions
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome to Apache Geronimo</title>
</head>
<body>
The next tag <f:view> represents the start of JSF codeThe tag <h:outputText> is to output data on the formConsider the code <h:inputText value="#{firstName.name}" />. Here h:inputText is a html tag to accept the input from the form. Now where does #{firstName.name} this piece of code come from. Earlier we have defined a Java Bean FirstName . Going back to Faces Configuration Editor, Under Managed Bean tag select firstName bean. This will display the configuration of Managed Bean. The Managed Bean name is firstName as shown in the figure
!View3.GIF!
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.%>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.
The next few lines contains the usual html definitions<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome to Apache Geronimo</title>
</head>
<body>The next tag <f:view> represents the start of JSF codeThe tag <h:outputText> is to output data on the formConsider the code <h:inputText value="#{firstName.name}" />. Here h:inputText is a html tag to accept the input from the form. Now where does #{firstName.name} this piece of code come from. Earlier we have defined a Java Bean FirstName . Going back to Faces Configuration Editor, Under Managed Bean tag select firstName bean. This will display the configuration of Managed Bean. The Managed Bean name is firstName as shown in the figure
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. 5.Define the Validator Component 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.
6.Define and implement the View navigation by Controller(C) |