writing all your code in openedge architect peter van dam

Writing All Your Code In Writing All Your Code In OpenEdge ArchitectOpenEdge Architect

Peter van Dam

2

Agenda Item 1 Eclipse Plug-ins ABL JavaScript HTML XML OpenEdge GUI for .NET (tomorrow)

Agenda

Making Progress With Ajax

3

OpenEdge Architect 10.2A is based on Eclipse 3.4

You can install additional Plug-ins

Installing Plugins

4

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)

Installing Plugins

5

Sports2000 in Google Maps

6

A Word About Ajax

7

An inaccurate acronym for the clever combination of the following existing techniques:Asynchronous data retrieval using

XMLHttpRequestJavaScriptData interchange and manipulation

using XML

What Is Ajax?

8

It does not have to be Asynchronous It does not have to be XMLYou definitely need JavaScriptRelies heavily on:

DHTML (Dynamic HTML) for DOM manipulation

CSS (Cascading Style Sheets) in order to separate presentation from data

What Is Ajax (2)?

9

The Bottom Line:

NO PAGE

RELOADS!

10

Obtain a Google Maps KeyGeocode Your AddressesCreate Your Google Maps Web PageBonus: Integrate Google Maps with .NET

How To Set Up Google Maps

11

Simply go to http://code.google.com/apis/maps/ and follow the instructions

A Key is free for public web sites onlyYou need a Google Account (also free)The Key is valid for a single URLThere is no page view limitThere is a limit of 15,000 Geocode

requests per dayOf course there is a paid alternative…

Obtaining a Google Maps Key

12



13

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

What Is Geocoding?

14

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

Google Maps Geocoding Services

15

Procedure httpget has 4 input parameters:HostPortPathFile

Httpget.i

16

The URL is http://maps.google.com/maps/geo?

There are 3 parameters:keyoutputq

Example: key=<yourkey>&output=csv&q=276%20North%20Drive%20%20Burlington%2001730%20USA

The Geocoder

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)

The last line contains 4 itemsHTTP status code (200: success)AccuracyLatitude Longitude

200,8,42.512095,-71.284913200,8,42.512095,-71.284913

19

Getcoordinates.p

20



21

You can call the server from JavaScript using the XMLHttpRequest object

This object is the basis for AjaxThe server needs to accept HTTP requestsTwo possibilities:

WebSpeedWeb Services

In this example we will use WebSpeed

How To Call A Progress Server?

22

Calling Progress Using WebSpeed

WebSpeed Ajax Architecture

Making Progress With Ajax

Ajax

Engine

Ajax

Engine

Browser ClientBrowser Client

User

Interface

(HTML)

User

Interface

(HTML)

WebSpeed

Agent

WebSpeed

Agent

DatabaseDatabase

Web Server

Web Server

DocumentsDocuments

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>Hangon Potkulauta Ky</Name>

<Address>Puistokatu 7 A 45</Address>

<City>Hanko</City>

<latitude>59.82</latitude>

<longitude>22.97</longitude>

</myTableRow>

<myTableRow>

<Name>Espoon Pallokeskus</Name>

<Address>Sinikalliontie 18</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

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);

<body onload="load()" onunload="GUnload()">

<table border=1>

<tr>

<td>

<div id="map" style="width: 800px; height: 380px"></div>

</td>

</tr>

</table>

</body>

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();

// Adjust the center and zoom level

bounds.extend(point);

map.setCenter(bounds.getCenter());

map.setZoom(map.getBoundsZoomLevel(bounds));

For each address:

32

Demo

33

Integration With OpenEdge GUI for .NET

34

Questions?

35

www.futureproofsoftware.com

[email protected]

36

Thank You