Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Tutorial for JSF(JavaServer Faces) by Chandrakala Rondla Under guidance of Dr. C.C.Lee Introduction: JavaServer Faces is a framework for building Web applications using Java. JavaServer Faces provides the following main features: Page navigation specification Standard user interface components like input fields, buttons, and links User input validation Easy error handling Java bean management Event handling Internationalization support JSF provides the common plumbing for any Web application allowing the developer to concentrate on the specific application instead of worrying about things like how to create a link from one page to another. Description: The tutorial gives brief introduction about JSF and explains the Life Cycle of JSF. Also the tutorial will take through the process that involves developing, building, deploying and running a sample JSF application. Life Cycle of JSF JSF handles HTTP requests with seven distinct phases, as shown in Figure 1. The normal flow of control is shown with solid lines, whereas dashed lines show alternate flows depending on whether a component requests a page redisplay or validation or conversion errors occur. When a client makes a request for the page, the lifecycle starts. During the lifecycle, JSF implementation must build the view while considering the state changed from the previous postback. When the client performs a postback of the page, JSF implementation must perform the Lifecycle steps: 1. Validation 2. Conversion Figure 1. The JavaServer Faces lifecycle Lifecycle handles two different types of requests. 1. Initial Request: A user requests the page for the first time. Lifecycle only executes Request tree (view) and Render response phases. 2. Postback: A user submits a form contained on a page that was previously loaded in the browser as a result of executing a initial request. Lifecycle executes all phases. Developing the application from scratch: As a start the following are required: JDK 1.4 (minimum) Ant Tomcat 5.0 or any other servlet container. Tomcat is used in this example. Go to the "webapps" directory where apache was installed: /opt/apache-tomcat-5.5.17/webapps. This is where the application resides. Create a directory, which is your project name. Example: jsfProject. Under "jsfProject" create the following directory structure. /ant build.xml /JavaSource /WebContent /WEB-INF /classes /lib jsf-impl.jar jsf-api.jar faces-config.xml web.xml /pages The different parts of the skeleton structure are described below: The “jsfProject” is the project folder, which is also the project name. The “ant” folder holds Ant build scripts including a default build.xml file. The “JavaSource” folder is where the Java source classes and properties files are placed. The “WebContent” folder holds the actual Web application files used by the application server or servlet container. The “WEB-INF” folder inside the “WebContent” folder holds files that are used as part of the runtime Web application but are hidden from the browser. The “classes” folder inside the “WEB-INF” folder holds compiled Java classes along with properties files copied from JavaSource. The “lib” folder inside the “WEB-INF” folder holds libraries required by the application, for example, third party Jar files. jsf-impl.jar jsf-api.jar These two files inside the lib folder are library files included with the JavaServer Faces Reference Implementation available at www.java.sun.com website. Every JSF application requires these files. The “web.xml” file inside the “WEB-INF” folder is the Web Application Deployment Descriptor for the application. This is an XML file describing the Servlets and other components that make up the application. The “faces-config.xml” file inside the “WEB-INF” folder is the JavaServer Faces configuration file. This file lists bean resources and navigation rules. The “pages” folder inside the “WebContent” folder holds JSP and HTML presentation pages. Steps to develop sample JSF application: Before we start it is important that directory structure explained above has been created. The following steps are involved in developing the sample application. Each step is then explained in more detail. 1. Create JSP pages 2. Define a navigation rule 3. Create a managed bean 4. Create a properties file 5. Edit JSP pages 6. Create an index.jsp file 7. Compile the application 8. Deploy and run the application: 1. Creating JSP Pages Create the inputname.jsp and greeting.jsp files in WebContent/pages 2. Navigation The navigation rule for this application is described in the faces-config.xml file. In this application, the controller switches from inputname.jsp to greeting.jsp The rule says that from the view (page) inputname.jsp go to the view (page) greeting.jsp, if the "outcome" of executing inputname.jsp is greeting. <navigation-rule> <from-view-id>/pages/inputname.jsp</from-view-id> <navigation-case> <from-outcome>greeting</from-outcome> <to-view-id>/pages/greeting.jsp</to-view-id> </navigation-case> </navigation-rule> 3. Creating the Managed Bean Next, create com/edu/HelloWorld folders inside the JavaSource folder. Inside the HelloWorld folder, create a PersonBean.java file. It's a simple Java bean with oneattribute and setter/getter methods. The bean simply captures the name entered by a user after the user clicks the submit button. This way the bean provides a bridge between the JSP page and the application logic. (Please note that the field name in the JSP file must exactly match the attribute name in the bean.) Put this code in the PersonBean.java file: package com.edu.HelloWorld; public class PersonBean { String personName; public String getPersonName() { return personName; } public void setPersonName(String name) { personName = name; } } Declaring the Bean in faces-config.xml Now, the second part of faces-config.xml describes Java bean that was created in the previous steps. This section defines a bean name PersonBean. The next line is the full class name, com.edu.HelloWorld.PersonBean. request sets the bean scope in the application. <managed-bean> <managed-bean-name>personBean</managed-bean-name> <managed-bean-class>com.edu.HelloWorld.PersonBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> The final faces-config.xml file should look like this: <?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> <faces-config> <navigation-rule> <from-view-id>/pages/inputname.jsp</from-view-id> <navigation-case> <from-outcome>greeting</from-outcome> <to-view-id>/pages/greeting.jsp</to-view-id> </navigation-case> </navigation-rule> <managed-bean> <managed-bean-name>personBean</managed-bean-name> <managed-bean-class>com.edu.HelloWorld.PersonBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> </faces-config> 4. Creating a Properties File (Resource Bundle) A properties file is just a file with param=value pairs. The messages stored in the properties file in our JSP pages are used. Create a bundle folder in the JavaSource/com/edu/HelloWorld folder and then a messages.properties file in the bundle folder. Place it in the JavaSource folder so that during project compilation, this properties file will be copied to the classes folder where the runtime can find it. Put this text in the messages.properties properties file: inputname_header=JSF KickStart prompt=Tell us your name: greeting_text=Welcome to JSF button_text=Say Hello sign=! 5. Editing the JSP Pages Two pages should already have been created in jsfProject/WebContent/pages. Put the following coding into the inputname.jsp file: <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <f:loadBundle basename="com.edu.jsfProject.bundle.messages" var="msg"/> <html> <head> <title>enter your name page</title> </head> <body> <f:view> <h1> <h:outputText value="#{msg.inputname_header}"/> </h1> <h:form id="helloForm"> <h:outputText value="#{msg.prompt}"/> <h:inputText value="#{personBean.personName}" /> <h:commandButton action="greeting" value="#{msg.button_text}" /> </h:form> </f:view> </body> </html> Put the following coding inside the second JSP file, greeting.jsp: <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <f:loadBundle basename="com.edu.jsfProject.bundle.messages" var="msg"/> <html> <head> <title>greeting page</title> </head> <body> <f:view> <h3> <h:outputText value="#{msg.greeting_text}" />, <h:outputText value="#{personBean.personName}" /> <h:outputText value="#{msg.sign}" /> </h3> </f:view> </body> </html> 6. Creating the index.jsp File Create the index.jsp file inside the WebContent folder. Note that this file is not created in the pages folder like the previous JSP files. Having an index.jsp file will allow us to start the application like this: http://cczone.mcs.csueastbay.edu:8080/jsfProject/ Now, put this code into the file: <html> <body> <jsp:forward page="/pages/inputname.jsf" /> </body> </html> 7. Compiling To build the application, run the build.xml script from the ant folder: ant build 8. (a). Deploying Before running this application within the servlet container, it has to be deployed. To do this, insert this code: <Context debug="0" docBase="Path_to_WebContent" path="/jsfProject" reloadable="true"/> near the end of the server.xml file within the Host element just before the closing </Host> tag. Of course, Path_to_WebContent needs to be replaced with the exact path on your system to the WebContent folder inside the jsfProject folder (for example. /opt/apache-tomcat-5.5.17/webapps/jsfProject/WebContent) 8. (b). Running Next, start the Tomcat server (probably using the script startup.bat in Tomcat's bin directory). When Tomcat is done loading, launch a web browser and enter: http://cczone.mcs.csueastbay.edu:8080/jsfProject/ A simple example to show the effectiveness of JSF: The jsp page that is displayed initially has no default text in the textbox. By making a small modification the in the faces-config.xml file the jsp page will have a default text shown in the textbox. The following lines declare a managed bean property of type java.lang.String and then set its value to Dr. Lee. The lines in bold below show what should be added. <managed-bean> <managed-bean-name>personBean</managed-bean-name> <managed-bean-class>com.edu.HelloWorld.PersonBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>personName</property-name> <property-class>java.lang.String</property-class> <value>Dr. Lee</value> </managed-property> </managed-bean> Without default text: With default text: