Introduction to the Dojo toolkit

[复制链接]
查看11 | 回复8 | 2007-1-24 12:56:49 | 显示全部楼层 |阅读模式
In the Web 1.0 world, the common Java application architecture called for implementing business and application flow logic with Java EE on the server side. Web application developers typically used JavaScript only for input validation and to display error messages to users. Accordingly, most Web 1.0 applications used some kind of Model-View-Controller (MVC) framework -- such as Struts, JavaServer Faces (JSF), or Spring MVC -- on the server side, but few needed a JavaScript framework for client-side programming.
Web 2.0 has ushered in a very different programming model, where much of the application flow and business logic is developed using JavaScript on the client side. We commonly use JavaScript code for tasks such as:
* Making asynchronous requests to the server side
* Document object model (DOM) manipulation and event-handling logic that works across multiple browsers
* Internationalization
* Logging
You can either write and maintain this infrastructure code on your own or take the less painful route of using a JavaScript library. One of the more capable entries in this space is the Dojo toolkit, an open source JavaScript framework that you can use to create free or commercial applications. This article introduces you to Dojo's core features and widget library; walks you through installing and setting up a JavaScript development and debugging environment (using Dojo and Firebug); and gets you started with building a sample application using Dojo. You'll also learn about Dojo's support for object-oriented programming in JavaScript (which is based on familiar concepts such as classes, constructors, and inheritance), and get a quick introduction to Dojo modules.
回复

使用道具 举报

千问 | 2007-1-24 12:56:49 | 显示全部楼层
Dojo at a glance
There currently are quite a few open source and commercial JavaScript frameworks available, including Prototype, EXTJS, YUI, and jQuery. Whereas most JavaScript frameworks focus on simplifying DOM access, it could be argued that Dojo is a one-stop solution. Here is some of what Dojo does for you:
* Introduces the concept of classes, constructors, and inheritance in JavaScript, allowing you to build object-oriented JavaScript code.
* Allows you to build more-manageable code by breaking your code into modules.
* Simplifies Ajax programming by providing infrastructure code for making asynchronous requests using XMLHttpRequest and cross-browser-compatible DOM-manipulation code.
As a framework, Dojo has three main components:
* The Dojo core provides core functionality such as ability to make remote method calls, manipulate DOM node, and manipulate Cascading Style Sheets (CSS). The Dojo core also supports animation features and drag-and-drop functionality.
* Dijit is Dojo's widget library, built on top of the Dojo core. Dijit provides template-based, accessible widgets, not only for simple form control but also advanced widgets such as calendar control, menus, toolbars, progress bars, charts, and graphs.
* DojoX is a container for developing extensions to the Dojo toolkit. It acts as an incubator for new ideas and a testbed for experimental additions to the main toolkit, as well as a repository for more stable and mature extensions.
回复

使用道具 举报

千问 | 2007-1-24 12:56:49 | 显示全部楼层
Dojo's history
Alex Russell, David Schontzler, and Dylan Schieman started work on the Dojo framework by in 2004 while working for Informatica. Later many other developers started contributing to Dojo. In 2005, the Dojo foundation was formed to house the code and manage intellectual-property rights. So far, eight major releases have been issued, and the framework has been downloaded more than 1 million times. Companies such as IBM, AOL, Sun, SitePen, Blogline, Google, Nextweb, and others contribute to the Dojo framework.
回复

使用道具 举报

千问 | 2007-1-24 12:56:49 | 显示全部楼层
Setting up your development environment
Before you can start developing this article's sample Dojo application, you need to set up your development and debug environment so that you can try out application changes rapidly and debug issues if errors occur. Setting up a development environment for a JavaScript framework like Dojo is a little different from doing so for Java SE or EE frameworks. You must first install the Dojo framework in your Web application and then set up the debugging environment in the browser.
回复

使用道具 举报

千问 | 2007-1-24 12:56:49 | 显示全部楼层
Installing the Dojo toolkit
The Dojo toolkit depends on set of JavaScript, CSS, and HTML files to be available in a predefined directory structure at runtime. You can install Dojo in one of three ways:
1. Use Dojo from a content-delivery network (CDN): The easiest way to install Dojo is to use an instance that is available on a CDN near you. For example, you can install the 1.2 version of Dojo by including one of two script tags on your page:

* Points to AOL's CDN:





@import "js/dijit/themes/tundra/tundra.css";

@import "js/dojo/resources/dojo.css";











Hello World








The index.html file is a simple HTML document that generates one button using the dijit.form.button widget. When you click on that button the application displays "Hello Dojo" in an alert message. Lets take a closer look at each of these elements:

* The dojo.js file is the main component in the Dojo toolkit. You can use Dojo by including this file in your page:




In the sample code, we want to use the Dojo framework .js files that are unzipped in the Web application's WebContent/js folder, so you must use the js/dojo/dojo.js path. The djConfig attribute is used for configuring the Dojo runtime, which I'll talk about more in the next section.

* We want to use Dijit's button widget, so you must include the Dijit style sheet, as shown here:



@import "js/dijit/themes/tundra/tundra.css";




