Now we’re dealing with that grid. Finally, since we’ve been kept busy with the basics so far

3.6 dojo.grid in javascript

After search for the name “Petersen”, the webserver returns a JSON-String, containing all people with this name. Our goal is now to process this data into a grid .

So let’s have a look at gridtut.js again.

Using the command “var result = eval(‘(‘+data+’)');” an array (or better a javascript object) is beeing created from the JSON-string and been saved in the variable “result”.

With this array, we can now populate the grid… but wait, there definately missing a grid :-O

Firstof all, we have to tell the grid, how many columns we want to use. This is called view in the world of dojo. Here’s the example for our view:

var view1 = {
	cells: [
		[
			{name: 'Customer_ID', field:'id'},
			{name: 'Given Name', field:'givname'},
			{name: 'Name', field:'surname'},
			{name: 'Job', field:'job'},
			{name: 'Age', field:'age'},
			{name: 'Action', get: linkInGrid}
		]
	]
};

The property cells contains an array (that why we use square brackets), containing small objects (curly brackets). The property “name” of those objects contains the title for the column header, the property “field” contains the name field of the data array we’re going to display.

Lazyness wants us to use global variables so we can access the grid (and the datastore) from all functions and we need a some sample data.

var ddata;
var grid;
var store;
var layout = [ view1 ];

var dummydata = { "identifier": 'id',
				   "items":[
				     {	"id": 0,
				     	"givname":"There is",
				      	"surname":"no data ",
				      	"job": "-",
				      	"age": 0}
				   ]
};

The dojo grid ist very flexible and supports rows, subrows and even subgrids.  The column-layout is defined by the variable “layout “(obviously ) and we use our just created view for that. The square brackets are mandatory by the way, because we have to use an array again.

The dummy data is usefull in two ways:

1) we can test the grid and exclude the webserver as an error source

2) the sample data is used an a message, that no data has been found. Also the grid only needs to be updated in the future, the creation has been done during the first call of the page.

For the sample data, we need the property “identifier” to tell the grid about our dataset’s primary key (or better: unique identifier)

The property “items” contains the datasets in an array.

Following function is going to create the grid:

function createGrid(myData) {

	store = new dojo.data.ItemFileReadStore({jsId: 'jsonStore',data: myData});

	ddata = new dojox.grid.data.DojoData(null,store,{jsId: 'model', clientSort: true, query: { id: '*' }});

	grid = new dojox.Grid({id: "OurGrid", model: ddata, onRowMouseOver: keepPopup});

	dojo.byId("gridContainer").appendChild(grid.domNode);

	grid.setStructure(layout);

	grid.startup();
}

A lot of stuff has been done here, so we better take a close look.

Line 2:
The first thing we do, is to create an ItemFileReadStore using the dojo data model. It gets the javascript id “jsonStore” (as I’ve told you, Dojo likes ids) . For the second parameter we pass our data array – to keep the function flexible, we use the variable mydata (the parameter in the function call).

Line 3:
Since we now have an ItemFileReadStore, we have to connect it with the grid. The grid knows two ways for the data connection: grid.data.DojoData and grid.data.Table.

Using the table object could be easier: Just pass some sample data without encapsulation in identifier and items. Just plain data, even an ItemFileReadStore isn’t necessary.

// easy but not userful for us...

ddata = new dojox.grid.data.Table(null, dummydaten);

Well, this is not too hard, but unfortunately not too useful So we have to use DojoData and pass our store to it. The property “clientSort”allows the user to sort the data locally with the browser. Looking at the property “query” show us it’s relationship to the database world. We’re telling the model to collect all unique record sets, using id as a primary key – somehow a client-side “SELECT *”.

Line 4:
Finally we create the grid itself. It gets an Id and we pass the store, as well as the model.

Line 5:
We also have the define the layout und use “setStructure” for that.

Line 6:
In part 1  we already defined a placeholder for the grid (that <div>-Container) and here we attach the grid to it.

Line 7:
At last it’s time to start the grid. Our just created function might come handy for this task

createGrid(dummydaten);

Only a little  bit of CSS is needed, we add to our html-file:

<style type="text/css">

 div.gridDiv {

 width: 600px;

 height: 450px;

 }

</style>

It is necessary to define the grid’s width, otherwise nothing is shown – this is a popular error source by the way.

If we’ve been good, the following is shown (depending on your language, of course):

More to come in the next part.

Dieser kleine Hack kann eventuell die Sicherheit von Firefox 3 beeinträchtigen, daher weise ich noch deutlicher als sonst, alle Verantwortung von mir.

Damit die Zend Studio Toolbar auch mit dem neuen Firefox läuft, muss man ein klein wenig Hand anlegen. Ansonsten funktioniert das Debugging auch mit dem neusten Firefox ganz ausgezeichnet – mal sehen, wann Zend die Toolbar offiziell updated.

Zuerst zieht man sich die Toolbar vom Zend-Server, nämlich hier:

http://downloads.zend.com/studio_plugins/2.0.2/ZendFirefoxToolbar-2.0.2.xpi

Dafür eigenet sich am besten ein Downloadmanager oder der Internet Explorer, weil Firefox das Paket gleich installieren möchte.

Da eine .xpi-Datei im Grunde auch nur ein .zip Archiv ist, wird die Dateierweiterung entsprechend geändert und mit Winzip irgendwo hin ausgepackt.

In diesem Archiv ist eine Datei namens install.rdf – diese wird jetzt ein wenig angepasst.

In Zeile 16 ist bei mir das Tag-Paar <em:updateURL> . Hier wird http durch https ersetzt, weil Firefox sonst immer von unsicheren Updates spricht und die Toolbar nicht installieren mag.

In Zeile 22 wird bei <em:maxVersion> die Versionsnummer einfach von 2.0+ auf 3.0+ raufgesetzt. Fertig

Jetzt wird alles wieder als zip verpackt und die Dateiendung auf .xpi geändert.

Diese neue .xpi Datei kann jetzt per drag-and drop auf die Adresszeile im Firefox gezogen werden – danach wird die Toolbar anstandslos installiert.

Ich würde zwar auch gerne meine Version online stellen, aber das ist bestimmt mal wieder nicht erlaubt

Ha, da bin ich doch noch einmal und zwar schneller als gedacht.

Die Funktion json_encode, die ich die ganze Zeit im Tutorial verwendet habe, gibt’s ja noch gar nicht in PHP unter Version 5.2.0.

PHP-Freunde lesen weiter

Wenn wir also mit PHP-Servern kleiner 5.2 arbeiten, müssen wir eine externe PHP-Klasse einbinden.

