Why Dojo?

The Dojo Toolkit is an open-source JavaScript toolkit useful for building great web applications. It aims to shorten the timespan between idea and implementation by providing an exceptionally well conceived API and set of tools for assisting and fixing the issues experienced in everyday web development. It is lightning fast, extremely robust, and supplies a solid set of tools for DOM manipulation, animations, Ajax, event and keyboard normalization, internationalization (i18n) and accessibility (a11y). Dojo Base is a single, lightweight 26KB entity "across the wire." Dojo is completely free, liberally licensed (AFL or BSD), and transparently developed by an active group of developers with a strong community presence. No matter the size of your projects, Dojo is the ultimate scalable solution to your development woes. The built-in package system ends the headache of tracking dependencies, the build system combines and shrinks optimized "layers" of code for deployment, and D.O.H. makes unit and regression testing a breeze.

The add-ons.
In addition to all the great tools available in the Base dojo.js, using the powerful package system, you can add functionality to your application through simple dojo.require() calls. Dojo Core includes great tools such as drag and drop, advanced Ajax transports, string utilities, a powerful data API, and hundreds of others to use to easily make exceptional rich internet applications.

Endless possibilities.
The Dojo Toolkit also comes pre-packaged with a project called Dijit, a system for using and creating encapsulated, reusable components or widgets. The system provides accessible, extensible, themeable components to drop into your web applications and sites, and a solid API for streamlining the development of your own widgets or customizing the behavior of existing widgets.

Cutting edge technology
With Dojo, many of the latest and greatest technologies are at your fingertips. Buzz words like Web 2.0, Ajax, and Comet provide a great starting point to describe the experience you'll be creating. dojox.gfx, dojox.charting and Dojo Offline quickly go beyond the hype, pushing the limits of the web experience to new heights.

Getting The Code
Download the newest released version of the Dojo Toolkit from:

http://download.dojotoolkit.org/

The "built" version is: dojo-release-1.3.0.zip Unpack the contents of the archive into a folder (preferably on a web server as this is always a good case for Ajax development). Let's call it "js/". You may also name your dojo directory "dojotoolkit" as the examples here will show. If you wish to version Dojo, you may leave it as dojo-release-1.3.0. You should now have a directory structure similar to this:

The most important thing to know when installing the Dojo Toolkit is where your copy ofdojo.js is located. The package system handles the loading of all other dependencies and modules, once dojo.js has been loaded into the page. You can verify your download and install is working by pointing your web browser tohttp://localhost/js/dojotoolkit/dojo/tests/runTests.html or browse the dijit test pages at http://localhost/js/dojotoolkit/dijit/tests/ The Dojo Book, a freely available collection of guides and tutorials, provides a more in-depth description of the various ways to about the different releases available.

get the Dojo source and

First Steps
Start by making a skeleton HTML file for use as a basic template for any example: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Dojo Toolkit Test Page</title>

<!-- load the dojo toolkit base --> <script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>

<script type="text/javascript"> /* our JavaScript will go here */ </script>

<style type="text/css"> /* our CSS can go here */ </style> </head> <body><!-- this is a Typical WebPage starting point ... --> <h1 id="testHeading">Dojo Skeleton Page</h1> <div id="contentNode"> <p>Some Content To Replace</p> </div> </body> </html> This page has a DOCTYPE of "HTML/4.01 Strict", and almost passes W3C validation. This can be fixed, but the shorthand is convenient. You will learn about both valid and convenient methods in this guide.

Configuring Dojo

