1 / 16

Dojo Toolkit

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.

fordon
Download Presentation

Dojo Toolkit

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dojo Toolkit Dimiter Kunchev

  2. 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

  3. 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)

  4. 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>

  5. 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>

  6. 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>

  7. 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>

  8. 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>

  9. 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>

  10. 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>

  11. 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" />

  12. 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>

  13. 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

  14. 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

  15. 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

  16. 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

More Related