The Dojo Book, 0.4

Brad Neuberg · 2006/11/18

<script>

	djConfig = {

		isDebug: true,

		debugAtAllCosts: true

	};

</script>
<script src="/path/to/dojo/dojo.js" />

<script>

	// dojo includes here

	dojo.require("dojo.myModule");

	dojo.hostenv.writeIncludes(); // this is a new line

</script>

 // ...
<script src="/dojo.js" type="text/javascript"></script>

<script src="/mine/myWidget.js" type="text/javascript"></script>
<script type="text/javascript">

	djConfig = { isDebug: false };

</script>
<script type="text/javascript" src="/path/to/dojo/dojo.js"></script>
<script type="text/javascript">

  dojo.require("dojo.event.*");

  dojo.require("dojo.io.*");

  dojo.require("dojo.widget.*");

</script>
      function helloPressed(){
        alert('You pressed the button');
      }

      function init(){
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }
var exampleObj = {
    counter: 0,
    foo: function(){ 
        alert("foo");
        this.counter++;
    },
    bar: function(){
        alert("bar");
        this.counter++;
    }
};
dojo.event.connect(exampleObj, "foo", exampleObj, "bar");
dojo.io
dojo.io
bind()
dojo.io.bind()
bind()
dojo.io.bind({

    url: "http://foo.bar.com/sampleData.txt",

    load: function(type, data, evt){ /*do something w/ the data */ },

    mimetype: "text/plain"

});
dojo.io.bind({

    url: "http://foo.bar.com/sampleData.txt",

    load: function(type, data, evt){ /*do something w/ the data */ },

    error: function(type, error){ /*do something w/ the error*/ },

    mimetype: "text/plain"

});
var kw = {

	url: "/cgi-bin/timeout.cgi",

	load: function(type, data, evt){ 

		document.myForm.myBox.value = data; 

		dojo.byId("boxLoadTime").innerHTML = new Date();

	},

	error: function(type, data, evt){

		alert("Holy Bomb Box, Batman!  An error occurred: " + data);

	},

	timeoutSeconds: 2,

	timeout: function(type, data, evt){

		alert("I am tired of waiting.");

	}

};
Hello Ajax World!
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="/js/dojo/dojo.js"></script>
<script type="text/javascript">
    function loadRemotely(e) {
        var kw = {
            url:    "my_message.txt",
            load:    function(type, data, evt) { 
                        document.myForm.myBox.value = data; 
                        dojo.byId("boxLoadTime").innerHTML = new Date();
                    },
            method: "GET"
        };   
        dojo.io.bind(kw);
    }
    function initAjax() {
        dojo.event.connect(dojo.byId("loadIt"), "onclick", "loadRemotely");
    }
    dojo.addOnLoad(initAjax);
</script>
</head>
<body>
    Form loaded at:
    <script type="text/javascript">document.write(new Date());</script>

    <form name="myForm">
    <input type="button" id="loadIt" value="Click here to load value.">

    <input type="text" name="myBox" size="50" />
    Text loaded at: <span id="boxLoadTime">N/A</span>
    </form>
</body>
</html>
url:  'myprogram.php?firstname=Chicken&lastname=Little&key=111111'
<script>

var kw = {

	url: "myprogram.php",

	load: function(type, data, evt){ 

		document.myForm.myBox.value = data;

	},

	error: function(type, data, evt){

		alert("Holy Bomb Box, Batman!  An error occurred: " + data);

	},

	timeoutSeconds: 2,

	timeout: function(type, data, evt){

		alert("I am tired of waiting.");

	}

        formNode: dojo.byId("myForm");

};

dojo.io.bind(kw);

</script>
<form id="myForm">

 <input type="hidden" name="key" value="111111" />

 <input type="text"  name="firstname" length="50" />

 <input type="text"  name="lastname" length="50" />

 <input type="text"  name="myBox" length="50" />

</form>
dojo.require("dojo.html.extras")
dojo.require("dojo.lfx.html");
dojo.require("dojo.lfx.html");

dojo.require("dojo.lfx.extras");
  dojo.provide("dojo.html.extras")
<button dojoType="Button" id="foo"> Click me </button>
var myButton = dojo.widget.byId("foo");
<inputvalue="default">
<input dojoType="ComboBox" value="default">
<input dojoType="ComboBox" value="default" dataUrl="comboBoxData.js">
<input class="dojo-ComboBox" value="default" dataUrl="comboBoxData.js">
<dojo:ComboBox value="default" dataUrl="comboBoxData.js">
<select dojoType ="combobox">

  <option value="foo">foo</option>

  <option value="bar">bar</option>

  <option value="baz">baz</option>

  <option value="thud">thud</option>

</select>
<BUTTON widgetId="helloButton" dojoType="Button">Hello World!</BUTTON>
	<?xml:namespace prefix = dojo /><dojo:widget></dojo:widget>

	<DIV dojoType="widget">

	<DIV class=dojo-widget></DIV></DIV>
var myTabPane= dojo.widget.createWidget("TabPane", {id: "myTabPane"}, srcDiv); 
dojo.declare("ClassName",null, {
//class body
});
dojo.declare("Person", null, {
		//acts like a java constructor
		initializer: function(name, age, currentResidence){
		this.name=name;
		this.age=age;
		this.currentResidence=currentResidence;
	},
	moveToNewCity: function(newState) 
	{
		this.currentResidence=newState;
	} 

});
//create an instance of a new person

var matt= new Person('Matt', 25, 'New Mexico');
dojo.declare("Employee",Person, {
	//acts like a constructor
	initializer:function(name, age, currentResidence, position)
	{
		Employee.superclass.initializer(name, age, currentResidence);
		this.password="";
		this.position=position;
	},

	login: function()
	{
		if(this.password!="" && this.password!=null){
		alert('you have successfully loged in with the password '+this.password);
	}
	else
	{
		alert('please ask the administrator for your password');
	}
}});
var kathryn=new Employee(' Kathryn ', 26, 'Minnesota', 'Designer');
matt.login() // ERROR canÃ¢â‚¬â„¢t log in because he is not an Employee
dojo.declare("my.classes.bar", my.classes.foo, {
	// coupledObjects: [1, 2, 3, 4]	- doesn't do what I want; 
	//                                      ends up being like a static!!
	numItem : 5,        // one per bar
	strItem : "string", // one per bar

	 initializer: function() {
		this.coupledObjects = [ ]; // each bar should have it's own array
		this.expensiveResource = new expensiveResource(); // one per bar
	}
});
dojo.declare("my.classes.bar", my.classes.foo, {
	initializer: function() {
		dojo.debug("this is bar object # " + this.statics.counter++);
	},

	statics: { counter: 0, somethingElse: "hello" }
});
dojo.declare("my.classes.bar", [my.classes.foo, my.mixin], {
	initializer: function() {
		my.mixin.call(this /*, args*/); // invoke some mixin constructor
		// (note: my.mixin.prototype is ignored)
	},

	valueForPrototype: 3,

	methodForPrototype: function() {
	}

});
my.classes.bar.prototype.someMethod == function() {
	// invoke any function in our context
	anyFunction.call(this);
	 // invoke inherited version of this method in our context
	my.classes.foo.someMethod.apply(this, arguments);
}

// invoke inherited version of this method in our context
	this.constructor.superclass.someMethod.apply(this, arguments);
 my.classes.foo.prototype.identify == function() {
   return "I'm a foo";
}
my.classes.bar.prototype.identify == function() {
	return "I'm a bar and " +
	this.constructor.superclass.identify.apply(this, arguments);
}
my.classes.zot.prototype.identify == function() {
	return "I'm a zot and " +
	this.constructor.superclass.identify.apply(this, arguments);
}
bar = new my.classes.bar();
alert(bar.identify()); // "I'm a bar and I'm a foo"
zot = new my.classes.zot();
alert(zot.identify()); // stack overflow
inherited: function(methodName /*string*/, arguments /* arrayLike */)
my.classes.foo.prototype.identify == function() {
	return "I'm a foo";
}

my.classes.bar.prototype.identify == function() {
	return "I'm a bar and " + this.inherited('identify', arguments);
}

my.classes.zot.prototype.identify == function() {
	return "I'm a zot and " + this.inherited('identify', arguments);
}

bar = new my.classes.bar();
alert(bar.identify()); // "I'm a bar and I'm a foo"
zot = new my.classes.zot();
alert(zot.identify()); // "I'm a zot and I'm a bar and I'm a foo"
dojo.declare(className /*string */, superClass /*function*/
	[, initializer /* function*/]);
dojo.declare(className /*string */, [superClass /*function*/, mixin /* function */, ...]
	[, initializer /* function*/]);

<!-- Step 1 (Optional) Set djConfig -->
<SCRIPT type=text/javascript>
	djConfig = {
	  debug: true
	};
</SCRIPT>

<!-- Step 2: Load dojo -->

<SCRIPT src="js/dojo/dojo.js" type=text/javascript></SCRIPT>
<!-- Step 3: call dojo.require -->
<SCRIPT>
   dojo.require("dojo.book.myWidget.*");
   <!-- Step 4 (Optional): define initialization functions -->
   function initMyStuff() {
      ...
   }
   dojo.addOnLoad(initMyStuff);
