Versions Compared

Old Version 91

changes.mady.by.user Hernan Cunico

Saved on

compared with

New Version 92

changes.mady.by.user Ashish Jain

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Launch Eclipse and Create a dynamic web project as shown in the figure
    Image Modified
  2. Give the fields for the Web Project as shown in the following figure
    Image Modified
  3. Check the box for JavaServerFaces and under the version tab select 1.2 as the version
    Image Modified
  4. 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 Modified
  5. 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!
      Image Modified
  6. Check Deploy and modify the URL pattern to *.jsf as shown in the figure. Select Finish.
    Image Modified

This finishes the setting up of Eclipse IDE for application development

...

  1. Under the project explorer right click on the SimpleJSF project and create a new class
    Image Modified
  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 Modified
  3. Add the following code to the FirstName bean class.
    Code Block
    JAVA
    JAVA
    borderStylesolid
    titleFirstName.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. 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.
    Image Modified
  2. Select the ManagedBean tab in the editor. Choose Managed Bean of scope request and select Add. 
    Image Modified
  3. Using the existing java class option, select Browse. Give the search element as FirstName and select ok.
    Image Modified
  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(Model) in the controller.
    Image Modified
    This completes the description of Model to Controller.

...

  1. Right Click on WebContent and create a New Folder with the name pages
    Image Modified
  2. Right Click on pages folder and create a jsp page login.jsp. Select Finish.
    Image Modified
  3. Similarly create another jsp page welcome.jsp.
  4. 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
    No Format
    borderStylesolid
    titleLocation of TLD
    <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
    Code Block
    ActionScript
    ActionScript
    borderStylesolid
    titlelogin.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>
        <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>
        <h:commandButton id="submit" action="validated" value="Enter" />
    </h:form>
</f:view>
</body>
</html>
    Code Block
    ActionScript
    ActionScript
    borderStylesolid
    titlewelcome.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 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.
  5. The first two lines in login.jsp defines two tag libraries
    Code Block
    ActionScript
    ActionScript
    borderStylesolid
    titleCode 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" %>

...

  1. The next few lines contains the usual html tags
    Code Block
    ActionScript
    ActionScript
    borderStylesolid
    titleCode 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>
  2. <f:view>- This tag represents the start of JSF code.
  3. Code Block
    ActionScript
    ActionScript
    borderStylesolid
    titleCode Snippet from login.jsp
    <h:inputText id="firstName" value="#{firstName.name}" required="true">
    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. The Managed Bean Name is firstName. See the figure below

Image Modified
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.

...

  1. Launch the Faces Configuration Editor by double clicking on faces-config.xml
  2. Select the Navigation tab in the Configuration Editor. Under the Palette window select Page. This will select a GUI object, page.
    Image Modified
  3. Drag the mouse over the Navigation Rule Window and click on the window. This will give a Select JSP file window. Select login.jsp as shown in the figure and select OK.
    Image Modified
  4. Similarly add the welcome.jsp page on the Navigation Rule window. See the figure below
    Image Modified
  5. Select Link from the Palette window and join the two pages as shown in the figure
    Image Modified
  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 are valid the action taken is validated. See the figure
    Image Modified
  7. Once done have a look the source tab in the Faces Navigation Editor. A <navigation-rule> tag has been introduced into the faces-config.xml.  This rule suggests 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 Modified

Now lets add a index.jsp under WEB-INF as follows

...

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.
Image Modified

Lets give some sample inputs

...

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.

Image Modified

Sample Input2:

...

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 Modified

Sample Input3:
First Name: Mickey

...

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 Modified