Hello World JSF with Eclipse
Posted by Albin Joseph | Posted in Eclipse | Posted on 03-04-2009
0
Hello World JSF with Eclipse
Again I am here with a Hello World program. This time I will be explaining how to create a Hello World program using Eclipse. This tutorial needs Eclipse with JBoss Tools installed. This program will accept the name as the input and print Hello Name as the output. To create your first JSF program using Eclipse, follow the below steps.
1. Click on File->New->JBoss Tools Web->JSF->JSF Project. Enter a name for your project and complete the new project wizard. The name I used for creating the project was HelloJSF.
2. Now go to the WEB-INF folder under WebContent directory and open the faces-config.xml. Make sure that you have opened the file with ‘JBoss Tools XML editor’.
2. Now right click on the editor and select ‘New View’
3. Enter the name of the new view you want to create.
4. Create another view with JSP name output.jsp. The first view will be used for accepting the input parameter and the second JSP (view) will be used for printing the message. After creating both the views, the faces-config.xml will look like the following diagram.
5. Now we need to create the navigation rule. Click on ‘Create New connection’ icon from the palette.
6. Click on the input.jsp and then output.jsp from faces-config.xml to create the new connection. The new faces-config.xml will look like the one below.
7. Now we need to create a managed bean for storing the data that we are inputting. Create a new java bean with a property ‘name’. The complete source code for new bean is given below.
package com.albees.jsf; public class HelloBean { private String name; public HelloBean(){ } public String getName() { return name; } public void setName(String name) { this.name = name; } }
8. Click on the tree tab from the bottom of faces-config.xml editor.
9. Click on Managed Beans
10. Click on Add and browse for the bean we have created in step 7. Enter a name for your bean.
11. Click on Next. From the new window select the name property.
12. Click on Finish. The updated faces-config.xml with managed bean will look like the following figure.
13. Now it’s the time to edit our JSP files.
14. Open the input.jsp and enter the following code.
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title></title>
</head>
<body>
<f:view>
<h:form id="frmHello">
Enter your name : <h:inputText id="name" value="#{helloBean.name}" />
<h:commandButton value="Submit" action="output" />
</h:form>
</f:view>
</body>
</html>Here value is the property of managed bean where we want to store our entered data. Action should be the name of the view we created for outputting the data.
For those who do not want to type all these code, you can drag and drop the form, inputText and commandButton components from Snippet view and edit the details using the properties window
16. Edit the output.jsp file. The complete source code for output.jsp is
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title></title>
</head>
<body>
<f:view>
Hello <h:outputText value="#{helloBean.name}" />!
</f:view>
</body>
</html>We are done with our first JSF program. Add the project to the server and access the page using the URL. http://localhost:8080/HelloJSF/input.jsf. If you are getting a ClassNotFoundException for your managed bean, your output folder might be pointing to a wrong directory. To fix this right click on the project and select properties. Select Java Build Path and make sure that your default output folder points to HelloJSF/WebContent/WEB-INF/classes directory.
