Current filter:
                                You should refresh the page.
                                Support Center
                                0
                                This example demonstrates how to take advantage of a mobile device positioning system in your XAF mobile application using the Cordova Background Geolocation plugin and Cordova Device plugin . Additionally, you will learn how to access the PhoneGap config file (regular XML file) and add the plugin to your application.

                                Scenario:
                                You want to automatically track movements of an XAF mobile application user and display the user's route on the map, e.g., in a separate administrative XAF Web application:




                                Your feedback is needed!
                                This is not an official feature of our Mobile UI (CTP) and our API may change in future release cycles. We are publishing this article prior to the 17.2 release to collect early user feedback and improve overall functionality. We would appreciate your thoughts on this feature once you've had the opportunity to review it. Please report any issues, missing capabilities or suggestions in separate tickets in our Support Center. Thanks for your help in advance!

                                Prerequisites
                                Install any v17.1.5+ version.
                                The implementation steps below are given for a new application, though they can be applied to any other XAF mobile app.

                                Steps to implement
                                1. 
                                Create a new XAF solution with Web and Mobile platforms and enable the Maps Module in it. 

                                2. In the YourSoltutionName.Mobile/MobileApplication.xx file, handle the MobileApplication.CustomizePhoneGapConfig event to register the Cordova Background Geolocation plugin. The code snippet below demonstrates how to add required records to the PhoneGap configuration file (you can find this code in the BackgroundGeolocation.Mobile/MobileApplication.xx file of the sample project):
                                [C#]
                                using System.Xml.Linq; using DevExpress.ExpressApp.Mobile; private void YourMobileApplication_CustomizePhoneGapConfig(object sender, CustomizePhoneGapConfigEventArgs e) { XElement root = e.PhoneGapConfig.Root; XNamespace phoneGapNamespace = "http://phonegap.com/ns/1.0"; XElement pluginElement = new XElement(phoneGapNamespace + "plugin", new XAttribute("name", "cordova-background-geolocation-lt"), new XAttribute("source", "npm"), new XAttribute("spec", "2.7.3")); pluginElement.Add(new XElement("variable", new XAttribute("name", "LOCATION_ALWAYS_USAGE_DESCRIPTION"), new XAttribute("value", "Background location-tracking is required"))); pluginElement.Add(new XElement("variable", new XAttribute("name", "LOCATION_WHEN_IN_USE_USAGE_DESCRIPTION"), new XAttribute("value", "Background location-tracking is required"))); pluginElement.Add(new XElement("variable", new XAttribute("name", "MOTION_USAGE_DESCRIPTION"), new XAttribute("value", "Using the accelerometer increases battery-efficiency by intelligently toggling location-tracking only when the device is detected to be moving"))); // pluginElement.Add(new XElement("variable", new XAttribute("name", "LICENSE"), new XAttribute("value", "YOUR_LICENSE_KEY"))); root.Add(pluginElement); root.Add(new XElement(phoneGapNamespace + "plugin", new XAttribute("name", "cordova-plugin-device"), new XAttribute("source", "npm"))); }
                                [VB.NET]
                                Imports System.Xml.Linq Imports DevExpress.ExpressApp.Mobile Private Sub YourMobileApplication_CustomizePhoneGapConfig(ByVal sender As Object, ByVal e As CustomizePhoneGapConfigEventArgs) Dim root As XElement = e.PhoneGapConfig.Root Dim phoneGapNamespace As XNamespace = "http://phonegap.com/ns/1.0" Dim pluginElement As New XElement(phoneGapNamespace + "plugin", New XAttribute("name", "cordova-background-geolocation-lt"), New XAttribute("source", "npm"), New XAttribute("spec", "2.7.3")) pluginElement.Add(New XElement("variable", New XAttribute("name", "LOCATION_ALWAYS_USAGE_DESCRIPTION"), New XAttribute("value", "Background location-tracking is required"))) pluginElement.Add(New XElement("variable", New XAttribute("name", "LOCATION_WHEN_IN_USE_USAGE_DESCRIPTION"), New XAttribute("value", "Background location-tracking is required"))) pluginElement.Add(New XElement("variable", New XAttribute("name", "MOTION_USAGE_DESCRIPTION"), New XAttribute("value", "Using the accelerometer increases battery-efficiency by intelligently toggling location-tracking only when the device is detected to be moving"))) ' pluginElement.Add(new XElement("variable", new XAttribute("name", "LICENSE"), new XAttribute("value", "YOUR_LICENSE_KEY"))); root.Add(pluginElement) root.Add(New XElement(phoneGapNamespace + "plugin", New XAttribute("name", "cordova-plugin-device"), New XAttribute("source", "npm"))) End Sub
                                Take note of the commented out line of code, which adds the "LICENSE" attribute. If you have the license key, (refer to the corresponding remark in the README file), uncomment this code and replace the YOUR_LICENSE_KEY placeholder with your own key .

                                3.
                                 In the YourSolutionName.Module project, copy the BackgroundGeolocation.Module\BusinessObjects\DeviceInfo.xx file to the BusinessObjects folder.
                                This file contains business classes used to store background geolocation data received from mobile clients. You may want to put these classes into separate files according to your code rules.

                                4. In the YourSolutionName.Mobile project, create a new Geolocation folder and copy the several code files below into it as per the instructions below.
                                4.1. Copy the BackgroundGeolocation.Mobile\Geolocation\GeolocationScript.js file and include it in the project. Change the Build Action property for this file to Embedded Resource. This code initializes the Cordova Background Geolocation plugin with default settings. Feel free to modify it according to your needs. More information about configuring options can be found in the project's github repository.

                                4.2. Copy the BackgroundGeolocation.Mobile\Geolocation\GeolocationJsonObject.xx file and include it in the project.
                                These classes are used to deserialize JSON data set by mobile applications to the Geolocation Service.

                                4.3. 
                                Copy the BackgroundGeolocation.Mobile\Geolocation\GeolocationHttpHandler.xx file and include it in the project. 
                                The Background Geolocation plugin will send data to this service. The service is intended to save the device information to the database. It uses the connection string from the application configuration file (Web.config).

                                To enable the HTTP handler added on the previous step, add the following line to the configuration/system.webServer/handlers section of the YourSolutionName.Mobile/Web.config file (you may need to change the type attribute value and specify the namespace qualified name of the GeolocationHttpHandler class declared in your project:

                                [XML]
                                <add name="Geolocation" verb="GET,POST" path="GeolocationProcessingService.svc" type="YourSolutionName.Mobile.GeolocationHttpHandler" />

                                5.  In the YourSoltutionName.Mobile/MobileApplication.xx file, register the GeolocationScript.js code (copied on step #4.1) using the MobileApplication.RegisterClientScriptOnApplicationStart method so that this script executes when the mobile application starts up on the device. The code snippet below demonstrates how to implement the ReadResource and ReadResourceString methods required to load the code from the embedded resource into a String variable (you can find this code in the BackgroundGeolocation.Mobile/MobileApplication.xx file of the sample project): 
                                [C#]
                                public BackgroundGeolocationMobileApplication() { // ... string geolocationScript = ReadResourceString("BackgroundGeolocation.Mobile.Geolocation.GeolocationScript.js"); RegisterClientScriptOnApplicationStart("GeolocationScript", geolocationScript); } public static byte[] ReadResource(string resourceName) { byte[] buffer = null; using (Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(resourceName)) { if (stream != null) { buffer = new byte[stream.Length]; stream.Read(buffer, 0, (int)stream.Length); } } return buffer; } public static string ReadResourceString(string resourceName) { byte[] resourceBytes = ReadResource(resourceName); return Encoding.UTF8.GetString(resourceBytes).Replace("\r\n", "\\r\\n"); }
                                [VB.NET]
                                Public Sub New() ' ... Dim geolocationScript As String = ReadResourceString("GeolocationScript.js") RegisterClientScriptOnApplicationStart("GeolocationScript", geolocationScript) End Sub Public Shared Function ReadResource(ByVal resourceName As String) As Byte() Dim buffer() As Byte = Nothing Using stream As Stream = System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream(resourceName) If stream IsNot Nothing Then buffer = New Byte(stream.Length - 1){} stream.Read(buffer, 0, CInt(stream.Length)) End If End Using Return buffer End Function Public Shared Function ReadResourceString(ByVal resourceName As String) As String Dim resourceBytes() As Byte = ReadResource(resourceName) Return Encoding.UTF8.GetString(resourceBytes).Replace(ControlChars.CrLf, "\r\n") End Function
                                The value passed to the ReadResourceString method consists of two parts in C# projects: the default assembly namespace ("BackgroundGeolocation.Mobile") and the path to the resource file ("Geolocation.GeolocationScript.js"). The first part may be different in your project. In VB.NET projects, the resource name will be much simpler: "GeolocationScript.js". 

                                6. In the YourSolutionName.Module.Web project, install the Newtonsoft.Json NuGet package and copy the BackgroundGeolocation.Module.Web\Controllers\DisplayGeolocationController.xx file to the Controllers folder.
                                This controller is intended to draw the client's route based on location points.

                                7. Build and deploy your mobile application following the steps described in the Install the Application to a Smartphone  help article, and ensure that the Geolocation services are enabled in the mobile device settings.
                                Once you get your mobile app running on your actual device, wait a few minutes and then run the Web version of your XAF application. Open the DeviceInfo List View, and you will see a record containing your mobile device information. If you click the ListView record, you will be navigated to the DetailView that contains the Map demonstrating the route tracked by the Background Geolocation module.

                                See Also:
                                eXpressApp Framework > Getting Started > XAF Mobile (CTP) Tutorial
                                XAF Mobile - Overview Video
                                FAQ: New XAF HTML5/JavaScript mobile UI (CTP)
                                Using Maps in a Mobile Application 
                                How to send push notifications to the XAF Mobile application using Azure Notifications Hub
                                How to use a Barcode Scanner in XAF Mobile
                                Show Implementation Details
                                Select file
                                • GeolocationHttpHandler.cs
                                • DeviceInfo.cs
                                • DisplayGeolocationController.cs
                                • GeolocationJsonObject.cs
                                • GeolocationScript.js
                                • MobileApplication.cs
                                Select language
                                • C#
                                • VB.NET
                                Select version
                                • v2017 vol 1.5

                                If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2017 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners