In my last post, I ran through the fundamentals of getting Dojo loaded into the page via AOL’s Content Delivery Network and showed just how easy it is to query the DOM with dojo.query. In this post, I wanted to briefly show off some out-of-the-box Dijit (Dojo widget) goodness with a simple login page. Take a look at the sample page below that uses the TextBox and Button widgets to create a great looking form with virtually no effort required.


<html>
    <head>
        <title>Login</title>

        <style type="text/css">
            @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
            @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css";
        </style>

        <script
            type="text/javascript"
            src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
            djConfig="parseOnLoad:true"
        ></script>

        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.Button");

            dojo.addOnLoad(function() {
                /* Do some basic validation logic in here... */
            });
        </script>
    <head>
    <body class="tundra">
        <div style="width:275px;height:75px;padding:10px;margin:10px;border:solid rgb(200,200,200) 1px;">
            <div style="float:left">
                <div style="margin-top:5px; margin-bottom:3px">Login ID</div>
                <div style="margin-bottom:3px">Password</div>
            </div>

            <form id="login_form" method="POST" action="/">
                <div style="float:right">
                    <div name="login_id" style="margin-bottom:3px" dojoType="dijit.form.TextBox"></div>
                    <div name="login_password" type="password" dojoType="dijit.form.TextBox"></div>
                </div>

                <button type="submit" style="float:right;clear:right" dojoType="dijit.form.Button">Login</button>
            </form>

        </div>
        <div style="margin:10px;line-height:1.5em;padding:5px;text-align:justify">
            Login to this great website...
        </div>
    </body>
</html>

And here’s that form:
loginform.png

Hopefully, the page pretty was pretty self-explanatory; still, there are three quick points that are worth reiterating:

  • You request Dojo resources on the fly via dojo.require, which is similar to an import statement in Java or #include in C or C++. This is great for modularizing code during development but also has significant performance impact for production settings: you can use the toolkit’s build tools to consolidate resources into a single JavaScript file, which saves on the HTTP overhead and keeps the page load snappy.
  • You place dijits into the page using a special dojoType attribute. The parser finds and instantiates them (via dojo.query, I might add) when the page loads because of the djConfig directive passed into the SCRIPT tag. Note that we required the parser into the page just like the widget resources.
  • The page looks great because Dojo uses themes to standardize the look and feel. In this case, we pull in the tundra theme and some boilerplate style via the @import statements. Adding the class="tundra" tag to the BODY of the page takes care of the rest.

All that’s left is just a little CSS for layout and the standard HTML skeleton. Although there’s not that much to any login page, hopefully, this gives you an idea of just how easy it is to take some dijits off the shelf and run with them.

As always, you can turn to Dojo’s official API if you want to learn more about these widgets or anything else for that matter. You might also be interested in my upcoming book, Dojo: The Definitive Guide.