Dojo Toolkit

Tutorials and articles about Dojo Toolkit.

Add A Cool Date Picker With 2 Lines Of JavaScript


We have all seen drop down date pickers in web pages that are really convenient for the user. Let us see how we can build one with just 2 lines of JavaScript code. Yes, you read it right. 2 lines of JavaScript. You don't even have to know JavaScript to build a date picker in your web page.

For the impatient: Demo is here

Before: Traditional HTML form with input field
Visit the above link and take a look at the HTML only form fields that collect date information from the user. If you don't use a server side scripting language to generate the form fields you have to type a lot of select options to make it easier for the user. Populating the select fields with the desired option, especially in the case of failed validation, takes a bit more server side code. Most of you would agree that the user hates these kind of forms.

With JavaScript you can add user friendly features such as a date picker. With JavaScript toolkits like Dojo it is quite easy to build rich Internet applications. We already know we are doing it in 2 lines of JavaScript. With Dojo toolkit you write less code and offer great experience to the user.

On a side note, I can see some folks coughing at the mention of buzz word "RIA".

After: Let us transform our previous web page form field into a date picker. Visit the demo page.

Let us now build the web page step by step.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>techchorus.net Dojo Date Picker Example</title>

I will not emphasize on the above snippet because this post assumes you already are familiar with HTML.

Let us move forward to the interesting parts of the web page.

<style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
</style>

The above snippet imports tundra.css and dojo.css files from AOL CDN.

Dojo toolkit is a collection of JavaScript, CSS and HTML files. The entire Dojo toolkit is hosted by AOL and Google for all of us to use their networks. These hosts are better known as content distribution networks(CDN). Content from these URLs might already be cached on the visitor's browser because CDNs are used by many websites.

1st JavaScript line in our web page:

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>

The above code includes the main JavaScript file - dojo.xd.js and Dojo parser from AOL CDN. djConfig parses HTML and DOM when the document is loaded.

2nd JavaScript line in our web page:

<script type="text/javascript">
        dojo.require("dijit.form.DateTextBox");
</script>

Dojo has great parsing functions which parse HTML and DOM quickly and efficiently. Dijit is a widget system using which you can build amazing Web 2.0 GUIs. dijit.form.DateTextBox is one such widget offered by Dojo. Our date picker uses this Dojo widget. The above snippet includes the Dojo parser and the dijit.form.DateTextBox widget.

</head>

Let us close the HTML head tag here.

<body class="tundra">

Tundra is a dijit theme which brings a common design and color scheme to all the widgets. It is very important that you set the body tag's class to a dijit theme; tundra in this example. Otherwise the date picker will not work.

 <input type="text" name="date"  dojoType="dijit.form.DateTextBox"
                required="true" />

Dijit introduces a new attribute "dojoType". You simply add that to the tag you wish to make use of dijit. In the above snippet we add dojoType="dijit.form.DateTextBox to our regular input tag. This brings in the date picker to this form field. How easy!

</body>
</html>

We're done. So, close the body and html tags.

I am putting up the complete HTML document below so that you can grab it at once.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>techchorus.net.com Dojo Date Picker Example</title>
 
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
 
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true"></script>
 
    <script type="text/javascript">
        dojo.require("dijit.form.DateTextBox");
    </script>
 
</head>
<body class="tundra">
 
        <input type="text" name="date"  dojoType="dijit.form.DateTextBox"
                required="true" />
</body>
</html>

Useful links:
Dojotoolkit - http://dojotoolkit.org/
RIA - http://en.wikipedia.org/wiki/Rich_internet_application
CDN - http://en.wikipedia.org/wiki/Content_delivery_network
Web 2.0 - http://en.wikipedia.org/wiki/Web_2.0

P.S: I'm drafting another post which shows PHP programmers how to build a date picker without writing a single line of JavaScript. Stay tuned.

Taxonomy upgrade extras: 

Create Awesome Pie Charts From PHP Arrays Using Dojo Charting

In the previous articles I've written about using Dojo date pickers and filteringSelect widgets. If you are a PHP programmer with little or no JavaScript experience, you can take advantage of the integration of Zend Framework and Dojo Toolkit to build great user interfaces without writing a single line of JavaScript.

