Scribd
Upload
179 views

Dojo Tutorial 1

This document discusses three methods for installing and using Dojo: via a CDN, from your own server, or directly from source control. It then provides details on installing Dojo from your own server, creating a basic template page to load Dojo, and building a small calendar widget example using the English and Chinese locales. The document concludes with suggestions for additional self-study topics related to Dojo.

Uploaded by

Avinash Jindamwar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
179 views

Dojo Tutorial 1

This document discusses three methods for installing and using Dojo: via a CDN, from your own server, or directly from source control. It then provides details on installing Dojo from your own server, creating a basic template page to load Dojo, and building a small calendar widget example using the English and Chinese locales. The document concludes with suggestions for additional self-study topics related to Dojo.

Uploaded by

Avinash Jindamwar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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