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