In this article I will demonstrate how to create awesome pie charts from simple PHP arrays. Check out the demo page to see how our pie chart looks. We draw a pie chart of the types programmers in an obviously fictitious development team.

Let's begin coding.

Start with the routine HTML markup.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Render awesome pie charts from PHP arrays using Dojo charting - techchorus.net
</title>

Like our previous Dojo examples, include the tundra stylesheet and Dojo library from Google CDN.

<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dijit/themes/tundra/tundra.css">
 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>

DojoX, a part of Dojo Toolkit, provides the charting and other nice widgets and utilities.

Include the necessary DojoX code using the powerful dojo.require statements.

<script type="text/javascript">
        dojo.require("dojox.charting.Chart2D");
        dojo.require("dojox.charting.plot2d.Pie");
        dojo.require("dojox.charting.action2d.Highlight");
        dojo.require("dojox.charting.action2d.MoveSlice");
        dojo.require("dojox.charting.action2d.Tooltip");
        dojo.require("dojox.charting.themes.MiamiNice");
        dojo.require("dojox.charting.widget.Legend");

We haven't closed the script tag yet.

When the page has finished loading, draw the pie chart in the "programmersChart" DOM node.

dojo.addOnLoad(function() {
            var dc = dojox.charting;
            var programmersChart = new dc.Chart2D("programmersChart");
            programmersChart.setTheme(dc.themes.MiamiNice).addPlot("default", {
                type: "Pie",
                font: "normal normal 8pt Tahoma",
                fontColor: "black",
                labelOffset: -30,
                radius: 80
            });

Let's put our development team in a simple PHP array. The array keys represent the programming languages and the values number of programmers in the category.


<?php
    $programmers 
= array(
        
'PHP'=>20,
        
'JavaScript'=>6,
        
'Python'=>12,
        
'Java'=>4,
        
'Others'=>3
    
);
?>

Let's write a PHP function to convert the array into JSON. You can choose to embed this PHP code wherever you want in the script.

<?php
function array_to_chart_json($array) {
        
$toReturn = array();
        foreach (
$array as $key=>$value) {
            
$toReturn[] = array(
                
'y'=>$value,
                
'text'=>$key,
                
'stroke'=>'black',
                
'tooltip'=>$key
            
);
        }
        return 
json_encode($toReturn);
    }

?>

The JSON encoding of our PHP array looks like

[
{"y":20,"text":"PHP","stroke":"black","tooltip":"PHP"},
{"y":6,"text":"JavaScript","stroke":"black","tooltip":"JavaScript"},
{"y":12,"text":"Python","stroke":"black","tooltip":"Python"},
{"y":4,"text":"Java","stroke":"black","tooltip":"Java"},
{"y":3,"text":"Others","stroke":"black","tooltip":"Others"}
]

Add the programmers team series to the programmersChart object we created earlier.

programmersChart.addSeries("Series A", 
    <?php echo array_to_chart_json($programmers); ?>);

Add some nice animation effects to the chart and render it.

 var anim_a = new dc.action2d.MoveSlice(programmersChart, "default");
            var anim_b = new dc.action2d.Highlight(programmersChart, "default");
            var anim_c = new dc.action2d.Tooltip(programmersChart, "default");
            programmersChart.render();

Create the legend. Close the script and head tags.

var programmersLegend = new dojox.charting.widget.Legend({
                chart: programmersChart
            },
            "programmersLegend");
        });
</script>
 
</head>

Write the body section of the web page. We set the body tag class to "tundra" to make use of the tundra style sheet of Dojo. In the "programmersChart" div, DOM node, we render the pie chart. In the "programmersLegend" div, we render the legend.

<body class="tundra">
        <div id="programmersChart" style="width: 300px; height: 300px;">
        </div>
        <div id="programmersLegend">
        </div>
    </body>
</html>