js"></script> Both examples have the same effect. parseOnLoad:true }. and isDebug.addOnLoad. Conveniently. which enables or disables certain debugging messages.Dojo has a mechanism for setting various configuration options at runtime. which toggles page-load parsing of widgets and in-markup code.. you can setup a global djConfig variable before dojo. so to aid in your continued sanity. isDebug:true"></script> If the above validation concerns you (you know who you are).js via a custom attribute named djConfig. you can set these options directly in the <script></script> tag that loads indojo.js" djConfig="parseOnLoad:true. The two most common are parseOnLoad. Dojo has a method of executing code when the document is really "ready":dojo.addOnLoad a function: // a very common method of loading code onLoad var init = function(){ . </script> <script type="text/javascript" src="js/dojotoolkit/dojo/dojo. Everything we do that could possibly affect the DOM should be started by passing dojo.. There are a number of cross-browser differences in defining "ready".js is loaded: <script type="text/javascript"> var djConfig = { isDebug:true. Simply modify the skeleton HTML template to add the new attribute: <script type="text/javascript" src="js/dojotoolkit/dojo/dojo. When can I start? As soon as the document is ready and loaded.

form.Button"). dojo.Button: dojo.addOnLoad(function(){ console.innerHTML = "We're on our way!".addOnLoad(function(){ dojo. "). but second. dojox projects. dojo. such as Drag and Drop.addOnLoad is a fundamental aspect of using Dojo. you cannot be sure all the necessary content has been loaded before your own code begins to execute.log("I also run. For example. Without it. dojo.form. .byId("testHeading"). to load the code needed to use the TitlePane widget. console. and a Dijit Button into your page include the modules dijit. dijit widgets. and is very important to remember.require("dijit.require(). dojo.addOnLoad(init). This function allows us to pull in parts of the Dojo Toolkit not provided for in the Base dojo. // and/or pass an anonymous function dojo. }.onload = someFunc. More than just dojo Dojo has a package system built in to load all the code you need.").console. or even your own code. dojo.js.require("dijit.TitlePane"). }).addOnLoad(someFunc) is prefered over <body onLoad="someFunc"> and window.log("I run after the page is ready.TitlePane and dijit. controlled bydojo. additional animations.log("onLoad fires after require() is done"). It's important to note that you should not set on onLoad function directly on the <body>tag when using dojo.

or explored by browsing the dijit/tests/ folder that came with your download. This returns the domNode of an element by its id attribute. something has gone wrong.query more closely. DOM Magic A really nice tool Dojo provides is dojo. Each "module" has it's own dojo. Each of the following sections will touch on how to use dojo.play(). you really are on your way to some really interesting web development: dojo. dojo.innerHTML property. and manipulate it. It really deserves its own book. available at the Dojo Toolkit website.byId().addOnLoad(function(){ // our dom is ready. A lot of common mistakes are covered in the FAQ. Here we're changing the text of the heading in the body.query. // and fade it out after 500 ms . Code executed by dojo. through its .byId() is a convenient way to access a specific node.bliss.require()'s are all finished loading.}). If you are experiencing errors.require("dojo.require()'s. Moving on In the last example.addOnLoad doesn't run until after your dojo. If all you see is "We're on our way".NodeList-fx").fadeOut({ delay:500 }). though realizing its potential is as simple as seeing it used: dojo.addClass("testClass") // adds class="testClass" . we snuck a very common method into our addOnLoad code: dojo.query("#testHeading") . and knows not to load code it already has. get the node: dojo. making it that much safer and convenient to use. dojo. It's a great way to parse all or portions of the Document Object Model (DOM) and access selections of nodes. A full list of available widgets and the module they live in can be found at the Dijit API pages.

