JSF 2.2 – Java Server Faces : JSF Calculator Example
| JSF Calculator Example |
Create New Web Application Project using eclipse. and then create a package and then add below class.
Actually it is managed Bean in JSF here it is named as Calculator.
Calculator.java
package com.javaskool;
import javax.faces.event.ActionEvent;
/**
*@author anuj verma */
public class Calculator {
private int num1;
private int num2;
private int sum;
/** Creates a new instance of Calculator */
public Calculator() {
}
public int getNum1() {
return num1;
}
public void setNum1(int num1) {
this.num1 = num1;
}
public int getNum2() {
return num2;
}
public void setNum2(int num2) {
this.num2 = num2;
}
public int getSum() {
return sum;
}
public void setSum(int sum) {
this.sum = sum;
}
public void addNumber(ActionEvent e)
{
sum=num1+num2;
}
}
Now write the code for form entry that will take two numbers.
welcomeJSF.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@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">
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h:form>
Please Enter Numbers:<BR>
First Number <h:inputText id="num1" value="#{Calculator.num1}"/><br>
Second Number<h:inputText id="num2" value="#{Calculator.num2}"/><br>
Sum is <h:outputText id="sum" value="#{Calculator.sum}"/><br>
<h:commandButton actionListener="#{Calculator.addNumber}" value="Add"/><br>
</h:form>
</body>
</html>
</f:view>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>JSFFirstCalculatorExample</display-name>
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/welcomeJSF.jsp</welcome-file>
</welcome-file-list>
</web-app>
faces-config.xml
<?xml version='1.0' encoding='UTF-8'?>
<!-- =========== FULL CONFIGURATION FILE ================================== -->
<faces-config version="1.2"
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">
<managed-bean>
<managed-bean-name>Calculator</managed-bean-name>
<managed-bean-class>com.javaskool.Calculator</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>
Output.
| Downloads Example |
Recent Comments