4. Your first JSF project

4. Your first JSF project
Prev		Next

Our first JSF example will be a celsius to fahrenheit convertor.

4.1. Create JSF Project

Create a new Dynamic Web Project "de.vogella.jsf.first". Under "Configuration" select "JavaServer Faces v1.2".

Press next until you see the following screen.

The first time you create a JSF project you need to install / download a JSF implementation. Press the "Download library..." button and select the Apache Library and install it.

Press Manage libraries and create a library for JSTL.

Click "Finish". Your project has been created

4.2. Review the generated project

Review the "web.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.

4.3. Domain Model

Create a package "de.vogella.jsf.first.model" and the class "TemparaturConvertor.java".

				
package de.vogella.jsf.first.model;

public class TemparaturConvertor {
	private double celsius; 
	private double fahrenheit;
	private boolean initial= true; 
	
	public double getCelsius() {
		return celsius;
	}
	public void setCelsius(double celsius) {
		this.celsius = celsius;
	}
	public double getFahrenheit() {
		return fahrenheit;
	}
	
	public boolean getInitial(){
		return initial;
	}
	
	public String reset (){
		initial = true;
		fahrenheit =0;
		celsius = 0; 
		return "reset";
	}
	public String celsiusToFahrenheit(){
		initial = false; 
		fahrenheit = (celsius *9 / 5) +32;
		return "calculated";
	}
	
}

4.4. Define managed bean

Double-click on faces-config.xml in the WEB-INF directory and select the tab "ManagedBeans".

Press add and maintain your class.

The result should look like the following:

4.5. Create JSP

Select your project, right click on it, select New -> JSP. Create the JSP page "Convertor.jsp". Use the "New JavaServer Faces (JSF) Page (html)" template.

Change the coding to the following.

				
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<!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>Celsius to Fahrenheit Convertor</title>
</head>
<body>
<f:view>
	<h:form>
		<h:panelGrid columns="2">
			<h:outputLabel value="Celsius"></h:outputLabel>
			<h:inputText  value="#{temparaturConvertor.celsius}"></h:inputText>
		</h:panelGrid>
		<h:commandButton action="#{temparaturConvertor.celsiusToFahrenheit}" value="Calculate"></h:commandButton>
		<h:commandButton action="#{temparaturConvertor.reset}" value="Reset"></h:commandButton>
		<h:messages layout="table"></h:messages>
	</h:form>
	
	
	<h:panelGroup rendered="#{temparaturConvertor.initial!=true}">
	<h3> Result </h3>
	<h:outputLabel value="Fahrenheit "></h:outputLabel>
	<h:outputLabel value="#{temparaturConvertor.fahrenheit}"></h:outputLabel>
	</h:panelGroup>
</f:view>
</body>
</html>

Tip

All JSF tag must be always be enclosed in a <f:view> tag.

4.6. Run your webapplication

Select Convertor.jsp, right mouse-click- >run as -> run on server.

Congratulations. You should be able to use your JSF application.

4.7. Layout via css

JFP application can get styles via css files. To load a style sheet include the following in your JSP page in the header section. This then related to a mystyle.css file under your folder WebContent/css..

				
<LINK href="<%=request.getContextPath()%>/css/mystyle.css" rel="stylesheet" type="text/css">

Prev		Next
3. Installation	Home	5. Your second JSF application

vogella.de