P&O3: Tools & methodologies Stefaan Ternier

Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

HTTP over TCP/IP Server - side Client – side Eg.

TCP/IP protocol Data link IP (Internet Protocol)‏ TCP (reliable services)‏UDP (unreliable services)‏ browserapplication

TCP/IP protocol Data link IP (Internet Protocol)‏ TCP browser … Data link IP (Internet Protocol)‏ TCP Web server

HTTP over TCP/IP Server - side Client – side Eg. (axis bin)‏ cd axis-1_4\lib java -cp axis.jar org.apache.axis.utils.tcpmon

HTTP - request Request line Headers Empty line Optional message

HTTP - response status line Headers Empty line Message body

HTML - forms Enter information (textfields, textarea fields, radio buttons, etc)‏ Send to server: 8 “verbs” –GET -> request data from server –POST -> submit data to be processed

HTML – a simple form Value of a: Value of b:

HTML – a simple form Value of a: Value of b:

Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

Servlets – request/response

Servlets – an example

Apache tomcat - structure …\apache-tomcat |- bin | |- startup.sh | `- startup.bat |- conf | `- server.xml |- webapps | |-SumWebapp | `-jsp-examples `- work …\SumWebApp |- index.html `- WEB-INF |- lib |- classes | `- SumServlet.class `- web.xml

Apache tomcat – web.xml SumServlet com.mycompany.SumServlet SumServlet /MyServlets/SUM

Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

Asynchronous JavaScript and XML (AJAX)‏ Server - side Client – side Javascript -> Firefox/IE [...] [...] xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = function(func) { if (xmlhttp.readyState == 4) { [...] } xmlhttp.setRequestHeader('MessageType', 'CALL'); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); [...] JAVA -> Tomcat package com.mycompany.server; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com.mycompany.client.MyAddService; public class MyAddServiceImpl extends RemoteServiceServlet implements MyAddService{ public int add(int a, int b) { return a + b; }

Server - side Client – side JavascriptJAVA + no page transition, no blocking - No IDE - Debugging is difficult - weakly typed + eclipse: debugging, easy development - good IDE’s - Debugging is easy - strongly typed Asynchronous JavaScript and XML (AJAX)‏

Google Web Toolkit run development time [...] [...] xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = function(func) { if (xmlhttp.readyState == 4) { [...] } xmlhttp.setRequestHeader('MessageType', 'CALL'); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); [...] JAVA/eclipsejavascript Hosted mode JVM IDE Compile to JAVA bytecode Compile to Javascript

GWT: project structure Client-side source files and subpackages com/mycompany/client/ The project root package contains module XML files com/mycompany/ Server-side code and subpackages com/mycompany/server/ Static resources that can be served publicly com/mycompany/public/ PurposePackage

Hello world

/localhost/packages/eclipse/eclipse-wtp/gwt-linux-1.5.2

Create new module

GWT: Build your first app final Label resultaatLabel = new Label(); final TextBox aBox= new TextBox(); final TextBox bBox= new TextBox(); final Button button = new Button("Click me"); button.addClickListener(new ClickListener() { public void onClick(Widget sender) { resultaatLabel.setText("hier komt het resultaat"); } }); RootPanel.get().add(aBox); RootPanel.get().add(bBox); RootPanel.get().add(resultaatLabel); RootPanel.get().add(button); GWT Widgets Bind to HTML page

GWT ext Add gwtext java library Update gwt.xml config file Copy resources

Update gwt.xml config file

Copy resources cd eclipsedata/SumProject/src/org/myproject/public/ cp -r /localhost/packages/eclipse/eclipse-wtp/ext-2.0.2/adapter/. cp -r /localhost/packages/eclipse/eclipse-wtp/ext-2.0.2/resources/. cp /localhost/packages/eclipse/eclipse-wtp/ext-2.0.2/ext*.