Dojox. app: single page application framework

Http://www.sitepen.com/blog/2011/09/30/dojox-app-a-single-page-application-framework/
Author: Colin snover
Translator: Oliver

Dojox. app is a small application framework that provides a set of classes for managing the lifecycle and behavior of a single page application deployed on a mobile device or desktop system. The main application class is used to manage the lifecycle of an application, and can be easily modified to expand additional custom functions. An application instance contains some scene objects and view objects that provide a visual user interface. All views, scenarios, dependency modules, and other information about the application are transmitted to the application class through a JSON configuration file by default.

Config. JSON

This main configuration file defines all module dependencies, application behavior, top-level views and scenarios, and all other information that is critical to the proper running of the application.
Sample Configuration:

{/* Global application dependency */"dependencies": ["dojox/mobile/heading", "dojo/mobile/roundrect", "My/custom/module"], /* The application module is implicitly added to the preceding dependency modules */"modules": ["dojox/APP/module/History ", "My/custom/appmodule"],/* apply your own HTML template */"template": "example.html",/* default loaded view */"defaultview ": "Home",/* default visual conversion effect */"defaulttransition": "slide",/* view and scenario */"views ": {/* home is a top-level dojox. app. view */"home": {/* class used to instantiate the view */"type": "dojox. app. view ",/* dependency module for this view only */" dependencies ": [" dojox/mobile/listitem "," dojox/mobile/edgetoedgecategory "], /* The template used by this view */"template": "views/home.html"},/* tabscene is a dojox that contains three subviews. app. SCENE */"tabscene": {/* class used to instantiate the scenario */"type": "dojox. app. scene ",/* template for this scenario */" template ":" tabscene.html ",/* default view for this scenario */" defaultview ":" tab1 ", /* when switching between tabs, the "flip" animation effect */"defaulttransition": "flip" is used by default./* views for this scenario */"views ": {"tab1": {"template": "views/tabs/tab1.html"}, "tab2": {"template": "views/tabs/tab2.html "}, "tab3": {"template": "views/tabs/tab3.html" }},/* dependency modules specific to this scenario */"dependencies ": ["dojox/mobile/roundrectlist", "dojox/mobile/listitem", "dojox/mobile/edgetoedgecategory"]}

Configuration property description:

Dependencies	When it appears as the top-level Attribute of the configuration file, this attribute defines the modules required by the entire application. When it appears as a scenario or view attribute, it defines which modules must be loaded before the view/scenario is instantiated.
Modules	This attribute declares which modules need to be mixed into the application class to control the application lifecycle. In other words, the application class of each specific application is dynamically created based on the base class application at runtime.
Template	When it appears as the top-level Attribute of the configuration, the layout template of the entire application is defined. When a view or scene attribute appears, it indicates the view or scene template.
Defaultview	This attribute defines the default view loaded by the application.
Defaulttransition	When the top-level Attribute of the configuration file appears, this attribute defines the default visual conversion method used by the top-level view/scenario. When defined in a scenario, it only represents the default visual conversion method of the scenario.
Views	This view attribute is a set of nested objects that define all views and scenarios in the current application or scenario. These contents will be described in detail later.

There are also some additional attributes, such as models, stores, ID, name, and description, which may be used in the future. Their specific definitions and uses are still under development.
Application class

The application class is an abstract class, so it is never used directly. It is a subclass that is simply extended from the scene class (see below. Dojox. app provides a factory method to create and automatically start the entire application instance with the configuration object as the parameter.
The usage is as follows:

require(["dojo/json", "dojox/app", "dojo/text!./config.json"],function(json, makeApplication, config){    makeApplication(json.parse(config));});

Scene class

The scene class provides a templated container for the view. It aims to define the layout of a scenario through an HTML template and a group of subviews used for scenario switching. For example, to display a group of tabs, You need to configure a subview for each label in a scene. The scenario template defines where to display the tab controls and these views.

In terms of internal implementation, scene borrowed some concepts of dijit. layout and dijit. _ templeted. The default template of the scene class is very simple and cannot even be called as a template-it simply Outputs any content in the current view. The element in the scenario template can be defined by the region attribute, similar to dijit. layout. bordercontainer. For example, the template for implementing a tab scenario may be like this (using components in dojox. Mobile ):

<div style="background:#c5ccd3;" class="view mblView">    <div region="top" dojoType="dojox.mobile.Heading">        Tab Scene    </div>    <ul region="top" dojoType="dojox.mobile.TabBar"        barType="segmentedControl">        <li dojoType="dojox.mobile.TabBarButton"            icon1="images/tab-icon-16.png"            icon2="images/tab-icon-16h.png"            transitionOptions='{title:"TabScene-Tab1",                target:"tabscene,tab1",                url: "#tabscene,tab1"}' selected="true">Tab 1</li>        <li dojoType="dojox.mobile.TabBarButton"            icon1="images/tab-icon-15.png"            icon2="images/tab-icon-15h.png"            transitionOptions='{title:"TabScene-Tab2",                target:"tabscene,tab2",                url: "#tabscene,tab2"}'>Tab 2</li>        <li dojoType="dojox.mobile.TabBarButton"            icon1="images/tab-icon-10.png"            icon2="images/tab-icon-10h.png"            transitionOptions='{title:"TabScene-Tab3",                target:"tabscene,tab3",                url: "#tabscene,tab3"}'>Tab 3</li>    </ul></div>

The preceding template defines two region = "TOP" areas: A Header element and a tag button list. They will be placed at the top of the scene during rendering.

Generally, a region of region = "center" needs to be specified when bordercontainer is used. For scene, the central area is automatically specified as the current active view (for example, the current tab ).

In addition to supporting the life cycle of the scenario and the code of the rendering process, scene also provides a transformation method to control the switching between subviews. Scenarios can contain both views and other scenarios.
View class

Similar to scenarios, a view is also a content container. However, a view only contains the content defined in its template, rather than other subviews. The difference between a view instance and a scenario is that a view instance cannot contain other scenarios or views.
Summary

These three classes are designed to be simple and only provide the necessary structure and lifecycle (although there are some additional core methods and lifecycle handles that will soon be added ). By using the dojox. app framework, developers can inherit these base classes to customize views and scenarios (or implement equivalent functions) and define them in the application configuration file.
Todo

Dojox. app is an experimental framework, and some key components are still being developed. Its release version is expected to arrive before dojo2.0. Currently, the following projects are under development:

Model/store support	We have several implementations supported by model/Store, including one for dojox. MVC. However, there is still more work to be done to provide APIs that are unanimously recognized by these components. Although the MVC system will be supported first, it will not be necessary components, because application developers can control the HTML of the view by extending the View class.
Desktop/mobile device Branch	Dojox. app is platform independent. However, you can use CSS media delimiters and attribute definitions in the configuration file to select views and parameters based on your browser environment.
Smart Packaging System Support	For performance considerations, especially on mobile platforms, a suitable application packaging system is very necessary. Therefore, we do not use a separate packaging configuration file for each application, but use a package tool to generate application packages Intelligently Based on the configuration file.