Mastering the Dojo Toolkit, part 8th: The Star of Tomorrow-DojoX

DojoX is an extension of Dojo's main function, which can be said to be a new feature and a new idea incubator. Here, you can find many of the most novel functional components. This article will explore some of the more mature components together with the reader.

As one of the most famous Ajax open source projects, Dojo not only gives web programmers free access to and use of their frameworks for Web application development, but also attracts a large number of developers to expand and develop new components. DojoX is generated in such a development community. DojoX is a collection of dojo-based open source projects that are well-creative and highly practical. These DojoX projects are likely to grow into a stable version that remains in DojoX, and some may migrate to Dojo Core or Dijit. This article will be a general overview of the project in DojoX, and with examples of some of the more distinctive projects, this article will introduce DATAGRID,CHARTING,GFX/GFX and DojoX widgets. Meet DojoX

At present, the DojoX project mainly expands the data structure and algorithm, processing and communication, utility tools, graphics API and Web UI.

Projects involving data structures and algorithms include DojoX collections, DojoX Encoding, and so on. Collections defines a number of very useful collections of data, including arrays (ArrayList), Binary trees (BinaryTree), dictionaries (Dictionary), iterators (Iterator), queues (queue), There are sequence lists (SortedList), stacks (stack). The use of these collections will greatly improve the efficiency of program development and the quality of the program. Encoding not only provides string and character encoding conversions, but also provides a symmetric algorithm for fugu (Blowfish) and MD5 Digital Digest algorithms.

DojoX data, Embed, I/O, JSON, XML, RPC, and so on, extend the processing and communication capabilities of Dojo. The data project provides support for more formats, including support for CSV files and APIs provided by Google, Picasa, and more.

DojoX's graphical API extends the animation of Dojo and provides support for 2D, 3D drawings. DojoX Fx offers a variety of animation effects through the expansion of Dojo Core and Dojo FX, while the GFX provides a range of methods for vector plotting, while Gfx3d provides some simple 3D drawing APIs.

The richer web UI and web widgets are also a highlight of DojoX. The powerful Grid, the practical charting, and the DojoX Image and DojoX Layout make the Web UI more enriched with dojo-based development. The DojoX Widgets also offers a richer range of widgets to meet the needs of most application development.

In addition to the projects described above, DojoX also collects a number of useful tools that allow readers to get more information on the Dojo API website. http://api.dojotoolkit.org/

Let's take a look at what DojoX has to offer us.

Note: The dojo version used in this tutorial is 1.2.1, due to the large changes in the 1.2.x version of Dojo and some components of DojoX, this article only applies to dojo1.2.x, for dojo1.0 developers This article is for reference only, some of the code does not run correctly

Back to top DojoX DataGrid

Grid is probably the most popular part of DojoX, and a grid is more like a web-based Excel component than a normal Web form part. This allows the Grid to handle more complex data presentation and data manipulation. In dojox1.2, the DataGrid class is added to the Dojox.grid package, which is the hardening and substitution of the original grid class, which is called the DataGrid because it is seamlessly integrated with Dojo's data manipulation class store. The previous Grid needs to wrap the store object as a model object before it can be used. If there is no special declaration below, all gird or DataGrid refer to the new DataGrid instead of the Grid1.0. Figure 1. DojoX DataGrid

Why do we need a Grid? The following is a list of the features of the grid: the user simply drags the scroll bar downward, the grid can load the delayed record, saves the paging operation, reduces the WEB-to-server interaction, improves performance, can arbitrarily add and delete cells, rows, or columns, and a statistical summary of the rows, the grid generates The grid goes beyond the function of a two-dimensional table, which can merge cells across rows or columns to meet the needs of different data fills, and row-and-column freezing functions make browsing data more flexible and convenient; The grid event uses a hook mechanism, and we can make changes to the style by Onstyle hooks; Cells are rich, all dijit parts can be used in cells, and cells can be clicked to edit state, different context menus can be set for different cells, grid nesting, that is, grids can nest other grids in cells, So that more complex applications can be formed;

In addition, the Grid has many other features, such as very useful even-line coloring, flexible selection functions, automatic column widths, data expansion/closing, and so on.

DataGrid Basics

To create a DojoX DataGrid, you need to have a general understanding of the basic work process of the DataGrid. The composition of a DataGrid instance is shown in the following figure, the DojoX DataGrid is the basis for using the DataGrid, so the associated DojoX package needs to be loaded when using the Grid, and a widget is usually made up of frames and styles, so we need to specify the DataGrid Style sheet and declares the DataGrid instance. The DataGrid instance combines a Structure and a Store. Structure is the definition of a header and a data model, and the Store is used to host the data. Figure 2. DataGrid Composition Structure

