l12web-apps-basics
Download
Report
Transcript l12web-apps-basics
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.txt
Hi 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="
});
});
</script>
+ v);
<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.java
package 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
webapps/abc/WEB-INF/web.xml
22
<?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.java
package 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)
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
25
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-MVCstep-by-step