Bewährt hat sich die folgende http://pear.php.net/pepr/pepr-proposal-show.php?id=198
Download: http://mike.teczno.com/JSON.tar.gz

Hier ist nun der veränderte Programmteil der PHP-Seite.

	// Ist Javascript für den Browser aktiv?
	if (isset($_REQUEST['js_aktiv'])) {
		// Das Array für das Dojo-Grid aufbereiten
        $temp = Array ('identifier'=>'lfdnr', 'items'=>$ergebnis);
        // Wenn die Funktion json_encode nicht vorhanden ist, nachladen
			if (function_exists("json_encode")) {
			    echo json_encode($temp);
			}
            else {
                include ('./JSON.php');
				$json = new services_JSON();
				echo $json->encode($temp);
            }
	}
	// Anzeige ohne Javascript
	else {
	// und so weiter....
        }

Jetzt läuft unser Beispiel auch mit älteren PHP-Versionen.

Step-JSON zum Runterladen: Gridtutrequest-JSON

Kommen wir nun (endlich) zum vorerst letzten Teil des Dojo-Tutorials. Der einzig fehlende Teil ist noch das Popup-Fenster, dass wir aus dem Grid heraus öffnen wollen. Dazu müssen wir in der View auf eine eigene Funktion verweisen.

Wenn das hier fertig ist, kann ich auch endlich Rechtschreibfehler suchen gehen.

Erinnern wir uns nochmal an die (das?) View vom Grid. Wir haben bei “name” den Spaltennamen angegeben und bei “field” den Namen im Modell (bzw. dem Array vom Webserver). Jetzt wollen wir aber aus dem Spalteninhalt einen Link generieren.

Es wäre auch möglich, bereits serverseitig den Link zu generieren und nur noch im Grid anzuzeigen. Allerdings würde die zu übertragende Datenmenge erheblich wachsen und somit das Laden verzögern.

Erweitern wir die Grid-View um eine Zusätzliche Spalte:

var view1 = {
 cells: [
 	[
 		{name: 'Kundennummer', field:'lfdnr'},
 		{name: 'Vorname', field:'vname'},
 		{name: 'Nachname', field:'nname'},
 		{name: 'Beruf', field:'beruf'},
 		{name: 'Alter', field:'alter'},
 		{name: 'Aktion', get: linkImGrid}
 	]
 ]
};

Anstelle der Eigenschaft “field” verwenden wir “get”. Diese gibt dem Grid an, dass der Inhalt für diese Spalte nicht aus dem Modell kommen soll, sonden von der Funktion “linkImGrid”.

Diese sieht wie folgt aus:

function linkImGrid(inRowIndex) {
 var zelle = grid.model.getDatum(inRowIndex,0);
 if (zelle == 0 || isNaN(zelle))
 	return '';
 else
 	return '<a href="javascript:zeige_Popup('+zelle+')" title="Zeigen">Zeigen</a>';
}

Das Grid übergibt der Funktion völlig von selbst die Zeilennummer als Parameter, hier “inRowIndex”. Über die Funktion “grid.model.getDatum” holen wir uns den Wert der ersten Zelle, also die Kundennummer bzw. “ldfnr”. Anzumerken sei übrigens, dass getDatum ein etwas wiedersprüchlicher Name für die Funktion ist. Aber im Quelltext vom Grid steht, dass man das so machen soll – fragt sich natürlich, wie lange noch… dafür ist das leider DojoX (Experimental). Eine andere Funktion für diesen Zweck wüsste ich jedenfalls nicht, also getDatum, die alles holt, nicht nur das Datum.

Wenn die erste Zelle in der Zeile 0 oder leer ist, wird kein Link generiert, ansonsten schon. Man könnte auch noch mehr Entscheidungen einbauen, z.B. wenn das Alter über 60 ist, dann zeige den Link in Schriftgröße 20 an oder so
Zu guter Letzt noch die Popup-Funktion, die aber wirklich nichts besonderes macht:

function zeige_Popup(lfdnr) {
 var url = "gridtut_pop.html";
 var optionen = "width=650, height=650, left=0, top=0, scrollbars=1,location=0,statusbar=0,menu bar=0,resizable=1";
 win=window.open(url,"Zeige Kunden: " + lfdnr,optionen);
 win.focus();
}

Mit dem Parameter könnte man auch sinnvollere Dinge anstellen, z.B. diesen per Get-Parameter an das Popup übertragen. usw.

Man könnte meinen, das wir jetzt fertig wären. Leider hat der Grid noch einen geringfügigen Bug (Dojo 1.0.2) – wenn man mit der Maus über eine Zeile fährt, drängt sich das Browser-Fenster in den Vordergrund. Das passiert zwar (natürlich) nur beim Internet Explorer, ist aber trotzdem sehr lästig und schließt die Verwendung von Popups eigentlich schon wieder aus.

Nun kann man entweder die Popups in Dojo-Dialoge einbetten oder folgenden Workaround einbauen.

In der createGrid-Funktion ändern wir die Zeile zum Erstellen des Grids wie folgt ab:

grid = new dojox.Grid({id: "DasGrid", model: ddata, onRowMouseOver: keepPopup});

Wir geben also eine eigene Funktion für das Ereignis an, wenn die Maus über eine Zelle fährt.

function keepPopup(evt) {
 if (win && !win.closed) win.focus();
}

Damit das so funktioniert, muss die Variable für das Popup sich auch in den Club der globalen Variablen gesellen. Ungefähr so:

var win = false;

Diese Funktion besagt folgendes: Wenn ein Popup existiert und noch nicht geschlossen wurde, dann bringe es wieder in den Vordergrund. So flackert das Popup natürlich, wenn man mit der Maus über die Zeilen geht, und das auch noch im völlig unschuldigen Firefox. Daher würde ich lieber auf einen Dojo-Dialog setzen, sofern man es sich leisten kann.

Beim Surfen ohne Javascript wird dieser Link noch nicht angezeigt, daher fügen wir ihn schnell serverseitig hinzu. Hier der entsprechende Teil für PHP:

	// Anzeige ohne Javascript
 else {
 	echo "<table border='1'>\n";
 	echo "<tr><td>Kundennummer</td>
 			<td>Vorname</td>
 			<td>Nachname</td>
 			<td>Beruf</td>
 			<td>Alter</td>
 			<td>Aktion</td>";
 	echo "</tr>\n";
 	foreach ($ergebnis as $zeile => $wert) {
 		echo "<tr>";
 		echo "<td>".$wert['lfdnr']."</td>";
 		echo "<td>".$wert['vname']."</td>";
 		echo "<td>".$wert['nname']."</td>";
 		echo "<td>".$wert['beruf']."</td>";
 		echo "<td>".$wert['alter']."</td>";
 		echo "<td><a href=\"gridtut_pop.html\" target=\"_blank\" title=\"Zeigen\">Zeigen</a></td>";
 		echo "</tr>\n";
 	}
 	echo "</table>\n";
 }

