Sonntag, 23. März 2008

Google Maps Mashup mit AJAX - PL/SQL- DAD (2)

Nachdem wir im Teil 1 die Funktionsweise des Google Maps Clients anhand der XML-Datei nachgewiesen haben, ersetzen wir im Teil 2 die XML-Datei durch den bewährten PL/SQL-DAD Zugriff.

Im mvdemo - Schema implementieren wir folgende Procedure zur serverseitigen Bereitstellung der AJAX-Daten:



Diese Procedure testen wir mit der URL: http://localhost:7777/pls/mvdemo/PLSQLAJAX_GENXML_CA

und erhalten die bereits mit der XML-Datei aus Teil 1 simulierten Daten, nun jedoch im dynamischen PL/SQL - Zugriff:



Im Teil 1 erfolgte der Funktionsnachweis der AJAX-Clientseite und jetzt können wir die dynamischen XML-Daten aus der Datenbank visuell verifizieren.
So brauchen wir nur noch die Datenquelle in der GDownloadUrl - Funktion auswechseln:

GDownloadUrl("http://localhost:7777/pls/mvdemo/plsqlajax_genxml_ca", function(data) { .. }
//GDownloadUrl("http://localhost:7777/plsqlajax_genxml2.xml", function(data) { .. }

und wir erhalten:



Einfacher geht es eigentlich nicht, zumal mit dem PL/SQL-DAD Zugriff die performanteste Technologie angewendet wird.

Friedhold

Google Maps POI's mit AJAX - XML-Datei (1)

Die Möglichkeit zur Integration von Oracle Maps und Google Maps, sogenanntes Mashup, möchte ich mit der Darstellung von "Points of Interest" (POI) in Google Maps auf Basis des Oracle-DB - Zugriffes beginnen.
Der serverseitige Datenzugriff für AJAX-Clients wird häufig mit Java Servlets, PHP oder neuerdings mit Ruby on Rails realisiert.

Oracle stellt mit dem PL/SQL Toolkit, sozusagen im Database Core, umfangreiche HTTP-Funktionen bereit, mit denen sich AJAX und PL/SQL Datenzugriffe recht elegant verbinden lassen. Letztendlich werden diese Funktionen u.a. in APEX angewendet. Die APEX Community hat zum Thema APEX und AJAX eine sehr gut nachvollziehbare TODO-Folge veröffentlicht.

Mit der AJAX-Technologie können Datenschnittstellen abgefragt werden, die sinnvollerweise Daten in einem für Javascript gut verarbeitbarem Format, z.B. in XML oder JSON, liefern.
Zur Entwicklung des AJAX-Clients habe ich die Daten der POI's im XML- Format bereitgestellt:



Diese Datei (plsql_genxml.xml) legt man unter:%ORACLE_HTTP_SERVER%\Apache\Apache\htdocs ab, die URL zu dieser Adresse lautet: http://localhost:7777/plsql_genxml.xml .

Nun kann man mit der Google Maps - Function :

GDownloadUrl("http://localhost:7777/plsqlajax_genxml2.xml", function(data) { .. }

die XML-Daten lesen:



Die Google Maps Seite wird unter : %ORACLE_HTTP_SERVER%\Apache\Apache\htdocs abgelegt und der Start erfolgt mit der URL: http://localhost:7777/plsqlajax_gmap.html

Der Javascript - Code ist sehr kompakt, übersichtlich und gut lesbar:


function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
//map.addControl(new GSmallMapControl());
//map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl()) ;
map.addControl(new GOverviewMapControl()) ;

// Logging
var sTemp = self.location.href
GLog.write(sTemp);

map.setCenter(new GLatLng(37.7725, -122.39607), 13);

map.enableScrollWheelZoom();

//GDownloadUrl("http://localhost:7777/pls/mvdemo/plsqlajax_genxml_ca", function(data) {
GDownloadUrl("http://localhost:7777/plsqlajax_genxml2.xml", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
// Logging
GLog.write(point+ " / " + address + " / " + type );
map.addOverlay(marker);
}
});

}
}

function createMarker(point, name, address, type) {
var marker = new GMarker(point, {title: name, icon: customIcons[type]} );
var html = name + " / " + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
..


Das Ergebnis sieht dann in Firefox und Firebug so aus:



Die gelieferten Daten können im Google Logger und in der Response - Ausgabe des Firebug betrachtet werden.

Friedhold

Samstag, 22. März 2008

Javascript Logging mit dem Firefox-Plugin Firebug

Zum Programmieren mit Javascript ist Firefox mit dem Plugin Firebug zum schnellen Auffinden von z.B. Definitions-Fehlern ein sehr nützliches Entwicklungswerkzeug. Es zeichnet sich besonders durch das Binding von Grafik- und Codedarstellung und die intuitiven Bedienung aus.

Sehr wichtig sind für eine gute Laufzeitumgebung, neben einem effizienten Deployment, auch die jeweiligen Logging - Mechanismen: Hierfür gibt es die ausgefeilten und weitestgehend symmetrisch anwendbaren Log4 {J / JS / NET / PLSQL ..}, d.h. mit Log4JS besteht auch diese Möglichkeit für Javascript.

Bei der Erstellung von Google Maps Anwendungen habe ich aber den Google Logger schätzen gelernt. Hierbei wird nur :


..
GLog.write(point+ " / " + address + " / " + type );
..

aufgerufen - einfach und gut (übrigens ohne Initialisierung!):



Nun gibt es aber speziell für den Firebug recht ausgefeilte Möglichkeiten zum Logging, nachfolgendes Beispiel zeigt einen Leistungsausschnitt:
  
..
function foo(s) {
bar(s + ' jkl;');
}
function bar(s) {
baz('qwerty ' + s);
}
function baz(s) {
// print stack trace
console.trace();
}
function fib(n) {
// count # of times called
console.count('Number of times fib() called');
if(n == 0 || n == 1) {
return 1;
} else {
return fib(n - 1) + fib(n - 2);
}
}
..
// 5 logging methods
console.log ('Using console.log()');
console.info ('Using console.info()');
console.debug('Using console.debug()');
console.warn ('Using console.warn()');
console.error('Using console.error()');

// printf style formatting
console.log('The value of %s is %d', 'foo', 516);

// can print complex structures
var array = [1, 1, 2, 3, 5, 8];
var object = {'foo': true, 'bar': 3.14, 'baz': [1, 2, 3]};

console.log(array);
console.log(object);

// can even print DOM elements
console.log(document.getElementById('header'));

// stack trace output
foo('asdf');

fib(10);
..

Das Logging-Protokoll in der Firebug-Console (Aktivierung mit F12) sieht so aus:



Dank Firefox und Firebug gibt es für die Entwicklung komplexer Oracle Maps Applikationen und Web 2.0 Mashups recht gute Voraussetzungen.

Ein frohes Osterfest wünscht
Friedhold