Let's start with our first DataGrid app. In order to create a DataGrid widget on a Web page, we start with the most basic two-dimensional table. First we need to load some styles to ensure that the DataGrid will display properly, listing 1. Listing 1: Loading styles

<style type= "Text/css" > 
 @import "dojox/grid/resources/tundragrid.css"; 
 @import "Dojo/resources/dojo.css"; 
 </style>

Here the path to the CSS file is relative to the test page relative to the path.

Before we start creating the Grid, we will also introduce Dojo's basic package, dojo.js, to load the other required dojo classes and load the Dojo.data.ItemFileReadStore class and the Dojox.grid.DataGrid class. Then we can start developing the first DataGrid. The first is the definition of layout, listing 2, Listing 2. Defining Layouts

var layout = [ 
		 {field: ' Pro_no ', Name: ' Product number '}, 
		 {field: ' Pro ', Name: ' Product '}, 
		 {field: ' Min_amou NT ', Name: ' Minimum Amount '}, 
		 {field: ' Max_amount ', Name: ' Maximum Amount '}, 
		 {field: ' Avg_amount ', Name: ' Averag E Amount '} 
 ];

This defines an array layout, where each member represents the definition of a column, where field specifies the data item to use, and the value needs to follow the JavaScript variable definition rule; name displays the names for that column. The following is the development of the store, listing 3 of the code listing 3. Development Store

var sampleData = { 
 identifier: ' Pro_no ', 
 label: ' Pro_no ', 
 items: [ 
 {pro_no: ' 2100 ', Pro: ' A Series ', Min_ amount:346, max_amount:931, avg_amount:647}, 
 {pro_no: ' 2200 ', Pro: ' B Series ', min_amount:301, max_amount:894, Avg_ amount:608}, 
 {pro_no: ' 2300 ', Pro: ' C Series ', min_amount:456, max_amount:791, avg_amount:532}, 
 {pro_no: ' 2400 ', Pro: ' D series ', min_amount:859, max_amount:2433, avg_amount:1840}, 
 {pro_no: ' 2500 ', Pro: ' E series ', Min_ amount:459, max_amount:1433, avg_amount:1040} 
 ] 
 }; 
 var jsonstore = new Dojo.data.ItemFileReadStore ({data:sampledata});

Here, we first define a JSON data sampleData, where identifier is a unique identifier for the entire row, so there is no repetition in the data, and the array items are the data that is displayed in the table, where the data must be fully compliant with the JSON syntax. Quotation marks must be used at both ends of the string, otherwise syntax errors will occur, and the insurance method is to enclose all values in quotation marks.

Next, we'll define the DataGrid instance in the Body element of the page, listing 4 in list 4. Defining a DataGrid instance

<div id= "Grid" dojotype= "Dojox.grid.DataGrid" store= "Jsonstore"
			 structure= "Layout" autowidth= "true" >< /div>

DOJOTYPE specifies that the Web part is Dojox.grid.DataGrid, the data uses the Jsonstore, the structure is layout, and the width is automatically adjusted. In this case, the first Grid has been developed and the complete code Listing 5 listing 5. Complete code

  
Running in the browser, the effect is as follows: Figure 3. First Grid Run result

Development of the DataGrid detailed

Creation of the DataGrid

In the development of the DataGrid, there are three ways to create a DataGrid instance, the first of which is the JavaScript creation structure, the HTML code creation instance, our first example is to use this method to implement;

The second is the creation of structures and instances by HTML code, in which we use table tags to define the structure of the Grid, eliminating the structure defined in JavaScript. The definition is very similar to the standard HTML notation, as in Listing 6, listing 6. Creating structures and instances from HTML code

<table id= "GridNode" jsid= "Grid" dojotype= "Dojox.grid.DataGrid"
 store= "Jsonstore" rowsperpage= "region=" Center > 
 <thead> 
   <tr> 
     <th field= "Pro_no" >product number</th> 
     <th Field= "Pro" >Product</th> 
     <th field= "Min_amount" >minimum amount</th> 
     <th field= " Max_amount ">maximum amount</th> 
     <th field=" Avg_amount ">average amount</th> 
   </tr > 
 </thead> 
 </table>
 
The third way is to define the DataGrid instance in pure JavaScript, and listing 7 declares that a DataGrid instance is created on the page node with ID gridnode when the page is loaded. Listing 7: Defining a DataGrid instance in a pure JavaScript way

Dojo.addonload (function () {  ///specifies
 that the page is loaded and executes var Grid = new Dojox.grid.DataGrid ({ 
	 query: {pro_no: ' * '}, 
	 ID: ' Grid2 ', 
	 store:jsonstore, 
	 structure: [ 
		 {field: ' Pro_no ', Name: ' Product number '}, 
		 {field: ' Pro ', Name: ' Product '}, 
		 {field: ' Min_amount ', Name: ' Minimum amount '}, 
		 {field: ' Max_amount ', Name: ' Maximum amount '}, 
		 {field: ' Avg_amount ', Name: ' Average amount '} 
 ],rowsperpage:20 
 	 }, ' GridNode ');  The set grid is displayed under the node with ID gridnode
 grid.startup ();  Start Grid 
 });
 
