Tonis Blog

Wird Zeit für einen neuen Artikel …

Ich war die letzten Wochen ziemlich beschäftigt. Der Fun-Part dabei war ein neues Produkt für unser Unternehmen system worx GmbH&Co KG, das es nun bereits in einer ersten Alpha-Version gibt : ein webbasiertes Monitoringtool für Change Maßnahmen. Mehr möchte ich hier an dieser Stelle noch nicht verraten … Aber der Schleier wird bald enthüllt. Versprochen …

Da ich selbst ja nur eine begrenzte Resource bin, muß ich sehen, daß ich Fülle der Arbeit mit verfügbaren Generatoren, Klassen und Bibliotheken so gut es geht vermindere. Nur so ist es möglich in einer doch begrenzten Zeit ein neues Produkt  aus dem Boden zu stampfen.

Einer dieser Hilfsmittel ist POG (PHP Object Generator), den ich an anderer Stelle schon mal vorgestellt habe. Damit habe ich die Datenbankschnittstelle erzeugt.

Die gesamte Applikation ist ajaxbasiert. Dazu verwende ich meine Lieblingsbibliothek für AJAX, namens Xajax. Dazu werde ich wohl auch nochmal einen ausführlicheren Artikel verfassen, da ich eben festgestellt habe, daß ich mich gerade über diese Bibliothek, die ich fast täglich verwende, noch gar nicht sonderlich ausgelassen habe  . Kann passieren …

Nur kurz zu AJAX/Xajax : An jedes Webseitenelement (Forumlar, Eingabefeld, Tabelle, Absatz, Link, und, und, und …) kann man eine Menge von JavaScript-Funktionen “anhängen”, die aufgerufen werden, wenn ein bestimmtes Ereignis (Event) passiert. Dies kann ein Klick in ein Formularfeld sein, eine Eingabe, eine Auswahl aus einem DropDown-Menü und wieder und, und, und … JavaScript läuft im Browser ab, also auf dem PC des Benutzers. Oft benötige ich aber für eine so aufgerufene Funktion Daten vom Server (z.B. aus der Datenbank). Ajax/Xajax bildet dafür sozusagen die Brücke. Ich kann aus einer solchen lokalen JavaScript-Event-Funktion php-Funktionen auf dem Server aufrufen um mir die benötigten Daten zu verschaffen. Diese Daten kann ich dann mit dieser JavaScript-Funktion in meine HTML-Seite/Webseite in die vorgesehene Stelle “einimpfen”. Dadurch wird z.B. nur ein bestimmtes Datum mit Hilfe von Serverdaten geändert, ohne die komplette Seite an den Webserver zu schicken und die Seite neu aufzubauen. Das Minibeispiel auf der xajax-Startseite verdeutlicht dies ganz gut.

Nun komme ich aber zu meinem neuesten Hilfsmittel/Spielzeug, mit dem ich derzeit viel Spass habe und jede Menge Zeit und Entwicklungsaufwand spare: jQuery

Ich möchte hier gar nicht auf alle Details dieser beindruckenden Bibliothek und der Vielzahl der dafür noch verfügbaren PlugIns eingehen. Das würde den Rahmen hier gewaltig sprengen. Ich beschränke mich auf 3 Beispiele, die ich gerade verwende. More to come … I’m sure… I got the hang on this …

Beispiel 1: Ein Popup-Kalender um die Datumseingabe zu vereinfachen.

Es gibt eine Reihe von diesen Datepicker-Plugins. Ich verwende das jQuery UI Datepicker PlugIn.

Klick in Eingabefeld

Ergebnis

Ich möchte an dieser Stelle meine Leser darauf hinweisen, dass dieses Sperrholz-Design noch verbessert wird … Ich bin an der Entwicklung der Logik. Schönheit kommt später. Man verputzt das Haus auch erst, wenn es fertig gemauert ist …

Dieses hübsche Feature bekommt man jedenfalls durch 3 Zeilen JavaScript-Code und 3 Includes. Und damit ist der Datepicker schon mehrsprachig. Mehr kann man nicht erwarten …

Beispiel 2 : Eine Seite mit einem sog. Treeview

Eine HTML-Liste (mit <ul> und /li>) kann hierdurch mit wenigen JavaScript-Zeilen und Includes zu einem hünschen Treeview aufgemotzt werden.

Baumansicht

Hier das Beispiel von der Entwicklerseite zum Ausprobieren. Und hier der Downloadlink dieses nützlichen Plugins.

Für meine Applikation erzeuge ich diese HTML-Liste (mehrstufig) zum Zeitpunkt des Seitenaufrufs per php aus den Datenbank-Daten. Danach schlägt der Plugin-Aufruf (JavaScript) zu und macht daraus diese Baumansicht.

Beispiel 3: Tabelle mit Filter, Sortierung und Blätterfunktion

Damit habe ich mich heute sehr erfolgreich beschäftigt . Habe heute alle meine Tabellen umgestellt auf das jQuery DataTables Plugin. Hier zuerst ein Screenshot eines der Beispiele von der Entwicklerseite zum Eindruck:

Tabelle mit jQuery DataTables Plugin

Und dieses hübsche Ergebnis erhält man (neben der html-Tabelle und dem Demo-Stylesheet natürlich) durch ein JavaScript-Include und diese 3 Zeilen im Header der Seite:

Aufruf/Initalisierung

Also wenn das nicht cool ist, dann weiß ich nicht …

So eine Funktion sind sonst endlose Seiten Code …

Hier der direkte Link zu dem Screenshot-Beispiel zum selbst ausprobieren.

Für meine Applikationsumstellung auf diese Technologie musste ich nun gar nicht sehr viel ändern. Die HTML-Tabelle wurde schon vorher per PHP aus den Datenbankdaten erzeugt. Ich musste lediglich die ganzen Formatierungen entfernen. Auch vorher schon habe ich die durch die Benutzeraktionen (neu, delete, ändern) veränderte Tabelle per xajax an die entsprechende Stelle der HTML-Seite “geschoben”. Codeauszug:

$html = FullListMassnahmen($ml);
if(!empty($html))
{
$objResponse->assign(“tablearea”, “innerHTML”, $html);
}
else {
$objResponse->assign(“tablearea”, “innerHTML”, ‘<div  class=”errmsg”>’.gettext(“Keine Massnahmen definiert bisher …”).’</div>’);
}

“FullListMassnahmen” erzeugt hierbei die Tabelle und  “$objResponse->assign” schiebt sie in das DIV-Element namens “tablearea” auf der Seite.

Für jQuery und DataTables erzeugt “FullListMassnahmen” nun die gleiche Tabelle ohne jedwede Formatierung.

Durch die danach nun neu folgende xajax-Zeile

$objResponse->script(“$(‘#dyntable’).dataTable();”);

rufe ich nun im Browser den Conctructor bzw. (anders ausgedrückt) das PlugIn auf und habe mein gewünschtes Ergebnis : eine  Tabelle mit Blätterfunktion, Filter und Sortierung in allen Spalten.

So damit soll es für heute gut sein. Ich denke ich konnte vermitteln, wie man sich mit gut ausgewählter Technologie eine Unmenge Arbeit sparen und damit sein eigenes Entwicklungstemp deutlich steigern kann. Und das Beste : die Qualität steigert sich auch noch ….

admin Ajax, Open Source, Web 2.0 jQuery, xajax