HtmlApplication
An object that manages views and controls the application life cycle.
The HtmlApplication object connects markup elements, scripts and styles to a single application, and provides methods for controlling the application life cycle. To create an HtmlApplication object, call the HtmlApplication constructor within the document.ready event handler or the jQuery "$()" function.
$(function () {
MyApp.app = new DevExpress.framework.html.HtmlApplication();
});To configure the HtmlApplication object, pass a configuration object as the constructor's parameter. Specify the required options within the configuration object. For instance, specify the set of layouts to be used as a skeleton for application views. Using the application object, register a routing rule for the application and navigate to a starting view.
window.MyApp = {};
$(function() {
MyApp.app = new DevExpress.framework.html.HtmlApplication({
namespace: MyApp,
layoutSet: DevExpress.framework.html.layoutSets['navbar']
});
MyApp.app.router.register(":view", { view: "index"});
MyApp.app.navigate();
});Configuration
This section describes configuration options used to create an HtmlApplication object.
| Name | Description |
|---|---|
| animationSet | Specifies the animation presets that are used to animate different UI elements in the current application. |
| commandMapping | Specifies where the commands that are defined in the application's views must be displayed. |
| disableViewCache | Specifies whether or not view caching is disabled. |
| layoutSet | An array of layout controllers that should be used to show application views in the current navigation context. |
| mode | Specifies whether the current application must behave as a mobile or web application. |
| namespace | Specifies the object that represents a root namespace of the application. |
| navigateToRootViewMode | Specifies application behavior when the user navigates to a root view. |
| navigation | An array of dxCommand configuration objects used to define commands available from the application's global navigation. |
| router | A custom router to be used in the application. |
| stateManager | A state manager to be used in the application. |
| stateStorage | Specifies the storage to be used by the application's state manager to store the application state. |
| templatesVersion | Specifies the current version of application templates. |
| useViewTitleAsBackText | Indicates whether on not to use the title of the previously displayed view as text on the Back button. |
| viewCache | A custom view cache to be used in the application. |
| viewCacheSize | Specifies a limit for the views that can be cached. |
| viewPort | Specifies options for the viewport meta tag of a mobile browser. |
Methods
This section describes the methods used to manipulate the application flow.
| Name | Description |
|---|---|
| back() | Navigates to the URI preceding the current one in the navigation history. |
| canBack() | Returns a Boolean value indicating whether or not backwards navigation is currently possible. |
| clearState() | Calls the clearState() method of the application's StateManager object. |
| createNavigation(navigationConfig) | Creates global navigation commands. |
| getViewTemplate(viewName) | Returns an HTML template of the specified view. |
| getViewTemplateInfo(viewName) | Returns a configuration object used to create a dxView component for a specified view. |
| loadTemplates(source) | Adds a specified HTML template to a collection of view or layout templates. |
| navigate(uri, options) | Navigates to the specified URI. |
| off(eventName) | Detaches all event handlers from the specified event. |
| off(eventName, eventHandler) | Detaches a particular event handler from the specified event. |
| on(eventName, eventHandler) | Subscribes to a specified event. |
| on(events) | Subscribes to the specified events. |
| renderNavigation() | Renders navigation commands to the navigation command containers that are located in the layouts used in the application. |
| restoreState() | Calls the restoreState() method of the application's StateManager object. |
| saveState() | Calls the saveState method of the application's StateManager object. |
| templateContext() | Provides access to the object that defines the current context to be considered when choosing an appropriate template for a view. |
Events
This section describes events fired by the HtmlApplication object.
| Name | Description |
|---|---|
| afterViewSetup | Fires after a ViewModel has been created during the view display process. |
| beforeViewSetup | Fires before a ViewModel is created during the view display process. |
| initialized | Fires after the application and all its components are initialized. |
| navigating | Fires after navigation to another view has started. |
| navigatingBack | Fires when the HtmlApplication.back() method is called or the appropriate hardware button is pressed. |
| resolveLayoutController | Fires when information about a view to be shown is gathered. |
| resolveViewCacheKey | Fires before the application searches for a cached view that matches the key generated for the current URI. |
| viewDisposed | Fires after a view is disposed. |
| viewDisposing | Fires before a view is disposed. |
| viewHidden | An event triggered when the current view is replaced with another view on the application page. |
| viewRendered | Fires after the rendering of a view is completed. |
| viewShowing | An event triggered each time before a view is displayed, after information on the view is obtained. |
| viewShown | An event triggered each time after a view is shown. |