Writing a custom Dojo application

Source: Internet
Author: User
Tags html tags unique id

This article supporting source code

Brief introduction

We have just recently completed the development of a Web 2.0 dojo prototype. This prototype is very broad and provides a new function for information management. We also collaborate with the user Experience team to ensure that this application is available. The screen is designed by a graphical web designer to make them look more professional.

This article records the actual experience of Web 2.0 development for this prototype. Since Web 2.0 is relatively new technology, it can be difficult to start and customize when needed. We don't use out-of-the-box skins for our dojo applications. Because we need a consistent graphic design to match the brand effect of our product line. Therefore, we must use Dojo for customization. Customization is one of the most time-consuming tasks for most developers, especially for developers who don't know how to solve the problem.

Since the focus of this article is on the customization of the Dojo application, here we do not make a detailed description of each widget attribute that appears in the example. This article assumes that you have some knowledge of dojo and CSS. The examples in this article are based on Dojo1.1.0.

Create a Dojo Application

Design method

Experienced software engineers are most accustomed to using object-oriented (object Oriented,oo) technology during development. We want our web 2.0 application development to follow the principles of Java™ programming that we have used for many years. We found that to a large extent we can do this by using Dojo widgets and template patterns and Javascript/dojo objects.

Use of dojo widgets and template patterns

We've written some custom widgets that are made up of JavaScript classes and include HTML templates for rendering. This allows us to apply more OO methods to our applications, rather than just writing HTML files that use global JavaScript functions. Through these custom widgets, we have a variety of features: object isolation that can be implemented with well-defined widgets, and when needed, to update the dynamic content of the DOM for those widgets that use HTML; the same HTML template can have more than one instance (by using a custom widget to generate a different HTML ID). We can also make more personalized versions by expanding the custom widgets that we have written.

Listing 1 shows part of a custom widget JavaScript file built on top of Dijit._widget and dijit._templated.

Listing 1. Customizing widget JavaScript Files

Dojo.provide ("mywidgets.MyWidget");
 // put any other requires the widget needs here
Dojo.declare(
 'mywidgets.MyWidget',
 [dijit._Widget, dijit._Templated],
 {
 widgetsInTemplate: true,
templatePath: Dojo.moduleUrl( "mywidgets",
  "../templates/mywidgets/templateMyWidget.html");
 // put any other variables and methods for this widget here
 // can also override methods from the base classes here
 });

The Widgetsintemplate property tells Dojo that it needs to parse the template file because it contains dojo widgets, not just HTML tags. The TemplatePath property tells Dojo that this widget will use this particular HTML template for rendering. When the widget is instantiated, such as using the new mywidgets. Mywidget () instance where the HTML of this template is rendered at the insertion point of the DOM.

The HTML template file for this widget is shown in Listing 2.

Listing 2. HTML templates

<div class="templateMyWidget">
 <!-- Other Widgets and HTML can be included here -->
 <button dojoType="dijit.form.Button" id="myButton_${id}"
label="My Button" dojoAttachPoint="myButton"></button>
  </div>

In this case, this ID is replaced with a variable in order to prevent the code from accessing this button through its ID. ${id} is replaced by the value of this id attribute, which inherits from the Dijit._widget class. This ID is unique; As a result, it can be implemented as one of multiple IDs within a template, and each widget has a unique ID when instantiating several widgets. We also include the Dojoattachpoint attribute. This creates a property in the widget that points to this DOM node. So if you already have access to this widget (for example, mywidgetobj), you can use Mywidgetobj.mybutton to access this DOM node. Without knowing this ID and omitting the attribute, the system creates a unique ID for the element. And you can retrieve this system-generated ID by using MyWidgetObj.myButton.id.

If you download the Dojo source code, you may notice that Dojo is also writing this. Each Dojo widget has a JavaScript file and an HTML file associated with it (usually having the same name). These templates can be found in the directory of templates that are similar to the JavaScript files of the widget. For example, the JavaScript file for this Button widget is <dojo_root>\dijit\form\button.js, and its template file is <dojo_root>\dijit\form\ Templates\button.html, where <dojo_root> is the directory that contains the dojo code that is being downloaded.

Use of JavaScript and Dojo objects

When we started to develop this prototype, we didn't have much experience with JavaScript, but it did make it possible for people accustomed to OO principles to use JavaScript Object for development. Dojo provides a better way to define your own classes using the Dojo.declare structure. We recommend that you refer to the DeveloperWorks article "Dojo Concept for Java developers" (See Resources section). As with any prototype, our requirements are not limited to the initial design, so the code becomes more complex and confusing. So it's best to adopt enough design patterns. There are a lot of articles about design patterns that include examples of JavaScript and dojo. We recommend one of these examples called MVC with JavaScript (see Resources).

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.