You can download the entire script from the Code Album github.com repository. To enable copy pasting, I'm posting the entire script below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Render awesome pie charts from PHP arrays using Dojo charting - techchorus.net</title>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dijit/themes/tundra/tundra.css">
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dojox.charting.Chart2D");
        dojo.require("dojox.charting.plot2d.Pie");
        dojo.require("dojox.charting.action2d.Highlight");
        dojo.require("dojox.charting.action2d.MoveSlice");
        dojo.require("dojox.charting.action2d.Tooltip");
        dojo.require("dojox.charting.themes.MiamiNice");
        dojo.require("dojox.charting.widget.Legend");
 
        dojo.addOnLoad(function() {
            var dc = dojox.charting;
            var programmersChart = new dc.Chart2D("programmersChart");
            programmersChart.setTheme(dc.themes.MiamiNice).addPlot("default", {
                type: "Pie",
                font: "normal normal 8pt Tahoma",
                fontColor: "black",
                labelOffset: -30,
                radius: 80
            });
<?php
    $programmers = array(
        'PHP'=>20,
        'JavaScript'=>6,
        'Python'=>12,
        'Java'=>4,
        'Others'=>3
    );
 
    function array_to_chart_json($array) {
        $toReturn = array();
        foreach ($array as $key=>$value) {
            $toReturn[] = array(
                'y'=>$value,
                'text'=>$key,
                'stroke'=>'black',
                'tooltip'=>$key
            );
        }
        return json_encode($toReturn);
    }
 
?>
            programmersChart.addSeries("Series A", <?php echo array_to_chart_json($programmers); ?>);
            var anim_a = new dc.action2d.MoveSlice(programmersChart, "default");
            var anim_b = new dc.action2d.Highlight(programmersChart, "default");
            var anim_c = new dc.action2d.Tooltip(programmersChart, "default");
            programmersChart.render();
            var programmersLegend = new dojox.charting.widget.Legend({
                chart: programmersChart
            },
            "programmersLegend");
        });
    </script>
 
 
 
    </head>
 
    <body class="tundra">
        <div id="programmersChart" style="width: 300px; height: 300px;">
        </div>
        <div id="programmersLegend">
        </div>
    <p>This is a demo page to illustrate how to create awesome pie charts from PHP arrays using the Dojo Toolkit JavaScript library. Visit the orignial article at http://techchorus.net/create-awesome-pie-charts-php-arrays-using-dojo-charting
    </p>
    </body>
</html>

That brings us to the end of the article. Power up your web application with awesome charts using the Dojo Toolkit. Share your experience with us.

Reference:
Dojo Toolkit
Dojo Campus - Dojo documentation

Taxonomy upgrade extras: 

Mini Build Script For Dojo Toolkit 1.2.3

When you use a JavaScript framework, library or toolkit in production, you would be interested in improving the performance of the application by:

  • Reducing the footprint of the JavaScript code by compressing it, removing comments, white spaces, etc
  • Reducing the number of HTTP requests, especially in Ajax applications
  • Removing documentation, tests and other project files to be productive with FTP, SCP and VCS operations

Dojo has its own solution to solve these concerns. If you download a source version of the Dojo Toolkit, you will see the build.sh shell script in the util directory. The build.sh script helps you build the layers and reduce code footprint. Build custom layers using the build scripts and you will see significant improvements in performance of our application. In one of my applications, I was able to reduce the number of HTTP requests from 39 to 9 on a single web page. This boosted the loading speed drastically.

Peter Higgins who is the project lead of Dojo Toolkit has created the build_mini.sh shell script to further improve the build process. You get a really tiny build when you use build_mini.sh. The script build_mini.sh was available for Dojo release 1.1.0 in the form of release.sh at http://dante.dojotoolkit.org/mini/. Due to the success and popularity of that script, it will be incorporated into the next Dojo 1.2 release. It is also available in the Dojo subversion trunk at the time of this blog post. Peter has also created screencasts of using this process at http://dojocampus.org/content/2008/05/26/dojo-build-201-layers-and-css-o.... You might also want to check out Peter's blog post where he explains the process of creating tiny builds at
http://www.sitepen.com/blog/2008/04/02/dojo-mini-optimization-tricks-wit....

Recently, I had to run a mini build on the Dojo 1.2.3 release. I modified the Higgin's release.sh to suit to my needs. Other people also encounter this situation on a day to day basis. I sent the modified release.sh and the README.html file to Peter. He gladly accepted them and uploaded to http://dante.dojotoolkit.org/mini/. Download the script, build Dojo and enjoy.

Taxonomy upgrade extras: