JavaServer Pages Fundamentals Prof. Dr.-Ing. Thomas Korte Laboratory of Information Technology 1
Introduction to JSP JavaServer Pages (JSP) is a Java technology which enables the development of dynamic web sites. JSP was developed by Sun Microsystems to allow server side development. JSP files are HTML files with special Tags containing Java source code that provide the dynamic content. 2
Why Should I Use JSP? JSP is easy to learn and allows developers to quickly produce web sites and applica@ons in an open and standard way. main advantages of JSP: multi-platform, i.e. JSPs can be moved to different platforms uses Java and is therefor not locked to qspecific vendor provides a separation between presentation (HTML) and implementation (Java) code 3
JSP Compared to Other Technologies JSP compared to ASP or ASP.NET Microsofts Active Server Pages similar functionality both allow embedded code in HTML pages, session variables and database access ASP is bound to Microsoft ASP.NET supports application development using different languages such as Visual Basic, C# and JavaScript JSP compared to Servlets A Servlet is a Java class that provides special server side service. It is hard work to write HTML code in Servlets. In Servlets you need to have lots of println statements to generate HTML. JSP pages are converted to Servlets so actually can do the same thing as old Java Servlets. 4
JSP Architecture JSPs are built on top of the servlet technology. JSPs are essential an HTML page with special JSP tags embedded. These JSP tags can contain Java code. The JSP file extension is.jsp rather than.htm or.html. The JSP engine parses the.jsp and creates a Java servlet source file. It then compiles the source file into a class file, this is done the first time and this why the JSP is probably slower the first time it is accessed. Any time after this the special compiled servlet is executed and is therefore returns faster. The figure on the next page depicts a JSP request from a web browser. 5
Requesting a JSP Page 3.The Web server recognises the file from its.jsp extension and passes it to the JSP Servlet Engine. If the JSP file has not been called the first time, step 7 is performed. 4.If the JSP file has been called the first time, servlet source code is generated from the JSP file. 5.All the HTML text is converted to println statements. 6.The servlet source code is compiled into a class. 7.The Servlet is instantiated,calling the init and service methods. 8.HTML from the Servlet output is sent via the Internet. 9.HTML results are displayed on the user's web browser. 6
Setting up a JSP Environment get a Java SE JDK download the JSP environement http://java.sun.com/products/jsp/index.jsp download a web server and a JSP and Servlet engine A much used option is to download the Tomcat server. In Tomcat, a free open source Web server is combined with a JSP and Servlet engine, developed by the Apache foundation. http://tomcat.apache.org» alternatively download the NetBeans IDE, which contains Web/applications servers and the JSP and servlet libraries. 7
Creating Your first JSP Page Type the code below into a text file index.jsp and place it in the correct directory into your JSP web server instala@on. Then call it via your browser. <html> <head> <title>my first JSP page </title> </head> <body> <%@ page language="java" %> <% out.println("hello World"); %> </body> </html> 8
Using JSP Tags There are five main tags: Declaration tag Expression tag Directive tag Scriptlet tag Action tag Declara@on Tag ( <%! %> ) This tag allows the developer to declare variables or methods. Before the declaration you must have <%! At the end of the declaration,the developer must have %> Code placed in this tag must end in a semicolon ( ; ). Declarations do not generate output so are used with JSP expressions or scriptlets. For Example: <%! private int counter = 0 ; private String get Account ( int accountno) ; %> 9
Expression Tag Expression tag ( <%= %>) This tag allows the developer to embed any Java expression and is short for out.println(). A semicolon ( ; ) does not appear at the end of the code inside the tag. For example,to show the current date and time: Date : <%= new java.util.date() %> 10
Directive Tag direc@ve tag ( <%@ direc@ve... %> ) A JSP directive gives special information about the page to the JSP Engine. There are three main types of directives: 1) page - processing information for this page. 2) Include - files to be included. 3) Tag library - tag library to be used in this page. Directives do not produce any visible output when the page is requested but change the way the JSP Engine processes the page. For example,you can make session data unavailable to a page by setting a page directive (session) to false. 11
Sciptlet Tag scriptlet tag ( <%... %> ) Between <% and %> tags, any valid Java code is called a Scriptlet. This code can access any variable or bean declared. For example, to print a variable: <% String username = "visualbuilder" ; out.println ( username ) ; %> 12
Action Tag There are three main roles of ac@on tags: 1. enable the use of server side Javabeans 2. transfer control between pages 3. browser independent support for applets. A Javabean is a special type of class that has a number of specially named methods. The JSP page can call these methods so almost all Java code in JSPs can be hidden in Javabeans. To use a Javabean in a JSP page use the following syntax: <jsp : usebean id = "..." scope = "application" class = "com..." /> The following is a list of Javabean scopes: page - valid until page completes. request - bean instance lasts for the client request session - bean lasts for the client session. application - bean instance created and lasts until application ends. 13
Creating Your Second JSP Page crea@ng a page visit counter <HTML> <HEAD> <TITLE>Using the Application Object</TITLE> </HEAD> <BODY> <H1>Using the Application Object</H1> <% Integer counter = (Integer)session.getAttribute("counter"); String heading = null; if (counter == null) { counter = new Integer(1); else { counter = new Integer(counter.intValue() + 1); session.setattribute("counter", counter); %> Integer applicationcounter = (Integer)application.getAttribute("applicationCounter"); if (applicationcounter == null) { applicationcounter = new Integer(1); else { applicationcounter = new Integer(applicationCounter.intValue() + 1); application.setattribute("applicationcounter", applicationcounter); You have visited this page <%=counter%> times. <BR> This page has been visited by all users <%=applicationcounter%> times. </BODY> </HTML> 14
Implicit Objects The Servlet creates several implicit objects a JSP can access: 15
The Implicit Object out out object example: outexample.jsp <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!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>insert title here</title> </head> <body> <% for(int i=0;i<10;i++){ for(int j=0;j<=i;j++){ out.print("*"); out.println("<br>"); %> </body> </html> 16
The Implicit Objects request, response request object The request object is created for each request and once the response is submitted then it gets destroyed. The request object is used to pass the information from one page to the other page if the pages are getting invoked during the request lifecycle. response object The response object is used to send and set the information at the client side. The cookies are the small files used to save the information in the client machine which can be used for some further actions and state maintenance. 17
The Implicit Object session session object example The session object is an instance of HttpSession and is used to track information about a particular client. Each client has one global session object. When a user sends the fist request to the JSP engine, it will issue a session id to track the information for the transaction. The below example will show the session id as well as the count which shows how many times the page is accessed during the current session. sessionexample.jsp <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!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>insert title here</title> </head> <body> Sesion id for the Session is :- <%=session.getid() %><br> <% if (session.getattribute("count")!= null){ int count = Integer.parseInt((String)session.getAttribute("count")); count++; out.println("the number of times the page accessed " + count ); session.setattribute("count",string.valueof(count)); else{ session.setattribute("count","1"); out.println("the page is accessed for the first time"); %> </body></html> 18
The Implicit Object application applica@on object Unlike session object which are created separately for each client browser, one application object is created for whole application. This object remains in the memory once the application is initialized. It is destroyed when the application will be removed from the server or the server shuts down. This is a static object which is shared by all the clients. The application object is normally used to cache data for better performance. The page counter example from a previous page uses the application object. 19
Working with HTML forms The basic form control aqributes: 20
A HTML Form Example username/password request form (login.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-language" content="en-us"> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>login Form</title> </head> <body> <p align="left"><b>login Form </b></p> <form name="loginform" > <table border="1" width="50%" cellspacing="1" cellpadding="0" id="table1"> <tr> <td width="50%"> Login Name</td> <td><input type="text" name="loginname" size="20"></td> </tr> <tr> <td width="50%">password</td> <td><input type="password" name="password" size="20"></td> </tr> </table> <p><input type="submit" value="submit" name="b1"><input type="reset" value="reset" name="b2"></p> </form> </body> </html> no ac@on is associated with this form 21
How to Get Data From a Form How do we get the form data into a JSP Page? We need to first define which JSP page should be accessed when this form is submitted. This can be achieved by the action attribute in the <form>. For example: <form action="login.jsp"> will generate a request for the login.jsp page when the submit button will be clicked for the form. We then need to create the file login.jsp to show the data which the user has sent from the login.html page from the previous example. Example login.jsp file: (next page) 22
A HTML Form Example With JSP-Processing username/password request form (Login.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-language" content="en-us"> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>login Form</title> </head> <body> <p align="left"><b>login Form </b></p> <form name="loginform" method = "POST" action = "login.jsp" > <table border="1" width="50%" cellspacing="1" cellpadding="0" id="table1"> <tr> <td width="50%"> Login Name</td> <td><input type="text" name="loginname" size="20"></td> </tr> <tr> <td width="50%">password</td> <td><input type="password" name="password" size="20"></td> </tr> </table> <p><input type="submit" value="submit" name="b1"><input type="reset" value="reset" name="b2"></p> </form> </body> </html> now the ac@on is to call up login.jsp 23
The login.jsp Page to Process The Form <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!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>login Form Data</title> </head> <body> <b>submitted Values are </b> <table border="1" width="50%" cellspacing="1" cellpadding="0" id="table1"> <tr> <td width="50%"> Login Name</td> <td><%=request.getparameter("loginname") %></td> </tr> <tr> <td width="50%">password</td> <td><%=request.getparameter("password") %></td> </tr> </table> </body> </html> 24
HTML Form Validation form valida@on Form validation is the process of checking that a form has been filled in correctly before it is processed. There are mainly two types of form validations: server-side (using JSP ASP, etc), and client-side (usually done using JavaScript). The difference is: Client side validation runs in the browser to check that the form values are of the correct type. It should be done using JavaScript (VBScript is supported only by IE). Server side validation checks the code that is submitted to make sure it is correct. The following example will show how to use JavaScript to validate the login form: 25
HTMl form validation using JavaScript <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/ loose.dtd"> <html><head><meta http-equiv="content- Language" content="en-us"> <meta http-equiv="content-type" content="text/ html; charset=windows-1252"> <title>registration Form</title> </head><script> function validateform(form){ if(form.firstname.value==''){ alert ("First Name can not be blank"); return false; if(form.lastname.value==''){ alert ("Last Name can not be blank"); return false; if(form.introduction.value==''){ alert ("Introduce Yourself can not be blank"); return false; if(form.phone.value==''){ alert ("Phone can not be blank"); return false; if(form.address.value==''){ alert ("Address can not be blank"); return false; if(form.city.value==''){ alert ("City can not be blank"); return false; if(form.state.value==''){ alert ("State can not be blank"); return false; </script><body> <p align="left"><b>registration Form</b></p> <form name="registerationform" method="post" action="processregistration.jsp" onsubmit="return validateform(document.registerationform); "> <table border="1" width="70%" cellspacing="1" cellpadding="0" id="table1"> <tr><td width="50%">first Name</td> <td><input type="text" name="firstname" size="20"></td> </tr><tr> <td width="50%">last Name</td> <td><input type="text" name="lastname" size="20"></td> </tr><tr> <td width="50%">introduce Yourself</td> <td><textarea name="introduction" cols="40" rows="10"></textarea></td> </tr><tr> <td width="50%">gender</td> <td><input type="radio" value="v1" checked name="radio1">male <input type="radio" name="radio1" value="v2">female</td> </tr><tr> <td width="50%">phone</td> <td><input type="text" name="phone" size="20"></ td></tr><tr>... <td width="50%">state</td> <td><input type="text" name="state" size="20"></td> </tr><tr> <td width="50%">country</td> <td><select size="1" name="country"> <option selected value="united Kingdom">United Kingdom</option> <option>usa</option> <option>other</option> </select></td> </tr></table> <p><input type="submit" value="submit" name="b1"><input type="reset" value="reset" name="b2"></p> </form></body></html> 26
Layout of The Form 27
The Same Validation using a JSP page validateregistra@onwithjsp.jsp <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-language" content="en-us"> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>registration Form</title> </head> <body> <p align="left"><b>registration Form</b></p> <form name="registerationform" method="post" action="validateregistrationwithjsp.jsp"> <table border="1" width="70%" cellspacing="1" cellpadding="0" id="table1"> <% String errors=(string)request.getattribute("errors"); if(errors!= null && errors.trim().length()>0){ out.println("<tr><td colspan='2'>the following are the errors with given data<br>"+errors+"</td></tr>"); %> <tr> <td width="50%">first Name</td> <td><input type="text" name="loginname" size="20" value="<%=request.getparameter("loginname")!=null?request.getparameter("loginname"):""%>"></ td></tr> <tr> <td width="50%">last Name</td> <td><input type="text" name="password" size="20" value="<%=request.getparameter("password")!=null?request.getparameter("password"):""%>"></ td></tr> <tr> <td width="50%">introduce Yourself</td> <td><textarea name="intro" cols="40" rows="10"><%=request.getparameter("intro")!=null?request.getparameter("intro"):""%></textarea></td> </tr> <tr> <td width="50%">gender</td> <td> 28
Bildschirmausgabe nach Fehlern 29
Die Seite validateregistrationwithjsp.jsp <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!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"> </head> <body> <% String loginname=request.getparameter("loginname"); String password=request.getparameter("password"); String intro=request.getparameter("intro"); String gender=request.getparameter("r1"); String phone=request.getparameter("phone"); String address=request.getparameter("address"); String city=request.getparameter("city"); String state=request.getparameter("state"); String country=request.getparameter("country"); String errors=""; if(loginname ==null loginname.trim().length() ==0){ errors=errors+"<li>please enter the Login Name<br>"; if(password ==null password.trim().length() ==0){ errors=errors+"<li>please enter the Password<br>"; if(intro ==null intro.trim().length() ==0){ errors=errors+"<li>please enter the introduction<br>"; if(gender ==null gender.trim().length() ==0){ errors=errors+"<li>please select Gender<br>"; if(phone ==null phone.trim().length() ==0){ if(address ==null address.trim().length() ==0){ errors=errors+"<li>please enter address<br>"; if(city ==null city.trim().length() ==0){ errors=errors+"<li>please enter city<br>"; if(state ==null state.trim().length() ==0){ errors=errors+"<li>please enter state<br>"; if(country ==null country.trim().length() ==0){ errors=errors+"<li>please enter country<br>"; if( errors.trim().length() >0){ request.setattribute("errors",errors); %> <jsp:forward page="registerwithvalidation.jsp"></ jsp:forward> <% %> <h1>the given data is Valid.</h1> </body> </html> errors=errors+"<li>please enter phone<br>"; 30
Concentrating JSP Java-Code into Beans For beqer readability of JSP pages, the embedded Java code may be moved into the Java Beans Java Beans are normal Java classes, which use a naming convention to allow for easy introspection and reflection. JSP use special tags to set and get the data from a Java Beans. The same example using a Bean: validateregistra@onwithbean.jsp <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-language" content="en-us"> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>registration Form</title> </head> <body> <p align="left"><b>registration Form</b></p> <form name="registerationform" method="post" action="validateregistrationwithbean.jsp"> <table border="1" width="70%" cellspacing="1" cellpadding="0" id="table1"> <% String errors=(string)request.getattribute("errors"); if(errors!= null && errors.trim().length()>0){ out.println("<tr><td colspan='2'>the following are the errors with given data<br>"+errors+"</ td></tr>");... 31
Die Seite validateregistrationwithbean.jsp <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!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"> </head> <body> <jsp:usebean id="bean" class="com.visualbuilder.beans.registrationbean"/> <jsp:setproperty name="bean" property="*"/> <% com.visualbuilder.beans.registrationbean register=(com.visualbuilder.beans.registrationbean)pagecontext.getattribute("bean"); register.validate(request); String errors= (String)request.getAttribute("errors"); if( errors.trim().length() >0){ %> <jsp:forward page="registerwithbean.jsp"></jsp:forward> <% %> <h1>the given data is Valid.</h1> </body> </html> 32
Die Java Bean RegistrationBean.java package com.visualbuilder.beans; import javax.servlet.http.httpservletrequest; public class RegistrationBean { String loginname, password, intro, gender, phone, address, city, state, country; public String getloginname() { return loginname; public void setloginname(string loginname) { this.loginname = loginname; public String getpassword() {... public void validate(httpservletrequest request){ String errors=""; if(loginname ==null loginname.trim().length() ==0){ errors=errors+"<li>please enter the Login Name<br>";... if(password ==null password.trim().length() ==0){ 33
Further Reading jguru: Introduc.on to JavaServer Pages technology http://java.sun.com/developer/onlinetraining/jspintro/index.html Servlet and JavaServer Pages technology free online books http://books.coreservlets.com/ especially read Chapter 3 of this book A Fast Introduction to Basic JSP Programming http://pdf.moreservlets.com/more-servlets-and-jsp-chapter-03.pdf 34
What is a Web Application? A client/server applica@on using a collec@on of web components on the server, which are: servlets, JavaServer Pages, tag libraries, Web services, JavaBeans. examples: electronic shopping mall auction site 35
Request and Response in a Web Application browser sends requests to web server web server passes request to a web applica@on web applica@on runs inside a servlet container web applica@on generates a response FIGURE 1-1 servlet container translates JSPs into servlets in order to run them in a web server Requests and Responses in a Web Application Web applications consist of a varied set of interrelated web components. This set includes JSP pages, servlets, and tag libraries that work together. Resources utilized within the web application must be coordinated using a deployment descriptor file. This file contains the meta-information that describes the web application. The servlet container translates JSP files into servlets in order to run them in the web server. Chapter 2 provides describes more detailedthe explanations components of the in this illustration. deployment descriptor (XML file) (resources) of the web application Challenges in Developing Web Applications Two key characteristics distinguish web applications from standalone applications: 36
Web Application Characteristics In contrast to standalone applica@ons, web applica@on components do not interact directly, but via a servlet container and a web browser. servlet container: web server extension to excute Java code of web components Data representa@on, flow, and processing are distributed among the client browser, the servlet container, and individual web components Informa@on storage and database access take place in the server. The application resides on the server. 37
Web Application Development is Different Web components communicate with one another through the servlet container. Data is always passed as strings An applica@on consists of coopera@ng processes. Tes@ng must take place on mul@ple browsers and servers. Debugging is difficult! The deployment of a Web applica@on is typically a @me consuming task. 38
How IDEs can Help IDES help with: editors for JSP Pages, servlets, tag libraries syntax coloring, code checking, code completion, compilation, UML diagrams wizards for the generation of web service components generation of the deployment descriptor deployment descriptor: xml-file that describes the components of a web application deployment with a web module structure execution support source level debugging of JSPs, servlets and helper classes http requests and responses can be captured 39
The Structure of Web Applications The server side elements of a web applica@on are called a web module. A web module contains the web components. A web module runs inside a servlet container. A servlet container is contained within a web server. The contents of a web module: presentation elements define views = pages the users see and interact with» HTML files and/or JSP pages controller element model controls page flow, filters in/output» a servlet the application logic and resources 40
Web Server A Web server provides mechanisms for clients to access resources on a server. The mechanisms include support for http and other protocols execution of server side programms support for servlet container Servlet Container offer services for the web components of a web module life-cycle management network services for requests and responses decoding of requests and formatting of responses interpretation and processing of JSP pages into servlets 41
Web Modules A Web module is a deployable unit consis@ng of web components and sta@c content files (e.g. images, HTML files). It resides in a root directory. It contains a standard layout of subfolders. It contains a deployment descriptor: web.xml file 42
JavaServer Faces A Server Side User Interface Component Framework based on the JSP technology further reading: http://www.coreservlets.com/jsf-tutorial/ 43
Web Applications With a Browser Interface JSF is a liqle more elaborate than JSP. The user interface runs on the server. It is using a set of UI components a browser is able to render. Special: Java UI components are mapped to special HTML tags. 44
JSF Architecture JavaServer Faces technology components: API representing UI components: state management, event handling, validation, data conversion, page navigation two JavaServerPages custom tag libraries map components to server-side java objects!"#$%&&!"#$()*+!"4$-5/.$1($*2+'(3!"#$%&&!"#$%&' 41(+*'+$-5/63 "'()*'+,$-./0$1($*2+'(3 45
Benefits The separa@on of programm logic (Java code) from presenta@on (HTML code). Page designers and java programmers can focus on their piece of the development process. There is a component specific event handling. UI elements are stateful objects on the server. Model View Controller Architecture.(&/'(%9"#$%+1$(& :;. 5-(&!"#$%&'%()!"#$%&#''(&) *+,(-.(&/'(% 0"#$%1.2%-) 3"#45()/5)./)% 6"#$%(7,5(%!01(2)!6#7(') 6+$+8(795(+$ 3.4 *"#+((,-./)% 46
A JavaServer Faces Application runs in a servlet container and contains: JavaBeans components containing application-specific functionality and data Event Listeners HTML pages written as JSP pages server-side helper classes, such as DB access beans has: a custom HTML tag library for rendering UI components on a page a custom tag library for representing event handlers, validators, and other actions UI components represented as stateful objects on the server an application configuration resource file 47
MVC Pattern The model contains applica@on data. The view is a JavaServer page. The controller is a FacesServlet which receives the HTTP request which populates a form bean with values from request parameters which validates the form bean using standard and user-written validators, and redisplays the page if errror are found which dispatches to an Action to process the form 48