We will learn how to use JSP (Java Server Pages) to create HTML from and treat it using bean object. This is illustrated with a Web application based on Tomcat server.
Config Web server Tomcat
- Step 1: Download Tomcat server from Apache site: http://tomcat.apache.org/download-70.cgi (version 6.0 and higher)
- Step 2: setup your environment variables:
JAVA_HOME = absolute path to your java root directory
CATALINA_HOME = absolute path to your Tomcat folder
Create a Web application in Tomcat server
- Go to the Tomcat/webapps folder
- Create a sub folder testAdd with a sub folder WEB-INF and two .jsp as following structure:
- Edit the file add.jsp as follow:
<%@page language="java" import = " java.util.*, java.awt.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>JSP demo test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
</HEAD>
<BODY leftMargin=0 topMargin=0>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="100%" height="133">
<form method="POST" name = "addForm" action="doAdd.jsp" >
<p align="left">First number:
<input type="text" name="firstnumber" size="12"></p>
<p align="left">Second number:
<input type="text" name="secondnumber" size="12"></p>
<p align="left"><input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2"></p>
</form>
<p> </td>
</tr>
</table>
</BODY>
</HTML>
Note that this file will create a Web form with two textfields to enter the two numbers to calculate. Once the submit button is clicked, the server will call the page doAdd.jsp to treat this form (this is defined in the blue line code).
Run the server Tomcat (file startup.bat in the Tomcat/bin) and then start your Web browser and type URL: http://localhost:8080:testAddBean/add.jsp. The results will appear as follow:
- We have to define an entity class to cover the two parameters firstnumber and secondnumber from this Web form.
package entity;
public class Calculator {
private String firstnumber;
private String secondnumber;
private String result;
public Calculator(){
super();
}
public Calculator(String a, String b){
super();
firstnumber = a;
secondnumber = b;
}
public String getFirstnumber() {
return firstnumber;
}
public void setFirstnumber(String firstnumber) {
this.firstnumber = firstnumber;
}
public String getSecondnumber() {
return secondnumber;
}
public void setSecondnumber(String secondnumber) {
this.secondnumber = secondnumber;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
}
Note that the name of attributes in the entity class must be identical with the name of Web form variables that we want to cover.
- Compiler the entity class and then, copy the package (containing the file Calculator.class) into the WEB-INF/class folder.
- Edit the file doAdd.jsp as follow:
<%@page language="java" import = "java.util.*, java.awt.*, entity.*"%>
<jsp:useBean id="calculator" class="entity.Calculator" scope="request"/>
<jsp:setProperty name="calculator" property="*"/>
<%
calculator.setResult(String.valueOf(Double.parseDouble(calculator.getFirstnumber())+
Double.parseDouble(calculator.getSecondnumber())));
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>JSP demo test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
</HEAD>
<BODY leftMargin=0 topMargin=0>
The sum is: <%= calculator.getResult() %>
</BODY></HTML>
Note that the two lines of code in blue enable this page to filter the value of form variables from the submitted form (in the page add.jsp) into respective attributes of the class Calculator. This is the main difference from the way using parameters of request object.
The line The sum is: <%= calculator.getResult() %> will display the value of the variable calculator.getResult() on the Web form.
No comments:
Post a Comment