Thursday 28 March 2013
JSF examples in eclipse
Let us see how to create a simple application using JavaServer Faces
or JSF framework in Eclipse IDE. First let us see what are the tools
required to create our hello world JSF application.
Let us start with our first JSF based web application.
Select Dynamic Web application and click Next.
Write the name of the project HelloWorldJSF. Once this is done, select the target runtime environment (e.g. Apache Tomcat v6.0). This is to run the project inside Eclipse environment. In configuration select JavaServer Faces v1.2 Project and press Next.
On Project Facets window, select Java 5 and JSF 1.2 and press Next.
Skip Web module window and press Next.
Select JSF component library. Click New in Component Libraries and add jstl.jar, jsf-api.jar and jsf-impl.jar. In URL Mapping Patterns add /faces/* and then click Finish.
package com.satyamsoft;
public class UserBean {
private int id;
private String name;
//Action method to add user
public String addUser() {
return "success";
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Above Java class is a User bean that we will use to store our user’s information. This class acts like a form bean and action class. The addUser() method will get called when we click Add button on our Add User page.
For this, right click on Project Name in Project Explorer -> Run As -> Run on Server (Shortcut Alt+Shift+X, R).
- JDK 1.6 above.
- Tomcat 6.x above or any other container (Glassfish, JBoss, Websphere, Weblogic etc).
- Eclipse 3.2.x above.
- Following are the list of JAR files required for this application.
- jsf-impl.jar
- jsf-api.jar
- jstl.jar
- common-logging.jar
- common-beanutils.jar
- common-collections.jar
- common-chain.jar
- common-digester.jar
Let us start with our first JSF based web application.
Step 1: Create Dynamic Web project
Open Eclipse and goto File -> New -> Project and select Dynamic Web Project in the New Project wizard screen. Select Dynamic Web application and click Next.
Write the name of the project HelloWorldJSF. Once this is done, select the target runtime environment (e.g. Apache Tomcat v6.0). This is to run the project inside Eclipse environment. In configuration select JavaServer Faces v1.2 Project and press Next.
On Project Facets window, select Java 5 and JSF 1.2 and press Next.
Skip Web module window and press Next.
Select JSF component library. Click New in Component Libraries and add jstl.jar, jsf-api.jar and jsf-impl.jar. In URL Mapping Patterns add /faces/* and then click Finish.
Step 2: Create Package and Managed bean
Create a package com.satyamsoft.helloworld in the source folder and create a Java file UserBean.java. Copy following content into UserBean.java.package com.satyamsoft;
public class UserBean {
private int id;
private String name;
//Action method to add user
public String addUser() {
return "success";
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Above Java class is a User bean that we will use to store our user’s information. This class acts like a form bean and action class. The addUser() method will get called when we click Add button on our Add User page.
Step 3: Create JSP files
Create two JSP files: index.jsp and UserList.jsp in WebContent folder. Copy following content in each of these files.index.jsp
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%><%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <html><head> <title>Add New User Form</title></head><body><f:view> <p> <h:message id="errors" for="User_ID" style="color:red"/> </p> <h:form> <h:panelGrid border="1" columns="2"> <h:outputText value="ID"></h:outputText> <h:inputText id="User_ID" value="#{userBean.id}" required="true"> <f:validateLongRange minimum="1" maximum="500"/> </h:inputText> <h:outputText value="Name"></h:outputText> <h:inputText value="#{userBean.name}"></h:inputText> <h:commandButton action="#{userBean.addUser}" value="Add Customer"></h:commandButton> </h:panelGrid> </h:form></f:view></body></html>We have added a validation rule for ID using f:validateLongRange tag and
required=”true” attribute. The ID must be in between 1 and 500.UserList.jsp
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%><%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%><html><head> <title>List of Users</title></head><body><f:view> <h:form> <h:outputText value="User #{userBean.name} is added successfully."> </h:outputText> </h:form></f:view></body></html>Step 4: Modify faces-config.xml file
Open faces-config.xml from WebContent -> WEB-INF folder and copy following content into it.
<?xml version="1.0" encoding="UTF-8"?><faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd" version="1.2"> <managed-bean> <managed-bean-name>userBean</managed-bean-name> <managed-bean-class>com.satyamsoft.helloworld.UserBean </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <navigation-rule> <display-name>AddUser</display-name> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/UserList.jsp</to-view-id> </navigation-case> </navigation-rule></faces-config> In faces config we have defined a managed bean UserBean with scope session and mapping from index.jsp to UserList.jsp. Step 5: Execute and run the project
Final step is to execute the project and view it in browser.For this, right click on Project Name in Project Explorer -> Run As -> Run on Server (Shortcut Alt+Shift+X, R).
Once you enter ID and Username and press Add User, following success screen will appear.
Tuesday 19 March 2013
Subscribe to:
Posts (Atom)