</SCRIPT>

<BUTTON widgetId="helloButton" dojoType="Button">Hello World!</BUTTON>
<SCRIPT>
// ILLEGAL!!  helloButton does not exist yet
dojo.byId("helloButton").width2height = 0.5;
</SCRIPT>

    <SCRIPT src="js/dojo/dojo.js" type=text/javascript></SCRIPT>
    <SCRIPT>
       function initMyStuff() {
          dojo.byId("helloButton").width2height = 0.5;
       }
       dojo.addOnLoad(initMyStuff);
    </SCRIPT>
<BUTTON widgetId="helloButton" dojoType="Button">Hello World!</BUTTON>

<script type="text/javascript">

	djConfig = {

		parseWidgets: false

	};

</script>
<script>
	var myLoadMessage = {
		show: function(event){
			event.preventDefault();
			... custom code here
		}, 
		hide: function(){...}
	}

	dojo.addOnLoad(function(){
		var pane = dojo.widget.byId('myPaneId');
			dojo.event.connect(pane, "onDownloadStart", myLoadmessage, "show");
	});
</script>
<div dojoType="ContentPane" id="myPaneId">...startcontent...</div>

or

<div dojoType="ContentPane" 
	onDownloadStart="myLoadMessage.show(arguments[0]);">...startcontent...</div>

<script>
    var i = 0;
    function addToI( j ){
        i = i + j;
        return i;
    }
</script>

becomes (from window scope):

(function( ){
    var i = 0;
    function addtoI( j ){
        i = i + j;
        return i;
    }
})

<script>
    i = 0; // note lack of var
    addToI = function( j ){ // we could also do window.addToI = function( j ){ ...
        i = i + j;
        return i;
    }
</script>

becomes (from window scope)

i = 0;
function addtoI( j ){
    i = i + j;
    return i;
}

<script>
    this.i = 0;
    this.addToI = function( j ){
        this.i = this.i + j;
        return this.i;
    }
</script>

becomes (from window scope)

(function(){
     this.i = 0; // now it is a property of this function and can be reached from the outside.
     this.addToI = function( j ){
        this.i = this.i + j;
        return this.i;
     }
})

var added = dojo.widget.byId('myPaneId').scriptScope.addToI( 10 );
dojo.debug(added) // prints 10

added = dojo.widget.byId('myPaneId').scriptScope.addToI( 10 );
dojo.debug(added); // prints 20

and so on...

<button onclick="alert(i);">Tell me i !</button> 
// As explained above this wont work in ContentPane(unless you set it to global by omitting var).

<button onclick="alert(dojo.widget.byId('myPaneId').scriptScope.i);">Tell me i !</button>
// this will work in ContentPane

<button onclick=" scriptScope.i">Tell me i !</button>
// this will work in ContentPane
// NOTE: Due to a bug in ContentPane 0.3.1 you need to add a extra space before the keyword
// Thank you Sasha Firsov for finding that! 

... some content
<div dojoType="DatePicker" id="myPicker"></div>
... rest of content

<script>
    var o = {
        storeDate: function( ){
            var datePick = dojo.widget.byId('myPicker');
            var date = datePick.storedDate;
            // save date somewhere
        }
    };
    _container_.addOnLoad(function(){
        var picker = dojo.widget.byId('myPicker');
        dojo.event.connect(picker, "onSetDate", o, "storeDate");
    });

    // remember to disconnect onUnLoad, very important!!
    _container_.addOnUnLoad(function(){
        var picker = dojo.widget.byId('myPicker');
        dojo.event.disconnect(picker, "onSetDate", o, "storeDate");
    });
</script>

<html>
<head>
<script>
    var djConfig = {isDebug: true};
</script>
<script src="dojo/dojo.js"></script>
<script>
    var scriptScope = this;
    if(typeof _container_ == 'undefined'){
        var _container_ = dojo;
    }

    _container_.addOnLoad(function(){
        dojo.debug("Successfully loaded!");
    });

    this.doWhenClicked = function(txt){
        dojo.debug(txt);
    }
</script>
<body>
    <a href="javascript:scriptScope.doWhenClicked('You clicked a link!');">Click here!</a>;
</body>
</html>

*********Your mainpage*********** 
<html>
<head>
<script src="dojo/dojo.js"></script>
<script>
    dojo.require("dojo.widget.ContentPane");
    dojo.require("dojo.widget.LayoutContainer");

    function changeUrlInClient(url){
        var client = dojo.widget.byId("client");
        client.setUrl(url);
    }
</script>
</head>
<body>
    <div dojoType="LayoutContainer" layoutChildPriority='none' style="border: 1px solid blue; width: 800px; height: 300px;">
        <div dojoType="ContentPane" layoutAlign="left" style="width: 200px;" executeScripts="true" href="linkpage.html"></div>
        <div widgetId="client" dojoType="ContentPane" layoutAlign="client" style="border:1px solid red;"></div>
    </div>
</body>
</html>