Dijit allows you to choose a theme to use. The default theme is tundra, which we use in our sample code by including tundra.css in index.html.

* Dojo uses the concept of modules, which are similar to Java packages. (I'll provide more detail about modules later in this article.) Before you use functionality from a particular package, you must include that package in your page. The dojo.require() call -- similar to Java's import statement -- is used for importing a Dojo module:




The line dojo.require("dijit.form.Button") tells Dojo to load the dijit.form.Button class on your page.

* You can use a Dijit widget by using the same markup as that of the normal HTML element. The only difference is that you must add the dojoType attribute indicating name of the Dijit widget that you want to use:



Hello World






You want to generate a button based on the Dijit button widget, so this code adds the dojoType="dijit.form.Button" attribute to the HTML button element. Dojo also allows you to attach event handlers in a convenient way by declaring them inline. If you don't feel comfortable with this convention you can declare a function in a script element and specify its name as a value of the onClick attribute.
4. Next, change the web.xml file for your Web application to set index.html as the application's default page:



HelloDojo



index.html



5. Deploy the HelloDojo Web application on your application server. If you use Eclipse and Apache Tomcat, then you can just right-click your HelloDojo project and select Execute on server to install the HelloDojo Web application on Tomcat.
6. Once the Web application is deployed and started, try accessing it using the application-server-specific URL. If you deployed your application on Tomcat, you can access it at http://localhost:8080/HelloDojo. You should get a page that looks like Figure 1 when you click on the Hello World button.
Viewing the application.
Figure 1. Viewing the application
As you can see in Figure 1, Dojo has generated additional markup for the button. If you go to the Net tab, you will notice that your one request to HelloDojo is resulting in quite a few requests for additional resources such as .js, .css, and .html files. All the resources are requested from the same location where dojo.js resides.
回复

使用道具 举报

千问 | 2007-1-24 12:56:49 | 显示全部楼层
Configuring the Dojo runtime
Dojo allows you to configure the runtime using the djConfig object. The default values of djConfig options are okay for most cases, but you might want to change them to enable debugging, for example, or to inform Dojo that you want to use the Dijit widget library. (It can check if any of the form controls has a dojoType attribute and if it does it will convert the control to a Dijit widget.) I'll explain ways to configure the djConfig object and discuss what each of the various configuration options means.
Configuring djConfig
Dojo creates the djConfig object when the framework initializes -- that is, when Dojo.js loads. If you want to make any changes in djConfig, you should do so before dojo.js is loaded. Any changes that you make in djConfig are ignored after dojo.js is loaded.
You can configure the djConfig object in one of three ways:
1. The easiest and most commonly used approach is to add the djConfig attribute to the


This example creates a djConfig hashmap before dojo.js gets included in the page.
3. You can include djConfig in the Dojo Toolbox builder. When creating a custom build you include the djConfig object into the build via the scopeDjConfig parameter. See the online Dojo documentation on "The package system and custom builds" for further information on custom builds.
While developing your Web application, you might want to create a separate include file that contains logic to create djConfig using one of these methods and has a dojo.js script tag. You'd then include that file in every page. The benefit is that you can change the Dojo configuration for the entire application -- for example, to enable debugging -- by changing the one include file.
回复

使用道具 举报

千问 | 2007-1-24 12:56:49 | 显示全部楼层
Configuration options
The djConfig object provides quite a few configuration options. So far our sample code has used two of them: isDebug and parseOnLoad. Let's take a closer look at all of the djConfig options:
* isDebug: This flag turns debugging on or off. Its default value is false. When you turn this flag on, Firefox generates extended debugging information in Firebug. If you're using some other browser, it includes the Firebug Lite script files in the page and starts displaying the Firebug Lite console.
* debugAtAllCosts: When you use dojo.require() to declare dependency, it makes an asynchronous call to load the necessary resources and also makes sure that the resource is not loaded twice. This is approach is efficient but has a downside: when there is an error in the loaded resource -- for example, in one of the classes -- Firebug shows an incorrect line number for the error. When you turn the debugAtAllCosts flag to true, it includes atag in the page markup for each resource instead of loading them asynchronously. Once the resources are loaded using thetag, Firebug shows the .js file name where the error occurred along with the line number for that error, which makes debugging your code easier. Don't use this option in a production environment, because it adds a lot of overhead
* debugContainerId: When this option is set, Dojo searches the document's DOM for an element with the specified ID and puts the Firebug Lite console inside that element.
* locale: Dojo simplifies internationalization by providing an infrastructure for loading localized resources in the page. By default it uses the locale of the user agent, but you can override that by setting the locale option.
* extraLocale: This option, which has no default value, specifies additional locales whose resources should also be loaded alongside the default locale when calls to dojo.requireLocalization() are processed.
* baseUrl: Dojo downloads required .js files on demand. By default it downloads the dependencies from the same location that dojo.js was downloaded from. If you want to change this for some reason, set the baseUrl property to the location from which the dependency .js files should be downloaded.
* modulePaths: You can extend the Dojo framework by creating your own classes and putting them under a custom directory structure. When you do that, you must map the namespace name to directory name so that dojo.require() can find it. Setting the modulePaths option allows you to map the namespace to the directory name. (I'll talk more about this later in this article.).
* afterOnLoad: This option indicates that Dojo was added to the page after the page load. In this case Dojo doesn't wait for the page DOMContentLoad/load events and fires its dojo.addOnLoad callbacks after making sure all outstanding dojo.required modules have loaded.
* parseOnLoad: Dojo has an HTML parser that parses the document's DOM structure to find the nodes with dojoType attribute and convert them into Dojo widgets. When you set the parseOnLoad flag's value to true, Dojo parses the DOM document on loading and converts the nodes to Dijit widgets.
* addOnLoad: You can set name of a function or an array of names of the functions that should be called once the page is loaded.
回复

使用道具 举报

千问 | 2007-1-24 12:56:49 | 显示全部楼层
Object-oriented JavaScript
One of the lesser-known facts about JavaScript is that it is an object-oriented language. However, it is a prototype-based object-oriented language that doesn't have the same structure as class-based languages such as Java. This can be a hard adjustment for new JavaScript programmers. Dojo provides functionality to simulate class-based object-oriented concepts such as declaring classes, constructors, and inheritance. In the background, it takes care of things like prototyping, inheritance, and various procedures that JavaScript requires. In the next sections I'll introduce you to Dojo's support for object-oriented programming with JavaScript.
Working with classes
Dojo provides a dojo.declare() method that you should use to declare a new class. It accepts the following arguments:
* A string representing the name of the class that you want to declare.
* The name of the superclass or array of names of the superclasses that you want this class to inherit from. (I'll talk more about multiple inheritance later.)
* A hashmap of properties for the class. The properties represent both instance variables and member function of this class.
Listing 2, for example, declares a custom.javaworld.Worker class:
Listing 2. Declaring a class
dojo.declare("custom.javaworld.Worker",null,{
firstName: "",
lastName: "",
work: function(){
console.log("Working");
}
});
var johnDoe = new custom.javaworld.Worker();
johnDoe.work();
johnDoe.lastName ="Doe";
console.log("Last Name " + johnDoePerson.lastName);
In Listing 2, the dojo.declare() method's first argument is custom.javaworld.Worker -- the name of the class we want to declare. The method's second argument is null because we don't want to inherit this class from any other class. The third argument is a hashmap, in which work is the property's name and its value is a function. We thereby define a work() member function for the Worker class.
Once the custom.javaworld.Worker class is declared, you can create a new object instance of it by calling new custom.javaworld.Worker(). Then you can start calling the new object's methods or assign values to its member variables.
回复

使用道具 举报

千问 | 2007-1-24 12:56:49 | 显示全部楼层
Constructors
A constructor allows you to initialize every object of a class by executing code whenever a new instance of the class is created. Listing 3 changes our custom.javaworld.Worker class to add a constructor.
Listing 3. Adding a constructor
dojo.declare("custom.javaworld.Worker",null,{
firstName: "",
lastName: "",
constructor: function(fName, lName){
console.debug("Constructor of com.javaworld.Worker called");
this.firstName = fName;
this.lastName = lName;
},
work: function(){
console.log("Working");
}
});
var johnDoe = new com.javaworld.Worker("John","Doe");
console.log("First Name " + johnDoePerson.firstName);
console.log("Last Name " + johnDoePerson.lastName);
As you can see, we made one change in the custom.javaworld.Worker class to add a constructor member function. The constructor member function is special. It gets called whenever you create new instance of the class using the JavaScript's new operator. The constructor takes two arguments -- fName and lName -- and assigns these value to the member variables, which you access by using the this operator inside the class.
Inheritance
The ability to extend other classes is one of the basic features of object-oriented programming. Dojo handles all the requirements for setting up an inheritance chain. For example, when you create an instance of a class, Dojo calls the constructor of its superclass before calling constructor of the child class. Also, if you add a method to the child class with same name as that of the superclass, then the method in the child class overrides the method in the superclass.
Listing 4 creates a custom.javaworld.ITWorker class that extends custom.javaworld.Worker.
Listing 4. Extending a class
dojo.declare("custom.javaworld.ITWorker",custom.javaworld.Worker,{
constructor: function(fName, lName){
console.debug("Constructor of com.javaworld.ITWorker");
},
work: function(){
this.inherited(arguments);
console.log("Writing Code");
}
});
var johnDoe = new com.javaworld.ITWorker("John","Doe");
johnDoe.work();
Because we want ITWorker to extend the Worker class, Listing 4 passes the custom.javaworld.Worker class as the second argument when declaring the ITWorker class. Now when you create a new instance of ITWorker using the new operator, Dojo first invokes the constructor of Worker class. Also, the ITWorker class's work() method overrides the Worker class's work() method.
Suppose you need to invoke the overridden method of superclass first and then add some functionality in the child class method. In that case then you can use the.inherited() construct to invoke an inherited method of the superclass. In Listing 4, when you call the ITWorker class's work() method, it first invokes the Worker class's work() method, which prints "Working" on the console then prints "Writing Code" on the console.
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

主题

0

回帖

4882万

积分

论坛元老

Rank: 8Rank: 8

积分
48824836
热门排行