Your first JSF project
Our first JSF example will be a Hello!!! name.
Create a new Dynamic Web Project "First". Under
"Configuration" select "JavaServer Faces v2.0".
Click Next
Click Next
and make sure Generate web.xml deployment Descriptor is checked
Click Next
The first time you create a JSF project you need to install / download a JSF implementation. Press the "Manage library..." and create User library.
Press Manage libraries and create a library for Myfaces.
Click on New...
Click OK
Click on "Add External Jars..." and following select MyFace jars
commons-beanutils-1.8.3.jar
commons-codec-1.3.jar
commons-collections-3.2.jar
commons-digester-1.8.jar
commons-logging-1.1.1.jar
myfaces-api-2.0.18.jar
myfaces-impl-2.0.18.jar
you can Download this jars from
Click "Ok"
Click "Finish". Your project has been created
Click Next
Click Next
and make sure Generate web.xml deployment Descriptor is checked
Click Next
The first time you create a JSF project you need to install / download a JSF implementation. Press the "Manage library..." and create User library.
Press Manage libraries and create a library for Myfaces.
Click on New...
Click OK
Click on "Add External Jars..." and following select MyFace jars
commons-beanutils-1.8.3.jar
commons-codec-1.3.jar
commons-collections-3.2.jar
commons-digester-1.8.jar
commons-logging-1.1.1.jar
myfaces-api-2.0.18.jar
myfaces-impl-2.0.18.jar
you can Download this jars from
Click "Ok"
Click "Finish". Your project has been created
2. Review the generated project
Review theweb.xml file. It has an entry for the Faces Servlet
and for the servlet mapping. Also the file "faces-config.xml" has
been
created. Tip
To add the JSF settings to an existing dynamic web project, right-click on your project, select Project Properties -> Project Facets and add then JSF facet to your project.3. JSF Managed Bean
Create a package "com.revanSoft.jsf.first.model" and the class "HelloBean".1: package com.revanSoft.jsf.first.model;
2: import javax.naming.InitialContext;
3: public class HelloBean {
4: private String name;
5: private boolean initial = true;
6: // Getter and Setter
7: public String getName() {
8: return name;
9: }
10: public void setName(String name) {
11: this.name = name;
12: }
13: public boolean isInitial() {
14: return initial;
15: }
16: public void setInitial(boolean initial) {
17: this.initial = initial;
18: }
19: public String sayHello(){
20: initial = false;
21: return "hello";
22: }
23: }} 4. Define managed bean
Double-click on faces-config.xml in the WEB-INF directory and select the tab "ManagedBeans".
and Click on Add
Click Next
The result should look like the following:
Click on Source
1: <?xml version="1.0" encoding="UTF-8"?>
2: <faces-config
3: xmlns="http://java.sun.com/xml/ns/javaee"
4: xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5: xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
6: version="2.0">
7: <managed-bean>
8: <managed-bean-name>helloBean</managed-bean-name>
9: <managed-bean-class>com.revanSoft.jsf.first.model.HelloBean</managed-bean-class>
10: <managed-bean-scope>session</managed-bean-scope>
11: </managed-bean>
12: </faces-config>5. JSF Pages
In JSF, we usually treat the static content of our website, usingxhtml, instead of simple html. So, follow along, in order to create our first xhtml
page, which will prompt the user to enter his name in a text field and
provide a button in order to redirect him to a welcome page:- Right click on the Web Content folder
- Select New => HTML File (if you can’t find it, just select Other and the wizard will guide you through it).
- In the File Name, type
hello.xhtmland hit Next. - Select the
xhtml 1.0 stricttemplate. - Hit Finish.
xhtml files: we just need to declare the JSF namespace
at the beginning of our document. This is how to implement it and make
sure that you ‘ll always care about it, when dealing with JSF and XHTML, together:1: <html xmlns="http://www.w3.org/1999/xhtml"
2: xmlns:f="http://java.sun.com/jsf/core"
3: xmlns:h="http://java.sun.com/jsf/html"> Yeah! Now that we got everything set up, let’s move into writing the required code for our
hello.xhtml file.1: <?xml version="1.0" encoding="ISO-8859-1" ?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml"
4: xmlns:f="http://java.sun.com/jsf/core"
5: xmlns:h="http://java.sun.com/jsf/html">
6: <head>
7: <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
8: <title>hello</title>
9: </head>
10: <body>
11: <f:view>
12: <h:form>
13: <h3>JSF 2.0 Hello World Example</h3>
14: What's your name?
15: <h:inputText value="#{helloBean.name}"></h:inputText>
16: <h:commandButton value="Welcome Me" action="#{helloBean.sayHello}"></h:commandButton>
17: </h:form>
18: <h:panelGroup rendered="#{helloBean.initial !=true}">
19: <h:outputText value="hello!!! #{helloBean.name}"></h:outputText>
20: </h:panelGroup>
21: </f:view>
22: </body>
23: </html> web.xml : Add welcome file
1: <welcome-file-list>
2: <welcome-file>faces/hello.xhtml</welcome-file>
3: </welcome-file-list>6. Run your webapplication
Select project and right mouse-click- >run as -> run on server.
Click on "Welcome Me"
Comments
Post a Comment