So, damit kommen wir zum Ende. Ist doch alles etwas ausführlicher geworden, als ursprünglich geplant.

Step-9 zum Runterladen: Gridtut-9-js Gridtut-9-php

Heute kümmern wir uns um einen Ajax-Statusindikator. Das fördert die Usability unserer Seite, weil der Browser für Ajax-Aufrufe normalerweise keine Ladeanimation anzeigt (das Ding oben rechts im Browser). Also machen wir das selbst!

Zunächst benötigen wir so ein animiertes .gif, dass wir als Statusindikator verwenden können. Auf dieser Seite hier gibt’s jede Menge davon: http://www.napyfab.com/ajax-indicators/

Update: Der obere Link hat sich in Rauch aufgelöst, in der Zwischenzeit kann hier Abhilfe geschaffen werden: http://www.ajaxload.info/

Ich habe mich für dieses auffällige Exemplar entschieden:

Jetzt müssen wir es nur noch schaffen, dass diese Grafik immer dann angezeigt wird, wenn Dojo Inhalte vom Server nachlädt. Hierfür verwenden wir wieder Dojo Events, bloß diesmal nicht mit Browserereignissen (onClick usw.), sondern mit eigenen Ereignissen.

Kümmern wir uns aber erstmal um den HTML-Teil.

<div class="warten" id="indikator">
	Bitte warten...<br />
	<img src="progressbar_long.gif" />
</div>

Wir haben hier einen einfachen <div>-Container. Ich habe bewusst keinen schickes Dialog Dijit verwendet, weil das hier auch angezeigt werden soll, wenn Dojo noch nicht geladen worden ist.

Damit es aber wenigstens ein bisschen was her macht, hier der CSS-Teil.

.warten {
	display:none;
	position:absolute;
	top:80px;
	left:20px;
	padding:10px;
	border:1px solid gray;
	background-color:white;
 	z-index:999;
}

Wir legen den <div>-Container zum Teil über das Suchformular, damit der Indikator auch ins Auge springt. Damit uns der Indikator beim Surfen ohne Javascript nicht auf die Nerven geht, lassen wir ihn vorerst ausgeblenden (display:none).

Unter den <style>-Block kommt ein kleiner Javascript-Block hinzu, um das Element einzublenden:

<script type="text/javascript">document.write('<style type="text/css">.warten{display:block;}</style>');</script>

Jetzt können wir den HTML-Part verlassen und zum wirklichen Javascript-Teil übergehen.

In der Funktion “init”, die bekanntlich von Dojo nach dem vollständigen Laden der Seite, inkl. aller Scripts, aufgerufen wird, tragen wir folgendes ein:

topics[0] = dojo.subscribe("seiteAktiv", null, indikatorWechseln);

Das Array “topics” sollte vorher natürlich präsent sein. Da wir ohnehin schon so viele globale Variablen haben, warum nicht noch eine mehr… setzen wir das Array doch hinter die globalen Grid-Variablen.

var ddata;
var grid;
var store;
var layout = [ view1 ];
var topics = [];

Dojo verwendet für eigene Ereignisse einen Event-Queue. Man kann sich wie ein Abo vorstellen und Dojo ist der Postbote vom Postamt “topics” (jeder Abonnent bekommt einen eigenen Platz im Array topics).

Mit “dojo.subscribe” erstellt man einen Abonnenten, der ganz wahnsinnig oft in seinen Briefkasten guckt Zusätzlich sagt man mit der Funktion noch, was der Abonnent mit dem Telegramm machen soll. Unser Abonnent heißt “seiteAktiv” und soll “indikatorWechseln” machen – abhängig davon, was in dem Telegramm steht.

Wir verschicken diese Telegramme mit der Funktion “dojo.publish”.

dojo.publish("seiteAktiv", ["ja"]);

Unser leicht nervöser Abonnent schaut umgehend in den Briefkasten und findet sein Telegramm. Er ruft die Funktion “indikatorWechseln” mit dem Wert “ja” auf, denn das stand ja in dem Telegramm.

Zusammenfassend etwas abstrakter: in ein Array, hier “topics[]“, werden die “listener” mit der Funktion “subscribe” erstellt. Mit dojo.publish werden diese dann angesprochen. Der “listener” ruft dann die Funktion auf mit dem übergebenen Wert aus, hier die Funktion “indikatorWechseln” mit dem Wert “ja”.

Die Funktion indikatorWechseln will natürlich auch erstellt sein:

function indikatorWechseln(evt) {
	if (evt=="ja") dojo.byId('indikator').style.display='block';
	else dojo.byId('indikator').style.display='none';
}

Hier geschieht nicht viel, wenn der Wert vom Parameter “evt” “ja” ist, wird der <div>-Container eingeblendet, sonst nicht.

Wenn wir jetzt alles erstellt haben, brauchen wir nur noch in der “init”-Funktion am Ende das Telegramm versenden, dass die Seite nicht mehr aktiv ist – also folgendermaßen:

dojo.publish("seiteAktiv", ["nein"]);

Jetzt können wir mit dojo.publish den Indikator so oft wir wollen an- und ausschalten. Sinnvoll ist das bei unserer “mein_submit”-Funktion: einmal vor der Kommunikation mit dem Server mit “ja” und einmal danach mit “nein”.

Wieder einmal die ganze mein_submit Funktion in ihrer ganzen Pracht

