Initial commit

## Example files for the title:  

# Dojo: The Definitive Guide, by Matthew Russell

[![Dojo: The Definitive Guide, by Matthew Russell](http://akamaicovers.oreilly.com/images/9780596516482/cat.gif)](https://www.safaribooksonline.com/library/view/title/9780596516482//)

The following applies to example files from material published by O’Reilly Media, Inc. Content from other publishers may include different rules of usage. Please refer to any additional usage rights explained in the actual example files or refer to the publisher’s website.

O'Reilly books are here to help you get your job done. In general, you may use the code in O'Reilly books in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from our books does not require permission. Answering a question by citing our books and quoting example code does not require permission. On the other hand, selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Incorporating a significant amount of example code from our books into your product's documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN.

If you think your use of code examples falls outside fair use or the permission given here, feel free to contact us at <permissions@oreilly.com>.

Please note that the examples are not production code and have not been carefully testing. They are provided "as-is" and come with no warranty of any kind.

appendix: A Brief Survey of DojoX

==================

grep -rc 'function' * | grep -v \.svn | cut -d : -f 2 |  awk '{for (i=1; i<=NF; i++)

s=s+$i}; END{print s}'

====================================

grep -rc '\;' * | grep -v \.svn | cut -d : -f 2 |  awk '{for (i=1; i<=NF; i++)

s=s+$i}; END{print s}'

==================

 No newline at end of file

chapter: Toolkit Overview

==================

svn co http://svn.dojotoolkit.org/src/view/anon/all/trunk ./svn

====================================

<script

    type="text/javascript"

    src="www/js/dojo/dojo.js">

</script>

====================================

<script

    type="text/javascript"

    src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">

</script>

====================================

Example: A very simple CherryPy application1 import cherrypy

2

3 class Content:

4

5     @cherrypy.expose

6     def index(self):

7         return "Hello"

8

9     @cherrypy.expose

10     def greet(self, name=None):

11         return "Hello "+name

12

13  cherrypy.quickstart(Content(  ))

====================================

Example: A minimalist application harness example<html>

  <head>

    <title>Title Goes Here</title>

    <!-- A lightweight style sheet that smoothes out look and feel across browsers -->

   <link rel="stylesheet"  type="text/css"

       href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />

    <script

      type="text/javascript"

      src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">

    </script>

    <script type="text/javascript">

        /* If needed, Dojo modules may be asynchronously requested into the page

here via dojo.require statements... */

        dojo.addOnLoad(function(  ) {

            /* Any content that depends upon dojo.require statements goes here... */

        });

    </script>

  </head>

  <body>

    <!-- ... -->

  </body>

</html>

====================================

<script

    type="text/javascript"

    src=" http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js "

    djConfig="parseOnLoad:true,isDebug:true">

</script>

====================================

<script type="text/javascript">

    djConfig = {

        parseOnLoad : true,

        isDebug : true

    };

</script>

<script

  type="text/javascript"

  src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js ">

</script>

====================================

/*Define djConfig w/ afterOnLoad being set to true. You could also pass in

requests for any additional modules if you needed them. Let's assume you need the

dojo.behavior module.*/

djConfig={afterOnLoad:true,require:['dojo.behavior']}

/* Create the same script tag that would normally appear in the page's head */

var e = document.createElement("script");

e.type="text/javascript";

e.src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js";

/* And insert it. That's it */

document.getElementsByTagName("head")[0].appendChild(e);

====================================

(function() {djConfig={afterOnLoad:true,require:['dojo.behavior']};

var e = document.createElement("script"); e.type="text/javascript";

e.src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js";

document.getElementsByTagName("head")[0].appendChild(e);})()

====================================

Example: A really simple HTML page for illustrating a few features from Base<html>

     <head>

         <title>Fun with Dojo!</title>

            <link rel="stylesheet"  type="text/css"

              href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />

         <script

              type="text/javascript"

              src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"

             djConfig="isDebug:true">

        </script>

        <style type="text/css">

              .blue {color: blue;}

            </style>

    </head>

     <body>

        <div id="d1" class="blue">A div with id=d1 and class=blue</div>

        <div id="d2">A div with id=d2</div>

        <div id="d2">Another div with id=d2</div>

        <div id="d4">A div with id=d3.

            <span id="s1">

                This sentence is in a span that's contained in d1.

                The span's id is s1.

            </span>

        </div>

         <form name="foo" action="">

             A form with name="foo"

         </form>

          <div id="foo"

             A div with id=foo

          </div>

      </body>

</html>

====================================

dojo.byId(/*String*/ id | /*DomNode*/ node)  // Returns a DOM Node

====================================

document.getElementById("foo") //Isn't the answer *so* obvious?!?

====================================

dojo.byId("d2").innerHTML

====================================