. dojo. so add some content to our DOM: <h1 id="testHeading">Dojo Skeleton Page</h1> <a class="link" href="#">First link</a> <a class="link" href="#">Second Link</a> <p class="para">First paragraph</p> <p class="para">Second paragraph</p> <p class="para">Third paragraph</p> And use a different query: dojo. It supports most CSS3 selectors (so you can go really wild with its syntax). To demonstrate this. and your heading will get that style before fading out.query returns an instance of a dojo.para") .require("dojo.testClass CSS definitions to set color:red.NodeList-fx").play().query(". Add .addClass("testClass") .testClass { color:#ff0000.NodeList. we're going to need something more than a single heading. .}). } dojo.addOnLoad(function(){ // get each element with class="para" dojo. and execute code against the whole list of results.fadeOut({ delay: 1000 }). a synthetic super-Array of domNodes.

For instance:dojo.function(){ node.addOnLoad(function(){ dojo. .query chains have standalone functions to achieve the same goals. The full list of thingsdojo. We've already set the heading to some alternate text. and fade out after a second delay.NodeList does is impressive.query("#testHeading") .innerHTML = "I've been clicked".innerHTML = "I've been clicked".query("#testHeading"). but what if we wanted to so something more interesting? Perhaps change it to something else when the user clicks on it? dojo.byId("testHeading").a ddClass("testHeading".query would be: dojo.connect is the one-stop solution for all your event needs: dojo.connect(node. A convenient way to do the above using dojo. All three <p> elements should turn red. Most dojo. anddojo. some of which we'll touch on in later sections of this guide. }). }). dojo.style("cursor"."testClass") have identical results.}). Events The next important concept we are going to cover is interacting with our page. })."pointer") .addOnLoad(function(){ var node = dojo.function(){ this.addClass("testClass").connect("onclick"."onclick".

e. however. It is common to see the event object written as e or evt when passed as a paramter. In the example.style to our example.function(e){ e. and execute them in the same scope. utilize the normalized event objectdojo. dojo.preventDefault will prevent the event from "doing what it was going to do". or animations. We can also connect to methods of specific objects. For instance. We added another chain . We could easily find a big group of elements. // stop the event console. and affect them all. to prevent all links on a page from leaving. // the node we clicked on }).connect passes: var disableLinks = function(){ dojo. This allows us to make an onclick function on more than one node at a time. This. This is useful as you get into declaring classes in Dijit. to make the cursor a pointer when hovering over the header node. we preventDefault on the click event. and probably should have.preventDefault(). to avoid unnecessary code.query("a").connect("onclick". and very useful.addOnLoad(disableLinks). Lets create a really simple object with some methods. though our NodeList only has one element above. The code e.}). More about the normalized event object used in Dojo can be found in the Event Object Book Page at the Dojo website. We could have done this with plain CSS. }. is a convenient way to dynamically alter most any CSS property. and watch them interact: var mineObj = { aMethod: function(){ . which would have followed the anchor link we connected to.log('clicked: '.target).

Some Gloss: Dojo Animations . } }."bMethod". The full power of dojo.addOnLoad(function(){ // run bMethod() whenever aMethod() gets run dojo.console.mineObj.connect(mineObj.aMethod().connectcan be explored via the dojo. } }.connect(mineObj.log('running C'). or in the Events chapter of the Dojo Book. var otherObj = { cMethod: function(){ console. })."cMethod")."aMethod". // start chain of events mineObj."bMethod"). }. bMethod: function(){ console.log('running B'). dojo.otherObj.connect API. You should see "running A B C" on separate lines in the console.log('running A'). // run an entirely different object's method via a separate connection dojo.

and other animations in Dojo Core.play().fadeOut({ node: "testHeading". dojo. properties:{ // fade back in and make text bigger opacity: { end: 1 }. fontSize: { end:19. and animateProperty. Adding some visual flair to you projects has never been easier.addOnLoad(function(){ dojo.animateProperty({ node: "testHeading".animateProperty is very powerful.Dojo has a powerful animation system with several pre-made animations for a lot of common use cases. the domNode on which to apply our animation.js are: fadeIn. }).fadeOut(animArgs). fadeOut. and is the foundation for most advanced animations.dojo. dojo. A common setup would look something similar to: dojo. unit:"pt"} . Base Animations: Animations included in base dojo."0"). Some parameters are optional. var anim2 = dojo.addOnLoad(function(){ var animArgs = { node: "testHeading". duration:700 }).style("testHeading". delay: 1000. and some are for advanced usage. // hide it var anim1 = dojo."opacity". duration: 1000. and typically makes the users experience a lot more interesting. The most important being thenode: attribute. All animations use a single "magic object" as it's only parameter. // ms to run animation delay: 250 // ms to stall before playing }.

play(). and simultaneously make the text larger. Additional FX A lot can be done visually with the base animations.addOnLoad(function(){ // slide the node to 75.require.fx").fx. anim2.wipeOut and dojo.play(). dojo.combine.js down. dojo.require("dojo. }). animateProperty especially.} }).slideTo. Use fontSize andlineHeight. . dojo. top:75. when modifying multi-word properties such as fontsize and border-top.slideTo({ node:"testHeading".75 dojo.chain. Adding the module to your code provides several additional animation methods: dojo. dojo.fx. left:75 }).fx. instead of font-size or lineheight for example.fx. // and play it }). In JavaScript.fx. To keep the size of the base dojo.fx to be optionally called in via dojo. dojo. dojo. As seen.animateProperty will fade the element back in via it's opacity property. as hypens are illegal as keys. all the additional animations and tools have been packaged into a single module: dojo. you must use a mixed cased version.wipeIn.play().fx. anim1. You can animate most any CSS property this way.

too.play(). we can connect to specific actions of the animation. left:75 }).fadeOut({ node: "testHeading" })._Animation to use: dojo.fadeIn({ node: "testHeading" }).fx.fadeOut({ node: "testHeading" }). }).addOnLoad(function(){ var anim = dojo. Combining an animation to fade in and out wouldn't make sense.addOnLoad(function(){ var anim = dojo.require("dojo. so lets fade it out and slide the node simultanously using dojo. dojo.connect(anim."onEnd".fx.chain and dojo.fadeOut({ node: "testHeading" }). returning a single instance of dojo.combine([anim. The most common are onEnd and beforeBegin. result. dojo. dojo.connect.chain([anim.dojo.function(){ . var result = dojo. Animation Events Each dojo.require("dojo.anim2]).play(). top:75. They run animations in parellel or in sequence.addOnLoad(function(){ var anim = dojo. dojo.anim2])._Animation has a series of "events" to tie into for more advanced usage.combine are very useful.combine: dojo. var anim2 = dojo.fx"). dojo.slideTo({ node: "testHeading". }).fx. and do other things.fx.fx. Going back to the one-stop-event-shop dojo. var anim2 = dojo.fx.fx").

log(" the animation is about to start ").console. dojo.addOnLoad(function(){ var anim = dojo.byId("testHeading").addOnLoad(function(){ var anim = dojo."onEnd". and are typically safer for advanced uses..innerHTML = "replaced . }).play().connect(anim.innerHTML = "replaced after fade!". dojo.. .fadeOut({ node: "testHeading" }).fadeIn({ node:"testHeading" }). anim."beforeBegin".byId("testHeading"). }).function(){ console.log(" the animation is done "). anim. Conveniently. }). dojo. }). but sometimes it's easier to wrap it all in: dojo.connect(anim.function(){ dojo. }).connect to setup the functions gives us a lot more power.fadeOut({ node: "testHeading". onEnd: function(){ dojo.play(). you can pass the event functions as properties to the animation.play(). These events are espeically helpful when you want to do things like change some content out while a node is hidden and then fade it back in: dojo. Usingdojo. ".

and optionally using a unit attribute.animateProperty({ node:"testHeading". end:"#FFE" } }. Manipulating our header element to use a new font color.play(). properties we can define any style property of a node. size._Animation.animateProperty allows us to easily animate multiple css properties simultaneously. end:22._Animation API pages.5 }. color: { start: "#000". Since animateProperty is a dojo. it uses the same arguments as other animations. dojo. and overall opacity is as easy as: dojo. duration:700.addOnLoad(function(){ var anim = dojo. With an additonal object.play(). } }). animateProperty Probably the most powerful of the base animations. . }). From startto end. opacity: { start:1.dojo. properties: { // javascript css names are camelCase // (not hyphenated) fontSize: { start:12. delay:100 // Note! trailing commas break IE.fadeIn({ node: "testHeading" }). unit:"pt" }. end:0. The full explanation of events is available at the dojo.

_Animation.}).NodeList-fx")._Animation.query here makes an animation for each of of the NodeList elements. }). To enable these methods. }).addOnLoad(function(){ dojo.query("#testHeading").byId("testHeading").NodeList-fx"). var fadeThem = function(){ dojo.query(". simply add in the required module: dojo. }). .fx animations.query() chains.play(). but dojo.require("dojo. dojo. all the nodes with class="fadeNode").fadeOut directly. and combines them into a singledojo. which adds additional methods to dojo.fadeOut(). preventing further chaining. This can be useful when you have groups of like nodes you want to easily affect (in this case.fadeOut(). The above gives us the same effect as calling dojo.query for the available dojox.NodeList-fx. dojo.addOnLoad(function(){ dojo. the NodeList-fx methods return an instance ofdojo. anim.play()."fadeThem").require("dojo. } dojo.play(). dojo.fadeNode")."onclick". Unlike other dojo.query Animations Dojo provides another convenient module: dojo.connect(dojo.

GET.Ajax: Simple Transports Ajax is an acronym for "Asynchronous JavaScript and XML". To prepare. and DELETE. send data to the server and pass responses back and forth. Create a file named sample. height:55px. Having been versed on some essential Dojo methods. background:#ededed. I am going to be replaced . a technology employed to send and receive data on the fly. width:75px. We used Ajax to put this text in our page. PUT. } </style> <div id="container" class="box"> <div id="content"> I am some Inner Content. It can be used to update sections of a website from any number of remote sources. And modify the skeleton. we need to create a file with some text to load in. all without ever refreshing the webpage. Dojo has several XHR methods available using common HTTP verbs: POST.txtin your js/ folder with sample text: I am a <em>remote</em> file.html to have some basic markup and style: <style type="text/css"> #container { border:1px dotted #b7b7b7. we'll move on the the bread and butter of Ajax: XmlHttpRequest (or XHR for short).

</div> </div> The XHR methods use dojo. which will return the contents of a GET call on a URL.fadeOut({ node: contentNode.innerHTML = data. Getting data The first stepping stone is dojo. visit the Dojo book or the dojo. Most important are the url: (our destination) and handleAs: (how we handle what is coming back). The XHR methods share a lot of common parameters. but extremely useful in practice.xhrGet({ url: "js/sample.xhrGet. handleAs: "text".DeferredAPI pages. onEnd: function(){ // set the data. dojo. If you would like to learn more about callbacks and the various way to set them up.txt".fadeIn({ node: contentNode }).args){ // fade out the node we're modifying dojo. it will be passed the the load: function we define: var init = function(){ var contentNode = dojo. This is beyond the scope of a QuickStart. load: function(data. } . dojo.byId("content"). fade it back in contentNode. When the data arrives.play().Deferred behind the scenes to handle callbacks.

args){ console.}).xhrGet({ url: "js/sample. handleAs: "text".play().innerHTML = data.warn("error!".error).log(args).byId("content"). It was almost too easy.addOnLoad(init). // if any error occurs.warn("error!"). }. A single handle argument can be used instead of load and error. The content will fade out. }else{ // the fade can be plugged in here. } . it goes here: error: function(error. }. handling both success and failure cases in a common function: var init = function(){ dojo. be replaced by the received data. too dojo. and fade back in using methods we've learned to this point.args){ if(typeof data == "error"){ console. console. handle: function(data. dojo. } }).txt". You will notice we've combined techniques above.

Dojo provides alternatives like dojo. You also may experience problems with the Ajax samples if you are using Internet Explorer without a web server (from the local filesystem).xhrPost.script for more advanced usage.addOnLoad(function(){ dojo. It is a know security limitation of XHR and IE. Sending Data All Dojo XHR methods are bi-directional. We are only going to skim the surface here. It is a known limitation and a common mistake when getting excited about Ajax. it is recommended you have a web server accessible to host the Dojo source. }.iframe and dojo. "bar": { .html". Usingdojo. or in the Dojo Book.xhrGet).io.com").} }).io. and your tests. A full list of XHR parameters is available at the API page. content: { "key":"value".xhrPost({ url:"submit. While most of these examples do work from the filesystem. The data can be set directly as an object passed to the content parameter: dojo.addOnLoad(init). You can't submit the request outside of the current host (eg: to url:"http://google. we use the POST method. embedding the data in the request (as opposed to the query string as with dojo. "foo":42. XHR has limitations. The only difference is the method. dojo. The big one being that url is not cross-domain.

preventDefault(). Or more commonly. First. form: "mainForm". . add in some JavaScript to submit the form by using dojo. make a simple unobtrusive form in the skeleton.ioargs){ console.html: <form id="mainForm" action="ajax-submit. // submit the form in the background dojo. conveniently converted from a form parameter.xhrPost({ url: "alternate-submit.log(data). })."baz" :"value" } }.connect to listen to theonSubmit event. } }).php" method="post"> <label for="firstName">Name: </label> <input type="text" name="firstName" value="Enter Name" /> </form> Then. and post the contents of the form to an alternate URL: // sumbit the form var formSubmit = function(e){ // prevent the form from actually submitting e.php". load: function(data.

}else{ // show our response console. }.preventDefault() being used again. } } }). The default nature of a form being submitted to to visit a new page. Notice e. handle: function(data.handleAs: "text". // another dojo. dojo.log(data).addOnLoad(function(){ var theForm = dojo. print "<ul>". foreach($_REQUEST as $key => $var){ .args).connect syntax: call a function directly dojo. and we want to prevent that from happening. An example alternate-submit.connect(theForm."onsubmit".warn("error!". }).php would look like: <?php print "DATA RECEIVED:".byId("mainForm").args){ if(typeof data == "error"){ console."formSubmit").

name: "SitePen".json to load: { foo: "bar".print "<li>". another: "subelement" } } We'll target our xhrPost url: to the new file. aFunction: function(){ alert("internal function run"). Using a different handleAs: attribute. we can alter how Dojo handles the response data.xhrPost({ url: "js/simple-object. }. } print "</ul>". and supply a handleAs: "json" parameter to convert the response data to an actual object we can use: var postData = function(){ dojo.$key.$var. but the really great stuff comes when you start passing JavaScript objects around."</li>". Make a new file named simple-object. ?> Object Data Getting text back from the server is nice." = ". . nested: { sub: "element".json".

ioargs){ // success: set heading. A message will be thrown wanting you to use "json-comment-filtered" as a handleAs: value.aFunction()){ // we just ran data. // is a reference to the actual widget. if(data.byId("firstWidget"). // is the domNode the widget uses // as opposed to: .aFunction && data. This allows us to send literally any kind of data back and forth across the wire. }. and likewise its own collection of utility functions: dijit. run function dojo. load: function(data.. You can either use the alternate value. It has its own namespace.byId("testHeading"). Dijits are the official. accessible. dojo.domNode. dijit. Dijit: Prepackaged Dojo's widget system is called Dijit. without ever interrupting the user experience. should alert() .handleAs: "json".addOnLoad(postData).innerHTML += " by: "+data..aFunction().name.byId("firstWidget"). } } }). themed components shipped with the Dojo Toolkit. or set your djConfig's usePlainJson: true to deprecate this warning.

01//EN" "http://www. Start by making a new skeleton file.dojo. We'll do both. If this concerns you. and dojo.requires() </script> .load the dojo toolkit base --> <script type="text/javascript" src="js/dojotoolkit/dojo/dojo. isDebug:true"></script> <script type="text/javascript"> // our code.dtd"> <html> <head> <title>Dijit Test Page</title> tundra's CSS. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. The markup route breaks W3C validation because Dojo conveniently uses customized attributes in the makrup to configure the widget.js" djConfig="parseOnLoad:true.byId("testHeading"). it can all be done with script. // is a domNode in our page Using dijits There are two ways to make Dijits: via markup. and setting <body class="tundra"> to enable <link rel="stylesheet" href="js/dojotoolkit/dijit/themes/tundra/tundra.css" /> <!-.org/TR/html4/strict. including a couple changes for dijit styling: the default theme it.w3. or programatically.

Button"). To explore beyond this guide..Dialog API Pages.form.</head> <body class="tundra"><!-. . or the Book overview.Dialog"). From markup You can specify all the attributes needed to setup your widget directly in markup.form. Simply call in the modules you need in a <script> tag. The parser finds the dojoType attribute. For instance.Dialog is a modal dialog box. --> <h1 id="testHeading">Dijit Skeleton Page</h1> <!-. awaiting user interaction.empty placeholder nodes --> <div id="sampleNode"></div> <div id="anotherNode"></div> </body> </html> Dijit uses Dojo's package system to track dependancies via dojo. you need the following calls: <script type="text/javascript"> dojo.Button.Dialog anddijit. It can also act as a form element. </script> The dijit. to use a dijit. visit the dijit. title is a common attrbute used by many widgets with headings.require. dojo.require("dijit.require("dijit. the most important being the dojoType. and turns the node into a Dijit with the matching classname..this is a Typical WebPage starting point . It takes the node's content. and displays it front-and-center on the viewport.

Our markup is simple. and put your code inside an addOnLoad function as before. .parse().<div dojoType="dijit. We pass all the attributes as an object into ourcontstructor. the parser is loaded automatically.will create the widgets when you are ready.Button" id="myButtom" onClick="console.require("dojo.parser. From JavaScript The same results can be achieved using valid HTML and JavaScript.</p> </div> <button id="myButton"> Show Button </button> And our script is standard dojo code.</p> </div> <button dojoType="dijit.log('clicked')"> And Button </button> true.parser").form. and tell it to use the node "sampleNode" for it's content.Dialog" id="sampleNode" title="The First Widget"> <p>I am the Content inside the dialog. the widgets will be created. then addOnLoad code will be excuted. valid HTML: <div id="sampleNode"> <p>I am the Content inside the dialog. call to include the required functions. you must issue adojo. All dijits use the parser. All Dijits (or declared classes) can be created using the JavaScript new function. Issuing the command dojo. so it is included automatically. Otherwise. If parseOnLoad is set parseOnLoad:false. If you want to execute code before widgets are parsed. If parseOnLoad is true.

To make the button the button control the dialog.startup(). The function dijit.log("clicked").Dialog"). When the button is clicked.Dialog has an id ofsampleNode.addOnLoad(function(){ // make the button var theButton = new dijit. Manipulating The Widget With our dialog successfully loaded and parsed (no errors were thrown. parser does this if using markup theDijit. }). The dijit. dojo."sampleNode").require("dijit. } }.form. and the content of the Dialog is hidden). modify the button's onClick attribute to do more than print text: ."myButton").dojo.require("dijit. you should see the word "clicked" in your Firebug (or Firebug Lite) console.byId gives us a reference to our widget. dojo. // make sure its started.form.Dialog({ title:"The First Widget" }.Button"). we need to explore some of the ways to manipulate the widgets. // make our Dialog var theDijit = new dijit.Button({ onClick:function(){ console.

Dialog" id="sampleNode" title="The First Widget"> <p>I am the Content inside the dialog.<div dojoType="dijit.</p> </div> <button dojoType="dijit. } }.byId('sampleNode'). modify the lines that create the button: // make the button var theButton = new dijit. Add a new button outside the dialog with a new onClick function: <div dojoType="dijit. The dijit.show()"> Show Dialog </button> .Dialog" id="sampleNode" title="The First Widget"> <p>I am the Content inside the dialog.layout.form.byId("sampleNode"). including setHref.Button" id="myButton" onClick="dijit.ContentPane which provides a few content-handling methods.Button({ onClick:function(){ dijit.Dialog inherits from a dijit.form.Button" id="myButton" onClick="dijit.</p> </div> <button dojoType="dijit.byId('sampleNode').show()"> Show Dialog </button> If using the programmatic method."myButton").show().form.

txt')"> Change Content </button> Or Programatically by adding another button to our HTML: <div id="sampleNode"> <p>I am the Content inside the dialog.byId("sampleNode"). var theButton = new dijit.form. } }.form.setHref('sample.<button dojoType="dijit."myButton").Button({ onClick:function(){ dijit.</p> </div> <button id="myButton"> Show Button </button> <button id="otherButton"> Change Dialog </button> And an additional new call: // make the button var theButton = new dijit.form. } .txt").byId("sampleNode").Button" id="otherButton" onClick="dijit.Button({ onClick:function(){ dijit.setHref("sample.byId('sampleNode').show().

you just have to look.}. Dojo Forums If you are unable to find any discussion or book entry already. var theDijit = dijit. without knowing it's id dojo. theDijit. Here are some vital community resources available to assist you in your Dojolearning. Getting Help In addition SitePen's various commercial support options.show(). The new search engine has options to help you target specific resources in the Dojo community. Dojo has a large community of developers and hobbyists all across the globe that are willing to assist with problems and offer guidance. to find which widget contains a passed domNode: // show the dialog onLoad. A quick stop at the dojotoolkit. . like blogs. there are a number of ways to find helpful information on your own. forums. ask later."otherButton") Adding an id attribute to the paragraph inside the Dialog is an easy way to demonstrate another useful Dijit tool.addOnLoad(function(){ // add <p id="myPara"> to the dialog content var p = dojo. }).org search page usually turns up lots of commonly encountered problems.getEnclosingWidget. or archived mailing lists.byId("myPara"). dojo.getEnclosingWidget(p). and some hints to ensure success: Dojo Search Search first. start a new topic in the Dojo forums. Many tutorials and examples exist and are ready to be found.

the more willing people will be to help you. Mailing Lists Though the forums have taken the place of the once-active mailing lists. and a great way to be in immediate contact with like minded people while developing or learning Dojo. well researched question. The community grows daily. and you are typically going to receive a response. It is important to remember the Dojo community is entirely voluntary. so civility is expected of everyone. and begin writing a thoughtful. There is no experience requirement. this resource is still available. and start talking. and to politely state your question." means just that: Jump right in. at seemingly odd hours of the day. . The more infomation you provide in your post. The first rule in the channel topic "Don't Ask to Ask. #dojo Join the #dojo chat room on the irc server irc. This room acts as a realtime development center for numbers of people ranging from beginner to expert. if at all. There are several thousand subscribers to dojo-interest. See the Getting Involved guide for more information about what you can do. just a desire to learn. and the preference of some. you will likely get a response.freenode.It helps to provide examples contained within <code> tags. Civility is expected of everyone. many core Dojo developers are available for any level of discussion. the more likely someone is going to quickly be able to assist you. If help is available. you are always welcome to contribute. Also available on the Dojotoolkit website: a collection of Fequently Asked Questions. The more thought you put into your post.net. If you find things within the community to be lacking. and your contributions are just as welcome as everybody else's. Often. and you are not guarenteed any speedy response. typically in their spare time. The conversations range from deeply technical to outlandishly silly. It is a very friendly room. mention them as well. Simply signup. People helping other people for the good of the Open Web. just Ask. If you have tried other methods and failed.

Sign up to vote on this title
UsefulNot useful