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
Button widgets to create a great looking form with virtually no effort required.
And here’s that form:
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
importstatement in Java or
- You place dijits into the page using a special
dojoTypeattribute. The parser finds and instantiates them (via
dojo.query, I might add) when the page loads because of the
djConfigdirective passed into the
SCRIPTtag. Note that we required the
parserinto 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
@importstatements. Adding the
class="tundra"tag to the
BODYof 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.