Dojo Tutorial mit Grid – Teil 1
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!
Trackbacks & Pingbacks
- Faddie bloggt! | Dojo Tutorial mit Grid pingbacked Posted February 13, 2008, 2:58 pm
- Faddie bloggt! | Dojo Tutorial with a grid - english version pingbacked Posted February 29, 2008, 8:34 am
ahhhh…. du kannst doch nicht aufhören, wenn es spannend wird…
wird das noch fortgeführt…
Keine Sorge, Montag geht’s weiter!
Jetzt, wo ich eine Leserschaft habe
Leider is dojo von version zu version nicht kompatibel
und aktuelle version ist 1.4.3 !!!