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.

How to: Implement Client-Side Logic in Mobile Applications

  • 6 min to read

This topic demonstrates how to create an Action that runs JavaScript code in an XAF Mobile Client application and includes the following examples:

These examples use the Organization and Person classes from the Business Class Library (see the Add a Class from the Business Class Library (XPO/EF) topic).

Execute an Action on Client-Side without Requests to a Server

This section describes how to access a current object and its properties in JavaScript. This example demonstrates how to get a link specified in the Organization's WebPage property and open this link in a new browser window.

  1. Create a new ObjectViewController<ViewType, ObjectType> descendant called "OpenWebSiteController". Set the Controller's ViewType parameter to "DetailView" and the ObjectType parameter to "Organization".
  2. In the Controller's constructor, create a new SimpleAction and name it "OpenUrlAction".
  3. Declare a new OpenLinkScript string variable to store JavaScript. Use the $model.CurrentObject property to access the current object and get its WebSite property value (refer to the Ways to Customize a Mobile Application topic's Run a Script in a Client Application section to learn more about client-side Mobile API members.). Call the window.open method to open this website in a new browser window.
  4. Pass the script's name and code to the ActionBaseExtensions.RegisterClientScriptOnExecute method. The script runs when the OpenUrlAction is executed.

The code below demonstrates the OpenWebSiteController:

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
// ...
public class OpenWebSiteController : ObjectViewController<DetailView, Organization> {
    SimpleAction OpenUrlAction;
    string OpenLinkScriptName = "OpenLink";
    string OpenLinkScript = @"window.open($model.CurrentObject.WebSite);";
    public OpenWebSiteController() {
        OpenUrlAction = new SimpleAction(this, "OpenWebSite", PredefinedCategory.View);
        OpenUrlAction.RegisterClientScriptOnExecute(OpenLinkScriptName, OpenLinkScript);
    }
}

Run the application, open an Organization's Detail View and specify the WebSite property. Click the Open Web Site Action to execute the client-side script - the specified link is opened in a browser.

OpenWebSiteAction

Execute an Action on Client-Side and Get a Property Value from a Server

This section describes how to get an object passed from the server and use it in a script on the client-side. The script gets the manager's email when an Organization's Detail View is shown. The script then opens the default mail client and creates a new message for this email address. For example, the manager is the Person object whose FirstName property is set to "Karl".

  1. Create a new ObjectViewController<ViewType, ObjectType> descendant called "SendFeedbackController" (as described in the Execute a Script on Client-Side without Requests to a Server section's first step).
  2. Override the OnViewControlsCreated method to access the current Frame only when its controls are created. Cast the Frame to the MobileWindow type and use the MobileWindow.ViewModelManager property to get the Frame's View Model (see the Ways to Customize a Mobile Application topic's Run a Script in a Client Application section).
  3. Use the IObjectSpace.FindObject<ObjectType> method to get the Person object with the FirstName property set to "Karl".
  4. Pass the "organizationManagerEmail" string to the ClientModelManager.RegisterProperty method, thus adding the new property with the specified name to the View Model. Call its UpdatePropertyValue method (see ClientModelManager.UpdatePropertyValue). Pass the "organizationManagerEmail" property name as the method's first parameter, and the string that consists of the "mailto" substring and the Person's Email property value as the second parameter. This allows you to get the property value when the Organization's Detail View is shown.
  5. Create a new SendFeedbackScript string variable to store a JavaScript. Use the $model variable to access the organizationManagerEmail property and call the window.open method to open a mailto-format link in a new browser window. Refer to the Ways to Customize a Mobile Application topic's Run a Script in a Client Application section to learn more about the client-side Mobile API members.
  6. In the Controller's constructor, create a new SimpleAction and name it "SendFeedbackAction".
  7. Pass the script's name and code to the SendFeedbackAction's ActionBaseExtensions.RegisterClientScriptOnExecute method. The script runs when the SendFeedbackAction is executed.

The code below demonstrates the SendFeedbackController:

using DevExpress.Data.Filtering;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Mobile;
using DevExpress.ExpressApp.Mobile.MobileModel;
using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
// ...
public class SendFeedbackController : ObjectViewController<DetailView, Organization> {
    SimpleAction SendFeedbackAction;
    string SendFeedbackScriptName = "SendFeedback";
    string SendFeedbackScript = @"window.open($model.organizationManagerEmail);";
    public SendFeedbackController() {
        SendFeedbackAction = new SimpleAction(this, "SendFeedback", PredefinedCategory.View);
        SendFeedbackAction.RegisterClientScriptOnExecute(SendFeedbackScriptName, SendFeedbackScript);
    }
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        if (ViewCurrentObject != null) {
            ViewModelManager viewModelManager = ((MobileWindow)Frame).ViewModelManager;
            ModelProperty modelProperty = viewModelManager.RegisterProperty("organizationManagerEmail");
            Person manager = ObjectSpace.FindObject<Person>(CriteriaOperator.Parse("[FirstName]='Karl'"));
            viewModelManager.UpdatePropertyValue(modelProperty.Name, "mailto:" + manager.Email);
        }
    }
}

Run the application. Specify the Email property for "Karl", and then open the Organization object's Detail View. Click the Send Feedback Action to ensure that the client-side script is executed - a default mail client opens the form with a new message for the corresponding email address.

SendFeedbackAction

Execute an Action on Both Client-Side and Server-Side

This approach differs from one described in the Execute a Script on Client-Side and Make a Request to a Server section because additional code is run on the server-side when an Action is executed. This code adds a new record in the log file.

Modify the SendFeedbackController demonstrated in the Execute a Script on Client-Side and Make a Request to a Server section as follows:

  1. In the Controller's constructor, subscribe to the Action's Execute event.
  2. In this event handler, add a new record to the log file using the Tracer.LogText method.
  3. Specify the RegisterClientScriptOnExecute's second parameter with the script and value the ActionBaseExtensions.GetProcessActionOnServerScript method returns. In this case, the code from the Execute event's handler is executed on the server-side, and SendFeedbackScript is executed on the client-side.

The code below demonstrates the modified SendFeedbackController:

using DevExpress.Data.Filtering;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Mobile;
using DevExpress.ExpressApp.Mobile.MobileModel;
using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
// ...
public class SendFeedbackController : ObjectViewController<DetailView, Organization> {
    // ...
    public SendFeedbackController() {
        SendFeedbackAction = new SimpleAction(this, "SendFeedback", PredefinedCategory.View);
        SendFeedbackAction.Execute += SendFeedbackAction_Execute;
        SendFeedbackAction.RegisterClientScriptOnExecute(SendFeedbackScriptName,
            SendFeedbackAction.GetProcessActionOnServerScript() + SendFeedbackScript);
    }
    private void SendFeedbackAction_Execute(object sender, SimpleActionExecuteEventArgs e) {
        Tracing.Tracer.LogText("SendFeedbackAction is executed.");
    }
    // ...
}
See Also