AJAX Matters

  • Home
  • Articles
  • About Us
Rss Feeds

Article Topics

All Articles
General AJAX
ASP.NET AJAX
Google Web Toolkit
AJAX Using Java
AJAX Using PHP
Dojo
 

articles >> dojo >> Introduction to the Dojo Toolkit : Tutorial ...

Introduction to the Dojo Toolkit : Tutorial

By : Peter Svensson
Jul 05, 2007
Printer friendly

Page 2 / 2


Your first dojo-page

    Before you do the fancy stuff you're surely shaking with barely controlled desire to do, it's a good idea to get a minimal "template-page" up and running. Of course, you could just grab one of the tests files and change things about, but how fun would that be? Here is a minimal html-page to start with, happily snarfed from one of the Dialog tests and shortened a bit;

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title>My first Dojo page</title>
                 <script type="text/javascript" src="dojo.js"></script>
                 <script type="text/javascript">
                    dojo.require("dojo.widget.*");
                 </script>
                 <script>

                    var dlg;
                    function getResults(evt)
                    {
                         var name = dojo.byId("inputname").value;
                         dojo.byId("namediv").innerHTML = "<b>"+name+"</b>";
                    }

                    function init(e)
                    {
                        dlg = dojo.widget.byId("DialogContent");
                        dojo.event.connect("hider", "onclick", "getResults");
                    }
                    dojo.addOnLoad(init);
                </script>
        </head>
        <body>
            <a href="javascript:dlg.show()">Show Dialog</a>          <br><br>Name:<div id="namediv">None</div>

            <div dojoType="dialog" id="DialogContent" bgColor="white" bgOpacity="0.5" toggle="fade" toggleDuration="250" closeNode="hider">
            <h3>First Dialog</h3>
            <form onsubmit="return false;">
                <table>
                    <tr>
                        <td>Name:</td>
                        <td><input type="text" id="inputname"></td>
                    </tr>
                    <tr>
                        <td>Description:</td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td>Location:</td>
                        <td><input type="file"></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"> <input type="button" id="hider" value="OK"></td>
                    </tr>
                </table>
            </form>
        </div>
        </body>
    </html>

   
The first thing that happens here is that we load the file dojo.js, where among other things the dojo.require function is defined. Then we call that require function for the things we really need in our page. We could have just added a lot of script statements to get pretty much the same effect, but what's col with the require loader is that we can use wildcards to load a whole package at a time, for instance dojo.widget.*.  This OK when doing happy testing, but in production it's a good idea to only load what you need.



    Note also that the package structure of dojo is the same as the file structure, and actually derives from it. This means that if you create subdirectories for your own dojo-derived widgets or whatever, you can use the loader for them as well.

Then comes a script section were we define the variables and setup function to use in the page, which are page-specific. We could have taken these out and put them in a separate file, which we then could load using the standard script tag. As long as it's only a dozen lines or so, I actually prefer to have them in the html file, if the logic is tightly coupled (as in this case) to the nearby elements.

There are two function, one obvious callback function, which reads the value of an input field, and copies that the value of another element on the page. The other function is a setup function which calls the first function when the form is closed. It does so using dojos own dojo.event.connect function, which is very powerful and requires an article in its own right, but for our purposes here it suffices to say that it hides any browser quirks, to make events simpler to work with.

The rest of the page consist of two parts; A link which shows the dialog form, and the dialog form itself. Note the lazy javascript in the href of the anchor tag, which uses the variable defined earlier to show the dialog.

The second part of the page shows the standard dojo way of declaring widgets, by adding a 'dojotype' tag inside the element, which defines the type of widget to be created for the element. Note also the tag 'closeNode', which defines which node controls calls to the hide() function of the dialog.

When the link is clicked on the page, the dialog is shown, and when the "OK" button is clicked the dialog is hidden and the getResults() function is called.

















<< Prev Page         








General AJAX | ASP.NET AJAX | Google Web Toolkit | AJAX Using Java | AJAX Using PHP | Dojo


© 2000 - 2008 vDerivatives Limited All Rights Reserved.