Scribd Logo
Upload

Welcome to Scribd!

  • Dojo Tutorial 1

    Uploaded by

    Avinash Jindamwar
    86 views5 pages
    Dojo is a Content Distribution Network (cdn) from AOL or Google. You can use it from your own server or Directly from source control.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Dojo is a Content Distribution Network (cdn) from AOL or Google. You can use it from your own server or Directly from source control.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    86 views5 pages

    Dojo Tutorial 1

    Uploaded by

    Avinash Jindamwar
    Dojo is a Content Distribution Network (cdn) from AOL or Google. You can use it from your own server or Directly from source control.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    1.

    Installing Dojo

    There are 3 main ways to use Dojo


    1. Using AOL's Content Distribution Network (CDN) or CDN from Google
    2. From your server
    3. Directly from source control

    We will see the second method. (In all examples we will be using second method)

    1 . Dojo from your own server


    Hope you already have a server (Apache Tomcat Server or XAMPP) where you can put
    the downloaded Dojo source code. I have installed XAMPP (for PHP), so I will be
    showing explaining all examples keeping that thing in mind.
    Follow the steps
    1. Download the latest build from http://dojotoolkit.org/downloads. (Download the latest
    version)
    2. Unzip the files (dojo/, dijit/ dojox/ and possibly util/). Create a directory (For me its
    dojoroot) under htdocs folder (or webapps for Apache Tomcat). And place the all
    folder (dojo, dijits and dojox) under dojoroot.

    3. To test the successful deployment just try the url (don't forget to start the server). For
    me its
    http://localhost/dojoroot/dojo/dojo.js
    (Use appropriate host name. If you see the any javascript code, then deployment is
    successful. Try in browser other than Internet Explorer - IE)

    2 . Small Dojo Example


    1. Create a folder demos under htdocs.
    2. Inside demos create a template.html file. Which we will be using as a basic template
    to load Dojo for other examples/demos.
    Read the comments in red color.

    <html>
    <head>
    <style type="text/css">
    @import "/dojoroot/dojo/resources/dojo.css"; /* this loads basic CSS files. note the first forward slash */
    @import "/dojoroot/dijit/themes/soria/soria.css"; /* dijit theme file, others are nihilo and tundra */
    </style>
    <title>Dojo Examples</title>
    <script type="text/javascript">
    // just like a Dojo configuration
    var djConfig = {
    parseOnLoad : true, // necessary if you are using dijits
    isDebug : true // for debugging purpose..substitute for Firebug
    };
    </script>
    <!-- Following script loads main Dojo base library-->
    <script type="text/javascript" src="/dojoroot/dojo/dojo.js"></script>
    </head>
    <!-- Notice the class name for body element-->
    <body class="soria">
    </body>
    </html>

    3. We will work on a small Dijit example to show calendar for English user and China
    user. Use above template and add the few lines (The new complete code looks as
    below. I insist you to use above template and try to add the new lines after studying the
    following code).
    (calendar.html file for me)
    <html>
    <head>
    <style type="text/css">
    @import "/dojoroot/dojo/resources/dojo.css";
    @import "/dojoroot/dijit/themes/soria/soria.css";
    </style>
    <title>Dojo Examples</title>
    <script type="text/javascript">
    var djConfig = {
    parseOnLoad : true,
    isDebug : true,
    extraLocale : ['en-us', 'zh-cn']
    };
    </script>
    <script type="text/javascript" src="/dojoroot/dojo/dojo.js"></script>
    <script type="text/javascript">
    dojo.require("dijit._Calendar"); // this is like import or include
    </script>
    </head>
    <body class="soria">
    <h1>English US</h1>
    <input id="engCal" dojoType="dijit._Calendar" lang="en-us"/>
    <h1>China</h1>
    <div id="chiCal" dojoType="dijit._Calendar" lang="zh-cn"></div>
    </body>
    </html>

    When you open the html file in browser window, page looks like
    http://localhost/demos/calendar.html
    3 . Self Learning
    Few things you should /may want to try or learn as self study. Google the information.
    1. About Firebug : console.log, console.warn functions.
    2. JavaScript : Objects and Anonymous functions.
    3. Try above example with Nihilo and Tundra theme. Just replace all words “soria” with
    “nihilo” and “tundra” in your text editor.
    4. In above example I used Dojo Version 1.4, see the warning message in above Firebug
    panel and try the same example with dijit.Calendar.
    5. One of the most common and difficult to find syntax error is, leaving a comma (,) after
    the value of the last property in the JavaScript object. This is forgiven in almost
    browsers but not in IE. Just to see what happens, put a comma after “extraLocale :
    ['en-us', 'zh-cn']” and load the file again in IE and other browser. See yourself what
    happens.
    6. While practicing the Dojo stuff always see the output in IE and Firefox.

    You might also like