function mein_submit (event) {
	// Den Standard-Submit und das Verlassen
	// der Seite verhindern
	dojo.stopEvent(event);
	dojo.publish("seiteAktiv", ["ja"]);
	// das Textfeld auslesen
	var textfeld_name = dijit.byId("txt_name").getValue();
	// Prüfen, ob das Textfeld leer ist
	if (textfeld_name =='') {
		alert ('Sie müssen einen Namen eintragen');
		dojo.publish("seiteAktiv", ["nein"]);
		return false;
	}
	else {
		// Umlaute in HTML-Entitäten konvertieren
		textfeld_name = htmlFromUmlaut(textfeld_name);
		// Parameter für asynchrone Übertragung (Ajax)
		var kw = {
			// Hier liegt die dynamische Seite
			url: "gridtut_request.php",
			// wird bei Server-Antwort aufgerufen
			load: function(data){
					// Server-String auswerten und Grid updaten
					var ergebnis = eval('('+data+')');
					updateGrid(ergebnis);
					dojo.publish("seiteAktiv", ["nein"]);
			},
			// wird bei Server-Fehler aufgerufen
			error: function(data){
			        alert("Es ist ein Fehler aufgetreten: " + data);
			        dojo.publish("seiteAktiv", ["nein"]);

			},
			// Werte, die übertragen werden
			content: {  txt_name: textfeld_name,
						js_aktiv: 'ja'}
		};
		dojo.xhrPost(kw);
	}
}

Man sieht, dass wir für jeden Ausstiegspunkt aus der Funktion auch dem Indikator bescheid geben müssen.

Wer noch mag, kann die “indikatorWechseln”-Funktion noch so aufboren, dass der Such-Button während der Aktivität deaktiviert ist. Sowas halte ich bei einer “Speichern”Funktion allerdings sinnvoller.

So, Events haben wir abgehakt! Bleibt noch das Popup im nächsten Teil.

Step-8 zum Runterladen: Gridtut-8-js Gridtut-8-html

Wir sind in den vorherigen Teilen soweit gekommen, dass wir ein Grid darstellen können und per Ajax mit dem Server kommunizieren können. Was noch fehlt, ist die Antwort vom Server an das Grid weiterzuleiten – noch geben wir die Antwort nur mit einem simplen Alert aus.

Wer noch nicht aufgegeben hat, klickt sich weiter durch

Wir benötigen zu der createGrid- Funktion noch eine update-Funktion. Diese sieht der create-Funktion sehr ähnlich:

function updateGrid(meineDaten) {
	store = new dojo.data.ItemFileReadStore({jsId: 'jsonStore',data: meineDaten});
	ddata = new dojox.grid.data.DojoData(null,store,{jsId: 'model', clientSort: true, query: { lfdnr: '*' }});
	grid.setModel(ddata);
	grid.update();
}

Leider kann ein ReadStore meines Wissens zur Zeit noch nicht aktualisiert werden, daher müssen wir ihn neu erstellen. Daraufhin erstellen wir auch das Modell für das Grid neu und weisen diesem das neue Modell zu. Als letztes veranlassen wir, dass das Grid sich aktualisiert.

Ich muss zu meiner Schande gestehen, dass es sich hier nicht um den Königsweg handelt. Falls jemand eine bessere Lösung findet, würde ich mich über eine Nachricht freuen. Fakt ist jedoch, dass diese Methode am einfachsten nachzuvollziehen ist und vor allem funktioniert.

Unsere Update-Funktion binden wir nun einfach in die “mein_submit()” Funktion ein und schon sind wir fertig. Die “mein_submit()” sieht nun so aus:

function mein_submit (event) {
	dojo.stopEvent(event);
	var kw = {
		url: "gridtut_request.php",
		load: function(data){
				var ergebnis = eval('('+data+')');
				updateGrid(ergebnis);
		},
		error: function(data){
		        alert("Es ist ein Fehler aufgetreten: " + data);

		},
		form: "form_suche"
	};
	dojo.xhrPost(kw);
}

Schauen wir noch einmal auf den Load-Abschnitt. Die eval-Funktion generiert uns aus dem Text-String vom Webserver ein Javascrip Objekt, das wir nun an die Update-Funktion übergeben. Um den Rest kümmert sich Dojo.

Fertig … so könnte man meinen. Aber bisher haben wir ja auch nur nach “Petersen” gesucht. Was passiert bei “Schröder”?

Wer mir gefolgt ist und kein UTF-8 verwendet hat, bekommt nun ein Problem. Umlaute per Ajax übertragen ging zwar noch in der Version 0.4. Aber 0.9 – 1.0.2 wollen uns erziehen und haben das abgeschaltet (oder es ist ein Bug)

Nun wäre es aber ein gehöriger Entwicklungsaufwand, eine komplette Anwendung auf UTF-8 umzustricken, daher wandeln wir einfach den Inhalt des Input-Feldes in HTML-Entitäten (die Dinger mit ä ; ).

Daraus ergibt sich dann wiederum das Problem, dass wir in der Ajax-Funktion “mein_submit” nicht mehr mit der “form” Eigenschaft arbeiten können, sonder “content” verwenden müssen – aber dazu später.

Hier als erstes die Funktionen, in Javascript Umlaute in HTML-Entitäten umzuwandeln (und zurück)

function htmlToUmlaut(text) {
	text=text.split(">").join(">").split("<").join("<").split("ü").join("ü").split("ö").join("ö").split("ä").join("ä").split("Ü").join("Ü").split("Ö").join("Ö").split("Ä").join("Ä").split("ß").join("ß");
	return text;
}

function htmlFromUmlaut(text) {
	text=text.split(">").join(">").split("<").join("<").split("ü").join("ü").split("ö").join("ö").split("ä").join("ä").split("Ü").join("Ü").split("Ö").join("Ö").split("Ä").join("Ä").split("ß").join("ß");
	return text;
}

Jetzt die angepasste “mein_submit” Funktion, zur Übersichtlichkeit diesmal besser kommentiert.

// Die neue Submit-Funktion
function mein_submit (event) {
	// Den Standard-Submit und das Verlassen
	// der Seite verhindern
	dojo.stopEvent(event);
	// das Textfeld auslesen
	var textfeld_name = dijit.byId("txt_name").getValue();
	// Prüfen, ob das Textfeld leer ist
	if (textfeld_name =='') {
		alert ('Sie müssen einen Namen eintragen');
		return false;
	}
	else {
		// Umlaute in HTML-Entitäten konvertieren
		textfeld_name = htmlFromUmlaut(textfeld_name);
		// Parameter für asynchrone Übertragung (Ajax)
		var kw = {
			// Hier liegt die dynamische Seite
			url: "gridtut_request.php",
			// wird bei Server-Antwort aufgerufen
			load: function(data){
					// Server-String auswerten und Grid updaten
					var ergebnis = eval('('+data+')');
					updateGrid(ergebnis);
			},
			// wird bei Server-Fehler aufgerufen
			error: function(data){
			        alert("Es ist ein Fehler aufgetreten: " + data);

			},
			// Werte, die übertragen werden
			content: {  txt_name: textfeld_name,
						js_aktiv: 'ja'}
		};
		dojo.xhrPost(kw);
	}
}

