This tutorial guides you through the development of a feature-rich Dojo web application. This section explains the various concepts of the Dojo Toolkit that are covered in this tutorial as well as giving a tour of the sample application this tutorial will teach you to develop.
As you work through this tutorial, you will be putting into practice various features of the Dojo toolkit. The following sections outline the features from the different parts of the toolkit (Base, Dijit, and Dojox).
- DOM querying
- DOM manipulation
- Event handling (
- Read/Write data stores
- Layout components (
- Menus (Application and Context)
FilteringSelects, and Buttons
Although much of the functionality required for most web applications is included in the other parts of the Dojo Toolkit, sometimes you need additional features that aren't available out of the box. With other libraries, you'd often need to look for third-party plug-ins to gain access to such features. Dojo's community-driven DojoX extension library means that you can access many stable and experimental additional components without needing to look elsewhere. In this tutorial, I use the following DojoX component: DojoX.
The focus of this tutorial is on the creation of a full-featured sample application that includes various CRUD (Create, Update, Delete) operations to resemble a potential real-world application. The end result is a web-based contact management system that has desktop-like performance. Figure 1 shows how the final product will look in your web browser.
Figure 1. Final application main application
At the top of the application you have an application menu, with File and Edit options. These include sub-menus for the various operations you can perform, including adding new groups and contacts, and editing and deleting existing items.
On the left side of the application is a tree that displays the different groups available. Creating a new group results in the group being added to this tree. A context menu is available on the tree, so when you right-click an item in the tree you get options to rename or delete that group. Selecting (left-clicking) a group loads the contacts from that group on the right side. If you select the root node (Groups, which cannot be deleted), every contact, regardless of their group, is displayed on the right.
The right side of the application is split into two views, with the top section displaying a grid view of the contacts in the currently selected group, and the bottom half showing the details of the currently selected contact. Again, the grid features a context menu, which lets you edit, move, or delete a contact by right-clicking the contact and choosing the appropriate option.
The application makes extensive use of pop-up windows to provide additional functions, particularly in terms of creating, editing, and deleting items. An example of this is shown in Figure 2.
Figure 2. Dialog pop-up example: Editing contacts
The pop-up windows in the application fade out the main application in the background and display the pop-up window in focus over the application window. These windows typically take the shape of a form with components, including text boxes (with built-in "required" validation) and auto-complete drop-down lists. When deleting items, a confirmation window is shown that asks the user to confirm the deletion of the item. Pressing OK causes the item to be deleted; otherwise, the process is canceled.
I'm sure you'll agree that this application looks quite like a typical desktop application. Other features are also included, such as the ability to resize the split between the left and right side of the application, and the grid and preview panes on the right side. When you resize your browser window, the application resizes to take up the entire window. You should be able to take this sample application and build on its structure to create impressive looking results.