Dojo Toolkit Dimiter Kunchev
What is Dojo? • DHTML Toolkit • Open source • Written in JavaScript • Unified from different code bases • Allows you to easily add dynamic widgets to the page • Helps building interactive interface • Allows you to create your own widgets
What is Dijit • Dijit is the widgets library, layered on top of Dojo • Dojo is just framework (like Prototype) • Dijit contains dozens of widgets • Each dijit widget has attributes, methods and extension points • Attributes control behavior • Methods are functions you can call to control the widget • Extension points are functions the widget can call (event handlers)
Dojo Hello World • Sample "Hello World" Dojo application <style type="text/css"> @import "dojo/dijit/themes/tundra/tundra.css"; @import "dojo/dojo/resources/dojo.css"; </style> <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dijit.form.Button"); </script> … <button dojoType="dijit.form.Button" id="helloButton">Hello World!</button>
Dojo Hello World • The styles import the basic Dojo CSS and the Tundra Dojo Theme • The first script loads the main Dojo parser • Dojo library relies on custom tag attributes • The script attribute djConfig instructs how Dojo library will handle the code in the tag <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
Dojo Hello World • The script instructs Dojo library to load the button widget • All JS files loaded by Dojo are requested via Ajax • Loading the hello world application generates 19 Ajax requests <script type="text/javascript"> dojo.require("dijit.form.Button"); </script>
Dojo Hello World • The following HTML code creates button input • same as input type="button" • Deprecated • The dojo attributes covert it to Dojo button widget • Conversion is executed when loading the page, because the first script has been configured with "parseOnLoad:true" <button dojoType="dijit.form.Button" id="helloButton">Hello World!</button>
Connecting an Event • Dojo events can be attached as scripts in the very widget's HTML • Although type is not "text/javascript" the Dojo library parses it as JS code <button dojoType="dijit.form.Button" id="helloButton"> Hello World! <script type="dojo/method" event="onClick"> alert("You pressed the button"); </script> </button>
Using xhr Objects for AJAX • dojo.xhrGet and dojo.xhrPost are objects that cover all needed Ajax functionality • Example of fetching data from the server • First we need two functions to handle response and error <script type="text/javascript"> function helloCallback(data,ioArgs) { alert(data);} function helloError(data, ioArgs) { alert('Error retrieving data!');} </script>
Using xhr objects for AJAX • Next we need to instruct the button to send the request <button dojoType="dijit.form.Button" id="helloButton"> Hello World! <script type="dojo/method" event="onClick"> dojo.xhrGet({ url: 'response.txt', load: helloCallback, error: helloError }); </script> </button>
Sending Data Using xhr • We can specify data to send over the xhrGet object by adding content parameter to the constructor • dojo.byId replaces document.getElementById dojo.xhrGet({ url: 'response.txt', load: helloCallback, error: helloError, content: {name: dojo.byId('inp_name').value} }); … Enter your name: <input type="text" id="name" />
Sending Form Data with POST Request • dojo.xhrPost takes the same arguments as dojo.xhrGet • We can send complete form data using the form argument of the constructor dojo.xhrGet({ url: 'response.txt', load: helloCallback, error: helloError, form: 'myForm' }); … <form id='myForm' method='post'> … </form>
Dijit Form Widgets • Dojo contains several easy to use form widgets • Inline edit • Spin edit • Auto complete inputs • Date pickup • Resizable text area • And a lot more others
Dojo Data Stores • Dojo has powerful system for working with data stores over Ajax • Data store for example can be server-side script that returns complete list form database • The Dojo scripts request the data and display it • Allow you to easily filter items, execute queries over the data • Many data-store-driven components
Dojo Data Stores • Available data stores in Dojo: • ItemFileReadStore – read-only for work with JSON data • ItemFileWriteStore – write-only for JSON data • CsvStore – read only store for work with comma separated values formatted data • XmlStore – read/write store for basic XML data • and more • All stores classes are in dojo.data or dojox.data • You can define your own store
Creating Dojo Widget • Often components are close but not exactly what you need • You can extend existing dojo widget • Existing Dojo widgets are based over templates • Dojo replaces your HTML code with the template HTML • All templates are .html files