Das Textfeld, das wir verwendet haben, ist ja ein sogenanntes Dijit. Diesen Umstand können wir uns zu nutze machen und mit der Funktion “dijit.byId(“txt_name”).getValue” den Wert aus dem Textfeld holen. Es gibt übrigens auch noch ein setValue, nicht verwechseln sollte man übrigens dijit.byId (für Dojo Widgets) und dojo.byId (für HTML-Elemente).
In diesem Fall bräuchte man natürlich nicht zwingend mit getValue arbeiten, da das Textbox-Dijit ja nur ein hübsches HTML <input> Element ist. Bei dem FilteringSelect Dijit sähe das anders aus, das ist nämlich auch ein <input> Element, das ein Drop-Down simuliert… aber ich schweife schon wieder ab

Also wir holen den Wert mit getValue, prüfen ob was drin steht und wenn ja, konvertieren wir noch die Umlaute.

Bei den Keywords von xhrPost verwenden wir anstelle von “form” die Eigenschaft “content”. Vor den Doppelpunkt schreiben wir, wie die Variable heißen soll, die an den Server übertragen wird, dahinter den Wert. Da wir das HTML-Element mit der Eigenschaft “name” schon “txt_name” genannt haben, sollten wir das hier auch so beibehalten. Dann müssen wir serverseitig nichts ändern. Als nächstes Wertepaar habe ich noch js_aktiv mit dazu geschrieben und auf “ja” gesetzt.

Wir erinnern uns: die Seite soll auch ohne Javascript einigermaßen funktionieren. Der Parameter “js_aktiv” kann nur an den Server übertragen werden, wenn Javascript auch wirklich aktiv ist. Sonst wird der Parameter nicht an der Server gesendet. So können wir es serverseitig einrichten, dass ohne Parameter eine HTML-Tabelle zurückgegeben wird und mit Parameter der JSON-String.

Wichtig: Bei “content” möglichst auf Sonderzeichen verzichten, selbst ein Bindestrich führt zu einem Fehler (“js-aktiv” geht nicht) Das Leben als Javascript-Entwickler ist hart

Hier nun der veränderte PHP-Code, um zwischen Javascript und nicht-Javascript Browsern zu unterscheiden

	// Ist Javascript für den Browser aktiv?
	if (isset($_REQUEST['js_aktiv'])) {
		// Das Array für das Dojo-Grid aufbereiten
		$temp = Array ('identifier'=>'lfdnr', 'items'=>$ergebnis);
		echo json_encode($temp);
	}
	// Anzeige ohne Javascript
	else {
		echo "<table>\n";
		echo "<tr><td>Kundennummer</td>
				<td>Vorname</td>
				<td>Nachname</td>
				<td>Beruf</td>
				<td>Alter</td>";
		echo "</tr>\n";
		foreach ($ergebnis as $zeile => $wert) {
			echo "<tr>";
			echo "<td>".$wert['lfdnr']."</td>";
			echo "<td>".$wert['vname']."</td>";
			echo "<td>".$wert['nname']."</td>";
			echo "<td>".$wert['beruf']."</td>";
			echo "<td>".$wert['alter']."</td>";
			echo "</tr>\n";
		}
		echo "</table>\n";
	}

Wenn wir immer noch gut sind, sieht die Seite jetzt schon so aus:

Step-7 zum Runterladen: step7-gridtut.js step-7-gridtut_request.php

Im nächsten Teil geht’s dann darum, noch so einen coolen Ajax-Indikator einzubauen. Bis dahin…

Jetzt geht’s um Grid… endlich, nachdem wir uns so lange mit den Formalitäten beschäftigt haben

3.6 Das dojo.grid in Javascript

Wenn wir in das Suchfeld unseres Formulars den Namen “Petersen” eingegeben, gibt uns die Webserver einen JSON-String wieder, wo alle Personen dieses Namens verzeichnet sind. Diesen gilt es jetzt auszuwerten.

Kehren wir also zu unserer Datei gridtut.js zurück.

Mit der Anweisung “var ergebnis = eval(‘(‘+data+‘)’);” wird aus dem Text-String ein Array erzeugt und in der Variable “ergebnis” gespeichert.

Mit diesem Array können wir nun das Grid befüllen… doch halt, wir haben ja noch gar keins :-O

Als erstes müssen wir dem Grid sagen, wie Spalten wir verwenden wollen – in der Dojo-Terminologie ein “View”. Für unser Beispiel folgende View:

var view1 = {
	cells: [
		[
			{name: 'Kundennummer', field:'lfdnr'},
			{name: 'Vorname', field:'vname'},
			{name: 'Nachname', field:'nname'},
			{name: 'Beruf', field:'beruf'},
			{name: 'Alter', field:'alter'}
		]
	]
};

Die Eigenschaft cells beinhaltet ein Array (daher die eckigen Klammern), in der Wieder kleine Objekte stecken. Deren Eigenschaft “name” gibt den Spaltennamen an, der angezeigt werden soll. Die Eigenschaft “field” bezeichnet den Namen im Array (richtiger – den Schlüssel zum passenden Wert).

Jetzt noch ein paar globale Variablen, damit wir schön bequem von allen Funktionen auf das Grid zugreifen können und zu guter letzt noch ein Dummy-Datensatz:

var ddata;
var grid;
var store;
var layout = [ view1 ];
var dummydaten = { "identifier": 'lfdnr',
				   "items":[
				     {	"lfdnr": 0,
				     	"vname":"Keine Daten",
				      	"nname":"vorhanden ",
				      	"beruf": "-",
				      	"alter": 0}
				   ]
};

Hier sind nun zwei spannende Dinge zu sehen (naja, spannend für Informatiker vielleicht ) Das Dojo-Grid ist sehr flexibel und unterstützt zum Beispiel auch Spalten, Sub-Spalten usw. Das Spalten-Layout teilen wir dem Grid gleich mit der Variable “layout” mit und übergeben das oben erstellte View. Die eckigen Klammern müssen übrigens sein, da das Layout ein Array erwartet.

Zum leichteren Debuggen erstellen wir auch gleich noch einen Dummydatensatz, damit bei der ersten Fehlersuche der Webserver ausgeschlossen werden kann. Außerdem sieht man gleich noch, wie man Daten für das Grid aufbereiten sollte. Wir geben mit der Eigenschaft “identifier” an, wo sozusagen der Primärschlüssel des Datensatzes liegt.

Wir brauchen pro Datensatz also immer eine eindeutige Eigenschaft, ich habe sie hier “lfdnr” genannt, so sticht sie besser heraus. In “items” können wir die Daten nun einbetten.

