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-all. cp /localhost/packages/eclipse/eclipse-wtp/ext-2.0.2/ext-all*

Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

Google Maps – import api

Google Maps public void onModuleLoad() { GMap2Widget mapWidget = new GMap2Widget("300", "400"); final GMap2 gmaps = mapWidget.getGmap(); RootPanel.get("slot1").add(mapWidget); } Module XML JAVA code

Google Maps - Geocoder Convert addresses to latitude/longitude pairs

Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

Java Platform Debugger Architecture (JPDA)‏ Server - side Client – side HTTP Port 80, 8080 JPDA Port 8000

Tomcat – setup JPDA set JPDA_ADDRESS=8000 set JPDA_TRANSPORT=dt_socket set JAVA_HOME=C:\Program Files\Java\jdk1.5.0_09 set PATH=%JAVA_HOME%\bin;%PATH% cd jakarta-tomcat \bin catalina.bat jpda start cd GET > tomcat.tgz tar xvzf tomcat.tgz cd tomcat sh jakarta.sh start-debug Linux - bash Windows - cmd

Eclipse – setup JPDA 1 2 3

References Google Web Toolkit, W3 Schools, Apache axis, GWT – Google Maps API