{"id":627,"date":"2018-11-16T05:22:03","date_gmt":"2018-11-16T10:22:03","guid":{"rendered":"http:\/\/salzlechner.com\/dev\/?p=627"},"modified":"2018-11-19T05:44:23","modified_gmt":"2018-11-19T10:44:23","slug":"dataflex-and-native-mobile-applications-xamarin","status":"publish","type":"post","link":"http:\/\/salzlechner.com\/dev\/2018\/11\/16\/dataflex-and-native-mobile-applications-xamarin\/","title":{"rendered":"DataFlex and Native Mobile Applications – Xamarin"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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\u00a0GetCustomerInfoList web service that returns a list of all customers.<\/p>\n

So in order for this to work we will need the Web Order workspace working and running.<\/p>\n

By default the url for the web service would be<\/p>\n

http:\/\/localhost\/WebOrder_19_1\/CustomerAndOrderInfo.wso\/GetCustomerInfoList<\/strong><\/p>\n

and when called from a browser we would receive an output similar to the following<\/p>\n

\"\"<\/p>\n

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<\/p>\n

http:\/\/localhost\/WebOrder_19_1\/CustomerAndOrderInfo.wso\/GetCustomerInfoList\/JSON<\/strong><\/p>\n

Having the data ready we can switch to creating our native mobile application<\/p>\n

To do this we create a Xamarin project in Visual Studio. We select the project type as a Cross Platform App (Xamarin Forms).<\/p>\n

\"\"<\/p>\n

on the next screen we will select a Blank App template and the .NET Standard Code sharing strategy<\/p>\n

After clicking ok Visual Studio will create a simple Xamarin Application with a single page<\/p>\n

Lets quickly build this simple app. We can build it either for Windows, Android or iOS.<\/p>\n

\"\"<\/p>\n

To build our little example we want to change this screen of course<\/p>\n

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<\/p>\n

On the DataFlex side we have a struct called tCutomerInfo that holds the data for each customer record<\/p>\n

\/\/ Customer Information\r\n\/\/ This structure matches the structure of the Customer table\r\nstruct tCustomerInfo\r\n    integer iCustNumber\r\n    string  sName\r\n    string  sCustAddress\r\n    string  sCity\r\n    string  sState\r\n    string  sZip\r\n    string  sPhoneNumber\r\n    string  sFaxNumber\r\n    string  sEmailAddress\r\n    real    rCreditLimit\r\n    real    rPurchases\r\n    real    rBalance\r\n    string  sComments\r\n    string  sStatus\r\nend_struct<\/pre>\n
first we need the equivalent class on the Xamarin side to receive that information<\/p>\n
We add the following class<\/p>\n
namespace XamAndFlex\r\n{\r\n    class CustomerInfo\r\n    {\r\n        public int iCustNumber { get; set; }\r\n        public string sName { get; set; }\r\n        public string sCustAddress { get; set; }\r\n        public string sCity { get; set; }\r\n        public string sState { get; set; }\r\n        public string sZip { get; set; }\r\n        public string sPhoneNumber { get; set; }\r\n        public string sFaxNumber { get; set; }\r\n        public string sEmalAddress { get; set; }\r\n        public decimal rCreditLimit { get; set; }\r\n        public decimal rPurchases { get; set; }\r\n        public decimal rBalance { get; set; }\r\n        public string sComments { get; set; }\r\n        public string sStatus { get; set; }\r\n    }\r\n}<\/pre>\n
now lets add a property for our host address to the application. In App.xaml.cs we will add the following<\/p>\n
        private static string _hostAddress;\r\n        public static string HostAddress { get { return _hostAddress; } set { _hostAddress = value; } }<\/pre>\n
and then lets add the initialization in the constructor<\/p>\n
        public App()\r\n        {\r\n            InitializeComponent();\r\n\r\n            HostAddress = \"http:\/\/localhost\/\";\r\n            MainPage = new XamAndFlex.MainPage();\r\n        }<\/pre>\n
Now we also add a static function to return an HttpClient that we will need later on for calling the web service<\/p>\n
        private static HttpClient _client;\r\n        public static HttpClient GetClient()\r\n        {\r\n            if (_client == null)\r\n            {\r\n                _client = new HttpClient();\r\n                _client.Timeout = TimeSpan.FromSeconds(8);\r\n            }\r\n            return _client;\r\n        }<\/pre>\n
Having done all this it is time to create a view model for our view<\/p>\n
First we will create a simple base view model class as follows<\/p>\n
namespace XamAndFlex\r\n{\r\n    public class BaseViewModel : INotifyPropertyChanged\r\n    {\r\n\r\n        protected bool SetProperty<T>(ref T backingStore, T value,\r\n            [CallerMemberName]string propertyName = \"\",\r\n            Action onChanged = null)\r\n        {\r\n            if (EqualityComparer<T>.Default.Equals(backingStore, value))\r\n                return false;\r\n\r\n            backingStore = value;\r\n            onChanged?.Invoke();\r\n            OnPropertyChanged(propertyName);\r\n            return true;\r\n        }\r\n\r\n        #region INotifyPropertyChanged\r\n        public event PropertyChangedEventHandler PropertyChanged;\r\n        protected void OnPropertyChanged([CallerMemberName] string propertyName = \"\")\r\n        {\r\n            var changed = PropertyChanged;\r\n            if (changed == null)\r\n                return;\r\n\r\n            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));\r\n        }\r\n        #endregion\r\n    }\r\n}<\/pre>\n
this class is a very simple base view model supporting property changed notifications<\/p>\n
now we can use this class as a base class for our CustomerListViewModel<\/p>\n
namespace XamAndFlex\r\n{\r\n    class CustomerListViewModel : BaseViewModel\r\n    {\r\n        public CustomerListViewModel()\r\n        {\r\n            Customers = new ObservableCollection<CustomerInfo>();\r\n        }\r\n\r\n        public ObservableCollection<CustomerInfo> Customers { get; set; }\r\n\r\n        public async Task<bool> GetCustomers()\r\n        {\r\n\r\n            string uri = String.Format(\"{0}WebOrder_19_1\/CustomerAndOrderInfo.wso\/GetCustomerInfoList\/JSON\", App.HostAddress);\r\n\r\n\r\n            try\r\n            {\r\n                var cl = App.GetClient();\r\n                var content = await cl.GetStringAsync(uri);\r\n\r\n                var custs = JsonConvert.DeserializeObject<List<CustomerInfo>>(content);\r\n                Customers = new ObservableCollection<CustomerInfo>(custs);\r\n                OnPropertyChanged(\"Customers\");\r\n            }\r\n            catch (Exception ex)\r\n            {\r\n            }\r\n\r\n            return true;\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
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.<\/p>\n
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.<\/p>\n
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<\/p>\n
Xamarin Forms uses Xaml to describe user interfaces. Our MainPage.xaml file looks as follows<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\r\n<ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\r\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\r\n             xmlns:local=\"clr-namespace:XamAndFlex\"\r\n             x:Class=\"XamAndFlex.MainPage\">\r\n\r\n    <ContentPage.Padding>\r\n        <OnPlatform x:TypeArguments=\"Thickness\"  iOS=\"0, 20, 0, 0\"                     Android=\"0, 0, 0, 0\"                     WinPhone=\"0, 0, 0, 0\" \/>\r\n    <\/ContentPage.Padding>\r\n    \r\n    <StackLayout Orientation=\"Vertical\">\r\n        <Image Source=\"starzenlogo.png\"><\/Image>\r\n\r\n        <StackLayout Margin=\"5\" Orientation=\"Horizontal\" >\r\n            <StackLayout Orientation=\"Vertical\">\r\n                <Label Text=\"Host Name:\" FontSize=\"Micro\" \/>\r\n                <Entry WidthRequest=\"300\" x:Name=\"hostNameEntry\" \/>\r\n            <\/StackLayout>\r\n\r\n            <Button Text=\"Refresh\" Clicked=\"btnRefresh_Clicked\"\/>\r\n            \r\n        <\/StackLayout>\r\n        \r\n        <ListView RowHeight=\"100\" ItemsSource=\"{Binding Customers}\">\r\n            <ListView.ItemTemplate>\r\n                <DataTemplate>\r\n                    <ViewCell>\r\n                            <Grid >\r\n                                <StackLayout HorizontalOptions=\"Center\" Orientation=\"Vertical\" Margin=\"5\">\r\n                                    <StackLayout HorizontalOptions=\"Center\" Spacing=\"5\" Orientation=\"Horizontal\">\r\n                                        <Label VerticalOptions=\"Center\" Text=\"{Binding sName}\" FontSize=\"Small\" FontAttributes=\"Bold\" \/>\r\n                                        <Label VerticalOptions=\"Center\" Text=\"{Binding iCustNumber}\" FontSize=\"Micro\" \/>\r\n                                    <\/StackLayout>\r\n                                    <Label HorizontalOptions=\"Center\" Text=\"{Binding sCustAddress}\" FontSize=\"Micro\"  \/>\r\n                                    <StackLayout HorizontalOptions=\"Center\" Spacing=\"5\" Orientation=\"Horizontal\">\r\n                                        <Label Text=\"{Binding sCity}\" FontSize=\"Micro\" \/>\r\n                                        <Label Text=\"{Binding sState}\" FontSize=\"Micro\" \/>\r\n                                        <Label Text=\"{Binding sZip}\" FontSize=\"Micro\" \/>\r\n                                    <\/StackLayout>\r\n\r\n                                <\/StackLayout>\r\n\r\n                        <\/Grid>\r\n                    <\/ViewCell>\r\n                <\/DataTemplate>\r\n            <\/ListView.ItemTemplate>\r\n        <\/ListView>\r\n    <\/StackLayout>\r\n\r\n<\/ContentPage>\r\n<\/pre>\n
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.<\/p>\n
The rest of the page is a StackLayout containing a logo image another stack layout that contains the host address fields and the ListView<\/p>\n
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.<\/p>\n
The ListView uses binding to bind its ItemsSource<\/em> property to the Customers<\/em> property of our CustomerListViewModel<\/em>. The item template uses data binding to bind to the customer records fields.<\/p>\n
Now on to the code side of the main page<\/p>\n
First we define the view model property,\u00a0 create an instance and also add it as a BindingContext to our main page.<\/p>\n
In addition we initialize the host name from our application property<\/p>\n
        private CustomerListViewModel customerListViewModel; \r\n\r\n        public MainPage()\r\n\t\t{\r\n            InitializeComponent();\r\n\r\n            customerListViewModel = new CustomerListViewModel();\r\n            BindingContext = customerListViewModel;\r\n\r\n            hostNameEntry.Text = App.HostAddress;\r\n\r\n\r\n        }<\/pre>\n
We also need to add the clicked event for our refresh button. Again this could be a command in our view model as well<\/p>\n
 private async void btnRefresh_Clicked(object sender, EventArgs e)\r\n        {\r\n            App.HostAddress = hostNameEntry.Text;\r\n            if (!App.HostAddress.EndsWith(\"\/\"))\r\n            {\r\n                App.HostAddress = App.HostAddress + \"\/\";\r\n            }\r\n            await customerListViewModel.GetCustomers();\r\n        }<\/pre>\n
We get the host name from the entry field update our applications host name property and call the GetCustomers method in our view model.<\/p>\n
In addition we could automatically refresh the list when the screen is shown<\/p>\n
To do this we override the OnAppearing event<\/p>\n
        protected override async void OnAppearing()\r\n        {\r\n            base.OnAppearing();\r\n            await customerListViewModel.GetCustomers();\r\n            \r\n        }<\/pre>\n
In the OnAppearing event we also make a call to the GetCustomers method of our viewmodel to fill the list.<\/p>\n
lets build our project and see what it looks like as a windows application<\/p>\n
\"\"<\/p>\n
the same application built on Android will look as follows<\/p>\n
\"\"<\/p>\n
and last but certainly not least the iOS version. For iOS builds a connected mac is required to do the builds<\/p>\n
\"\"<\/p>\n
This shows a small example on how you can build a native mobile application using Xamarin and connect it to a DataFlex WebApp webservice.<\/p>\n
We have used Xamarin in a few mobile applications often were offline capability was a big requirement.<\/p>\n\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\t
<\/div>\n\t\t<\/div> \n\t\t
\n\t\t\tMichael Salzlechner is the CEO of StarZen Technologies, Inc.<\/p>\n
He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining\u00a0StarZen Technologies<\/a>. StarZen Technologies provides consulting services as well as custom Application development and third party products specifically for DataFlex developers<\/p>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","ngg_post_thumbnail":0,"footnotes":""},"categories":[6,27,36],"tags":[],"class_list":["post-627","post","type-post","status-publish","format-standard","hentry","category-dataflex","category-dataflex-webapp","category-xamarin"],"_links":{"self":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/comments?post=627"}],"version-history":[{"count":4,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/627\/revisions"}],"predecessor-version":[{"id":640,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/627\/revisions\/640"}],"wp:attachment":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/media?parent=627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/categories?post=627"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/tags?post=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}