Dojo : Animation

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <title>Dojo</title>   
    <!– load the dojo toolkit base –>
    <script type=”text/javascript” src= “dojo/dojo/dojo.js”
        djConfig=”parseOnLoad:true, isDebug:true”></script>
    <script type=”text/javascript”>
dojo.addOnLoad(function(){
    var animArgs = {
    node: “testHeading”,
    duration: 1000, // ms to run animation
    delay: 250 // ms to stall before playing
    };
    dojo.fadeOut(animArgs).play();
});

    </script>
    <style type=”text/css”>
    /* CSS  */ 
    .testClass {
    background-color:red;
}
    </style>   
    </head>
    <body>
        <h1 id=”testHeading”>Dojo Animation!!</h1>       
        <div id=”contentNode”>
        <p></p>
    </div>
    </body>
</html>

Advertisements

Dojo : connect()

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <title>Dojo</title>   
    <!– load the dojo toolkit base –>
    <script type=”text/javascript” src= “dojo/dojo/dojo.js”
        djConfig=”parseOnLoad:true, isDebug:true”></script>
    <script type=”text/javascript”>
dojo.addOnLoad(function(){
    var node = dojo.byId(“testHeading”);
    dojo.connect(node,”onclick”,function(){
    node.innerHTML = “Click! Click!!”;       
    });       
});   

    </script>
    <style type=”text/css”>
    /* CSS  */ 
    .testClass {
    background-color:red;
}
    </style>   
    </head>
    <body>
        <h1 id=”testHeading”>Click Here!!</h1>       
        <div id=”contentNode”>
        <p></p>
    </div>
    </body>
</html>

Dojo : query()

 

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <title>Dojo</title>   
    <!– load the dojo toolkit base –>
    <script type=”text/javascript” src= “dojo/dojo/dojo.js”
        djConfig=”parseOnLoad:true, isDebug:true”></script>
    <script type=”text/javascript”>
   dojo.require(“dojo.NodeList-fx”);
  dojo.addOnLoad(function(){
    // our dom is ready, get the node:
    dojo.query(“#testHeading”)
         // add “testClass” to its class=”” attribute
        .addClass(“testClass”)
         // and fade it out after 500 ms
        .fadeOut({ delay:500 }).play();
});

    </script>
    <style type=”text/css”>
    /* CSS  */ 
    .testClass {
    background-color:red;
}
    </style>   
    </head>
    <body>
        <h1 id=”testHeading”>Dojo test</h1>       
        <div id=”Node”>
        <p></p>
    </div>
    </body>
</html>

Dojo : require()

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <title>Dojo</title>   
    <!– load the dojo toolkit base –>
    <script type=”text/javascript” src= “dojo/dojo/dojo.js”
        djConfig=”parseOnLoad:true, isDebug:true”></script>
    <script type=”text/javascript”>
        dojo.require(“dijit.form.Button”);
        dojo.require(“dijit.TitlePane”);
        dojo.addOnLoad(function(){
          dojo.byId(“testHeading”).innerHTML = “See!! New Heading is here”;
          console.log(“Execution Sequence: 1. require()  2. onLoad “);
         }); 

    </script>
    <style type=”text/css”>
    /* CSS  */   
    </style>   
    </head>
    <body>
        <h1 id=”testHeading”>Dojo test</h1>       
        <div id=”contentNode”>
        <p></p>
    </div>
    </body>
</html>

Dojo : HelloWorld

dojotest.html

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <title>Dojo</title>   
    <!– load the dojo toolkit base –>
    <script type=”text/javascript” src= “dojo/dojo/dojo.js”
        djConfig=”parseOnLoad:true, isDebug:true”></script>

    <script type=”text/javascript”>
     // a very common method of loading code onLoad
    var init = function(){
            console.log(“Hello World in Dojo!!”);   
    };
    dojo.addOnLoad(init);

    // and/or pass an anonymous function
    dojo.addOnLoad(function(){
            console.log(“Dojo Test!! “);
    });

    </script>

    <style type=”text/css”>
    /* CSS  */   
    </style>   
    </head>
    <body>
        <h1 id=”testHeading”>Dojo test</h1>       
        <div id=”contentNode”>
        <p></p>
    </div>
    </body>
</html>

DOJO : Introduction

Dojo is structured in 4 main projects: Dojo Core, Dijit, DojoX, and Dojo Utilities. Simply including the standard dojo.js gives you:

  • A very fast, lean (26KB gzipped) core packed full of APIs for XHR, events, DOM, query, animations, namespacing, and other highly used convenience functions.
  • Optional modules for dates, colors, back button/history, currency, and more

The Dojo core also includes additional code that may be optionally included such as a behavior system, common regular expressions, date and currency APIs, and more.

Dijit is both a widget system and a collection of common widgets, meaning that you get a nice set of widgets to use by default, and a powerful system for creating your own. All widgets in Dijit are fully accessible, internationalizable, and can be instantiated either through markup in an unobtrusive manner, or through a simple JavaScript instantiation. Dijit includes common form element upgrades, a calendar, editor, tree, sliders, and more.

Everything in Dojo and Dijit are deemed production-ready and API compatibility will be one of our higher priorities as we work towards Dojo 2.0.

DojoX, or Dojo extensions, contain features that are less widely, complex, or not yet production quality. Examples include encryption, additional Dojo data stores, dojo.gfx for native vector graphics support, charting, offline, grids and other widgets, and much more. Features in DojoX are not guaranteed to be backwards compatible across 1.x releases. DojoX contains a significant code base with great new additions arriving on a regular basis, most recently an XMPP client, JSON-Schema, JSON-Referencing, and a secure Ajax module, all of which will ship with Dojo 1.2 and are available in the current nightly builds.

Dojo Utilities offers, as its name suggests, a number of useful utilities for JavaScript developers, including

  • A highly-flexible build system for combining JavaScript files, satisfying dependencies, and merging HTML and CSS files, based on a slightly customized version of Rhino
  • ShrinkSafe, a compression tool that removes comments, extraneous whitespace, and more, which also makes use of Rhino
  • DocTool, a highly advanced system for generating API documentation from source code, that also can resolve complex mixin inheritance structures and more
  • DOH, the Dojo Objective Harness, a unit test tool that works both in the browser and on the command-line

Dojo is organized in a very modular manner, making it easy to just get the features you need so you don’t expend system resources for everything else in Dojo.