1. P&O3: Tools & methodologies Stefaan Ternier

2. Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

3. HTTP over TCP/IP Server - side Client – side Eg. http://www.cs.kuleuven.be:80/

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

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

6. HTTP over TCP/IP Server - side Client – side Eg. http://www.cs.kuleuven.be:80/ http://ws.apache.org/axis/java/releases.htmlhttp://ws.apache.org/axis/java/releases.html (axis-1.4 - bin)‏ cd axis-1_4\lib java -cp axis.jar org.apache.axis.utils.tcpmon

7. HTTP - request Request line Headers Empty line Optional message

8. HTTP - response status line Headers Empty line Message body

9. 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

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

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

12. Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

13. Servlets – request/response

15. Servlets – an example

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

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

18. Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

19. 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; }

20. 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)‏

21. Google Web Toolkit (GWT)‏ @ run time @ 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

22. 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

23. Hello world

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

26. Create new module

27. 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

28. GWT ext http://code.google.com/p/gwt-ext/ Add gwtext java library Update gwt.xml config file Copy resources

30. Update gwt.xml config file

31. 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*

32. Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

33. Google Maps – import api

35. 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

36. Google Maps - Geocoder Convert addresses to latitude/longitude pairs

37. Overview TCP/IP Servlets Google Web Toolkit Google Maps JPDA

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

39. 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-5.0.28\bin catalina.bat jpda start cd GET http://www.cs.kuleuven.be/~stefaan/NoCsBack/PEnO/tomcat.tgz > tomcat.tgz tar xvzf tomcat.tgz cd tomcat sh jakarta.sh start-debug Linux - bash Windows - cmd

40. Eclipse – setup JPDA 1 2 3

41. References Google Web Toolkit, http://code.google.com/webtoolkit/ http://code.google.com/webtoolkit/ W3 Schools, http://www.w3schools.com/http://www.w3schools.com/ Apache axis, http://ws.apache.org/axis/http://ws.apache.org/axis/ GWT – Google Maps API http://sourceforge.net/projects/gwt/ http://sourceforge.net/projects/gwt/