Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Collapse]Concepts
  [Expand]Application Solution Components
   Client-Side Mobile Application
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]UI Construction
  [Expand]Extend Functionality
  [Expand]Data Manipulation and Business Logic
  [Expand]Security System
  [Expand]Localization
  [Expand]System Module
  [Expand]Extra Modules
  [Expand]Debugging, Testing and Error Handling
  [Expand]Filtering
  [Expand]Application Life Cycle
 [Expand]Design-Time Features
 [Expand]Deployment
 [Expand]Task-Based Help
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Client-Side Mobile Application

XAF Mobile Client Applications are based on the DevExtreme SPA Framework.

Expanded MVVM Architecture

XAF Mobile applications follow the general MVVM (Model-View-View Model) pattern principles.

XAF Application Items in the MVVM Terminology

The list below describes how this pattern is designed in XAF:

  • A Model is an application's data stored in a local storage or on a remote server accessed using data providers (representing MobileWindow.View's View.CurrentObject or ListView.CollectionSource).
  • A View is an application View (client widgets, representing rendered MobileWindow's Window.Template).
  • A View Model is an object that prepares data for the View by adding properties, parameters and data sources that receive data from data providers (representing MobileWindow.ViewModelManager).

Global Model

A Mobile application contains a Global Model and View Model. The Global Model allows you to use application-level properties to share data between Views.

Data binding

An MVVM principle - declarative data binding. Every property a View or Editor use can be bound to a View Model property. This means that once the bound property is updated, the View Model property is updated as well. The View Model property also updates the View with all the bound properties.

You can bind certain properties to a single View Model property and update them simultaneously. Data-aware editor properties can also be bound to data source fields.

The scheme below illustrates the MVVM application items' interaction.

Expanded Client-Side API

  • Access a View Model and Global Model

    The IViewModelAware interface passes a View's View Model to List Editors, Property Editors and View Items. You can access a Global Model and View Model using the MobileApplication.GlobalModelManager and MobileWindowTemplate.ViewModelManager properties.

    The following code demonstrates how to access the View Model in the XAF Mobile Custom Module's widget.js file:

    You can also access and customize the View Model and Global Model using the $model and $global prefixes and their properties that are listed below:

    View Model:

    • $model.listViewDataSource - accesses a List View's DataSource;
    • $model.CurrentObject - accesses the current object's properties;
    • $model.SelectedItems - accesses the selected objects' collection.

    Global Model:

    • $global.ServiceUrl - gets an OData service URL.
  • Get and Set a Property Value

    You can get an unbound property value as shown below:

    To get a bounded property value, call this property as a function:

    Refer to the BLOB Image Properties in XPO topic to learn how to update or retrieve an image property value displayed using the MobileImagePropertyEditor on the client-side.

  • Show a Message

    You can show the custom text message from the client-side code using the DevExpress.ui.notify method. The ActionBaseExtensions.RegisterClientScriptOnExecute topic demonstrates how to display a text message using this method when an Action is executed.

Example

The example below demonstrates how to access the View Model and bind a property to it using the ObjectViewController<ViewType, ObjectType>. Here, the Organization's website specified in its WebSite property is opened in a browser and the text message is displayed when an Action is executed.

Is this topic helpful?​​​​​​​