Implement interface componentization development using dijit

Document directory

• Dialog Box title

Many developers are familiar with componentized software engineering design. Componentized design is suitable for complex software systems and collaborative development by teams. The software system is divided into several components, and components communicate and collaborate through predefined interfaces and protocols to fulfill the responsibilities of the entire software system. Developers in the team can be responsible for different components. The idea of componentization is popular in the background development of desktop applications and Web applications, and related technologies and practices are mature. In the front-end of Web applications, componentization has been slow. There are many reasons for this. The main reason is that the front-end of Web applications is relatively simple at the beginning, and there is no need for componentization and design. With the popularity of Ajax applications, the Web Front-end is more complex, and users' requirements for web applications are constantly moving closer to desktop applications. The basic interface elements of the HTML language cannot meet such requirements separately. Menu, tree control, dialog box, progress bar, and other components are very common in current Ajax applications, but they are not provided by HTML by default. Some new elements are introduced in the HTML 5 specification, but they are not enough. Componentization makes sense for code sharing and Team division of Web applications.

The development of Web application front-end componentization is also gradual. At the beginning, it was just some simple examples of HTML and CSS code with JavaScript. For example, when you need to implement a multi-level menu, download the relevant code example and modify it as needed. Such components are hard to reuse. Later, when JavaScript frameworks became popular, some frameworks provided component support, including ext JS, jquery UI, and dojo. However, different frameworks provide different component models.

Dijit component model Overview

Front-end components of web applications are defined broadly. A component occupies a certain area on the web page and is responsible for completing a specific task. Web components are sometimes called widgets ). In the dijit component model, a dijit component is a javascript class. You can use the new operator to create component instances on the page. Each component instance must be bound to a DOM element on the page. This Dom element is the root node of the component. In the logic of the dijit component, the root node can be manipulated to build the user interface. The property and method exposed by the Javascript class of the component is the interface of the component.

Use of dijit Components

Dijit components are easy to use. First, you need to load the JavaScript code of the component on the page, which can be done through the dojo. Require function. Then, find or create a DOM element on the page as the root node of the component. Finally, you can use the new operator. For example, new dijit. Form. ComboBox ({}, node) can use node as the root element to create a dijit. Form. ComboBox component, that is, a drop-down list selection box. The dijit component is created with two parameters: the second parameter is the root element of the component. If the root element is not specified during creation, A new Div element is automatically created as the root element. However, the newly created root element is not added to the current document tree. You can use the placeat method of the component to set the position of the component in the document tree on the page. The first element is a JavaScript Object that contains the configuration attributes of the component. Generally, a dijit component can be reused. Therefore, some attributes are generally provided for users to configure. With this parameter, you can modify these configurations.

As mentioned above, the dijit component is created in a programmatic way, and another method is used to create the dijit component. That is, the dijit component is created in declarative way in HTML code, as shown in

Dialog Box title dialog box content

The declarative approach simplifies the way developers use dijit components to a certain extent. The declarative method is similar to the HTML code. You only need to add some additional attributes to the general HTML elements to convert the HTML fragments into dijit components. This is very convenient for people who are familiar with the HTML language. It is equivalent to adding more available components based on the basic elements of the HTML language.

Dijit deeply analyzes basic dijit Components

All dijit components are inherited from the dijit. _ widget class. The dijit. _ widget class defines a series of methods related to components. Some of these methods are related to the component life cycle, and some are common methods required by all components. Understanding the life cycle of dijit components helps you understand how dijit components run, so that you can better use existing components or develop your own components.

The dijit component creation process starts with the create method in the dijit. _ widget class. The create method adopts a typical template method design mode, which encapsulates the basic process for creating components. This method performs some important operations and calls other methods in sequence to complete the creation process. The specific process includes:

• Mix the configuration parameters at creation into the component. For example, if you use VaR mywidget = new testwidget ({prop: "Hello"}, node) when creating a component, you can use mywidget after the component is created. prop to get "hello", you can also use this in the component. prop to access.
• Call the life cycle method: postmixinproperties. This method is called after configuration parameters are mixed in. You can modify these parameters.
• Add the newly created component to the global component object registry. Each dijit component is assigned a unique identifier. After being added to the Registry, you can use dijit. byid to obtain the Component Object Based on the identifier.
• Call the lifecycle method: buildrendering. This method is used to build the user interface of the component. This method is used to set the value of this. domnode, indicating the root element of the created component.
• Call the life cycle method: postcreate. This method is called after the user interface is built. It is generally the starting point of the internal behavior logic of components, similar to the onload method in HTML pages.

For dijit component developers, it is very easy to create a new dijit. You only need to declare a javascript class with dojo. Declare and inherit from dijit. _ widget. Override the JavaScript method of interest in this class. The simplest case is to override the postcreate method and add the component logic.

For the container components used to include other child components, the startup method is overwritten to enable the caller to start the component explicitly. This is because when postcreate is called, the DOM nodes of the component are successfully created, but these DOM nodes may not be added to the current document tree, therefore, you cannot include Code related to the DOM node size and location in postcreate. To add such code, add it in startup. Many container components use this method to layout their child nodes.

Use HTML templates

If you only use dijit. _ widgets, writing dijit components is cumbersome. For example, when building a user interface, you may need a lot of Dom operations, which is not convenient to write. Dijit provides dijit. _ templated to define component content using HTML fragments. HTML snippets are content templates for components. For example:

dojo.declare("TempWidget", [dijit._Widget, dijit._Templated], {     templateString : "Hello"});

Tempwidget inherits two JavaScript classes. In addition to the dijit. _ widget, it also has dijit. _ templated. Make sure that dijit. _ widget is the first element of the parent class array. Only dijit. _ widget is the parent class in the true sense, and the rest is the mixed class. The dijit. _ templated class has overwritten the buildrendering method to create the DOM element of the component content from the HTML template and use it as the value of this. domnode of the component. In addition to basic HTML elements and attributes, HTML templates also provide some additional functions:

• Directly reference attributes in a component in an HTML template. For example, a component has an attribute named title. to reference the attribute value in an HTML template, you can directly write $ {Title }. If the attribute title value is "hello", the preceding template changes to "hello" at runtime.
• Use dojoattachpoint to declare the DOM nodes visible in the component object. When you need to reference an internal Dom node in a component, you do not need to query it again. You can use dojoattachpoint. As declared

  You can use this. mynode to reference the span element in the component object.

• Use dojoattachevent to bind events. This method is much easier than manually querying DOM nodes and binding through dojo. Connect. As declaredTest

  To bind the test method of the component to the onclick event of the button.

These practical functions of dijit. _ templated templates reduce some tedious code when building a user interface.

As a container

If the component is used as a container of other components, it can be mixed into the dijit. _ container class. This class provides basic management functions for child components, including query, addition, and deletion. When using this class, you must declare a containernode attribute in the component as the parent node of the Child component. After the dijit component is created, you can use the addchild method to add the child component.

Destruction Process

After a component is created and run, it may need to be destroyed. It is easy to destroy a dijit component. You only need to call the destroyrecursive method. This method destroys the current dijit component and its child components. When a component is destroyed, its uninitialize method is called, similar to the destructor. Therefore, you can add the destroy logic unique to the uninitialize method.

Interface and interaction of dijit Components

As mentioned above, components communicate with each other through the designed interfaces and protocols. For dijit components, the interfaces provided by dijit components generally include the following types:

• Public attributes and methods. These attributes and methods are similar to the public fields and methods in the Java class and can be directly used after obtaining the component object.
• Connect through dojo. Connect. Some components provide some placeholder methods that allow users to listen for changes in their internal states, similar to DOM event processing.

When communication and collaboration between components, there are usually the following interaction modes:

• Pass reference of component object. This method is generally used to pass the component object to be referenced when creating a component, such as VAR anotherwidget = new mywidget ({parent: onewidget}, node );.
• Instead of passing object references, you can search for them. This situation applies to the situation where the ID of the dependent component is known. You can use dijit. byid for direct search.
• Use the global communication mechanisms provided by dojo: dojo. Publish and dojo. subscribe. One component publishes messages through dojo. Publish, And the other component listens to and Processes related messages through dojo. subscribe.

Generally, it is recommended that the first method is to pass the reference of the component object. However, when the relationship between components is complex, it is possible to transfer the reference of an object multiple times. You can also consider the last two methods at this time.

Dijit development best practices

Writing dijit components is not a complicated task. You only need to follow the general process in sequence. However, the design and implementation of dijit components are complicated and contain a lot of content. Next we will discuss some important points.

Programming and visual creation methods

The difference between the two methods lies in the usage of developers. The dijit component declared in declarative mode is also created in a programmatic manner at the runtime, which is completed by the dojo. parser. parse method. Therefore, declarative methods are more like syntactic sugar. However, one advantage of the declarative approach is that it can achieve elegant degradation (graceful degradation), that is, when Javascript is not supported, part of the content can still be displayed on the page. For simple components of the container class, the declarative creation method is better. Simple components are concise in declarative mode. The components of the container class generally need to specify the contained content when they are created. When declared, the child node of the component is automatically added as a child component of the container Class component. If it is completed in a programmatic way, you need to manually create child components and add them one by one using the addchild method. The code is complicated.

Component status change and appearance style

In the development of dijit components, a common scenario is to change the appearance style based on the internal state changes of the components. For example, for a single-choice button component, the selected and unselected exterior styles are different. A typical practice is to change the appearance by switching different CSS style names. For example, if you do not select the appropriate CSS style name, it may be myradiobutton. If you select it, it will be myradiobuttonchecked. Dijiti provides dijit. _ cssstatemixin class to abstract this behavior. The developer's components only need to inherit this class, and set the basic CSS style name through the attribute this. baseclass, so that they can dynamically modify CSS style names based on state changes. For example, if you set baseclass to mywidget, the CSS style name of the root element is automatically changed to mywidgethover when you move the cursor over the component. The status changes supported by this class include mouse entry/exit, focus acquisition/loss, selected/unselected, enabled/disabled, and so on.

This article has been first published on the infoq Chinese site and is copyrighted. The original Article is "using dijit to implement interface componentization development". If you need to reprint it, please attach this statement. Thank you.
Infoq Chinese site is an online independent community for mid-and high-end technical personnel ,. net, Ruby, SOA, agility, architecture and other fields to provide timely and in-depth information, high-end technology conferences such as qcon, offline technology exchange activities qclub, free mini book download such as architect, etc..