connect(/*Object|null*/ obj,

        /*String*/ event,

        /*Object|null*/ context,

        /*String|Function*/ method) // Returns a connection handle

====================================

var handle = dojo.connect(

  dojo.byId("s1"), //context

  "onmouseover", //event

  null, //context

  function(evt) {console.log("mouseover event", evt);} //event

);

====================================

var handle = dojo.connect(

  dojo.byId("s1"), //context

  "onmouseover", //event

  function(evt) {console.log("mouseover event",evt);} //event

);

====================================

dojo.disconnect(handle);

====================================

dojo.query("div") //find all of the div elements in the DOM

====================================

dojo.query("div#d2") //check for the existence of a div with id=d2

====================================

dojo.query(".blue") //returns a list of elements that have the blue class applied.

====================================

dojo.addClass("s1", "blue");  //add the blue class to the SPAN

====================================

dojo.query("span.blue") //returns only span elements with the blue class applied

====================================

Example: A very primitive form example<html>

    <head>

        <title>Fun with Dijit!</title>

    <head>

        <body>

        Just Use the form below to sign-up for our great offers:<br /><br />

        <form id="registration_form">

            First Name: <input type="text" maxlength=25 name="first"/><br />

            Last Name: <input type="text" maxlength=25 name="last"/><br />

            Your Email: <input type="text" maxlength=25 name="email"/><br /><br />

            <button onclick="alert('Boo!')">Sign Up!</button>

        </form>

    </body>

</html>

====================================

Example: A form that's not so primitive anymore (thanks to some Dojoification)<html>

    <head>

        <title>Fun with Dijit!</title>

        <!-- Grab some style sheets for the built-in tundra theme that Dojo offers for

         styling the page, equipping you with a professional style without

any additional

         effort required. -->

        <link rel="stylesheet" type="text/css"

          href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />

        <link rel="stylesheet" type="text/css"

          href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />

        <!-- Add in some plain old CSS to line up the form elements more nicely -->

        <style type="text/css">

            h3 {

                margin : 10px;

            }

            label,input {

                display: block;

                float: left;

                margin-bottom: 5px;

             }

             label {

                text-align: right;

                width: 70px;

                padding-right: 20px;

             }

             br {

                clear: left;

             }

             .grouping {

                width:300px;

                border:solid 1px rgb(230,230,230);

                padding:5px;

                margin:10px;

             }

        </style>

        <!-- Load Base and specify that the page should be parsed for dijits after it

          loads -->

        <script

            type="text/javascript"

            src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"

            djConfig="parseOnLoad: true" >

        </script>

        <!-- Load some dijits via dojo.require in the same manner that you

would #include

          some files in C programming or perform an import in Java -->

        <script type="text/javascript">

            dojo.require("dojo.parser");

            dojo.require("dijit.form.TextBox");

            dojo.require("dijit.form.ValidationTextBox");

            dojo.require("dijit.form.Button");

        </script>

    <head>

        <!-- Specify that the built-in tundra theme should be applied to

everything in the

          body of the page. (Dijit relies heavily on CSS so including the appropriate

          theme is crucial.)-->

        <body class="tundra">

            <h3>Sign-up for our great offers:</h3>

            <form id="registration_form">

                <!-- Weave some widgets into the page by supplying the tags and

including

                  a dojoType attribute so the parser can find them and swap

them out -->

                <div class="grouping">

                    <label>First Name:</label>

                    <input type="text"

                     maxlength=25

                     name="first"

                     dojoType="dijit.form.TextBox"

                     trim="true"

                     propercase="true"/><br>

                    <label>Last Name:</label>

                    <input type="text"

                     maxlength=25

                     name="last"

                     dojoType="dijit.form.TextBox"

                     trim="true"

                     propercase="true"/><br>

                    <label>Your Email:</label>

                    <input type="text"

                     maxlength=25

                     name="email"

                     dojoType="dijit.form.ValidationTextBox"

                     trim="true"

                     lowercase="true"

                     regExp="[a-z0-9._%+-]+@[a-z0-9-]+\.[a-z]{2,4}"

                     required="true"

                     invalidMessage="Please enter a valid e-mail address"/><br>

                    <button dojoType="dijit.form.Button"

                     onClick="alert('Boo!')">Sign Up!</button>

                </div>

            </form>

    </body>

</html>

==================

 No newline at end of file

chapter: Event Listeners and Pub/Sub Communication

==================

dojo.fixEvent(/*DOMEvent*/ evt, /*DOMNode*/ sender) //Returns DOMEvent

====================================

/* ... snip ... */

  if (evt.keyCode == dojo.keys.ENTER && evt.shiftKey) {

    /* ... */

  }

/* ... snip ... */

====================================

/* Set up a connection */

dojo.connect(/*Object|null*/ obj,

            /*String*/ event,

            /*Object|null*/ context,

            /*String|Function*/ method) // Returns a Handle

