1 / 36

Writing All Your Code In OpenEdge Architect

Writing All Your Code In OpenEdge Architect. Peter van Dam. Agenda. Agenda Item 1 Eclipse Plug-ins ABL JavaScript HTML XML OpenEdge GUI for .NET (tomorrow). Installing Plugins. OpenEdge Architect 10.2A is based on Eclipse 3.4 You can install additional Plug-ins. Installing Plugins.

saul
Download Presentation

Writing All Your Code In OpenEdge Architect

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. Sports2000 in Google Maps

  6. A Word About Ajax

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

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

  9. The Bottom Line: NO PAGE RELOADS!

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

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

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

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

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

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

  16. The Geocoder • The URL is http://maps.google.com/maps/geo? • There are 3 parameters: • key • output • q • Example: key=<yourkey>&output=csv&q=276%20North%20Drive%20%20Burlington%2001730%20USA

  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=fFnZXx06nDdguvB_; 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. Geocoder csv Response (2) 200,8,42.512095,-71.284913 • The last line contains 4 items • HTTP status code (200: success) • Accuracy • Latitude • Longitude

  19. Getcoordinates.p

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

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

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

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

  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('<url>'); var data = gRequest.responseXML;

  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. Gm-getxmlcustomers.p

  27. Processing the XML in JavaScript <?xml version="1.0"?> <myTable xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <myTableRow> <Name>HangonPotkulautaKy</Name> <Address>Puistokatu7A45</Address> <City>Hanko</City> <latitude>59.82</latitude> <longitude>22.97</longitude> </myTableRow> <myTableRow> <Name>EspoonPallokeskus</Name> <Address>Sinikalliontie18</Address> <City>Espoo</City> <latitude>60.21</latitude> <longitude>24.76</longitude> </myTableRow>

  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. Creating the Map <body onload="load()" onunload="GUnload()"> <table border=1> <tr> <td> <div id="map" style="width: 800px; height: 380px"></div> </td> </tr> </table> </body> 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. Creating the Markers var point = new GLatLng(yAttr["latitude"], yAttr["longitude"]); var title = yAttr["Name"]; var html = "<b>" + title + "</b><br>" + yAttr["Address"] + "<br>" + 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. Managing Bounds var bounds = new GLatLngBounds(); For each address: // Adjust the center and zoom level bounds.extend(point); map.setCenter(bounds.getCenter()); map.setZoom(map.getBoundsZoomLevel(bounds));

  32. Demo

  33. Integration With OpenEdge GUI for .NET

  34. ? Questions

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

  36. Thank You

More Related