Als Datensatz wählen wir eine Leermeldung, dass keine Daten vorhanden wären.

Das ist gleichermaßen praktisch, weil wir das Grid beim Laden der Seite mit Leermeldung erstellen und beim Nachladen über die Suchfunktion Zeit sparen, da das Grid nur noch aktualisiert wird.

Folgende Funktion erstellt das Grid:

function createGrid(meineDaten) {
	store = new dojo.data.ItemFileReadStore({jsId: 'jsonStore',data: meineDaten});
	ddata = new dojox.grid.data.DojoData(null,store,{jsId: 'model', clientSort: true, query: { lfdnr: '*' }});
	grid = new dojox.Grid({id: "DasGrid", model: ddata});
	grid.setStructure(layout);
	dojo.byId("gridContainer").appendChild(grid.domNode);
	grid.startup();
}

Hier geschieht so viel, dass wir das besser Zeilenweise durchgehen Wir greifen übrigens auf die globalen Variablen von vorhin zu.

Zeile 2: Als erstes nutzen wir das Dojo-Datenmodell und erstellen einen ItemFileReadStore. Der bekommt die Javascript-Id “jsonStore” (wie erwähnt, Dojo mag Ids). Als zweiten Parameter übergeben wir dem Store das Javascript Array. Damit die Funktion aber universell bleibt, lösen wir das über den Parameter “meineDaten”.

Zeile 3: Wir haben nun den ItemFileReadStore, jetzt müssen wir das Grid damit irgendwie verbinden. Für die Datenanbindung kennt das Grid das Objekt grid.data.DojoData. und grid.data.Table.

Table ist ganz leicht und grundlegend. Hierfür bräuchte man auch keinen Readstore eröffnen. Man könnte einfach das Array direkt übergeben (auch ohne die Kapselung in Identifier und Items).

// Das hier reicht uns leider nicht...
ddata = new dojox.grid.data.Table(null, dummydaten);

Aber was nicht schwierig ist, das taugt auch nichts Also nehmen wir DojoData, und übergeben unseren Store. Die Eigenschaft “clientSort” ermöglicht es, dass er Nutzer im Browser (lokal) sortieren kann. An der Eigenschaft query sieht man schon die Verbundenheit zur Datenbankterminologie. Wir sagen dem Modell, dass wir alle eindeutigen Datensätzen haben wollen, die sich in der laufenden Nummer unterscheiden – ein clientseitiger “SELECT *” sozusagen.

Zeile 4: Jetzt wird das Grid erstellt, bekommt eine Id und sowohl den Store, als auch das Modell übergeben – schließlich haben wir das ja eben mühevoll erstellt.

Zeile 5: Auch geben wir mit “setStructure” noch das Layout an.

Zeile 6: Wir haben bereits in der HTML-Datei einen Platzhalter für das Grid eingebaut (den <div>-Container), an diesen hängen wir nun das Grid.

Zeile 7: Jetzt wird endlich das Grid gestartet.

So… jetzt könnte ein Grid erstellt werden. Damit das auch passiert müssen wir natürlich die Funktion aufrufen – am besten in der Funktion init.

createGrid(dummydaten);

Jetzt fehlt nur noch ein winziges bisschen CSS, dass in die HTML-Datei kommt.:

<style type="text/css">
	div.gridDiv {
	width: 600px;
	height: 450px;
	}
</style>

Leider müssen wir dem Grid nämlich sagen, wie viel Platz es einnehmen soll. Sonst sieht man gar nichts – eine sehr beliebte Quelle der Frustration

Wenn wir jetzt gut waren, erscheint folgendes:

Step-6 zum Runterladen: Gridtut-6-html Gridtut-6-js

Alles weitere demnächst im nächsten Teil…

So, nach geringfügiger Schaffenspause geht’s weiter mit dem Dojo-Tutorial.

3.2 Step-2 Html-Formular erstellen

Schauen wir uns doch einfach mal etwas Code an:

<form name="form_suche"
 id="form_suche"
 action="gridtut_request.php"
 method="post"><input type="text" name="txt_name"  id="txt_name"
 value=""
        dojoType="dijit.form.TextBox"
        trim="true"
        propercase="true" />
<input type="submit" id="finden" value="Finden!" />
</form>
<br />
<div id="gridContainer" class="gridDiv"></div>

Wie mal leicht sehen kann, machen wir’s uns leicht und bauen nur ein Suchfeld und einen Such-Button ein. Doch zuerst das Form-Tag.

Eigentlich sieht alles so aus, wie bisher. Das ist auch gut so, damit lässt sich die Seite auch ohne Javascript bedienen. Wir verwenden die typischen HTML-Elemente <form> und <input>. Diese werden beim Aufrufen der Webseite vom Dojo-Parser gelesen und die Eigenschaft “dojoType” (Groß- und Kleinschreibung!), hier fett markiert, entscheidet, was für Elemente tatsächlich angezeigt werden. In der Dojo-Nomenklatur heißen diese Elemente übrigens Dijits (Dojo Widgets). Über Widgets im genaueren können wir vielleicht in ein paar Wochen sprechen… mal sehen

Daher könnte man anstelle von <input> auch <div> oder <span> benutzen, da der Parser das Element ohnehin neu in die Seite einbaut. Übrigens wäre der Seitenaufbau wesentlich schneller, wenn man die Dijits direkt per Javascript erstellt – nur könnte man mit abgeschalteten Javascript nichts mehr erkennen. Auch Suchmaschinen finden dann kaum etwas auf der Seite.

Genug der Abschweifung hinter dem Formular ist noch ein <div>-Container eingebaut, der als Platzhalter für das spätere Grid fungieren soll.

HTML-seitig sind wir jetzt schier, daher folgt jetzt der nächste Schritt in Javascript.

Step-2 zum Runterladen: Gridtut-2

3.3 Step-3 Erstes Javascript

Bislang gibt unser Tutorial noch ein enttäuschendes Bild ab. In der Datei gridtut.js befindet sich nur gähnende Leere. Dabei haben wir in der Html-Datei doch schon auf die Funktion “init” verwiesen – und somit einen Fehler provoziert. Das wird jetzt geändert!

// Erste Funktion, die aufgerufen wird
function init() {
 suchbutton = dojo.byId("finden");
 suchbuttonConnection = dojo.connect(suchbutton, 'onclick', null, mein_submit);
}function mein_submit(event) {
 dojo.stopEvent(event);
 alert('Huhu!');
}

