Dojo Tutorial with a grid: part 1 – english version
Hi there, this tutorial is about the dojo toolkit and how to generate a grid. Since I haven’t found a guide which covers all the basics from including dojo, over AJAX to server-side communication, I’ve decided to write it myself.
Okay then, let’s start.
1. Ingredients
We’re going to need 3 to 4 files:
- a HTML file
- a javascript file for organization and code seperation
- a dynamic web language file (I’m only good at PHP) for the data to be loaded into the grid
- optional: a html-Datei for a popup
Furthermore need the current version of the dojo toolkit (v.1.02). Also friends of IE better fetch a nightly build, but don’t worry, we’ll do that together.
btw. As dojo 1.1 is released, you won’t need the nightly build anymore
2. Preparation
2.1 Download dojo
Here’s the download <klick>. If version 1.02 is still the current version, we need a nightly build in order to deal with some nasty bugs (grid’s not shown in IE): <klick>.
2.2 Folderstructure
First we create a main folder, which is accessible to Apache (or iis).
We extract the dojo’s archive in a sub folder, e.g. dojotoolkit-release-1.0.2.
It has proven itself in practice (okay, in my practise 
) to keep the release number in the foldername. So if you want to switch the release later on, it much easier to manage.
Now extract the nightly build somewhere else and copy the folder called dojox into the dojotoolkit-release-1.0.2 folder. That’s how it looks like:
/gridtutorial
|---+ dojo-release-1.0.2
|--- dijit
|--- dojo
|--- dojox (from the nightly build)
|--- util
Let’s create our 4 file then:
gridtut.html
gridtut.js
gridtut_request.php
gridtut_pop.html
Okay, popups are clearly out of style and the dojo.dialog would be a very nice replacement, but a big challenge is to integrate dojo into existing projects. Furthermore, this is example should be still usable without javascript.
3.1 Step-1 Setup Dojo
I think it’s time to see some code 
I suppose, everybody knows how to create a HTML file, so we start directly including dojo to our site.
First, we nees CSS files for the <head> Tag:
<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">
Hereby we’ve defined the look of all dojo widgets.. err dijits. In order to have the grid look like the rest, we also include tundraGrid.css.
Second, we include dojo itself as javascript files.
<script type="text/javascript" src="./dojo-release-1.0.2/dojo/dojo.js" djConfig="parseOnLoad: true,debugAtAllCosts: true"></script>
All depending files are included by dojo itself, but we have some parameters to configure:
parseOnLoad - in order to create dojo widgets by html markup, we need a parser
debugAtAllCosts - for development, debugging can't be wrong, although you should disable it in a production environment
The next things is to tell dojo, what modules we’re going to use for our example.
<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>
Unfortunately this portion of javascript cannot be included in the .js file we reserved for that, otherwise the path for inclusion of those files gets messed up. You can already see, that we’re also cover some form dijits later on
The final part:
<script type="text/javascript" src="gridtut.js"></script>
<script type="text/javascript"> dojo.addOnLoad(init); </script>
Okay, we’re ready. The order of those ports is quit important, by the way. The file gridtut.js is going to contain the function “addOnLoad” and so we can only call the function after it has been loaded.
So, that’s it for the first part. Thanks for reading.
Nice tut but i wonder if you have seen how long it take to load all this stuf. A first load takes about 5 seconds and chached takes it 1.5 seconds to load. However my Firefox has not been restarted for several hours, restarted doent it make it much shorter.
Great write-up! Quite fine line in between “key phrase stuffing” and utilizing which key phrase(s) in your title, outline, H1, bullets, and paragraphs (alt text) on the residence page or various search phrases on sub-pages. We generally try to use the major keyword on the home page about 5 occasions as normally as doable. Other search phrases on sub-pages 2-3 and 2 occasions in blogs. Nick any thoughts on numbers. I comprehend just about every site is different, but you even now need a road map and every single site still only has 1 landing page.