49289b42d74af13b962f5206549b9c4e.ppt
- Количество слайдов: 27
1 Web Applications – The Basics
2 Unzipped Tomcat Folder
3 Environment variables • CATALINA_HOME=d: toolstomcat • PATH – Add d: toolstomcatbin • startup. bat • shutdown. bat
4 Default Page
5 http: //localhost: 8080/abc/f 1. txt
6 Text File: webapps/abc/f 1. txt Hi There
7 f 2. html
8 HTML file: webapps/abc/f 2. html <html> <body> <h 2>This is a headline</h 2> Some text <b>bold</b>, <i>italics</i>, <u>underline</u> <p>A new paragraph, with a <a href="f 1. txt">link</a> to the first page. </p> </body> </html>
9 f 3. html
10 Javascript: webapps/abc/f 3. html <html> <body> <h 2 id="xy 256">Click me!</h 2> 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() { $("#xy 256"). click(function() { alert("Current time is " + new Date()); }); </script> </body> </html>
11 f 4. html
12 More Javascript: f 4. 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 = parse. Int(v)*2; $("#output"). html("N*2=<b>" + v + "</b>"); }); </script> </body> </html>
13 Sending Data
14 f 5. 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/f 6. 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 f 6. 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. index. Of(s); if(i >= 0) { var input = location. search. substring(i + s. length); $("#output"). html(input); } }); </script> <h 2>Nice to see you, <span id="output"/></h 2> </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: d 1. 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. w 3. org/2001/XMLSchema-instance" xsi: schema. Location="http: //java. sun. com/xml/ns/javaee/web-app_2_5. xsd" version="2. 5"> <servlet-name>S 1</servlet-name> <servlet-class>p 1. S 1</servlet-class> </servlet> <servlet-mapping> <servlet-name>S 1</servlet-name> <url-pattern>/d 1. html</url-pattern> </servlet-mapping> </web-app>
19 Source code: S 1. java package p 1; 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 S 1 extends Http. Servlet { private static final long serial. Version. UID = -1224125312164793742 L; @Override protected void do. Get(Http. Servlet. Request req, Http. Servlet. Response resp) throws IOException { resp. set. Content. Type("text/html"); resp. set. Character. Encoding("UTF-8"); resp. get. Writer(). 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. w 3. org/2001/XMLSchema-instance" xsi: schema. Location="http: //java. sun. com/xml/ns/javaee/web-app_2_5. xsd" version="2. 5"> <servlet-name>S 1</servlet-name> <servlet-class>p 1. S 1</servlet-class> </servlet> <servlet-mapping> <servlet-name>S 1</servlet-name> <url-pattern>/d 1. html</url-pattern> </servlet-mapping> <servlet-name>S 2</servlet-name> <servlet-class>p 1. S 2</servlet-class> </servlet> <servlet-mapping> <servlet-name>S 2</servlet-name> <url-pattern>/d 2. html</url-pattern> </servlet-mapping> </web-app>
23 Source code: S 2. java package p 1; import java. io. IOException; import javax. servlet. http. *; public class S 2 extends Http. Servlet { private static final long serial. Version. UID = -1224125312164793742 L; @Override protected void do. Get(Http. Servlet. Request req, Http. Servlet. Response resp) throws IOException { resp. set. Content. Type("text/html"); resp. set. Character. Encoding("UTF-8"); resp. get. Writer(). println("<html><body>Nice to see you, " + req. get. Parameter("input") + "</body></html>"); } }
24 )copying S 2. 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
49289b42d74af13b962f5206549b9c4e.ppt