React SPA Framework - HtmlApplication
include spa-deprecated-note
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
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
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
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. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.