*******linkpage.html************
<html>
<head>
<script>
    var o = {
        listen: function(evt){
            // if the onclick came from a 
</head>
<body>
    <a href="content1.html">content1</a>

    <a href="content2.html">content2</a>

    <a href="content3.html">content3</a>

    <a href="content4.html">content4</a>
</body>
</html>

**********mainpage************
<html>
<head>
<script src="dojo/dojo.js"></script>
<script>
    dojo.require("dojo.widget.FloatingPane");
    dojo.require("dojo.widget.Button");
</script>
</head>
<body>
    <div dojoType="FloatingPane"
        title="Login example"
        style="width: 300px; height: 300px;"
        executeScripts="true"
        cacheContent="false"
        href="login.php">
    </div>
</body>
</html>

*********login.php**********
<?php
    session_start();

    // are we trying to login?
    if(isset($_GET["login"])){
        // this could of be a database instead
        $users = array(
                "JohnDoe"=>
                    array("pass"=>"foo", "id"=>1),
                "JaneDoe"=>
                    array("pass"=>"bar", "id"=>2),
                "JuniorDoe"=>
                    array("pass"=>"baz", "id"=>3)
                );

        if(isset($_POST["user"]) && isset($_POST["pass"])){
            $pass = $_POST["pass"];
            $user = $_POST["user"];
            if(isset($users[$user]) && ($users[$user]["pass"] == $pass)){
                $_SESSION["id"] = $users[$user]["id"];
                exit("(true);");
            }
        }

        //if we get here we have failed to login
        exit("(false);");
    }

    // logout?
    if(isset($_GET["logout"])){
        unset($_SESSION["id"]);
    }

    if(isset($_SESSION["id"])){
        // it is safe to show secret content
?>

    <script type="text/javascript">
        this.logout = function(){
            _container_.setUrl("login.php?logout=true");
        }
    </script>
    <h3>You have successfully logged in!</h3>
    showing secret content here

    <a href="#" onclick="scriptScope.logout();">log out</a>

<?php
    }else{
    //no it wasnt safe, show our login script
?>
    <script type="text/javascript">
        this.ok = function(){
            _container_.domNode.style.cursor = "wait";
            dojo.io.bind({
                formNode: dojo.byId("login"),
                mimetype: "text/javascript",
                handler: function(type, data){dojo.debug(data);
                    _container_.domNode.style.cursor = "";
                    if(type=="load"){
                        if(data){
                            _container_.setUrl("login.php");
                        }else{
                            dojo.byId("message").innerHTML = "Wrong username or password";
                        }
                    }else{
                        dojo.byId("message").innerHTML = "An error occured while login, please try again.";
                    }
                }
            });
        }

        this.quit = function(){
            _container_.hide();
        }
    </script>
    <form name="login" id="login" method="post" action="login.php?login=true">
        <div id="message" style="text-align:center; color: red;">You need to login</div>
        <label for="user">Username:
        <input type="text" name="user"/>

        <label for="pass">Password:</label>
        <input type="password" name="pass"/>

        <button dojoType="Button" onClick="scriptScope.ok();"/>login</button>
        <button dojoType="Button" onClick="scriptScope.quit();">quit</button>
    </form>

<?php
    }
?>

<html>
<head>
    <script src="dojo/dojo.js"></script>
    <script>
        dojo.require("dojo.widget.ContentPane");
    </script>
</head>
<body>
    <div dojoType="ContentPane" >
        <script>
            // this script will fire before dojo makes our parent a ContentPane widget, so it wont be 
            // affected by executeScripts at all.
            // i wont have a _container_ variable and scriptScope wont hide any variables
            // it will work just as a inlne javascript block always has

            alert("This alert will fire event if you have executeScripts=false");
        </script>
    </div>
</body>
</html>

<button dojoType="Button" disabledImg="/images/buttons/disabled" >
   Quit
</button>

<button dojoType="comboButton" menuId='saveMenu'>
   <img src="images/editIcon.gif" width="32" height="32">
   Save
</button>

<div dojoType="PopupMenu2" id="editMenu" toggle="wipe">
	<div dojoType="MenuItem2" iconSrc="images/save.gif" caption="Save" accelKey="Ctrl+S" onclick="mySave();" />
	<div dojoType="MenuItem2" iconSrc="images/saveAs.gif" caption="Save As...." accelKey="Ctrl+A" onclick="mySaveAs();" />
</div>

<select dojoType="ComboBox"
    autoComplete="true"
    dataUrl="/suggest.php?match=%{searchString}"
    maxListLength="15"
    mode="remote"
    name="myComboBox">

[

    [ "Alabama", "AL" ],

    [ "Alaska", "AK" ],

    [ "Arkansas", "AR" ]

]
<?php

$states = array( "Alabama" => "AL",

                 "Alaska" => "AK",

                 ...

               );

$userInput = $_GET['match'];

$result = "[";

foreach ($states as $state => $abbreviation) {

    if (strpos($state, $userInput) === 0) {

        $result = $result . '[ "' . $state . '", "' .

                  $abbreviation . '"],';

    }

}

$result = $result . ']';

print $result;

?>
function magicForm() {

  var x = new dojo.io.FormBind({

    // reference your form

    formNode: document.forms[1],

    load: function(load, data, e) {

      // what to do when the form finishes

      // for example, populate a DIV:

      dojo.byId('myDiv').innerHTML = data;

    }

  });

}

dojo.addOnLoad(magicForm);
var myButton = dojo.widget.byId("foo");
var myButton = dojo.widget.CreateWidget("Button", {caption: "click me"});
myButton.setCaption("Don't press me!!");
myButton.caption="this won't do anything";
form1.appendChild(myButton.domNode);
<button dojoType="Button" onClick="alert('hello world')">
<input type="Slider"

	onValueChanged="alert('new value is ' + arguments[0]);">...
<input type="Slider"

	onValueChanged="doit">...
dojo.event.connect(myButton, onValueChanged, function(x){

	alert("new val is " + x);

});
<div dojoType="FloatingPane" toggle="fade" toggleDuration="250">
<DIV dojoType="LayoutContainer" >
	<DIV dojoType="ContentPane"> hello world </DIV>
	<DIV dojoType="SplitContainer">
		<DIV dojoType="ContentPane"> left side of split </DIV>
		<DIV dojoType="TabContainer">
			<div dojoType="LayoutContainer">
			 ..
			</DIV>
			<DIV dojoType="ContentPane"> second tab </DIV>
		 </DIV>
	  </DIV>
	 <DIV dojoType="ContentPane"> i'm on the bottom </DIV>
</div>

    <DIV dojoType="SplitContainer" orientation="horizontal">

We are also missing the labels for each of the tabs in the TabContainer, which we can add like this:
    <DIV dojoType="TabContainer">
      <DIV dojoType="LayoutContainer" label="Tab 1">
       ..
      </DIV>
      <DIV dojoType="ContentPane" label="Tab 2"> second tab </DIV>
    </DIV></DIV>
	<DIV dojoType="LayoutContainer">
	<DIV dojoType="ContentPane" layoutAlign="top"> hello world </DIV>
	<DIV dojoType="SplitContainer" layoutAlign="client">...</DIV>
	<DIV dojoType="ContentPane" layoutAlign="bottom"> i'm on the bottom </DIV>
	</DIV>

<DIV style="OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 100%" dojoType="LayoutContainer">

  <DIV dojoType="ContentPane" layoutAlign="top" height="2em">

    Page header goes here; it stretches across the whole width of the window.

  </DIV>

  <DIV dojoType="ContentPane" layoutAlign="bottom" height="1em">

    And a footer here, also stretching across the whole width.

  </DIV>

  <DIV style="WIDTH: 120px" dojoType="ContentPane" layoutAlign="left">

    Some left-side navigation HTML, bounded by the header and footer

    since they were already added to the layout.

  </DIV>

  <DIV style="WIDTH: 60px" dojoType="ContentPane" layoutAlign="right">

    Some right-side navigation HTML

  </DIV>

  <DIV dojoType="ContentPane" layoutAlign="client">

    Main page body here, bounded by all the fixed-size elements above.

  </DIV>

</DIV>
<DIV style="WIDTH: 500px; HEIGHT: 500px" dojoType="LayoutContainer"></DIV>
html, body, #mainWindow {

 width: 100%;

 height: 100%;

 overflow: hidden;

}
<DIV id=mainWindow dojoType="LayoutContainer"></DIV>
// make a dummy div just to specify size

var div = document.createElement("div");
with(div.style){ height="500px"; width="500px"; }

// create the layout container
var lc = dojo.widget.createWidget("LayoutContainer", null, div);

// add some children for top, bottom, and center.  Top and Bottom
// children also need to have a size specified, and possibly a scrollbar
var topDiv = document.createElement("div");
with(topDiv.style){ height="30px"; overflow="auto"; }
lc.addChild( dojo.widget.createWidget("ContentPane", { href: "foo/bar.html", layoutAlign: "top" }, topDiv) );
var bottomDiv = document.createElement("div");
with(bottomDiv.style){ height="30px"; overflow="auto"; }
lc.addChild( dojo.widget.createWidget("ContentPane", { href: "foo/bar.html", layoutAlign: "bottom" }, bottomDiv) );

// renderer-agnostic portion

dojo.declare("my.widget.Foo"

{

  initializer: function() {

    // do initialization tasks, make instance properties

  },

  foo: 5,

  doit: function() { ... },

  ...

}

);

// render-specific portion

dojo.widget.defineWidget("my.widget.html.Foo", [ dojo.widget.HtmlWidget, my.widget.Foo], {

   initializer: function() {

     // do initialization tasks, make instance properties

   },

    ...prototypical properties (in object notation)...

  }

);

dojo.widget.defineWidget("my.widget.svg.Foo", [ dojo.widget.SvgWidget, my.widget.Foo], {

   initializer: function() {

     // do initialization tasks, make instance properties

   },

    ...prototypical properties (in object notation)...

  }

);

// renderer-agnostic portion

// add features to my.widget.Foo, but don't explicitly extend or inherit

// my.widget.Foo properties will come in as part of my.widget.[html|svg].Foo

  // do initialization tasks, make instance properties

dojo.declare("my.widget.FooPlus", my.widget.Foo, { ... });

dojo.widget.defineWidget("my.widget.html.FooPlus", [my.widget.html.Foo, my.widget.FooPlus], {

   initializer: function() {

     // do initialization tasks, make instance properties

   },

    ...prototypical properties (in object notation)...

  }

);

dojo.widget.defineWidget("my.widget.svg.FooPlus", [my.widget.svg.Foo, my.widget.FooPlus], {

   initializer: function() {

     // do initialization tasks, make instance properties

   },

    ...prototypical properties (in object notation)...

  }

);
Widget 

   |-- DomWidget

      |-- HtmlWidget     

      |-- SvgWidget
<div dojoType="Foo">
<div style="display:none">
    <!--  IE  has  a  bug:  it  reloads  all  dynamically  resolved  images,  no  matter,  is  it  
    new  Image()  or  CSS  background.  If  you  don't  specify  images  like  that,
    it  will  reload  them  every  time  a  new  node  is  created  -->
    <img  src="../../../src/widget/templates/images/TreeV3/i.gif"/>
    <img  src="../../../src/widget/templates/images/TreeV3/i_half.gif"/>
    <img  src="../../../src/widget/templates/images/TreeV3/expand_minus.gif"/>
    <img  src="../../../src/widget/templates/images/TreeV3/expand_plus.gif"/>
    <img  src="../../../src/widget/templates/images/TreeV3/expand_leaf.gif"/>
    <img  src="../../../src/widget/templates/images/TreeV3/i_long.gif"/>
    <img  src="../../../src/widget/templates/images/TreeV3/document.gif"/>
    <img  src="../../../src/widget/templates/images/TreeV3/open.gif"/>
    <img  src="../../../src/widget/templates/images/TreeV3/closed.gif"/>
</div>

<div dojoType="Tree" >
  <div dojoType="TreeNode" title="Item 1">
    <div dojoType="TreeNode" title="Item 1.1" ></div>
      <div dojoType="TreeNode" title="Item 1.2" >
         <div dojoType="TreeNode" title="Item 1.2.1" >
            <div dojoType="TreeNode" title="Item 1.2.1.1" ></div>
          </div>
          <div dojoType="TreeNode" title="Item 1.2.2" ></div>
       </div>
    <div dojoType="TreeNode" title="Item 1.3" ></div>
  </div>
  <div dojoType="TreeNode" title="Item 2" ></div>
</div>

<script>
	dojo.addOnLoad(function() {
		dojo.event.topic.subscribe("nodeSelected",
			 function(message) { alert(message.node.title+" selected"); }
		);
	});
</script>

<div dojoType="TreeSelector" widgetId="tSelector" eventNames="select:nodeSelected" ></div>

<div dojoType="Tree"  selector="tSelector" >
  <div dojoType="TreeNode" title="Item 1">
    <div dojoType="TreeNode" title="Item 1.1" ></div>
  <div dojoType="TreeNode" title="Item 2">
</div>

<script>
dojo.addOnLoad(function() {
   dojo.event.topic.subscribe("nodeSelected",
       function(message) { document.menuForm.eatMe.value = message.node.title; }
   );
});
</script>

What would you like to eat first?

<form name="myForm">
  <input type="hidden" name="eatMe" value="" />
  <div dojoType="TreeSelector" widgetId="tSelector" eventNames="select:nodeSelected" />

    <div dojoType="Tree" selector="tSelector" >
      <div dojoType="TreeNode" title="Dessert (Recommended)">
        <div dojoType="TreeNode" title="Ice Cream" value="ICE76645" />
        <div dojoType="TreeNode" title="Cake" value="CAK85467" />
     </div>
     <div dojoType="TreeNode" title="Entree">
        <div dojoType="TreeNode" title="Meat Loaf" value="MTL18908" />
     </div>
  </div>
</form>

<div dojoType="Tree" showRootGrid="false">

<div dojoType="Tree" showGrid="false" showRootGrid="false">

<div dojoType="TreeNode"...>
  <div dojoType="TreeNode"...>
    <div dojoType="TreeNode" title="<span style='background-color:yellow' >The most popular choice</span>" />
    ...
  </div>
  <div dojoType="TreeNode"...>
    <div dojoType="TreeNode" title="Another Choice" />
  </div>
</div>

<div dojoType="TreeNode" expandLevel="2" ...>
  <div dojoType="TreeNode"...>
  ...

<div dojoType="TreeNode" expandLevel="1" ...>
   <div dojoType="TreeNode" expandLevel="1" ...>
   ...
  </div>
  <div dojoType="TreeNode"...>
</div>

<img dojoType="acme:Image" />
/dojo

/acme/

/acme/widget/Image.js <- defines acme.widget.Image
<root>/acme/manifest.js
  dojo.provide("acme.manifest");

  dojo.require("dojo.string.extras");

  dojo.registerNamespaceResolver("acme",

    function(name){ 

      return "acme.widget."+dojo.string.capitalize(name);

    }

  );
  dojo.registerNamespaceResolver("acme",

    function(name){ 

      return "acme.widget."+dojo.string.capitalize(name);

    }

  );
/dojo/dojo.js

/dojo/[whatever else is in the particular dojo install]
/acme
../acme
/acme/widgets/variousWidgets.js
<script src="/dojo/dojo.js"></script>

<script>

  dojo.require("dojo.widget.*");

</script>
dojo.provide("acme.manifest");

dojo.registerNamespaceResolver(function(name) {

  return "acme.widgets.variousWidgets";

}); 

<script src="/dojo/dojo.js"></script>

<script>

  dojo.require("acme.widgets.variousWidgets");

</script>

<script src="/dojo/dojo.js"></script>

<script>

 dojo.require("acme.lib");

</script>
// ... additional code ...
<!-- dojo.js is a build -->

<script src="/dojo/dojo.js"></script>

<!-- dojo.require(s) can be here, although they are ignored -->
<div dojoType="acme:calendar"></div>
        widgetsInTemplate:true,
	/dojo
	/user
	index.html
	dojo.setModulePrefix("user", "../user");
	/dojo
	/user
		/widget
	index.html
       dojo.require("user.widget.MyWidget");

       <div dojoType="MyWidget" some_property="Some value"/>
       var new_widget = dojo.widget.createWidget
       (
              'MyWidget',
              {
                     some_property:'Some Value'
              }
       );

<div id="" dojoAttachEvent="onMouseDown" class="dojoFloatingPane">
	<div dojoAttachPoint="titleBar" class="dojoFloatingPaneTitleBar"  style="display:none">
	  	<img dojoAttachPoint="titleBarIcon"  class="dojoFloatingPaneTitleBarIcon">
		<div dojoAttachPoint="closeAction" dojoAttachEvent="onClick:closeWindow"
   	  		class="dojoFloatingPaneCloseIcon"></div>
		<div dojoAttachPoint="restoreAction" dojoAttachEvent="onClick:restoreWindow"
   	  		class="dojoFloatingPaneRestoreIcon"></div>
		<div dojoAttachPoint="maximizeAction" dojoAttachEvent="onClick:maximizeWindow"
   	  		class="dojoFloatingPaneMaximizeIcon"></div>
		<div dojoAttachPoint="minimizeAction" dojoAttachEvent="onClick:minimizeWindow"
   	  		class="dojoFloatingPaneMinimizeIcon"></div>
	  	<div dojoAttachPoint="titleBarText" class="dojoFloatingPaneTitleText">${this.caption}</div>
	</div>

	<div id="_container" dojoAttachPoint="containerNode" class="dojoFloatingPaneClient"></div>

	<div dojoAttachPoint="resizeBar" class="dojoFloatingPaneResizebar" style="display:none"></div>
</div>

     <div dojoAttachPoint="titleBar" class="dojoFloatingPaneTitleBar"   style="display:none">
     <img dojoAttachPoint="titleBarIcon"  class="dojoFloatingPaneTitleBarIcon">

    titleBar: null,
    titleBarIcon: null,
    ...

    this.titleBar.style.color="red";
<div dojoType="FloatingPane">
    Hello world!  
   <button dojoType="Button"> press me </button>
</div>

<div id="_container" dojoAttachPoint="containerNode"
class="dojoFloatingPaneClient"></div>

    isContainer: true,

<div dojoAttachPoint="maximizeAction" dojoAttachEvent="onClick:maximizeWindow"
 	  class="dojoFloatingPaneMaximizeIcon"/>

<div id="" dojoAttachEvent="onMouseDown" class="dojoFloatingPane">

<div dojoAttachPoint="titleBarText" class="dojoFloatingPaneTitleText">
   ${this.caption}
</div>

dojo.widget.defineWidget("my.widget.Foo", dojo.widget.HtmlWidget, {

    function() {

      // do initialization tasks, make instance properties

    },

    {

       ...prototypical properties (in object notation)...

    }

);
dojo.widget.defineWidget("my.widget.FooPlus", my.widget.Foo, { 

    function() {

      // do initialization tasks, make instance properties

    },

    {

       ...prototypical properties (in object notation)...

    }

);

    toggle: "",			// string

    toggleDuration: 0,		// integer

    onClick: function(){}	// function
    toggle: "fade"
dojo.uri.dojoUri("src/widget/templates/HtmlFloatingPane.html"),

 or

dojo.uri.moduleUri("mywidgetset","widgets/html/MyWidget.html"),
dojo.uri.dojoUri("src/widget/templates/HtmlFloatingPane.css"),

 or

dojo.uri.moduleUri("mywidgetset","widgets/css/MyWidget.css"),
templateString: "Simple Template
",

templateCssString: ".simple { color:blue; font-size:12pt; }",
    // static1 and static2 are shared across every Foo widget

    statics: { static1: 0, static2: "" } 
    this.statics.static1++;    // increments the single copy
<div dojoType="Memo" title="Reminder">
	Pick up milk on the way home
</div>

<div class="memo">
  <div class="title">Reminder</div>
  <div class="close">X</div>
  <div class="contents">Pick up milk on the way home.</div>
</div>

.memo {
	background: yellow;
	font-family: cursive;
	width: 10em;
}

.title {
	font-weight: bold;
	text-decoration: underline;
	float: left;
}

.close {
	float: right;
	background: black;
	color: yellow;
	font-size: x-small;
	cursor: pointer;
}

.contents {
	clear: both;
	font-style: italic;
}

dojo.widget.defineWidget(
	// widget name and class
	"acme.widget.Memo",

	// superclass
	dojo.widget.HtmlWidget,

	// properties and methods
	{
		templatePath: dojo.uri.dojoUri("../acme/widget/Memo.html"),
		templateCssPath: dojo.uri.dojoUri("../acme/widget/Memo.css")
	}
);

<div class="memo">
  <div class="title">Reminder</div>
  <div class="close">X</div>
  <div class="contents" dojoAttachPoint="containerNode"></div>
</div>

dojo.widget.defineWidget(
	// widget name and class
	"acme.widget.Memo",

	// superclass
	dojo.widget.HtmlWidget,

	// properties and methods
	{
		isContainer: true,
		templatePath: dojo.uri.dojoUri("../acme/widget/Memo.html"),
		templateCssPath: dojo.uri.dojoUri("../acme/widget/Memo.css")
	}
);

<div dojoType="Memo" title="Reminder">
	Pick up milk on the way home
</div>

	// properties and methods
	{

		// parameters
		title: "Note",

		// settings
		isContainer: true,
		templatePath: dojo.uri.dojoUri("../acme/widget/Memo.html"),
		templateCssPath: dojo.uri.dojoUri("../acme/widget/Memo.css")
	}

<div class="memo">
  <div class="title">${this.title}</div>
  <div class="close">X</div>
  <div class="contents" dojoAttachPoint="containerNode"></div>
</div>

<div class="memo">
  <div class="title">${this.title}</div>
  <div class="close" dojoAttachEvent="onClick">X</div>
  <div class="contents" dojoAttachPoint="containerNode"></div>
</div>

		onClick: function(evt){
			this.destroy();
		}

<div class="memo">
  <div class="title">${this.title}</div>
  <div class="close" dojoAttachEvent="onClick">X</div>
  <div class="contents" dojoAttachPoint="containerNode"></div>
</div>

.memo {
	background: yellow;
	font-family: cursive;
	width: 10em;
}

.title {
	font-weight: bold;
	text-decoration: underline;
	float: left;
}

.close {
	float: right;
	background: black;
	color: yellow;
	font-size: x-small;
	cursor: pointer;
}

.contents {
	clear: both;
	font-style: italic;
}

dojo.widget.defineWidget(
	// widget name and class
	"acme.widget.Memo",

	// superclass
	dojo.widget.HtmlWidget,

	// properties and methods
	{
		// parameters
		title: "Note",

		// settings
		isContainer: true,
		templatePath: dojo.uri.dojoUri("../acme/widget/Memo.html"),
		templateCssPath: dojo.uri.dojoUri("../acme/widget/Memo.css"),

		// callbacks
		onClick: function(evt){
			this.destroy();
		}
	}
);

dojo.event.connect("before", exampleObj, "foo", exampleObj, "bar");
dojo.event.kwConnect({

    type:       "before", 

    srcObj:     exampleObj, 

    srcFunc:    "foo", 

    targetObj:  exampleObj,

    targetFunc: "bar"

});
function foo(arg1, arg2){

    // ...

}

function aroundFoo(invocation){

    if(invocation.args.length < 2){

        // note that it's a real array, not a pseudo-arr

        invocation.args.push("default for arg2");

    }

    var result = invocation.proceed();

    // we could change the result here

    return result;

}

dojo.event.connect("around", "foo", "aroundFoo");
var obj1 = {

    twoArgFunc: function(arg1, arg2){

        // function expects two arguments

    }

};

var obj2 = {

    oneArgFunc: function(arg1){

        // this function expects a two-element array 

        // as its only parameter

    }

};

// we'd probably connect the functions somewhere else. Perhaps in a

// different file entirely.

function aroundFunc(invocation){

    var tmpArgs = [ 

                    invocation.args[0], 

                    invocation.args[1]

                  ];

    invocation.args = tmpArgs;

    return invocation.proceed();

}

// after-around advice

dojo.event.connect( obj1, "twoArgFunc", 

                    obj2, "oneArgFunc",

                    "aroundFunc");
var handlerNode = document.getElementById("handler");

dojo.event.connect(handlerNode, "onclick", object, "handler");

dojo.event.connect(handlerNode, "onclick", object, "handler2");
dojo.event.connect(

dojo.byId("id"),“onclick",

	listenerObj, “handleOnClick");
dojo.event.kwConnect({

    srcObj:     exampleObj, 

    srcFunc:    "foo", 

    targetObj:  exampleObj, 

    targetFunc: "bar",

    once:       true

});
dojo.event.connect(dojo.byId("foo"), "onmousemove"),

	function(evt){ 

		alert("mouse at pos" + evt.pageX + "," + evt.pageY);

	});

	window.onLoad = ...;

function init(){

	...

}

dojo.addOnLoad(init);

function cleanup(){

	...

}

dojo.addOnUnload(cleanup);

var foo = new function() {
    this.init = function() {
        dojo.event.topic.subscribe("/mytopic", this, processMessages);
    }

    function processMessages(message) {
        alert("Message: " + message.content);
   }
}

var bar = new function() {
    this.showMessage = function(message) {
        dojo.event.topic.publish("/mytopic", {content: message});
    }
}

foo.init();
bar.showMessage("Hello Dojo Master");

dojo.event.topic.publish("/topicName", args);
dojo.event.topic.subscribe("/scroller", targetObj, targetFunc);
var ac;

var is;

function init() {

    ac = new AccordionMenu();

    ac.load();

    is = new ImageScroller();

    is.load();

}

function Scroller() {

    this.setProducts = function(pid) {

        // show the products for pid

    }

    this.handleEvent = function(args) {

        if (args.event == 'showProducts') {

            this.setProducts(args.value);

        }

    }

    this.load = function () {

        dojo.event.topic.subscribe("/scroller", this, handleEvent);

    }
function Accordion() {

    function expandRow(target) {

       ...

       var link = document.createElement("a");

       dojo.event.connect(link, "onclick", function(evt){

           this.target = target;

           dojo.event.topic.publish("/scroller", {event: "showProducts", value : target});

       });

    }

}
dojo.event.connect(srcObj, "srcFunc", targetFunc);
var link = dojo.byId("mylink");

dojo.event.connect(link, "onclick", myHandler);
function myHandler(evt) {

   alert("dojo.connect handler");

}

  var link = dojo.byId("mylink");

  // connect link element 'onclick' property to an anonymous function  

  dojo.event.connect(link, "onclick", function(evt) {

	...

    });
var handlerNode = document.getElementById("handler");

handlerNode.onclick = function(evt){

    object.handler(evt);

};
var handlerNode = document.getElementById("handler");

dojo.event.connect(handlerNode, "onclick", object, "handler");
var exampleObj = {

    counter: 0,

    foo: function(){ 

        alert("foo");

        this.counter++;

    },

    bar: function(){

        alert("bar");

        this.counter++;

    }

};
dojo.event.connect(exampleObj, "foo", exampleObj, "bar");
dojo.io
dojo.io
bind()
dojo.io.bind()
bind()
dojo.io.bind({

    url: "http://foo.bar.com/sampleData.txt",

    load: function(type, data, evt){ /*do something w/ the data */ },

    mimetype: "text/plain"

});
dojo.io.bind({

    url: "http://foo.bar.com/sampleData.txt",

    load: function(type, data, evt){ /*do something w/ the data */ },

    error: function(type, error){ /*do something w/ the error*/ },

    mimetype: "text/plain"

});
dojo.io.bind({

    url: "http://foo.bar.com/sampleData.txt",

    handle: function(type, data, evt){

        if(type == "load"){

            // do something with the data object

        }else if(type == "error"){

            // here, "data" is our error object

            // respond to the error here

        }else{

            // other types of events might get passed, handle them here

        }

    },

    mimetype: "text/plain"

});
bind
dojo.io.bind({

    url: "http://foo.bar.com/sampleData.js",

    load: function(type, evaldObj){ /* do something */ },

    mimetype: "text/javascript"

});
dojo.io.bind({

    url: "http://foo.bar.com/sampleData.js",

    load: function(type, evaldObj){ /* do something */ },

    mimetype: "text/plain", // get plain text, don't eval()

    transport: "XMLHTTPTransport"

});
bind()
dojo.io.bind({

    url: "http://foo.bar.com/processForm.cgi",

    load: function(type, evaldObj){ /* do something */ },

    formNode: document.getElementById("formToSubmit")

});
add = function(x,y) {

	request = {x: x, y: y};

	dojo.io.bind({

    		url: "add.php",

    		load: onAddResults,

    		mimetype: "text/plain",

		content: request

	});

}

subtract = function(x,y) {

	request = {x: x, y: y};

	dojo.io.bind({

    		url: "subtract",

    		load: onSubtractResults,

    		mimetype: "text/plain"

		content: request

	});

}
{

	"serviceType": "JSON-RPC", 

	"serviceURL": "rpcProcessor.php", 

	"methods":[ 

		{

			"name": "add", 

			"parameters":[

				{"name": "x"},

				{"name": "y"}	

			]

		},

		{

			"name": "subtract", 

			"parameters":[

				{"name": "x"},

				{"name": "y"}	

			]

		}

	]

}
var myObject = new dojo.rpc.JsonService("http://localhost/definition.smd");

var myObject = new dojo.rpc.JsonService({smdStr: definitionJSON});

var myObject = new dojo.rpc.JsonService({smdObj: definition});

myObject.add(3,5);
var myDeferred = myObject.add(3,5);

myDeferred.addCallback(myCallbackMethod);
var myDeferred = myObject.add(3,5).addCallback(myCallbackMethod);
<script type="text/javascript">

   dojo.require("dojo.io.*");

   dojo.require("dojo.io.IframeIO");

   function mySubmit() {

     dojo.io.bind ({

       url: 'server.cfm',

       handler: callBack,

       mimetype: "text/plain",

       formNode: dojo.byId('myForm')

     });

   }
   function callBack(type, data, evt) {

      //The data object will be different

      //depending on the mimetype used in the dojo.io.bind()

      //call. See below for more info.

      dojo.byId('result').innerHTML = data;

   }

</script>

text/plain: http://archive.dojotoolkit.org/nightly/tests/io/test_IframeIO.text.html

text/html: http://archive.dojotoolkit.org/nightly/tests/io/test_IframeIO.html.html

text/javascript: http://archive.dojotoolkit.org/nightly/tests/io/test_IframeIO.html
dojo.require("dojo.io.*");
dojo.require("dojo.io.ScriptSrcIO");

dojo.io.bind({
    url: "http://example.com/json.php",
    transport: "ScriptSrcTransport",
    mimetype: “application/json",
    jsonParamName: "callback",
    content: { ... }
});
dojo.io.bind({
	url: "http://the.script.url/goes/here",
	transport: "ScriptSrcTransport",
	mimetype: “text/javascript"
});
dojo.io.bind({
	url: "http://the.script.url/goes/here",
	transport: "ScriptSrcTransport",
	mimetype: "text/javascript",
	checkString: "foo", //This means (typeof(foo) != undefined) indicates that the script loaded.
	load: function(type, data, event, kwArgs) { /* type will be "load", data and event null, , and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
	error: function(type, data, event, kwArgs) { /* type will be "error", data and event will have the error, , and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
	timeout: function() { /* Called if there is a timeout */},
	timeoutSeconds: 10 //The number of seconds to wait until firing timeout callback in case of timeout.
});

dojo.io.bind({
	url: "http://the.script.url/goes/here",
	transport: "ScriptSrcTransport",
	mimetype: "application/json",
	jsonParamName: "callback",
	load: function(type, data, event, kwArgs) { /* type will be "load", data will be response data,  event will null, and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
	error: function(type, data, event, kwArgs) { /* type will be "error", data will be response data,  event will null, and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
	timeout: function() { /* Called if there is a timeout */},
	timeoutSeconds: 10 //The number of seconds to wait until firing timeout callback in case of timeout.
});

<style type="text/css">
.bookmarks {
  width: 300;
  background: lightGray;
  border-style: solid;
  border-width: 2px;
  border-color: black
}
</style>
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.io.*"); 
dojo.require("dojo.io.ScriptSrcIO");

dojo.addOnLoad(getBookmarks);

function getBookmarks() {
    dojo.io.bind({ 
        url: "http://del.icio.us/feeds/json/dojomaster", 
        transport: "ScriptSrcTransport", 
        jsonParamName: "callback",
        load: function(type, data, event, kwArgs){showBookmarks(data);},
        mimetype: "application/json",
        timeout: function() {alert('timeout');},
        timeoutSeconds: 10
    });
}

// The code for showing the bookmarks is courtesy of del.icio.us
// http://del.icio.us/help/json
function showBookmarks(posts) {
     var ul = document.createElement('ul');
     for (var i=0, post; post = posts[i]; i++) {
         var li = document.createElement('li');
         var a = document.createElement('a');
         a.style.marginLeft = '20px';
         var img = document.createElement('img');
         img.style.position = 'absolute';
         img.style.display = 'none';
         img.height = img.width = 16;
         img.src = post.u.split('/').splice(0,3).join('/')+'/favicon.ico'
         img.onload = showImage(img);
         a.setAttribute('href', post.u);
         a.appendChild(document.createTextNode(post.d));
         li.appendChild(img);
         li.appendChild(a);
         ul.appendChild(li);
     }
     document.getElementById("container").appendChild(ul);
}
function showImage(img){ return (function(){ img.style.display='inline' }) }
</script>
<div id="container" class="bookmarks"></div>
dojo.io.bind({
	url: "http://the.script.url/goes/here",
	transport: "ScriptSrcTransport",
	mimetype: "application/json",
	useRequestId: true, //adds the _dsrId to request with a generated ID. If a specific request ID is wanted, use apiId: "myId" instead
	//optional: forceSingleRequest: true, //Will not segment the request to multipart requests even if it is a long URL.
	constantParams: "name1=value1&name2=value2" //params to be sent with each request that is part of a multipart request. See spec.
	load: function(type, data, event, kwArgs) { /* type will be "load", data will be response data, event will be onscriptload event, and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
	error: function(type, data, event, kwArgs) { /* type will be "error", data will be response data, event will be onscriptload event, and kwArgs are the keyword arguments used in the dojo.io.bind call. */ },
	timeout: function() { /* Called if there is a timeout */},
	timeoutSeconds: 10 //The number of seconds to wait until firing timeout callback in case of timeout.
});

<script type="text/javascript">
   dojo.require("dojo.io.*");

   function mySubmit() {
     dojo.io.bind ({
       url: 'server.cfm',
       handler: callBack,
      formNode: dojo.byId('myForm')
     });
   }
   function callBack(type, data, evt) {
      dojo.byId('result').innerHTML = data;
   }
</script>

var dependencies = [ 

	"dojo.io.*",

	"dojo.event.*",

	"dojo.xml.*",

	"dojo.graphics.*",

	"dojo.io.BrowserIO",

	"dojo.widgets.*",

	"dojo.widgets.Button",

];

load("getDependencyList.js");
var dependencies = [

         "dojo.widget.*",

         "dojo.io.*",

         "dojo.event.*"

         "mycompany.widget.SomethingCool"

];

dependencies.prefixes = [

   ["mycompany", "../mycompany"]

];

load("getDependencyList.js");
var dependencies = [

	"dojo.widget.Editor2"

];

dependencies.internSkipList = [

	"dojo.widget:templates/EditorToolbar.html"

];

load("getDependencyList.js");
ant -Dprofile=foo clean release
-DprofileFile=/path/to/myProfile.profile.js
intern-strings
ant -DprofileFile=/path/to/myProfile.profile.js clean release intern-strings
strip-resource-comments
ant -Dprofile=ajax clean release intern-strings strip-resource-comments
ant -Dprofile=ajax -Dstrip_and_compress=true clean release intern-strings strip-resource-comments

dojo.require("dojo.event.Event");
__package__.js
dojo.kwCompoundRequire({

	common: ["foo.baz.resource1", 

		"foo.baz.resource2"] // a generic dependency

});

dojo.provide("foo.baz.*");
dojo.kwCompoundRequire({

    common: ["dojo.foo.Foo", "dojo.foo.Bar"],

    browser: ["dojo.foo.Baz"]

});

dojo.provide("dojo.foo.*");
    <script> djConfig = { parseWidgets: false, searchIds: [] }; </script>
<div dojoType="Button" id="button1">...</div> 

<script>djConfig.searchIds.push("button1");</script>

...

<div dojoType="Button" id="button2">...</div> 

<script>djConfig.searchIds.push("button2");</script>

...
<div parseWidgets="false">

	... no widgets in here, don't waste your time looking! ...

</div>
<table ...>

  <tr>

     <td>Hello World</td>

  </tr>

</table>
<div class="foo">Hello World</div>
<div dojoType="Tooltip" href="tooltip.jsp"></div>
<div dojoType="TabContainer">

    <a dojoType="LinkPane" href="tab1.jsp">Tab #1</a>

    <a dojoType="LinkPane" href="tab2.jsp">Tab #2</a>

</div>

>> On Nov 20, 2005, at 3:54 AM, Christian Boulanger wrote:

>

>>> > I am using dojo.io.bind and need a reference to the calling object

>>> > in the handler code. Not being a javascript geek, I am still

>>> > confused about the closures stuff and how much it impacts

>>> > performance. Is the following way an ok way of doing things or is

>>> > there a better way? Would it make sense to add a parameter to

>>> > dojo.io.bind which transfers the callingObject to the handler

>>> > without need to create the closure?

>

>>

>> Closures are fine to use all over the place.  The only time it can

>> matter is the specific instances when they cause circular references

>> to certain kinds of objects that don't fully participate in the

>> interpreter's garbage collection scheme (most commonly DOM objects in

>> IE).

and if you use dojo.event.connect() to set up your event handlers, you 

don't have to worry about it even then. In short, go nuts with the 

closures, just don't manually set properties on DOM nodes that include 

functions or objects.

Regards

Alex Russell
dojo.undo.browser.setInitialState(state);
var state = {

	back: function() { alert("Back was clicked!"); },

	forward: function() { alert("Forward was clicked!"); }

}; 
dojo.undo.browser.addToHistory(state);

                                 +-----------+

    Widgets           Bindings   | dojo.data |    Datastores      Data Sources

                                 |    APIs   |

+------------------+             |           |

| Trees            |             |           |

| (TreeV3)         |-- binding --|           |

+------------------+             |           |   +------------+   +-----------+

                                 |           |---| CsvStore   |---| .csv file |

+------------------+             |           |   +------------+   +-----------+

| Tables & Grids   |             |           |

| (FilteringTable) |-- binding --|           |   +------------+   +-------------------+

+------------------+             |           |---| YahooStore |---| Yahoo web service |

                                 |           |   +------------+   +-------------------+

+------------------+             |           |

| Charts & Graphs  |             |           |   +------------+   +------------+

| (Chart)          |-- binding --|           |---| OpmlStore  |---| .opml file |

+------------------+             |           |   +------------+   +------------+

                                 |           |

+------------------+             |           |   +------------+   +------------+

| Other widgets    |             |           |---| RdfStore   |---| RDF server |

| (ComboBox)       |-- binding --|           |   +------------+   +------------+

| (SlideShow)      |-- binding --|           |

| (etc.)           |-- binding --|           |   +------------+   +--------------------+

+------------------+             |           |---| Other      |---| other file formats |

                                 +-----------+   | stores     |   | and web services   |

                                                 +------------+   +--------------------+
var value = datastore.get(kermit, color);
var value = kermitItem.get(color);
bar: function() {

	return this.i++;

}
dojo.lang.hitch(fooInstance, "bar");

var foo = {

	bar: function(arg1, arg2){

		alert(arg1 + " is a " + arg2);

	}

};

	var tmp = dojo.lang.curry(foo, Ã¢â‚¬Å“barÃ¢â‚¬?, "Bill");
var colors = ["red", "white", "blue"];

dojo.lang.forEach(colors, alert);
var integers = [1,2,3,4,5];

var squares = dojo.lang.map(integers, function(x){ return x*x; });

Others
dojo.lang.is*
dojo.lang.setTimeout
dojo.lang.delayThese
dojo.lang.curry
dojo.lang.assert
if(dojo.storage.manager.isInitialized() == false){

  dojo.event.connect(dojo.storage.manager,

                     "loaded", Moxie,

                     Moxie.initialize);

}else{

  dojo.event.connect(dojo, "loaded",

                     Moxie,

                     Moxie.initialize);

}
var results = dojo.storage.get(key);
try{

  dojo.storage.put(key, value,

                   saveHandler);

}catch(exp){

  alert(exp);

}
var saveHandler = function(status, keyName){

  if(status == dojo.storage.PENDING){

     // ...  

  }else if(status == dojo.storage.FAILED){

     // ...

  }else if(status == dojo.storage.SUCCESS){

     // ...

  }

}

try{

  dojo.storage.put(key, value,

                   saveHandler);

}catch(exp){

  alert(exp);

}
dojo.inherits(dojo.storage.browser.FlashStorageProvider, dojo.storage);
// register the existence of our storage providers

// choose What WG provider first

dojo.storage.manager.register("dojo.storage.browser.WhatWGStorageProvider",

				new dojo.storage.browser.WhatWGStorageProvider());

// if not available, use Flash

dojo.storage.manager.register("dojo.storage.browser.FlashStorageProvider",

				new dojo.storage.browser.FlashStorageProvider());

// if still not available, prefer IE method

dojo.storage.manager.register("dojo.storage.browser.InternetExplorerStorageProvider",

				new dojo.storage.browser.InternetExplorerStorageProvider());
// now that we are loaded and registered tell the storage manager to initialize

// itself

dojo.storage.manager.initialize();
LoadModule expires_module modules/mod_expires.so

  ExpiresActive On

  ExpiresDefault "access plus 1 month"

DojoExternalInterface.initialize();

DojoExternalInterface.addCallback("put",

                                 this, put);

DojoExternalInterface.addCallback("get",

                                 this, get);

DojoExternalInterface.addCallback("remove",

                                 this,

                                 remove);

DojoExternalInterface.loaded();
djConfig = {forceStorageProvider: "dojo.storage.browser.WhatWGStorageProvider"};
		+-------------------------+

		|  margin                 |

		| +---------------------+ |

		| |  border             | |

		| | +-----------------+ | |

		| | |  padding        | | |

		| | | +-------------+ | | |

		| | | |   content   | | | |

		| | | +-------------+ | | |

		| | +-|-------------|-+ | |

		| +-|-|-------------|-|-+ |

		+-|-|-|-------------|-|-|-+

		| | | |             | | | |

		| | | |<- content ->| | | |

		| |<------ inner ------>| |

		|<-------- outer -------->|

		+-------------------------+

<script type="text/javascript' src="/path/to/dojo.js"></script>
<script type='text/javascript">
   dojo.require("dojo.dnd.*");
   dojo.require("dojo.event.*");

   function initKtichen() {
      // "pan" matches the id for the <div> tag with id="pan" below
      // The [] around "dest" are required, for reasons we'll see later
      new dojo.dnd.HtmlDropTarget(dojo.byId("pan"), ["dest"]);
      new dojo.dnd.HtmlDropTarget(dojo.byId("pot"), ["dest"]);
      new dojo.dnd.HtmlDropTarget(dojo.byId("oven"), ["dest"]);

      // "dest" matches the "dest" in the DropTarget's above.
      new dojo.dnd.HtmlDragSource(dojo.byId("egg"), "dest");      
      new dojo.dnd.HtmlDragSource(dojo.byId("leg"), "dest");
   }

   dojo.addOnLoad("initKitchen");
</script>
</head>

<body>
   <H1>Food</H1>
   <div id="egg">Egg</div>
   <div id="leg">ChickenLeg</div>

   <H1>Destinations</H1>
   // This is the pan, the first drop target
   <div id="pan" style="border:3px soid black;width:200px">
      Frying Pan
   </div>
   <div id="pot" style="border:3px solid black;width:200px">
      Pot of Boiling Water
   </div>
   <div id="oven" style="border:3px soid black;width:200px">
      Oven
   </div>
   <br />

    function initKitchen(){

        dojo.declare("dojo.book.dnd.DestDropTarget",dojo.dnd.HtmlDropTarget,{

            onDragOver: function(e) {

                // domNode is the drop target we're over

                this.domNode.style.borderColor = "red";

                dojo.dnd.HtmlDropTarget.prototype.onDragOver.apply(this, arguments);

            },

            onDragOut: function(e) {

                // this.domNode is the drop target we're leaving

                this.domNode.style.borderColor = "black";

                dojo.dnd.HtmlDropTarget.prototype.onDragOut.apply(this, arguments);

            }

        });

        new dojo.book.dnd.DestDropTarget(dojo.byId("pan"), ["dest"]);

        new dojo.book.dnd.DestDropTarget(dojo.byId("pot"), ["dest"]);

        new dojo.book.dnd.DestDropTarget(dojo.byId("oven"), ["dest"]);

        new dojo.dnd.HtmlDragSource(dojo.byId("egg"), "dest");

        new dojo.dnd.HtmlDragSource(dojo.byId("leg"), "dest");

    }
   function initKitchen(){
        dojo.declare(dojo.book.dnd.DestDropTarget",dojo.dnd.HtmlDropTarget,{
            onDrop: function(e) {
                alert('Ready to cook!');
                // Call the superclass method to do the actual dropping
                dojo.dnd.HtmlDropTarget.prototype.onDrop.apply(this, arguments);
            }
        });
        new dojo.book.dnd.DestDropTarget(dojo.byId("pan"), ["dest");
        new dojo.book.dnd.DestDropTarget(dojo.byId("pot"), ["dest"]);
        new dojo.book.dnd.DestDropTarget(dojo.byId("oven", ["dest"]);

        new dojo.dnd.HtmlDragSource(dojo.byId("egg"), "dest");
        new dojo.dnd.HtmlDragSource(dojo.byId("leg"), "dest");
    }
    function initKitchen(){

        // A pan can be a drop target for any drag source of type topOfStoveOnly or

        // allCookingOptions.

        new dojo.dnd.HtmlDropTarget(dojo.byId("pan"), ["allCookingOptions","topOfStoveOnly"]);

        new dojo.dnd.HtmlDropTarget(dojo.byId("pot"), ["allCookingOptions","topOfStoveOnly"]);

        new dojo.dnd.HtmlDropTarget(dojo.byId("oven"), ["allCookingOptions"]);

        // An egg can only be dropped on a target of type topOfStoveOnly

        new dojo.dnd.HtmlDragSource(dojo.byId("egg"), "topOfStoveOnly");

        new dojo.dnd.HtmlDragSource(dojo.byId("leg"), "allCookingOptions");

    }
  function initKitchen(){
     ... // Construct drop sources

     // Keep the egg from leaving the boundaries of the object kitchenDiv
     var eggSource = new dojo.dnd.HtmlDragSource(dojo.byId("egg"), "dest");
     eggSource.constrainTo("kitchenDiv");

     // Do the same with the chicken leg
     legSource = new dojo.dnd.HtmlDragSource(dojo.byId("leg"), "dest");
     legSource.constrainTo("kitchenDiv");
  }

...
<H1>Destinations </H1>

<div id="kitchenDiv">
   <div id="pan" ...

<html><head>
<script type="text/javascript" src="/path/to/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.dnd.*");

   dojo.require("dojo.dnd.event.*");

   function initList() {
      // Loop through all li elements of list, and make them drop targets
      var dl = dojo.byId("listToRearrange");
      var lis = dl.getElementsByTagName("li");
      for (var i=0; i<lis.length; i++)
         new dojo.dnd.HtmlDragSource(lis[i], "dest");

      new dojo.dnd.HtmlDropTarget(dl,"dest");
   }

   dojo.addOnLoad(initList);
</script>
</head>
<body>
<H1>Jimi Hendrix Albums</H1>
<p>Arrange in order of your own preference.</p>
<ul id="listToRearrange">
   <li>Electric Ladyland</li>
   <li>Are You Experienced?</li>
   <li>Axis, Bold as Love</li>
</ul>
</body>
</html>

// wipe two elements out, one after

// the other, following a 300ms delay
var anim1 = dojo.lfx.wipeOut(Ã¢â‚¬?fooÃ¢â‚¬?, 300);

var anim2 = dojo.lfx.wipeOut(Ã¢â‚¬?barÃ¢â‚¬?, 500);

var composed = dojo.lfx.chain(anim1, anim2);

composed.play(300);
// fade out three nodes together, using

// acceleration
dojo.lfx.fadeOut(

	[Ã¢â‚¬?fooÃ¢â‚¬?, Ã¢â‚¬Å“barÃ¢â‚¬?, Ã¢â‚¬Å“bazÃ¢â‚¬?],

	300,

	dojo.lfx.easeInOut

).play();

dijit.util.wai.setAttr(nodeObj, "waiRole", "role", "treeitem");
dijit.util.wai.setAttr(nodeObj, "waiState", "expanded","true");
<div id="${this.widgetId}" class="dojoTabContainer">
      <div dojoAttachPoint="tablistNode"></div>
      <div class="dojoTabPaneWrapper" dojoAttachPoint="containerNode" 
dojoAttachEvent="onKey" waiRole="tabpanel"></div>
</div>
<div class="sliderMain" dojoAttachPoint="focusNode" waiRole="slider"  
waiState="valuenow-${this.initialValue}"  dojoAttachEvent="onmousedown:_setFocus; 
onkey:_handleKeyEvents; onkeyup:_buttonReleased; onmouseup:_buttonReleased; 
onmousewheel:_mouseWheeled;"

tabindex="0" cols=3 cellpadding=0 cellspacing=0 style="">
dojo.event.connect(node, "onkey", this, "onKey");
<div id="${this.widgetId}" class="dojoTabContainer">
    <div dojoAttachPoint="tablistNode"></div>
    <div class="dojoTabPaneWrapper" dojoAttachPoint="containerNode"  
dojoAttachEvent="onKey" waiRole="tabpanel"></div>
</div>

<div role=menubar>
 <div role=menuitem>A</div>
  <div role=menu><divole=menuitem>A.1</div>
    <div role=menuitem<A.2</div>
  </div>
  <div role=menuitem>B</div>
  <div role=menu>           
    <div role=menuitem>B.2</div>                
    <div role=menuitem>B.2.1</div>  </div>
</div>

<div role=tree >
  <div role=treeitem>Top>/div>
  <div role=group>
     <div role=treeitem>1>div>
     <div role=group>
       <div role=treeitem>1.1 </div>
       <div role=treeitem<1.2>/div>
       <div role=treeitem>1.3</div>
       <div role=group>
         <div role=treeitem>1.3.1<div>
         <div role=treeitem>1.3.2>/div>
         <div role=treeitem>1.3.3</div>
         <div role=treeitem>1.3.4</div>
       </div>
       <div role=treeitem>1.4</div>
     </div>
     <div role=treeitem>2>/div>
     <div role=treeitem>3</div>
     <div role=group>
       <div role=treeitem>3.1</div>
       <div role=treeitem>3.2</div>
     >/div>
  </div>
</div>

<div role=tree>
  <table role=presentation>           
    <tr><td><div role=treeitem>Top</div>&;lt;/tdgt;</tr>
  </table>
  <div role=group>
    <table role=presentation>
      <tr><td><span role=treeitem>1</span></td></tr>
    </table>
    <div role=group>
      <table role=presentation>
        <tr><td><span role=treeitem>1.1</span&;gt;</td></tr>
      </table>
      <table role=presentation>
        <tr><td><span role=treeitem>1.2</span></td></tr>
      </table>
    </div>
    <table role=presentation>
      <tr><td><span role=treeitem>2</span></td></tr>
    </table>
  </div>
</div>

dijit.util.wai.setAttr(/*DomNode*/node, /*String*/ ns, /*String*/ attr, 
/*String|Boolean*/value)
dijit.util.wai.getAttr(/*DomNode*/ node, /*String*/ ns, /*String|Boolean*/ attr)
dijit.util.wai.removeAttr(/*DomNode*/ node, /*String*/ ns, /*String|Boolean*/ attr)
// test for accessibility mode

dojo.a11y.setAccessibleMode();
 dojo.require("dojo.i18n.common");

 dojo.requireLocalization("dojo.widget", "validate", "ja");
 dojo.debug(validate.invalidMessage);
dojo.require("dojo.date.format");
var d = new Date(2006,9,29,4,30);
dojo.date.format(d, {selector:'dateOnly'});
=> "Monday, October 30, 2006"
dojo.date.format(d, {selector:'dateOnly', locale:'zh-cn'})
=> "2006Ã¥Â¹Â´10Ã¦Å“Ë†30Ã¦â€”Â¥Ã¦ËœÅ¸Ã¦Å“Å¸Ã¤Â¸â‚¬"
Other options may be specified to use a different format "length" -- a choice of "short", "medium", "long", or "full" -- or to print only the time portion of the Date object:
dojo.date.format(d, {selector:'dateOnly', formatLength:'short'});
=> "10/30/06"
dojo.date.format(d, {selector:'timeOnly', formatLength:'long', locale:'zh-cn'})
=> "Ã¤Â¸Å Ã¥?Ë†04Ã¦â€”Â¶30Ã¥Ë†â€ 00Ã§Â§â€™"
dojo.date.parse("maandag 30 oktober 2006");
dojo.require("dojo.i18n.currency.common");
dojo.i18n.currency.format("1234.567", "USD");

dojo.debug(dojo.i18n.currency.format("1234.567", "USD"));

Will result in the following:

DEBUG:  USD: $1,234.57
DEBUG:  EUR: Ã¢â€šÂ¬ 1,234.57
dojo.require("dojo.packagename");
dojo.require("dojo.packagename.subpackage");
dojo.kwCompoundRequire({

    common: ["dojo.package.first", "dojo.package.second"],

    browser: ["dojo.package.browser"]

});
dojo.provide("dojo.package.*");
dojo.provide("dojo.package");

Name	Description	Features
ContextMenu	Command	ToolbarItem
ContextMenu	Context Menu Core, with menu items for builtin commands	Cut/Copy/Paste, Link/Unlink, Image properties	-	-
FindReplace	Implement find and replace functionalities	-	Find/Replace	Find/Replace
TableOperation	Support for table related operation	Insert/Delete Table	Insert/Delete Table	Insert Table
AlwaysShowToolbar	Ensure the toolbar is visible when scrolling the page	-	-	-
ToolbarDndSupport	Toolbar Set/Item drag and drop support	-	-	-
SimpleSignalCommands	Add simple signals to Editor2, such as save() and createLink()	-	-	-

dojo.data.CsvStore	a read-only store that reads tabular data from .csv format files
dojo.data.OpmlStore	a read-only store that reads hierarchical data from .ompl format files
dojo.data.YahooStore	a read-only store that fetches search results from the Yahoo search engine web service
dojo.data.DeliciousStore	a read-only store that fetches bookmarks from the del.icio.us web service
dojo.data.RdfStore	a read-write store that uses SPARQL to talk to RDF data servers including, for example, the Rhizome RDF application server

Tabindex Attribute Value	Focusable via mouse or scripting via element.focus()	Tab Navigation
not present	Follow default behavior of element (only form controls and anchors receive focus)	Follows default behavior of element
zero - tabindex="0"	Yes	In tab order relative to element's position in document
positive - tabindex="x" (where x is a positive integer between 1 and 32768)	Yes	tabindex value directly specifies where this element is positioned in the tab order
negative - tabindex="-1"	Yes	Not in tab order, author must focus it with element.focus() as result of a key press.

Tabindex Attribute Value	Focusable via mouse or scripting via element.focus()	Tab Navigation
not present	Follow default behavior of element (only form controls and anchors receive focus)	Follows default behavior of element
zero - tabindex="0"	Yes	In tab order relative to element's position in document
positive - tabindex="x" (where x is a positive integer between 1 and 32768)	Yes	tabindex value directly specifies where this element is positioned in the tab order
negative - tabindex="-1"	Yes	Not in tab order, author must focus it with element.focus() as result of a key press.

Author:	Brad Neuberg
Version:	0.5
Copyright:	Dojo Foundation, 2006
Date:	2006/11/18

The Dojo Book, 0.4

Part 1: "Introduction"

Dojo Architecture

Dojo: What Is It?

How this Book is Written

Voice

Me

You

We

The Tree Structure

Articles

Readability

Length

Sections

How to Create Pages

What Dojo gives you

Code Simplification

Reusable Code

Portable Tools

Additional Resources

What is a Toolkit?

Framework

Library

Toolkit

None of the Above?

Part 2: "Out of the Box" Dojo

Development and Debugging Tips

Debugging JavaScript

IDEs

Browser specific tools

Mozilla/Firefox

Firefox Safe Mode

Internet Explorer

Safari

How does debugAtAllCosts work?

What alternatives are there to debugAtAllCosts?

Profiling

Traffic analysis

How do I debug syntax errors? aka How can I find this syntax error in bootstrap?

Javascript debugger statement

Debug Messages

JavaScript Editors

Editors/IDEs

ATF (Eclipse)

JSEclipse

MyEclipseIDE

JS-Sourceror (Eclipse)

JavaScript plugin for jEdit

Aptana

Profiling JavaScript

Profiling Tools

dojo.profile

FireBug 1.0

Venkman (for Firefox)

Tito web studio

Manually do it yourself

Getting Started

Adding Dojo to Your Pages

Pre-Packaged Builds

Introducing Dojo Events

Introduction to dojo.io.bind

Errors and Timeouts

Hello Ajax World

Sending Form Data

Modules, Resources, and Widget Namespaces

Modules

Resources

Setting up Require Statments

Wildcards

dojo.provide()

Widget Namespaces

Widgets

The Widget Object

Turning Plain HTML Into Widgets

More Than One Way to...

Why Use Widgets?

Enhanced User Experience

Faster Development

No Javascript Required

No worrying required