The requested page is not available for the requested platform. You are viewing the content for Default platform.
A newer version of this page is available. Switch to the current version.

Ways to Customize a Mobile Application

  • 5 min to read

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

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:

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.

MobileCustomModuleStructure

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:

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:

MVVM_Scheme

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:

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: