[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]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Collapse]Concepts
  [Expand]Application Solution Components
  [Expand]Business Model Design
  [Expand]Application Model
  [Collapse]UI Construction
    UI Element Overview
    Windows and Frames
   [Expand]Templates
    Action Containers
   [Expand]Views
   [Expand]View Items
    List Editors
    Ways to Access UI Elements and Their Controls
    Add and Override Images
    Text Notifications
    Ways to Show a Confirmation Dialog
    ASP.NET Web Application Appearance
    Ways to Customize a Mobile Application
    Application Personalization
    Using a Custom Control that is not Integrated by Default
    XAF Mobile Wrappers for DevExtreme Widgets
  [Expand]Controllers and Actions
  [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]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Ways to Customize a Mobile Application

This topic provides information on how to customize a Mobile application and includes links to relevant examples.

Expanded Access Widgets' Properties

This approach allows you to customize a DevExtreme widget by accessing a corresponding XAF Mobile wrapper . These wrappers are of the Dictionary<String, Object> type, and you can access them in the same way as WinForms and ASP.NET application controls. The Dictionary's keys coincide with the corresponding widget's property names.

Refer to the following topics to see examples of how to access and customize DevExtreme widgets using wrappers:

Expanded Implement XAF Mobile Custom Modules

The XAF Mobile Custom Modules allow you to use custom and third-party controls in the XAF Mobile UI. They also enable you to register JavaScript functions, which you can call later on client-side.

You should create a special folder in one of the following places before adding a Mobile Custom Module:

  • the Mobile application project

    This is aimed at new Mobile Custom Module development. Since this Module is in the application project, you can load a new Module version by reloading a page in a browser without rebuilding the application.

    In the MySolution.Mobile project, create a new Static folder and a modules subfolder in it. Set the XafMobileStaticFilesLocation key value to Static in the web.config file.

  • the Mobile module project

    Select this option to integrate an existing ready-to-use Mobile Custom Module.

    In the MySolution.Module.Mobile project, create a new resources folder (for example, MobileResources) with the modules subfolder. Implement the IMobileResourcesHolder interface in the module's ModuleBase descendant, the GetMobileResourcesRelativePath method should return the resources folder name.

Note

Refer to the Resources in Mobile Applications topic for code examples of the scenarios mentioned above.

To add a new Mobile Custom Module to one of these folders, use the Template Gallery.

Each module consists of the following files by default:

  • module.json - contains a list of all the module's files. The module's main JavaScript file is specified in the main parameter, and additional files – as a list in the files parameter;
  • widget.js - contains your module's component registration info. It may also contain functions' registration code;
  • template.html - contains an HTML template of the custom module's widget;
  • widget.css - contains your widget's style definitions.

Refer to the How to: Add an XAF Mobile Custom Module topic to see the full step-by-step instructions.

See examples of using Mobile Custom Modules in the following topics:

Expanded Run a Script in a Client Application

XAF provides two places in which you can put your JavaScript:

  1. the Custom Mobile Module's widget.js file;
  2. one the following methods used to register your script:

You can use XAF client-side API in scripts. We recommend that you know how an XAF Mobile client application is designed before using this API.

XAF Mobile client applications follow the general MVVM (Model-View-View Model) pattern principles and consist of the following components:

  • A Model is an application's data stored in a local storage or on a remote server accessed using data providers. The MobileWindow.View's View.CurrentObject and ListView.CollectionSource represent the Model on the server side.
  • A View is an application's View and can be configured in the Model Editor.
  • A View Model is an object that contains data prepared for the View and provides properties, parameters and data sources that receive data from data providers. MobileWindow.ViewModelManager represents the View Model on the server side.

In addition to the View Model, Mobile client applications have a Global Model that provides application-level properties used to share data between Views.

The scheme below illustrates the interaction between the application's items:

You can access the View Model and Global Model in JavaScript using the $model and $global variables. The View Model's and Global Model's properties are listed below:

View Model:

  • $model.listViewDataSource - provides access to a List View's DataSource;
  • $model.CurrentObject - provides access to the current object's properties. This property is the client-side equivalent for View.CurrentObject;
  • $model.SelectedItems - provides access to the List View selected objects' collection.

Global Model:

  • $global.ServiceUrl - gets an OData service URL.

The following topics demonstrates how to use the client-side API:

Expanded Add Cordova Plugins

You can add a Cordova Plugin in your Mobile application to use native device capabilities. To do this, register a plugin in the Mobile application's PhoneGap configuration file. Refer to the How to: Use a Custom Plugin in a Mobile Application topic to learn how to add plugins to your Mobile application. To see more examples, refer to the following articles:

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