Post on 09-Jan-2016
description
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 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() { $("#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 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() { $ ("#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 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() { // 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> <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>
<servlet> <servlet-name>S2</servlet-name> <servlet-class>p1.S2</servlet-class> </servlet>
<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