Introduction to the Dojo toolkit Part 1

显示全部楼层 · 2017-9-26 13:06:30

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

千问 · 2017-9-26 13:06:30

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.

千问 · 2017-9-26 13:06:30

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.

千问 · 2017-9-26 13:06:30

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

千问 · 2017-9-26 13:06:30

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:

# Points to Google's CDN:
SRC="http://ajax

千问 · 2017-9-26 13:06:30

跟老虎学，发这个啊，早知道不进来看了，大半夜得看这么多字头晕

千问 · 2017-9-26 13:06:30

# Install Dojo on your server: First, download the latest Dojo release. Once you have the release .zip file, you can unzip it on your Web server so that all your Web applications can use it. Or, if prefer to have a separate version of Dojo for each of your Web applications, then you can unzip the Dojo .zip files in one of the WebContent subdirectories, such as the js folder, of your Java EE Web application. Now you can use Dojo by including this script tag in your Web page:

When you download the Dojo binaries, you can get either the source or release version. You should always use the release version in your production environment because it is compressed and optimized for faster download. You can use the source version in your development environment if you want to debug Dojo to learn how it works under the hood.
# Install the latest development build on your server: Download the nightly Dojo release, then follow the post-download steps in option 2 above. Note that this approach is only for advanced users, and you should have a compelling reason to choose it.

千问 · 2017-9-26 13:06:30

The Dojo framework code is split into multiple files, but once dojo.js is loaded it will automatically download all necessary remaining files. You can verify that Dojo is installed correctly by accessing [B]/js/dijit/themes/themeTester.html. This URL opens an HTML page displaying various Dijit widgets.
Setting up your debug environment
Firebug is an open source debugging extension for Firefox. It provides tools for debugging JavaScript, CSS, and HTML. Firebug Lite lets you simulate Firebug functionality in other browsers such as Internet Explorer, Opera, and Safari.
Firebug does the following:
* Allows you to debug and profile JavaScript.
* Provides a log4j-like JavaScript logging framework.
* Monitors the time that it takes to download resources such as .js, .css, and image files. It can be used to monitor XMLHttpRequests and responses.
* Lets you inspect and edit the live HTML generated by JavaScript.
* Displays all the CSS styles on the page and allows you to try out your changes online without a page refresh.
I strongly recommended that you use Firefox wtih Firebug during the development phase. Dojo takes care of cross-browser compatibility issues, so code that works in Firefox should also work in other browsers.

千问 · 2017-9-26 13:06:30

Developing a Hello World application
Once you've set up your development and debug environment, you're ready to try building a sample "Hello World" application using Dojo. The simplest way to do this would be to set up an HTTP server, create a static HTML page, and use Dojo in that page. Alternately, you could create a dynamic HTML page using the technology of your choice, such as Java EE, PHP, or .NET. For this exercise we'll create a Java EE Web application.
Hear this: Nate Shutta on tools for Ajax
Foundations of Ajax co-author Nate Shutta talks about JavaScript libraries, debuggers, and frameworks in a JavaWorld podcast with Andrew Glover. Listen now!

千问 · 2017-9-26 13:06:30

You can use your IDE of choice to create the HelloDojo Web application. Or you can use a text editor and a build script that allows you to package your code in a .war file. I developed the sample code using the Eclipse IDE for Java EE Developers, which provides tools for creating dynamic Web applications and for deploying application code on the Apache Tomcat server from within the IDE. It allows you to try out your changes rapidly.
Follow these steps to create the Hello World sample application:
1. Download dojo-release-1.2.3.tar.gz from the Dojo Download site.
2. Unzip dojo-release-1.2.3.tar.gz in the workspaceroot/HelloDojo/WebContent/js folder.
3. Create an index.html page (shown in Listing 1) in the workspaceroot/HelloDojo/WebContent folder.