This document provides a quick start guide for using the Dojo Toolkit version 1.8. It introduces key concepts for configuring and loading Dojo, creating AMD modules, making AJAX requests and promises, using data stores, handling events, and creating custom widgets. The guide is divided into short chapters with examples and links to further resources for each topic.
An overview of the practical and useful Dojo Toolkit for the Fairfield County JavaScript Meetup, Sept. 26 2012. A shout to Chris Barber and his excellent presentation which served as inspiration.
This document provides an overview and tutorial on the Dojo JavaScript framework. It covers:
- What is Dojo and its key features such as widgets, utilities, and being open source.
- The different components included with Dojo like trees, buttons, grids and more.
- How to install Dojo and include themes for a consistent look and feel.
- An example of a basic "Hello World" Dojo application to demonstrate usage.
Advanced guide to develop ajax applications using dojoFu Cheng
The document discusses developing Ajax applications using Dojo. It provides a brief history of web applications and introduces rich internet applications and Ajax. It then covers why Ajax is used, different Ajax application types, how Ajax changes web applications, and the anatomy of Ajax applications. The document also discusses semantic HTML, best practices for CSS, JavaScript concepts, DOM querying and manipulation using Dojo, efficient DOM techniques, events, and event propagation.
This document provides an overview of the client-side JavaScript frameworks jQuery and Dojo. It discusses what each framework is used for, how to get started with them, and provides examples of common tasks like DOM manipulation, events, animations, and AJAX calls. Key aspects covered include Dojo's modular toolkit structure, pre-built widgets, and drag-and-drop functionality. jQuery is introduced as a simpler framework for selecting elements and handling events. The document concludes that both frameworks accomplish similar goals but that Dojo offers more granular libraries, while jQuery may be easier to get started with.
Dojo Toolkit is a powerful JavaScript framework that provides a small and fast core along with modules for widgets, grids, mobile development, graphics, and visualization. It allows including modules asynchronously and supports backward compatibility. Examples demonstrate adding visual effects and waiting for the DOM to load before manipulating elements.
Rich internet application development using the dojo toolkitalexklaeser
The Dojo toolkit is a modular JavaScript library designed to ease and speed up the development of JavaScript-/AJAX-based websites and applications. This presentation (given at the FrOSCon 2011) will give an overview over the toolkit together with a short survey over
This document provides an overview of using Hibernate, an open source Java object-relational mapping tool. It discusses typical problems with JDBC code, how Hibernate addresses these issues, and provides sample code for mapping Java objects to database tables and performing queries and transactions with Hibernate. The document also outlines steps for a basic Hibernate tutorial, including database design, mapping classes, configuration, and data access objects.
The document provides an overview and examples of using the jQuery UI library to add rich interfaces to web applications. It discusses widgets like tabbed panels, accordion panels, and date pickers. It covers downloading and installing jQuery UI, and provides code examples for creating static and dynamic tabbed panels and accordion panels using jQuery UI.
An overview of the practical and useful Dojo Toolkit for the Fairfield County JavaScript Meetup, Sept. 26 2012. A shout to Chris Barber and his excellent presentation which served as inspiration.
This document provides an overview and tutorial on the Dojo JavaScript framework. It covers:
- What is Dojo and its key features such as widgets, utilities, and being open source.
- The different components included with Dojo like trees, buttons, grids and more.
- How to install Dojo and include themes for a consistent look and feel.
- An example of a basic "Hello World" Dojo application to demonstrate usage.
Advanced guide to develop ajax applications using dojoFu Cheng
The document discusses developing Ajax applications using Dojo. It provides a brief history of web applications and introduces rich internet applications and Ajax. It then covers why Ajax is used, different Ajax application types, how Ajax changes web applications, and the anatomy of Ajax applications. The document also discusses semantic HTML, best practices for CSS, JavaScript concepts, DOM querying and manipulation using Dojo, efficient DOM techniques, events, and event propagation.
This document provides an overview of the client-side JavaScript frameworks jQuery and Dojo. It discusses what each framework is used for, how to get started with them, and provides examples of common tasks like DOM manipulation, events, animations, and AJAX calls. Key aspects covered include Dojo's modular toolkit structure, pre-built widgets, and drag-and-drop functionality. jQuery is introduced as a simpler framework for selecting elements and handling events. The document concludes that both frameworks accomplish similar goals but that Dojo offers more granular libraries, while jQuery may be easier to get started with.
Dojo Toolkit is a powerful JavaScript framework that provides a small and fast core along with modules for widgets, grids, mobile development, graphics, and visualization. It allows including modules asynchronously and supports backward compatibility. Examples demonstrate adding visual effects and waiting for the DOM to load before manipulating elements.
Rich internet application development using the dojo toolkitalexklaeser
The Dojo toolkit is a modular JavaScript library designed to ease and speed up the development of JavaScript-/AJAX-based websites and applications. This presentation (given at the FrOSCon 2011) will give an overview over the toolkit together with a short survey over
This document provides an overview of using Hibernate, an open source Java object-relational mapping tool. It discusses typical problems with JDBC code, how Hibernate addresses these issues, and provides sample code for mapping Java objects to database tables and performing queries and transactions with Hibernate. The document also outlines steps for a basic Hibernate tutorial, including database design, mapping classes, configuration, and data access objects.
The document provides an overview and examples of using the jQuery UI library to add rich interfaces to web applications. It discusses widgets like tabbed panels, accordion panels, and date pickers. It covers downloading and installing jQuery UI, and provides code examples for creating static and dynamic tabbed panels and accordion panels using jQuery UI.
This document provides an introduction to creating a new language for a Service Creation Environment (SCE) using Sixlabs' Generador de Ambientes de Alta Productividad (GAAP). It discusses key concepts for building an SCE like properties, dialogs, entities and functional code. It also covers the tradeoff between productivity and flexibility in entity design. The document then demonstrates creating a new Logo language for an SCE, including defining entities, creating dialogs and generating functional code templates using XSLT.
jOOQ is an API that allows Java programs to interact with SQL databases in a typesafe and fluent way. It generates Java code from the database schema that can be used to write queries in a Java-like syntax. Queries are built up fluently and can then be executed to fetch results. While JDBC and JPA provide ways to access databases from Java, jOOQ aims to be simpler to use for basic CRUD operations and more suitable for complex reporting queries that involve multiple tables and aggregations.
This was my entities and fields presentation from Drupalcamp Colorado 2020.
http://drupalcampcolorado.org/sessions/drupal-7-entities-and-fields-transitioning-d7
This document provides an introduction to Hibernate and demonstrates how to perform basic CRUD (create, read, update, delete) operations using Hibernate. It shows how to define a persistent Message class and mapping, save a message to the database, retrieve all messages, and update a message. It also discusses Hibernate configuration options like using hibernate.properties vs hibernate.cfg.xml, and how Hibernate can be used in both managed and non-managed environments.
This document provides instructions for setting up an EJB 3 project that integrates with the Struts web framework. It describes creating entity beans for Book and Customer objects and defining the relationship between them. It also covers implementing a stateless session bean with local and remote interfaces to perform basic CRUD operations using the entity manager. The tutorial uses PostgreSQL as the database and provides code samples for the entity beans, session bean, and persistence configuration file.
This document discusses JNDI (Java Naming and Directory Interface) and how it provides a common way to access distributed and local resources for enterprise applications. It covers the basics of JNDI, including getting an initial context, looking up objects in the JNDI tree, adding and removing objects, and using JNDI for local data access and singletons. It also discusses how JNDI can be used with CORBA objects and for narrowing object references.
This document discusses how browser engines work. It explains that browser engines parse HTML and CSS to build a DOM tree and render tree. It then lays out the steps involved, including making network requests, applying stylesheets, triggering reflows and repaints when the trees are updated, running JavaScript, and decoding images and other sub-resources. The document provides an overview of the different components involved, from parsing to rendering to JavaScript execution. It aims to introduce how browser engines function at a high level.
This document provides information about the Dojo JavaScript toolkit, including what it is, its features, architecture, and how to get started with it. Some key points:
- Dojo is an open source JavaScript toolkit that provides components for building rich web applications. It includes widgets, utilities, and AJAX libraries.
- Its core provides functionality like remote calls, DOM manipulation, and CSS handling. Dijit is its widget library, and DojoX contains extensions.
- Dojo supports asynchronous loading, internationalization, accessibility, and can build desktop-like web apps. It uses the Asynchronous Module Definition (AMD) API.
This document provides a tutorial on the Dojo JavaScript framework. It introduces Dojo, describes its key features like widgets, utilities and AJAX libraries. It covers loading and installing Dojo, creating a basic "Hello World" button widget, and compares Dojo to other frameworks like jQuery and YUI.
The document discusses Dojo Web Builder, a tool that allows users to easily build Dojo applications in the cloud without needing to install build tools locally. It provides a simple interface where users can select Dojo packages and modules to include, customize build settings, and receive an optimized built file. The tool is hosted on Amazon EC2 and uses a REST API and asynchronous JavaScript builder to process builds. Statistics show it is gaining popularity with over 2,700 builds since launch. Future plans include full AMD support and a Dojo package repository.
Social Connections VI — IBM Connections Extensions and Themes DemystifiedClaudio Procida
IBM Connections uses JavaScript extensively to build its applications and UI components. JavaScript resources are centrally served by the Common application and dynamically generated into layers based on dependencies. Modules can be written using the AMD or legacy Dojo format and aggregated. Extensions are supported through extension points like web bundles, themes, and module bindings. Developers can customize or extend Connections using these extension mechanisms.
The document introduces Dojo, an open source JavaScript toolkit for building modern web applications. It provides core libraries for DOM manipulation, events, Ajax, and more. Dojo also includes pre-built widgets (Dijit) and mechanisms for creating custom widgets. The document discusses Dojo's namespaces, communication capabilities, objects and classes, internationalization support, and themes.
Global objects in Node.js provide convenient access to commonly used functions and properties without requiring explicit declaration. Some key global objects include __filename and __dirname, which provide file path information, as well as console, process, module, and require, which enable logging, system interaction, and module loading. Additional global functions like setTimeout allow executing code after a delay. TextEncoder and TextDecoder help with text encoding, while URLSearchParams facilitates URL parameter handling. Mastering global objects is important for developing efficient Node.js applications.
The document discusses integrating Inversion of Control (IOC) concepts into JavaScript applications. It describes how to build modular components using Asynchronous Module Definition (AMD) and CommonJS module formats. It advocates for separating components from their dependencies and connections using an application composition layer. This allows for looser coupling between components, improved testability, and more flexibility to change implementations. It also covers topics like asynchronous programming, dependency injection, and aspect-oriented programming as ways to further decouple components and manage complexity in JavaScript applications.
Dojo Toolkit from a Flex developer's perspectivecjolif
The document summarizes a presentation given by a Flex developer about their experience transitioning to using the Dojo toolkit. Some key points of comparison between Flex and Dojo include:
- Dojo has a more loose and flexible component model compared to Flex, which can be both an advantage and disadvantage.
- Dojo lacks some of the standardized component lifecycle and property validation mechanisms that Flex provides.
- Both frameworks provide many predefined UI components, but Dojo's components are more varied in their implementation patterns.
- Custom component authoring is similar between the frameworks when using HTML templates, but Dojo lacks an equivalent to Flex's skinning system for complex graphics components.
- Dojo has advantages for ext
This presentation discusses the most neglected quality axis : code documentation. See good and bad examples, best practices on documenting code and why you should try not to ignore it :)
Presentation date: 2014-11-28
Place: Thessaloniki Java Meetup Group (SKG)
Introduction Dojo Toolkit & IBM Lotus DominoRolf Kremer
This presentation shows an introduction to the usage of the dojo toolkit in an IBM Lotus Domino application. The presentation based on a three hour workshop in which the sample application 'Phone Directory' was developed.
Introduction to the Dojo Javascript Toolkit, http://dojotoolkit.org.
Originally presented at the Denver Open Source User's Group, http://www.denveropensource.org
The document provides an overview of the Dojo JavaScript toolkit and its core features. It summarizes Dojo's modular design, DOM manipulation utilities like dojo.query, animation capabilities via dojo.NodeList-fx, class declaration syntax, event handling with dojo.connect, and AJAX functions like dojo.xhrGet. It also describes Dojo widgets from the Dijit library for UI elements like tabs and forms, and DojoX extensions for charting, grids, and other experimental features. The document includes code examples for many of these Dojo capabilities.
This document provides an introduction to creating custom widgets using the Web Tools Platform (WTP) and the Dojo JavaScript library. It discusses loading Dojo, using modules and classes, and creating a custom widget with a class and template. The document encourages readers to get involved by joining a newsgroup or filing bugs to provide feedback on WTP.
This tutorial provides an overview of creating a sample Django application that demonstrates basic components including models, views, templates, URLs, forms, and the admin site. Key steps covered include:
- Setting up a Django project in Eclipse with Python, Django, SQLite
- Creating models, views, URLs, and templates
- Using the Django admin site to populate the database
- Displaying model data in templates
- Creating and processing a basic form
This document provides an introduction to creating a new language for a Service Creation Environment (SCE) using Sixlabs' Generador de Ambientes de Alta Productividad (GAAP). It discusses key concepts for building an SCE like properties, dialogs, entities and functional code. It also covers the tradeoff between productivity and flexibility in entity design. The document then demonstrates creating a new Logo language for an SCE, including defining entities, creating dialogs and generating functional code templates using XSLT.
jOOQ is an API that allows Java programs to interact with SQL databases in a typesafe and fluent way. It generates Java code from the database schema that can be used to write queries in a Java-like syntax. Queries are built up fluently and can then be executed to fetch results. While JDBC and JPA provide ways to access databases from Java, jOOQ aims to be simpler to use for basic CRUD operations and more suitable for complex reporting queries that involve multiple tables and aggregations.
This was my entities and fields presentation from Drupalcamp Colorado 2020.
http://drupalcampcolorado.org/sessions/drupal-7-entities-and-fields-transitioning-d7
This document provides an introduction to Hibernate and demonstrates how to perform basic CRUD (create, read, update, delete) operations using Hibernate. It shows how to define a persistent Message class and mapping, save a message to the database, retrieve all messages, and update a message. It also discusses Hibernate configuration options like using hibernate.properties vs hibernate.cfg.xml, and how Hibernate can be used in both managed and non-managed environments.
This document provides instructions for setting up an EJB 3 project that integrates with the Struts web framework. It describes creating entity beans for Book and Customer objects and defining the relationship between them. It also covers implementing a stateless session bean with local and remote interfaces to perform basic CRUD operations using the entity manager. The tutorial uses PostgreSQL as the database and provides code samples for the entity beans, session bean, and persistence configuration file.
This document discusses JNDI (Java Naming and Directory Interface) and how it provides a common way to access distributed and local resources for enterprise applications. It covers the basics of JNDI, including getting an initial context, looking up objects in the JNDI tree, adding and removing objects, and using JNDI for local data access and singletons. It also discusses how JNDI can be used with CORBA objects and for narrowing object references.
This document discusses how browser engines work. It explains that browser engines parse HTML and CSS to build a DOM tree and render tree. It then lays out the steps involved, including making network requests, applying stylesheets, triggering reflows and repaints when the trees are updated, running JavaScript, and decoding images and other sub-resources. The document provides an overview of the different components involved, from parsing to rendering to JavaScript execution. It aims to introduce how browser engines function at a high level.
This document provides information about the Dojo JavaScript toolkit, including what it is, its features, architecture, and how to get started with it. Some key points:
- Dojo is an open source JavaScript toolkit that provides components for building rich web applications. It includes widgets, utilities, and AJAX libraries.
- Its core provides functionality like remote calls, DOM manipulation, and CSS handling. Dijit is its widget library, and DojoX contains extensions.
- Dojo supports asynchronous loading, internationalization, accessibility, and can build desktop-like web apps. It uses the Asynchronous Module Definition (AMD) API.
This document provides a tutorial on the Dojo JavaScript framework. It introduces Dojo, describes its key features like widgets, utilities and AJAX libraries. It covers loading and installing Dojo, creating a basic "Hello World" button widget, and compares Dojo to other frameworks like jQuery and YUI.
The document discusses Dojo Web Builder, a tool that allows users to easily build Dojo applications in the cloud without needing to install build tools locally. It provides a simple interface where users can select Dojo packages and modules to include, customize build settings, and receive an optimized built file. The tool is hosted on Amazon EC2 and uses a REST API and asynchronous JavaScript builder to process builds. Statistics show it is gaining popularity with over 2,700 builds since launch. Future plans include full AMD support and a Dojo package repository.
Social Connections VI — IBM Connections Extensions and Themes DemystifiedClaudio Procida
IBM Connections uses JavaScript extensively to build its applications and UI components. JavaScript resources are centrally served by the Common application and dynamically generated into layers based on dependencies. Modules can be written using the AMD or legacy Dojo format and aggregated. Extensions are supported through extension points like web bundles, themes, and module bindings. Developers can customize or extend Connections using these extension mechanisms.
The document introduces Dojo, an open source JavaScript toolkit for building modern web applications. It provides core libraries for DOM manipulation, events, Ajax, and more. Dojo also includes pre-built widgets (Dijit) and mechanisms for creating custom widgets. The document discusses Dojo's namespaces, communication capabilities, objects and classes, internationalization support, and themes.
Global objects in Node.js provide convenient access to commonly used functions and properties without requiring explicit declaration. Some key global objects include __filename and __dirname, which provide file path information, as well as console, process, module, and require, which enable logging, system interaction, and module loading. Additional global functions like setTimeout allow executing code after a delay. TextEncoder and TextDecoder help with text encoding, while URLSearchParams facilitates URL parameter handling. Mastering global objects is important for developing efficient Node.js applications.
The document discusses integrating Inversion of Control (IOC) concepts into JavaScript applications. It describes how to build modular components using Asynchronous Module Definition (AMD) and CommonJS module formats. It advocates for separating components from their dependencies and connections using an application composition layer. This allows for looser coupling between components, improved testability, and more flexibility to change implementations. It also covers topics like asynchronous programming, dependency injection, and aspect-oriented programming as ways to further decouple components and manage complexity in JavaScript applications.
Dojo Toolkit from a Flex developer's perspectivecjolif
The document summarizes a presentation given by a Flex developer about their experience transitioning to using the Dojo toolkit. Some key points of comparison between Flex and Dojo include:
- Dojo has a more loose and flexible component model compared to Flex, which can be both an advantage and disadvantage.
- Dojo lacks some of the standardized component lifecycle and property validation mechanisms that Flex provides.
- Both frameworks provide many predefined UI components, but Dojo's components are more varied in their implementation patterns.
- Custom component authoring is similar between the frameworks when using HTML templates, but Dojo lacks an equivalent to Flex's skinning system for complex graphics components.
- Dojo has advantages for ext
This presentation discusses the most neglected quality axis : code documentation. See good and bad examples, best practices on documenting code and why you should try not to ignore it :)
Presentation date: 2014-11-28
Place: Thessaloniki Java Meetup Group (SKG)
Introduction Dojo Toolkit & IBM Lotus DominoRolf Kremer
This presentation shows an introduction to the usage of the dojo toolkit in an IBM Lotus Domino application. The presentation based on a three hour workshop in which the sample application 'Phone Directory' was developed.
Introduction to the Dojo Javascript Toolkit, http://dojotoolkit.org.
Originally presented at the Denver Open Source User's Group, http://www.denveropensource.org
The document provides an overview of the Dojo JavaScript toolkit and its core features. It summarizes Dojo's modular design, DOM manipulation utilities like dojo.query, animation capabilities via dojo.NodeList-fx, class declaration syntax, event handling with dojo.connect, and AJAX functions like dojo.xhrGet. It also describes Dojo widgets from the Dijit library for UI elements like tabs and forms, and DojoX extensions for charting, grids, and other experimental features. The document includes code examples for many of these Dojo capabilities.
This document provides an introduction to creating custom widgets using the Web Tools Platform (WTP) and the Dojo JavaScript library. It discusses loading Dojo, using modules and classes, and creating a custom widget with a class and template. The document encourages readers to get involved by joining a newsgroup or filing bugs to provide feedback on WTP.
This tutorial provides an overview of creating a sample Django application that demonstrates basic components including models, views, templates, URLs, forms, and the admin site. Key steps covered include:
- Setting up a Django project in Eclipse with Python, Django, SQLite
- Creating models, views, URLs, and templates
- Using the Django admin site to populate the database
- Displaying model data in templates
- Creating and processing a basic form
Slides from talk "Getting Started with Dojo Toolkit" at Cologne.JS in August 2010
some sample Dojo Code from my presentation is on http://code.google.com/p/dojodemo/
Cologne.JS is a local JavaScript user group: http://colognejs.de/
Dojo is an open source JavaScript framework for building interactive web applications. It includes utilities for DOM manipulation, Ajax requests, events, animation and more. Dojo has adopted the AMD (Asynchronous Module Definition) standard, allowing code to be organized into modular and reusable components. Popular Dojo components include Dijit for widgets and Dojox for extensions. Common tasks like DOM selection, event handling and Ajax calls can be simplified using Dojo utilities.
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityTeamstudio
IBM Champion Johnny Oldenburger from Kranendonk Smart Robotics shows how to develop very user friendly and fully responsive web applications (with XPages of course!) by making use of Bootstrap and jQuery Plugins.
He shows how to use the Select2, DateTimePickers, Multiselect, Bootstrap-select, Modals, Popovers, and Notifications plugins to deliver the ultimate in usability. Learn how to solve the AMD issue when incorporating JavaScript libraries in XPages. Go beyond the basics and create applications that nobody ever thought possible using XPages.
Jdom how it works & how it opened the java processHicham QAISSI
The document discusses JDOM, an open source Java library for parsing, manipulating, and outputting XML documents. It provides a straightforward API for working with XML in Java without requiring knowledge of DOM or SAX. JDOM aims to simplify common XML tasks, integrate with existing standards, and stay up to date with evolving XML specifications. It represents an XML document using lightweight Java objects that can be easily traversed, modified, and converted between DOM, SAX, and XML formats.
The document discusses the Dojo Toolkit, an open source JavaScript library. It provides concise summaries of key points:
- Dojo Toolkit is a JavaScript library that aims to solve browser incompatibility problems and allows building dynamic web page capabilities. It supports AJAX and handles browser differences.
- The toolkit includes powerful features like AJAX I/O, graceful degradation, bookmarking support, an aspect-oriented event system, markup-based UI construction with widgets, and animation capabilities.
- Dojo libraries are organized into packages that can be imported and loaded dynamically, addressing needs like events, DOM manipulation, drag and drop, and more. The event system provides unified handling of DOM and programmatic events.
3. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
1. Introduction
The Dojo Toolkit (DT) is a JavaScript toolkit that gives to web developers a huge amount of
functionalities and facilities to create rich web applications quickly. One of the big advantages of
Dojo is to provide a uniform and coherent interface upon most famous browsers enabling
developers to concentrate their efforts on application functionalities instead of solving cross
browser issues. The Dojo Toolkit is divided in three projects:
1. dojo: which includes all basic functionalities to manage Document Object Model (DOM),
arrays, events, asynchronous requests, Cascading Style Sheet (CSS) and more.
2. dijit: it is a rich and well tested set of widgets ready to use. Dijit contains form controls,
data grid and a lot of UI utilities. All widgets are tested to guarantee accessibility.
3. dojox: it provides advanced functionalities and widgets. For instance, in dojox we can
find widgets and utilities to build mobile web applications. Sometimes components of
dojox are experimental.
The main purpose of this guide is to present the most important aspects and functionalities of
Dojo Toolkit providing a guided study path in order to obtain the maximum benefit by the official
Dojo tutorials. All chapters contain links to further resources. Of course, this is not an exhaustive
guide, but only a good starting point to study DT.
The challenge of this guide is to provide self contained (or at least loosely coupled) chapters
long no more than two pages.
Enjoy!
3
4. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
2. Configure and load Dojo Toolkit
Example: 00 - dojoConfig.html
In order to use DT we have to create a project structure like this (Note: this is only a
suggestion):
myProject
|- css
|- img
|- js
| |- lib
| | |- dijit
| | |- dojo
| | `- dojox
| `- myWidgets
`- index.html
Based on this directory layout, we can define the DT configuration in our index.html file. We will
use HTML5 as markup language.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Dojo Toolkit Configuration</title>
</head>
<body>
<h1 id="test"></h1>
<script>
dojoConfig ={
baseUrl: "js",
isDebug: true, // enables debug
async: true, // enables AMD loader
packages: [
{
"name": "dojo",
"location": "lib/dojo"
}
]
};
</script>
<script src="js/lib/dojo/dojo.js"></script>
<script>
require(["dojo/dom", "dojo/dom-attr"], function(dom, attr){
attr.set(dom.byId("test"), "innerHTML", "Hello, World!");
});
</script>
</body>
</html>
In the first script tag we define the dojoConfig object that contains all configuration
4
5. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
parameters used by the Dojo core.
• baseUrl: specify which is the base path to find JavaScript files.
• isDebug: enable/disable debug messages. During development should be set on true.
• async: enable/disable asynchronous loading of Dojo modules. It should always set on
true.
• packages: specify an alias and the real path (based on baseUrl) of a package.
In the second script tag we load the Dojo core.
In the third script tag we write our app: we need to specify which modules we need using the
require function.
In the example, our application needs the dojo/dom and dojo/dom-attr modules. The
dojo/dom module gives DOM functionalities such as to retrieve tags by id (dom.byId).
The dojo/dom-attr provides a unif ied API to deal with DOM node attribute and property
values. We use it to set the innerHTML attribute of the given node.
2.1. Resources
• dojoConfig: configuring Dojo, http://dojotoolkit.org/reference-
guide/1.8/dojo/_base/config.html#explicitly-creating-a-dojoconfig-object-before-including-
the-dojo-core
• require: the Dojo AMD Loader, http://dojotoolkit.org/reference-
guide/1.8/loader/amd.html#the-amd-api
• dom.byId: a simple alias to “document.getElementById”, http://dojotoolkit.org/reference-
guide/1.8/dojo/dom.html#dojo-dom-byid
• dojo/dom-attr: a unif ied API to deal with DOM node attribute and property values,
http://dojotoolkit.org/reference-guide/1.8/dojo/dom-attr.html#dojo-dom-attr-get
5
6. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
3. AMD: Asynchronous Module Definition
Example: 01 - AMD Module.html
A DT module is a piece of code that does something. Of course a module can use (require)
other modules and a set of modules constitutes a package. First of all we have to tell to the
loader in which directory our modules are. Based on the project structure exposed in the
previous chapter, we will save our modules in the myWidgets directory. To configure the loader,
we have to add a package configuration to the packages array:
packages: [
{
"name": "dojo",
"location": "lib/dojo"
},
{
"name": "my",
"location": "lib/myWidgets"
}
]
The module we are creating is called Circle (save the file as Circle.js) and calculate area
and circumference. Here is the code:
define(["dojo/_base/declare"],
function(declare){
return declare("myWidgets.Circle", null, {
_PI: null,
_radius: null,
constructor: function(/*integer*/ radius){
this._radius = radius;
this._PI = Math.PI;
},
getArea: function(){
return Math.pow(this._radius, 2) * this._PI;
},
getCircumference: function(){
return 2 * this._PI * this._radius;
}
});
}
);
The define function allows us to define our module. The first argument contains all required
modules: in our case we need only dojo/_base/declare, that is a module that enables to
create a class in the Dojo way. The second parameter is a function that maps required modules
6
7. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
to their aliases to be used inside our code.
The declare function takes three parameters: a string as the name of the module we are
creating, an array of other modules (superclasses) to be extended (in our case is null), an
object that represent our class.
The function constructor defines the constructor of the class. Properties and methods that
starts with _ (underscore) indicates private properties and methods by convention.
Now we are able to use our module in our page:
require(["dojo", "dojo/dom-attr", "my/Circle"],
function(dojo, attr, Circle){
var circle = new Circle(4);
var result = "Circumference: " + circle.getCircumference() +
"<br>Area: " + circle.getArea();
attr.set(dojo.byId("test"), "innerHTML", result);
}
);
3.1. Resources
• define: define AMD modules, http://dojotoolkit.org/documentation/tutorials/1.8/modules/
• declare: create a class, http://dojotoolkit.org/documentation/tutorials/1.8/declare/
7
8. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
4. AJAX: Request and Promise
Example: 02 - Request Promise.html
Modern web applications perform asynchronous requests to the server. DT provides a module
called dojo/request to execute this kind of requests. In the example, we request information
about books. The book.json file contains data with the following structure:
[
{
"ID": 1,
"Title": "Book 1 Title",
"Publisher": "Book 1 Publisher",
"City": "Book 1 City",
"Authors": "Author 1, Author 2",
"Year": "2001"
},
...
]
Our script reads the data and prints the title of each book on the page.
require(["dojo", "dojo/_base/array", "dojo/dom-construct",
"dojo/request"],
function(dojo, array, dom, request){
var getData = request.get("book.json", {
handleAs: "json"
});
getData.then(function(response){
var container = dojo.byId("test");
array.forEach(response, function(book, index){
dom.create("div", {"innerHTML": book.Title}, container);
});
});
}
);
The get() method returns a Promise object. Once the request was performed it is possible to
call a function in order to manage the response. The method then() enables us to specify a
callback to execute when data are available (Note: .addCallback() and .addErrback()
are no longer available).
4.1. Promise
The dojo/promise module manages communication between asynchronous threads. When
we call request.get(url, options), a promise object is returned. Sometimes we have
to request multiple resources and wait that all are retrieved. The promise module provides a
useful method function called all() (Note: dojo/promise/all replaces
8
9. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
dojo/DeferredList). For example:
require(["dojo/promise/all", "dojo/request"], function(request, all){
var promise1 = request.get("book.json", {handleAs: "json"});
var promise2 = request.get("video.json", {handleAs: "json"});
all([promise1, promise2]).then(function(results){
// results will be an Array
});
4.2. Resources
• dojo/request: the Dojo IO/Request API, http://dojotoolkit.org/reference-
guide/1.8/dojo/request.html
• dojo/promise: communication between asynchronous threads,
http://dojotoolkit.org/reference-guide/1.8/dojo/promise.html
• dojo/promise/all: manages multiple promises, http://dojotoolkit.org/reference-
guide/1.8/dojo/promise/all.html
9
10. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
5. Data store
Example: 03 - Data Store.html
DT gives an elegant way to manage a data collection. For example, once we retrieve data in
JSON format, we can create a data store and query it as we do with a DBMS.
require(["dojo/store/Memory", "dojo/request"],
function(Memory, request){
var books = null;
var getData = request.get("book.json", {handleAs: "json"});
getData.then(function(response){
books = new Memory({"data": response, "idProperty": "ID"});
// retrieves all books
var allBooks = books.query({});
// retrives book with ID 1
var book1 = books.get(1); // ID = 1
// save updated data on the store
book1.Title = "Title updated";
books.put(book1);
var newBook = {
"ID": 10,
"Title": "Unofficial Dojo Toolkit 1.8 Quick Start Guide",
"Publisher": "Elia Contini",
"City": "Giubiasco",
"Authors": "Elia Contini",
"Year": "2012"
}
// insert a new book
books.add(newBook);
// remove book with id 9
books.remove(9);
});
});
When we create a Memory store we have to specify two parameters:
• data: an array of objects;
• idProperty: the name of the property to use as the identif ier (key).
10
11. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
5.1. Resources
• dojo/store: an uniform interface for the access and manipulation of stored data,
http://dojotoolkit.org/reference-guide/1.8/dojo/store.html
• dojo/store/Memory: an object store wrapper for JavaScript/JSON available directly with
an array, http://dojotoolkit.org/reference-guide/1.8/dojo/store/Memory.html
11
12. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
6. Managing events
Example: 04 - Events.html
From version 1.8, Dojo Toolkit provides a new unif ied module to manage events. In the example
we can see how to use the on module. The HTML code is:
<button id="myButton">Click me!</button>
and the Dojo stuff are:
require(["dojo/dom", "dojo/on"],
function(dom, on){
var btn = dom.byId("myButton");
on(btn, "click", function(event){
console.log("You click me!", event);
});
}
);
6.1. Resources
• Events: the official tutorial, http://dojotoolkit.org/documentation/tutorials/1.8/events/
• dojo/on: general-purpose event handler, http://dojotoolkit.org/reference-
guide/1.8/dojo/on.html
12
13. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
7. Creating widgets
Example: 05 - Custom Widget.html
From version 1.6, the Dojo team started the refactoring of Dojo Toolkit in order to make it
compliant with the CommonJS AMD API. AMD allows to create more efficient scripts, to use
different toolkits in the same web application avoiding conflicts and much more. In version 1.7,
the refactoring has been completed and this release is also the base to start the migration to
Dojo 2.0. Of course, in Dojo 1.8 we have to write AMD module.
We will create a simple widget that displays the classical Hello, world!
Based on the directory layout that we saw in chapter 2, we create a file called HelloWorld.js
and save it in myProject/lib/myWidgets/ directory.
Inside HelloWorld.js we can write these lines of code:
define([
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/_base/declare",
"dojo/dom-attr"
],
function(_Widget, _Templated, declare, domAttr){
return declare("myWidgets.HelloWorld", [_Widget, _Templated],{
templateString: '<div data-dojo-attach-point="_box"></div>',
postCreate: function(){
domAttr.set(this._box, "innerHTML", "Hello, World!");
}
});
});
Now we have to set the dojoConfig properly.
packages: [
{
"name": "dojo",
"location": "lib/dojo"
},
{
"name": "dijit",
"location": "lib/dijit"
},
{
"name": "my",
"location": "lib/myWidgets"
}
]
13
14. Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide
And to see the result, we have to write this piece of code in our page:
require(["dojo", "dojo/dom", "my/HelloWorld"],
function(dojo, dom, HelloWorld){
var helloWorld = new HelloWorld();
helloWorld.placeAt(dom.byId("test"));
helloWorld.startup();
}
);
7.1. Resources
• dojo/dom-attr: the core Dojo DOM attributes API, http://dojotoolkit.org/reference-
guide/1.8/dojo/dom-attr.html
• Asynchronous Module Definition (AMD): Notes on Dojo,
http://blog.eliacontini.info/post/16352021810/notes-on-dojo-asynchronous-module-
definition-amd
• Creating Template-based Widgets: the official tutorial,
http://dojotoolkit.org/documentation/tutorials/1.8/templated/
14