Grid1.2 can be easily combined with dojo containers in this way to dynamically create a page layout.

Structure detailed

The DataGrid can not only create a simple two-dimensional table, but also create complex tabular applications for structure design, as well as format or value each column. We'll make a simple change to the first Grid and get the code for listing 8. Listing 8. Modifying the first Grid

function Formatamount (value) {return ' $ ' + value; 
	 } function GetRange (RowIndex, item) {if (!item) {return '--';} 
	 var Grid = Dijit.byid (' grid '); 
	 var max = Grid.store.getValue (item, "Max_amount"); 
	 var min = grid.store.getValue (item, "Min_amount"); 
 return max-min;  } var subrow1 = [{field: ' Pro_no ', Name: ' Product number ', Rowspan:2}, {field: ' Pro ', Name: ' Product ', Rowspan:2 }, {field: ' Min_amount ', Name: ' Min. amount ', Formatter:formatamount,width: ' 80px '}, {field: ' Avg_amount ', Name: ' Av 
 Erage Amount ', Formatter:formatamount, Rowspan:2}, {field: ' Range ', Name: ' Range ', Get:getrange, rowspan:2}]; var subrow2 = [{field: ' Max_amount ', Name: ' Max. 
 Amount ', Formatter:formatamount},]; var layout = [Subrow1,subrow2];
 
Here, we redefine layout, dividing the layout into two sub-rows, where the child row 1 contains five fields, where Pro_no, Pro, Avg_amount, and range have a RowSpan attribute with a value of 2, which indicates that the three columns span two rows. The second line has only max_amount one field. At the same time, we specified the formatter function for three amount fields, and added the dollar sign before its value. The Get method is specified for the Range field to automatically get the difference between the maximum and minimum values.

The display looks like this: Figure 4. DataGrid Layout Example 1

In addition to the RowSpan property we can also use the ColSpan property, the use of these two properties is consistent with the use of HTML, and can be used in the HTML definition table structure, we look at the example of this header to understand the use of colSpan. Listing 9: Application of ColSpan

var structure = [[ 
	 {field: ' Type ', Name: ' Type ', Rowspan:2}, 
	 {field: ' Pro ', Name: ' Product ', Rowspan:2}, 
	 {fi Eld: ' Q20071 ', Name: ' Q1 ', formatter:formatamount}, 
	 {field: ' Q20072 ', Name: ' Q2 ', formatter:formatamount}, 
	 { Field: ' Q20073 ', Name: ' Q3 ', formatter:formatamount}, 
	 {field: ' Q20074 ', Name: ' Q4 ', formatter:formatamount} 
  ], [ 
	 {field: ' Y2007 ', Name: ' Year ', Formatter:formatamount, Colspan:4} 
 ];
 
Listing 9 shows the following results: Figure 5. DataGrid Layout Example 2

Use of the Store

The DataGrid uses the store as the data source, and in the example above, we are all constructed to write the data in JavaScript and then pass it to the store as the value of a data parameter. In most cases, however, the data is obtained dynamically from the server side via Ajax requests, which can also be done through the Store. We only need to pass in the URL address of the request when declaring the Store object, such as: New Dojo.data.ItemFileReadStore ({url: ' Jsondata.txt '}). The Store includes two classes of Dojo.data.ItemFileReadStore and Dojo.data.ItemFileWriteStore. We need to use Itemfilewritestore as the data source when we use the editing function of the DataGrid. Here's a multi-function DataGrid that uses an external data source to edit the cells, and to pop up the list menu by right-clicking the header. For the page to be correct, listing 10 loads the required CSS. Listing 10: Loading the required CSS

<style type= "Text/css" > 
 @import "dojox/grid/resources/tundragrid.css"; 
 @import "Dijit/themes/tundra/tundra.css"; 
 @import "Dojo/resources/dojo.css"; 
 </style>
 
The code in Listing 11 introduces the required dojo package and creates an editable DataGrid that is added to the page node with ID gridnode. In order for the column to have edit functionality, you only need to add a editable property with a value of true in the JSON definition that represents the column in the structure definition. Listing 11: Introducing the required Dojo packages

<script type= "Text/javascript" src= "Dojo/dojo.js" djconfig= "Parseonload:true" ></script> 
 < Script type= "Text/javascript" > 
 dojo.require ("Dojo.data.ItemFileWriteStore"); 
 Dojo.require ("Dojox.grid.DataGrid"); 
 The following two packages are used to create a right-click Bomb