/* Tear down a connection */

dojo.disconnect(/*Handle*/handle);

====================================

function Foo(  ) {

    this.greet = function(  ) { console.log("Hi, I'm Foo"); }

}

function Bar(  ) {

    this.greet = function(  ) { console.log("Hi, I'm Bar"); }

}

foo = new Foo;

bar  = new Bar;

foo.greet(  );

//bar should greet foo back without foo

//ever having to know that bar exists.

====================================

function Foo(  ) {

    this.greet = function(  ) { console.log("Hi, I'm foo"); }

}

function Bar(  ) {

    this.greet = function(  ) { console.log("Hi, I'm bar"); }

}

foo = new Foo;

bar  = new Bar;

//Anytime foo.greet fires, fire bar.greet afterward...

var handle = dojo.connect(foo, "greet", bar, "greet"); //set up the connection

foo.greet(  ); //bar automatically greets back now!

====================================

var handle = dojo.connect(foo, "greet", bar, "greet");

foo.greet(  );

dojo.disconnect(handle);

foo.greet(  ); //silent treatment this time

====================================

function Foo(  ) {

    this.greet = function(greeting) { console.log("Hi, I'm Foo.", greeting); };

}

function Bar(  ) {

    this.greet = function(greeting) { console.log("Hi, I'm Bar.", greeting); };

}

foo = new Foo;

bar = new Bar;

var handle= dojo.connect(foo, "greet", bar, "greet");

foo.greet("Nice to meet you");

====================================

//Note that the third argument is skipped altogether since the handler is a

//standalone anonymous function. Using null to placehold the third parameter would

//have produced the very same effect.

dojo.connect(

    dojo.byId("foo"), //Some DOM element

    "onmouseover",

    function(evt) {

      console.log(evt);

    });

====================================

dojo.stopEvent(/*DOMEvent*/evt)

====================================

var foo = dojo.byId("foo"); //some anchor element

dojo.connect(foo, "onclick", function(evt) {

    console.log("anchor clicked");

    dojo.stopEvent(evt); //suppress browser navigation and squash any event bubbling

});

====================================

var bar = dojo.byId("bar"); //some form element

dojo.connect(bar, "onsubmit", function(evt) {

    console.log("form submitted");

    evt.preventDefault(  ); //suppress browser navigation but allow event bubbling

});

====================================

var handle = dojo.connect(

    dojo.byId("foo"),  //some div element

    "onmouseover",

    function(evt) {

      //some handler goes here...

      dojo.disconnect(handle);

    }

);

====================================

/* The following code does not work as expected! */

for (var i=0; i < 10; i++) {

  var foo = dojo.byId("foo"+i);

  var handle = dojo.connect(foo, "onmouseover", function(evt) {

    console.log(i);

    dojo.disconnect(handle);

  });

}

====================================

for (var i=0; i < 10; i++) {

   (function(  ) {

       var foo = dojo.byId("foo"+i);

       var current_i = i; //trap in closure

       var handle = dojo.connect(foo, "onmouseover",

         function(evt) {

           console.log(current_i);

           dojo.disconnect(handle);

         }

       );

   })(  ); // execute anonymous function immediately

}

====================================

dojo.publish(/*String*/topic, /*Array*/args)

dojo.subscribe(/*String*/topic, *Object|null*/context,

   /*String|Function*/method) //Returns a Handle

dojo.unsubscribe(/*Handle*/handle)

====================================

function Foo(topic) {

  this.topic = topic;

  this.greet = function(  ) {

    console.log("Hi, I'm Foo");

    /* Foo directly publishes information, but not to a specific destination... */

    dojo.publish(this.topic);

  }

}

function Bar(topic) {

  this.topic = topic;

  this.greet = function(  ) {

    console.log("Hi, I'm Bar");

  }

  / * Bar directly subscribes to information, but not from a specific source */

  dojo.subscribe(this.topic, this, "greet");

}

var foo = new Foo("/dtdg/salutation");

var bar = new Bar("/dtdg/salutation");

foo.talk(  ); //Hi, I'm Foo...Hi, I'm Bar

====================================

function Bar(topic) {

    this.topic = topic;

    this.greet = function(  ) {

        console.log("Hi, I'm bar");

        dojo.unsubscribe(this.handle);

        //yackety yack, don't talk back

    }

    this.handle = dojo.subscribe(this.topic, this, "greet");

}

====================================

function Foo(  ) {

  this.greet = function(  ) {

    console.log("Hi, I'm foo");

  }

}

function Bar(  ) {

  this.greet = function(  ) {

    console.log("Hi, I'm bar");

  }

}

var foo = new Foo;

var bar = new Bar;

var topic = "/dtdg/salutation";

dojo.subscribe(topic, bar, "greet");

dojo.connectPublisher(topic, foo, "greet");

foo.greet(  );

==================

 No newline at end of file