React SPA Framework - HtmlApplication

An object that manages views and controls the application life cycle.

import HtmlApplication from "devextreme/framework/html/html_application"
Type:

Object

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.

JavaScript
$(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.

JavaScript
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();
});

Props

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.

Fields

This section describes the fields used to access the important parts of the application.

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)

Navigates to the specified URI.
navigate(uri, options)

Navigates to the specified URI.
off(eventName)

Detaches all event handlers from a single event.
off(eventName, eventHandler)

Detaches a particular event handler from a single event.
on(eventName, eventHandler)

Subscribes to an event.
on(events)

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