0.9 In 30 Seconds

Submitted by alex on Tue, 08/21/2007 - 20:10.

Dojo 0.9 is smallest, fastest, and easiest to use Dojo release ever. Part of the ease-of-use of 0.9 is how simple it is to start using Dojo. In 0.9, dojo.js can come from anywhere since it always includes the same modules, and since it's tiny on the wire you don't even have to think twice about including it. We call the new dojo.js "Base" and it includes a wealth of utilities

Here's how to make elements on a page fade out when clicked:

Now, any element you give the "fadeHandle" class to in your document will fade out its parent when clicked. Of course, you can chain the return calls from dojo.query() or use the rich built-in top-level functions on the dojo object to enhance your existing code or form the basis for new systems.

The best part, though, is that because this is Dojo you can use dojo.require() to access the full power of the rest of the Dojo modules, including behaviors, widgets, internationalization, drag and drop, and you can do it without ever downloading Dojo to your system. Here's a more advanced example using widgets and the CDN hosted version of Dojo:

The upgraded textarea will now automatically size to it's contents, the page will have Dojo's default styling applied and all the resources came from a high-performance, edge-cached CDN.

Doesn't seem to work

Submitted by marcstober on Sat, 08/25/2007 - 17:45.

I am new to Dojo (other than seeing your presentation at a Boston PHP group a number of months back) and am trying to get a simple "hello, world" type example going using your examples above but it's not working - the CSS styles are being applied, but I don't see any of the JavaScript having any effect. I must be missing something basic, any ideas? I've posted a page with both examples on it at http://www.marcstober.com/dojotest.html.

Thanks.

couple quirky notes w/ your

Submitted by dante on Sat, 08/25/2007 - 18:31.

couple quirky notes w/ your test usage:

you have two dojo.xd.js script tags, and the second one is losing the parseOnLoad:true (because dojo knows not to load itself twice, afaik), so the TextArea it is finding, isn't parsing.

moving the dojo.xd.js script tag to the element and adding djConfig="parseOnLoad:true" works, you only need include dojo's core once, and can expand upon that as much as you like.

the other issue is the dojo.query() call: it is in-line script tag before any div.fadeHandle's exist in the DOM, so isn't returning anything. Alex's code above works when run from anywhere after the body is loaded. The example may even work if div.fadeHandle was defined before the query, but then it would only return the one. a typical use case would be to dojo.query(".fadeHandle") on a page or container, and you should always wait until onLoad for that (to ensure all the data is in the DOM).

dojo.addOnLoad(function(){
    dojo.query(".fadeHandle").onclick(function(e){
        dojo.fadeOut({ node: e.target.parentNode }).play();
    );
);

here is a working example incorporating both example snippets:
http://dojotoolkit.org/~dante/xdTest.html

Thanks!

Submitted by marcstober on Sun, 08/26/2007 - 00:40.

I didn't the the two dojo.xd.js references were right, but I wasn't sure what parseOnLoad does - is this just something you always copy and paste in or is there more to know about it?

Not being able to access the div until it was loaded makes perfect sense - thanks for showing me how to deal with that.

Search

0.9 In 30 Seconds

Doesn't seem to work

couple quirky notes w/ your

Thanks!