In this post on DataFlex and native mobile applications we will show how to create a native mobile application and connect it to our DataFlex application using web services built with the WebApp Framework.

While web applications can run on devices and become more and more able to do many things native mobile applications can do there are still a lot of things that are better done in a native mobile application.

An option to create a native mobile application on 3 platforms (iOS, Android and Windows) from the same code base is Xamarin. Xamarin is a cross platform environment that allows us to build a mobile application that will build as a native iOS application as well as a native Android and Windows application.

The code base is written in C#. This is just one example of building a mobile application there are several other frameworks out there and we will be visiting some of them in future posts.

For this example our goal is to use the DataFlex Web Order workspaces web services to supply data. Specifically we are looking at showing a list of customers using the GetCustomerInfoList web service that returns a list of all customers.

So in order for this to work we will need the Web Order workspace working and running.

By default the url for the web service would be

http://localhost/WebOrder_19_1/CustomerAndOrderInfo.wso/GetCustomerInfoList

and when called from a browser we would receive an output similar to the following

We could use this but switching the output to JSON will make it a lot more useful so we use the following URL which will return the data in JSON format

http://localhost/WebOrder_19_1/CustomerAndOrderInfo.wso/GetCustomerInfoList/JSON

Having the data ready we can switch to creating our native mobile application

To do this we create a Xamarin project in Visual Studio. We select the project type as a Cross Platform App (Xamarin Forms).

on the next screen we will select a Blank App template and the .NET Standard Code sharing strategy

After clicking ok Visual Studio will create a simple Xamarin Application with a single page

Lets quickly build this simple app. We can build it either for Windows, Android or iOS.

To build our little example we want to change this screen of course

We want a list showing our customers and we also want to add a field for the host name so we can enter a different host name for our web service if needed

On the DataFlex side we have a struct called tCutomerInfo that holds the data for each customer record

first we need the equivalent class on the Xamarin side to receive that information

We add the following class

now lets add a property for our host address to the application. In App.xaml.cs we will add the following

and then lets add the initialization in the constructor

Now we also add a static function to return an HttpClient that we will need later on for calling the web service

Having done all this it is time to create a view model for our view

First we will create a simple base view model class as follows

this class is a very simple base view model supporting property changed notifications

now we can use this class as a base class for our CustomerListViewModel

the viewmodel consists of a simple Observable collection property that will contain the list of customers and an asynchronous method to load the customer list from the web service.

the method simply creates the url and then calls the web service which in turn returns json data. We then deserialize the Json data into a list of CustomerInfo objects and create an observable collection from that list.

now back to our main screen. We want to have an entry field to enter the host address and a refresh button to force a refresh on the list and also of course a list that shows the Customers

Xamarin Forms uses Xaml to describe user interfaces. Our MainPage.xaml file looks as follows

We have a content page. In the content page we define a padding and we only use padding on the iOS platform. On iOS the top bar would otherwise be overlapping our main window.

The rest of the page is a StackLayout containing a logo image another stack layout that contains the host address fields and the ListView

The host address fields consist of a simple label and entry field as well as a button. The button has a simple clicked event, we could of course create a command in our ViewModel as well.

The ListView uses binding to bind its ItemsSource property to the Customers property of our CustomerListViewModel. The item template uses data binding to bind to the customer records fields.

Now on to the code side of the main page

First we define the view model property,  create an instance and also add it as a BindingContext to our main page.

In addition we initialize the host name from our application property

We also need to add the clicked event for our refresh button. Again this could be a command in our view model as well

We get the host name from the entry field update our applications host name property and call the GetCustomers method in our view model.

In addition we could automatically refresh the list when the screen is shown

To do this we override the OnAppearing event

In the OnAppearing event we also make a call to the GetCustomers method of our viewmodel to fill the list.

lets build our project and see what it looks like as a windows application

the same application built on Android will look as follows

and last but certainly not least the iOS version. For iOS builds a connected mac is required to do the builds

This shows a small example on how you can build a native mobile application using Xamarin and connect it to a DataFlex WebApp webservice.

We have used Xamarin in a few mobile applications often were offline capability was a big requirement.

Michael Salzlechner is the CEO of StarZen Technologies, Inc.

He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining StarZen Technologies. StarZen Technologies provides consulting services as well as custom Application development and third party products specifically for DataFlex developers