1 Web Applications – The Basics. 2 Unzipped Tomcat Folder

1

Web Applications – The Basics

2

Unzipped Tomcat Folder

3

Environment variables

• CATALINA_HOME=d:\tools\tomcat

• PATH– Add d:\tools\tomcat\bin

• startup.bat • shutdown.bat

4

Default Page

5

http://localhost:8080/abc/f1.txt

6

Text File: webapps/abc/f1.txtHi There

7

f2.html

8

HTML file: webapps/abc/f2.html<html><body><h2>This is a headline</h2>Some text <b>bold</b>, <i>italics</i>, <u>underline</u>

<p>A new paragraph, with a <a href="f1.txt">link</a> to the first page.</p>

</body></html>

9

f3.html

10

Javascript: webapps/abc/f3.html<html><body>

<h2 id="xy256">Click me!</h2>some text...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

</script>

<script type="text/javascript"> $(document).ready(function() { $ ("#xy256").click(function() { alert("Current time is " + new Date()); } ); } );</script>

</body></html>

11

f4.html

12

More Javascript: f4.html<html><body>

<p>N:<input id="input" type="text"/></p><p><button id="compute" type="button">Compute!</button></p><p id="output"/>


</script>

<script type="text/javascript"> $(document).ready(function() { $("#compute").click(function() { var v = $("input").val(); v = parseInt(v)*2; $("#output").html("N*2=<b>" + v + "</b>"); }); });</script>

</body></html>

13

Sending Data

14

f5.html<html><body>


</script>

<script type="text/javascript"> $(document).ready(function() { $ ("#compute").click(function() { var v = $ ("input").val(); location.assign(location.protocol + "//"

+ location.host + "/abc/f6.html?input=" + v); } ); } );</script>

<p>What is your name? <input id="input" type="text"/></p><p><button type="button" id="compute">Welcome!</button></p>

</body></html>

15

f6.html<html><body>


</script>

<script type="text/javascript"> $(document).ready(function() { // Cuation: Hack ahead. // Use a standard parameter parsing library instead var s = "input="; var i = location.search.indexOf(s); if(i >= 0) { var input = location.search.substring(i + s.length); $("#output").html(input); } });</script>

<h2>Nice to see you, <span id="output"/></h2></body></html>

16

So far, we saw…

• Static (hard coded) pages

• Some HTML elements

• Reactive pages – Thanks to Javascript

• Sending data between pages

17

Dynamic Server Content: d1.html

18

webapps/abc/WEB-INF/web.xml<?xml version="1.0" encoding="ISO-8859-1"?><web-app 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-app_2_5.xsd" version="2.5">

<servlet> <servlet-name>S1</servlet-name> <servlet-class>p1.S1</servlet-class> </servlet>

<servlet-mapping> <servlet-name>S1</servlet-name> <url-pattern>/d1.html</url-pattern> </servlet-mapping>

</web-app>

19

Source code: S1.javapackage p1;

import java.io.IOException;import java.util.Date;

import javax.servlet.http.*;

//// IMPORTANT: Needs servlet-api.jar in order to compile!// Can be found at <tomcat-dir>/lib//

public class S1 extends HttpServlet { private static final long serialVersionUID = -1224125312164793742L;

@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { resp.setContentType("text/html"); resp.setCharacterEncoding("UTF-8"); resp.getWriter().println("<html><body>Current time " + new Date() + "</body></html>"); }}

20

webapps/abc/WEB-INF/classes

21

Sending Data – to the Server

22webapps/abc/WEB-INF/web.xml<?xml version="1.0" encoding="ISO-8859-1"?><web-app 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-app_2_5.xsd" version="2.5">


<servlet-mapping> <servlet-name>S1</servlet-name> <url-pattern>/d1.html</url-pattern> </servlet-mapping>


<servlet-mapping> <servlet-name>S2</servlet-name> <url-pattern>/d2.html</url-pattern> </servlet-mapping></web-app>

23

Source code: S2.javapackage p1;

import java.io.IOException;import javax.servlet.http.*;

public class S2 extends HttpServlet { private static final long serialVersionUID = -1224125312164793742L;

@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { resp.setContentType("text/html"); resp.setCharacterEncoding("UTF-8"); resp.getWriter().println("<html><body>Nice to see you, " + req.getParameter("input") + "</body></html>"); }}

24

(copying S2.class to classes)

25

Comments• Changes in classes, web.xml require a restart of tomcat

• IDE can “talk” to the server– Debug a servlet as it runs– Download the necessary plugin(s)

• Automate the (development) deployment process

• This is the most primitive way to work with Tomcat– Frameworks will ease your life (Spring, Grails, …)

• Extending a servlet makes your life difficult– Testing, debugging, resusing– Delegate to a POJO

• Persistency: Files will not work– Serialization is evil– Files get corrupted– SQL simplifies data manipulation

26

Comments (cont.)

• Cross-browser incompatibility– Use a good Javascript library from day one– JQuery, Dojo, Prototype, …

• Distributed programming– Two processes: Server (Java), Client (Javascript)– No shared heap– IDs are used as pointers

• Additional techniques: CSS, Ajax, …

27

An excellent starting point

“Developing a Spring Framework MVC application step-by-step”

http://static.springsource.org/docs/Spring-MVC-step-by-step

Documents

1 Web Applications – The Basics. 2 Unzipped Tomcat Folder