Die Funktion “init()” wird von Dojo aufgerufen, sobald der Parser fertig ist, die HTML-Seite einzulesen. Je mehr Code übrigens auf der HTML-Seite, desto länger braucht auch der Parser.

Wir verwenden nun die init-Funktion, um den Submit-Vorgang vom Formular gegen eine eigene Funktion zu ersetzen. Dojo arbeitet übrigens gerne mit den IDs der Elemente, nicht mit den Namen.

Mit dojo.connect verbinden wir den Suchbutton mit dem Browser-Ereignis onclick und geben als letzten Parameter die Funktion an, die tatsächlich ausgeführt werden soll

Die Anweisung “dojo.stopEvent(event)” verhindert den Submit, der sonst durchgeführt worden wäre. Damit das auch funktioniert, muss in den Funktionskopf ein Parameter eingebaut werden – hier “event” genannt.

dojo.connect übergibt diesen Parameter dann an die aufgeführte Funktion ohne unser zutun.

Wenn jetzt alles klappt, erscheint statt des Submits die Nachricht “Huhu!”.

Step-3 zum Runterladen: Gridtut-3

3.4 Step-4 Ajax kommt ins Spiel.

Natürlich wollen wir noch ein wenig mehr. Auf Dojo sind wir ja vor allem wegen dem Ajax-Hype gekommen, also machen wir das auch so

function mein_submit (event) {
  dojo.stopEvent(event);
  var kw = {
    url: "gridtut_request.php",
    load: function(data){
   var ergebnis = eval('('+data+')');
  	  alert ("Da ist was gekommen: " + data);
    },
    error: function(data){
   alert("Es ist ein Fehler aufgetreten: " + data);
    },
    form: "form_suche"
  };
  dojo.xhrPost(kw);
}

Das sieht jetzt gewaltiger aus, als es ist.

KW ist erstmal nur eine Abkürzung für keywords und völlig frei gewählt. Da man bei Dojo den Funktionen auch Javascript-Objekte übergeben kann, anstelle alle Parameter einzeln an die Funktion zu reichen, ist das ganz bequem. Mit “kw” bestimmen wir also die Parameter für “dojo.xhrPost”.

URL:
Bei “url” geben wir unsere dynamische Web-Datei an, das kann auch gerne .jsp oder .asp sein – ich werde den php-Teil möglichst gering halten.

LOAD:
Hier geben wir eine Funktion an, aufgerufen werden soll, wenn uns der Webserver einen JSON-String geliefert hat. Aus Faulheit habe ich hier eine anonyme Funktion verwendet, man kann ebenso auf eine Funktion verweisen, die irgendwo tiefer im Quelltext verborgen ist (das wäre vom Stil her auch besser). In dem Parameter “data” ist die Rückgabe vom Webserver enthalten

ERROR:
Eigentlich wie bei load, wenn der Webserver wider erwartend einen Fehler sendet, wird diese Funktion aufgerufen

FORM:
Das Formular, dessen Inhalte an den Server geschickt werden soll (wird mit der ID benannt)

Den ganzen Wust geben wir jetzt an die Funktion als Parameter: dojo.xhrPost(kw)

Damit haben wir jetzt sehr umständlich das erreicht, was pures HTML auch so für uns getan hätte
Allerdings nicht asynchron und ohne die Möglichkeit der Fehlerbehandlung.

Step-4 zum Runterladen: Gridtut-4

3.5 PHP – Generieren von JSON

Für alle PHP-Freunde habe ich hier ein wenig Code, der für uns den JSON String erzeugen soll.

JSON bedeutet übrigens Javascript Object Notation und ist eine Möglichkeit neben XML, Daten zwischen Client und Server auszutauschen. Eigentlich handelt es sich bei JSON nur um ein Stück Javascript-Code, der, wenn er ausgeführt wird, ein Array erzeugt. Also machen wir aus unserem PHP-Array einen Bauplan für ein Javascript Array. Wichtig übrigens: Der String wird per “echo” ausgegeben, bzw. als Textausgabe an den Client geschickt.

<?php
	// Ein paar Daten
	$data = array ();
	$data[] = array ('lfdnr' =>1,
					 'nname' =>'Petersen',
					 'vname' =>'Klaus',
					 'beruf' =>'Polizist',
					 'alter' =>32);
	$data[] = array ('lfdnr' =>2,
					 'nname' =>'Petersen',
					 'vname' =>'Elvis',
					 'beruf' =>'Hundefänger',
					 'alter' =>25);
	$data[] = array ('lfdnr' =>3,
					 'nname' =>'Petersen',
					 'vname' =>'Rudi',
					 'beruf' =>'Fotograf',
					 'alter' =>52);
	$data[] = array ('lfdnr' =>4,
					 'nname' =>'Petersen',
					 'vname' =>'Jörg',
					 'beruf' =>'Deichgraf',
					 'alter' =>61);
	$data[] = array ('lfdnr' =>5,
					 'nname' =>'Schröder',
					 'vname' =>'Petra',
					 'beruf' =>'Bäckerin',
					 'alter' =>31);
	$data[] = array ('lfdnr' =>6,
					 'nname' =>'Schröder',
					 'vname' =>'Elvira',
					 'beruf' =>'Fleischerei-Fachverkäuferin',
					 'alter' =>23);
	$data[] = array ('lfdnr' =>7,
					 'nname' =>'Schröder',
					 'vname' =>'Martin',
					 'beruf' =>'Koch',
					 'alter' =>37);
	// Das zukünftige Ergebnis
	$ergebnis = false;
        // Array-Zähler, sonst ist die JSON-Funktion überfordert,
	// wenn man nicht von 0 an durchzählt.
	$counter = 0;
// Hauptteil
if (!empty($_REQUEST['txt_name'])) {
	// Suche nach dem Namen im Testdatensatz
	foreach ($data as $zeile => $wert) {
		if ($wert['nname'] == $_REQUEST['txt_name']){

			// Erster Sucherfolg
			if (!$ergebnis) $ergebnis = array();

			// Suchergebnis ins Array schieben
			$ergebnis[$counter]['lfdnr'] = $data[$zeile]['lfdnr'];
			$ergebnis[$counter]['nname'] = htmlentities($data[$zeile]['nname']);
			$ergebnis[$counter]['vname'] = htmlentities($data[$zeile]['vname']);
			$ergebnis[$counter]['beruf'] = htmlentities($data[$zeile]['beruf']);
			$ergebnis[$counter]['alter'] = $data[$zeile]['alter'];
			$counter++;
		}
	}
	// Wenn nichts gefunden wurde, leeres Ergebnis
	if (!$ergebnis) $ergebnis[] = array ('lfdnr' =>0,
										'nname'=>'Kein',
										'vname'=>'Ergebnis',
										'beruf' =>' ',
										'alter' =>0);
	// Das Array für das Dojo-Grid aufbereiten
	$temp = Array ('identifier'=>'lfdnr', 'items'=>$ergebnis);
	echo json_encode($temp);
}
?>

