1. Writing All Your Code In OpenEdge Architect Peter van Dam

2. 2  Agenda Item 1  Eclipse Plug-ins  ABL  JavaScript  HTML  XML  OpenEdge GUI for.NET (tomorrow) Agenda Making Progress With Ajax

3. 3 n OpenEdge Architect 10.2A is based on Eclipse 3.4 n You can install additional Plug-ins Installing Plugins

4. 4 n Progress Software conveniently provides a number of Plug-ins on the Progress Download Center n These are listed under “Eclipse Components for OpenEdge/Sonic Development Integration” n We are using the Web Tools Project (WTP) n Provides HTML, JavaScript and WSDL editors (among other things) Installing Plugins

5. 5 Sports2000 in Google Maps

6. 6 A Word About Ajax

7. 7 n An inaccurate acronym for the clever combination of the following existing techniques: n Asynchronous data retrieval using XMLHttpRequest n JavaScript n Data interchange and manipulation using XML What Is Ajax?

8. 8 n It does not have to be Asynchronous n It does not have to be XML n You definitely need JavaScript n Relies heavily on: n DHTML (Dynamic HTML) for DOM manipulation n CSS (Cascading Style Sheets) in order to separate presentation from data What Is Ajax (2)?

9. 9 The Bottom Line: NO PAGE RELOADS!

10. 10 n Obtain a Google Maps Key n Geocode Your Addresses n Create Your Google Maps Web Page n Bonus: Integrate Google Maps with.NET How To Set Up Google Maps

11. 11 n Simply go to http://code.google.com/apis/maps/ and follow the instructions http://code.google.com/apis/maps/ n A Key is free for public web sites only n You need a Google Account (also free) n The Key is valid for a single URL n There is no page view limit n There is a limit of 15,000 Geocode requests per day n Of course there is a paid alternative… Obtaining a Google Maps Key

12. 12 n Obtain a Google Maps Key n Geocode Your Addresses n Create Your Google Maps Web Page n Bonus: Integrate Google Maps with.NET How To Set Up Google Maps

13. 13 n Geocoding is the process of converting addresses into geographical coordinates n A coordinate (any point on earth) is defined by a latitude and a longitude n Latitude is between -90 and + 90 and longitude between -180 and + 180 n They are represented as numbers with 6 decimals n You must add these to the addresses in your database What Is Geocoding?

14. 14 n Google Maps allows you to geocode 15,000 addresses a day n You can either use a JavaScript object or a direct HTTP request n We can issue HTTP requests from the ABL using httpget.i Google Maps Geocoding Services

15. 15 n Procedure httpget has 4 input parameters: n Host n Port n Path n File Httpget.i

16. 16 n The URL is http://maps.google.com/maps/geo? http://maps.google.com/maps/geo? n There are 3 parameters: n key n output n q Example: key= &output=csv&q=276%2 0North%20Drive%20%20Burlington%2 001730%20USA The Geocoder

17. 17 Geocoder csv Response HTTP/1.0 200 OK Cache-Control: private Last-Modified: Sun, 27 Jan 2008 13:39:03 GMT Content-Type: text/plain; charset=UTF-8; charset=ISO- 8859-1 Set-Cookie: PREF=ID=ca4d6eaca99623eb:TM=1201441143:LM=1201441143:S=f FnZXx06nDdguvB_; expires=Tue, 26-Jan-2010 13:39:03 GMT; path=/; domain=.google.com Server: mfe Date: Sun, 27 Jan 2008 13:39:03 GMT Connection: Close 200,8,42.512095,-71.284913

18. 18 Geocoder csv Response (2) n The last line contains 4 items n HTTP status code (200: success) n Accuracy n Latitude n Longitude 200,8,42.512095,-71.284913

19. 19 Getcoordinates.p

20. 20 n Obtain a Google Maps Key n Geocode Your Addresses n Create Your Google Maps Web Page n Bonus: Integrate Google Maps with.NET How To Set Up Google Maps

21. 21 n You can call the server from JavaScript using the XMLHttpRequest object n This object is the basis for Ajax n The server needs to accept HTTP requests n Two possibilities: n WebSpeed n Web Services n In this example we will use WebSpeed How To Call A Progress Server?

22. 22 Calling Progress Using WebSpeed WebSpeed Ajax Architecture Making Progress With Ajax Ajax Engine Ajax Engine Browser Client User Interface (HTML) User Interface (HTML) WebSpeed Agent WebSpeed Agent Database Web Server Web Server Documents

23. 23 Creating the XMLHttpRequest function createRequest() { if (window.XMLHttpRequest) return new XMLHttpRequest(); else return new ActiveXObject("Microsoft.XMLHTTP"); }

24. 24 Calling the Server from JavaScript var gRequest; function callServer(url) { gRequest = createRequest(); gRequest.open("POST", url, false); gRequest.setRequestHeader("Content-Type","text/xml"); gRequest.send(null); } callServer(' '); var data = gRequest.responseXML;

25. 25 The WebSpeed Program {src/web2/wrap-cgi.i} RUN outputContentType IN web-utilities-hdl ("text/xml":U). DEFINE VARIABLE hTable AS HANDLE NO-UNDO. /* Create and populate temp-table */ hTable:WRITE-XML("STREAM", "WEBSTREAM"). DELETE OBJECT hTable.

26. 26 Gm-getxmlcustomers.p

27. 27 Processing the XML in JavaScript Hangon Potkulauta Ky Puistokatu 7 A 45 Hanko 59.82 22.97 Espoon Pallokeskus Sinikalliontie 18 Espoo 60.21 24.76

28. 28 Processing the XML in JavaScript var tableNode = data.getElementsByTagName("myTable")[0]; if (tableNode) { var rowNode = tableNode.firstChild; // first myTableRow while (rowNode) { var yAttr = new Array; var fieldNode = rowNode.firstChild; // first field while (fieldNode) { yAttr[fieldNode.nodeName] = ""; if (fieldNode.firstChild) // text node yAttr[fieldNode.nodeName] = fieldNode.firstChild.nodeValue; fieldNode = fieldNode.nextSibling; // next field } // for each field rowNode = rowNode.nextSibling; // next myTableRow } // for each row } // tableNode

29. 29 Creating the Map var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); // Initialize the map map.setCenter(new GLatLng(0, 0), 0);

30. 30 Creating the Markers var point = new GLatLng(yAttr["latitude"], yAttr["longitude"]); var title = yAttr["Name"]; var html = " " + title + " " + yAttr["Address"] + " " + yAttr["City"]; var marker = createMarker(point, title, html); map.addOverlay(marker); function createMarker(point, title, html) { var options = {title: title}; var marker = new GMarker(point, options); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; }

31. 31 Managing Bounds var bounds = new GLatLngBounds(); // Adjust the center and zoom level bounds.extend(point); map.setCenter(bounds.getCenter()); map.setZoom(map.getBoundsZoomLevel(bounds)); For each address:

32. 32 Demo

33. 33 Integration With OpenEdge GUI for.NET

34. 34 Questions ?

35. 35 www.futureproofsoftware.com peter@futureproofsoftware.com

36. 36 Thank You