Es wird also nach einen Nachnamen gesucht und das Ergebnis per JSON ausgegeben. Je nach Serversprache kann das natürlich anders aussehen.

Wichtig übrigens: Die JSON-Funktion von PHP kann keine Umlaute umwandeln, daher konvertiere ich alles in HTML-Schreibweise (also ä ; usw.) Eigentlich sollte man alles in UTF-8 konvertieren, damit kommt Dojo am besten zurecht. Aber wer hat schon UTF-8 in vorhandenen Projekten.
Wenn man neu anfängt, ist man UTF-8 auf jeden Fall gut beraten.

Wer gerade keinen Webserver zur Verfügung hat, der kann auch erstmal eine Textdatei nehmen und bei “URL” auf diese verweisen.

Hier ist die Textdatei mit JSON-String für die Suche nach Petersen

JSON-Text

Step 5 findet damit sein Ende…
Step-5 zum Runterladen: Gridtut-5

Hallo liebe Freunde der leichten Unterhaltung. Leider fällt der heutige Tag in die Kategorie Tutorial. Deshalb kein voyeuristischer Frohsinn, sondern harte Fakten. Ich werde heute etwas über das Dojotoolkit schreiben, was ich im Netz noch nicht gefunden habe: über ein Suchfeld ein Grid befüllen und aus diesem ein Popup öffnen.

Klingt leicht, ist es auch – bloß nicht ausreichend dokumentiert. Wen es interessiert klickt weiter.

1. Zutaten

Wir brauchen 3 bis 4 Dateien:

• eine HTML Datei
• eine Javascript Datei für die Ordnung
• eine dynamische Datei (ich kann nur PHP) für die Daten die später in das Grid geladen werden sollen
• optional: eine html-Datei für ein Popup

Außerdem brauchen wir noch das Dojotoolkit in der aktuellen Version 1.02. Freunde des Internet Explorers holen sich besser das nighly Build. Aber das machen wir gleich gemeinsam.

2. Vorbereitung

2.1 Dojo holen

Hier gibt’s den Download <klick>. Für die Version 1.02 brauchen wir leider noch das nightly build um einige Bugs aus dem Grid zu vertreiben – das gibt’s hier: <klick>.

2.2 Ordnerstruktur

Erstmal legen wir den Hauptordner an, und zwar so, dass der Apache (oder auch iis) darauf zugreifen kann.

In diesen Order wird dann das Archiv vom Dojotoolkit entpackt, zum Beispiel nach dojotoolkit-release-1.0.2. Es hat sich übrigens bewährt, die Releasenummer im Ordner mitzunehmen, damit Releasewechsel später planbar und durchführbar werden.

Jetzt entpacken wir das nightly build irgendwohin und kopieren den dojox-Ordner heraus. Dieser wird dann einfach über den des 1.0.2 Releases kopiert. Fertig sieht es so aus:

/gridtutorial

|---+ dojo-release-1.0.2

       |--- dijit

       |--- dojo

       |--- dojox    (und zwar vom nightly build)

       |--- util

Nun legen wir 4 Dateien an:

gridtut.html

gridtut.js

gridtut_request.php

gridtut_pop.html

Klar sind Popups aus der Mode gekommen und der Dojo.Dialog sieht auch sehr nett aus, allerdings besteht ja auch die große Kunst darin, Dojo in bestehende Anwendungen zu integrieren. Und da kann es gut vorkommen, dass man noch mit Popups auskommen muss.

3.1 Step-1 Dojo einrichten

So, ich glaube wir können anfangen

Wie man eine HTML Datei schreibt, brauche ich hoffentlich keinem zu erklären, daher steigen wir gleich mit dem Einbinden von Dojo ein.

In den <head> gehören zum einen die CSS Dateien für Dojo:

<link rel="stylesheet" href="./dojo-release-1.0.2/dijit/themes/tundra/tundra.css" type="text/css">
<link rel="stylesheet" href="./dojo-release-1.0.2/dojo/resources/dojo.css" type="text/css">
<link rel="stylesheet" href="./dojo-release-1.0.2/dojox/grid/_grid/tundraGrid.css" type="text/css">

Damit haben wir das Aussehen für alle Dojo Widgets… äh Dijits erschlagen. Damit das Grid sich auch im Design von Dojo präsentiert binden wir das tundraGrid.css mit ein.

Dann geht es nun an das Einbinden des Javascripts.

<script type="text/javascript" src="./dojo-release-1.0.2/dojo/dojo.js"
	djConfig="parseOnLoad: true,debugAtAllCosts: true"></script>

Alle weiteren Dateien bindet Dojo selbst ein. Wir können dojo bei der Einbindung noch ein wenig konfigurieren,

parseOnLoad - damit können wir Widgets bei HTML-Markup einbinden, der Dojo-Parser wandelt das dann in Javascript Code um

debugAtAllCosts - Debugging kann zu Anfang nie schaden, sollte aber zur Produktion entfernt werden.

Als nächstes sagen wir dojo, was wir noch alles für Module für unser Beispiel benötigen.

<script  type="text/javascript">
	dojo.require('dojo.parser');
	dojo.require("dojo.data.ItemFileReadStore");
	dojo.require('dijit.form.Button');
	dojo.require("dijit.form.TextBox");
	dojo.require("dijit.form.NumberTextBox");
	dojo.require("dijit.form.FilteringSelect");
	dojo.require("dojox.grid.Grid");
	dojo.require("dojox.grid._data.model");
</script>

Dieser Teil kann leider noch nicht in unsere .js Datei, weil dojo sonst mit den Pfadangaben durcheinander kommt bzw. kommen kann. Man sieht schon, dass wir auch noch ein paar Widgets für das Formular einbinden werden.

Zum Schluss noch der Rest.

<script type="text/javascript" src="gridtut.js"></script>

<script type="text/javascript">
	dojo.addOnLoad(init);
</script>

Fertig – die Reihenfolge ist hier übrigens sehr wichtig, die Datei gridtut.js muss schon vom Browser geladen worden sein, damit addOnLoad auch die Funktionen findet.

Step1 zum runterladen: Step-1

Weiter geht’s hier!