Xamarin cross platform application consuming WCF - Part 2

Here is the part two of the article where we will be developing three mobile client application in iOS, Android and Windows Phone 8 that will consume WCF service that we developed in Part 1 of this article.

Introduction
Here is the part two of the article where we will be developing three mobile client application in iOS, Android and Windows Phone 8. You can read part one here and grab the source code from that article in Source Code section at last. We will be using this source code now onwards.

Perquisites
• Visual Studio 2012
• Xamarin download
http://xamarin.com/download

Setup trial version
http://docs.xamarin.com/guides/cross-platform/getting_started/beginning_a_xamarin_trial/

• If you have Mac running Mountain Lion or later, follow this link to setup Xamarin build host
http://docs.xamarin.com/guides/ios/getting_started/installation/windows/#Installation

• Part 1 source code. Download from here.

iOS app
Open XamarinWCF solution and add one new project of type HelloWorld Application under iOS project.  Name this project iOS. Now we will construct the UI in the code. You can however design UI in Xcode designer. Have a look at this article to know more about it. As our UI is pretty simple, I decided to do it via code. Open MyViewController.cs and replace all code with following.

using System;
using MonoTouch.UIKit;
using System.Drawing;
using ServiceAgent;

namespace iOS
{
    public class MyViewController : UIViewController
    {
        UIButton sumButton;
        UITextField txtValue1;
        UITextField txtValue2;
        UILabel lblValue1;
        UILabel lblValue2;
        UILabel lblSum;

        public MyViewController()
        {
        }

         public override void ViewDidLoad()
        {
             base.ViewDidLoad();

            View.Frame = UIScreen.MainScreen.Bounds;
            View.BackgroundColor = UIColor.White;
            View.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;

            lblValue1 = new UILabel();
            lblValue1.Text = "Value one";
            lblValue1.Frame = new RectangleF(15f, 15f, View.Frame.Width - 20f, 30f);
            lblValue1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleBottomMargin;

            txtValue1 = new UITextField();
            txtValue1.Layer.BorderWidth = 1f;
            txtValue1.Frame = new RectangleF(15f, 40f, View.Frame.Width - 40f, 30f);
            txtValue1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleBottomMargin;

            lblValue2 = new UILabel();
            lblValue2.Text = "Value two";
            lblValue2.Frame = new RectangleF(15f, 65f, View.Frame.Width - 20f, 30f);
            lblValue2.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleBottomMargin;

            txtValue2 = new UITextField();
            txtValue2.Layer.BorderWidth = 1f;
            txtValue2.Frame = new RectangleF(15f, 90f, View.Frame.Width - 40f, 30f);
            txtValue2.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleBottomMargin;

            lblSum = new UILabel();
            lblSum.Frame = new RectangleF(15f, 115f, View.Frame.Width - 40f, 30f);
            lblSum.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleBottomMargin;

            sumButton = UIButton.FromType(UIButtonType.RoundedRect);
             sumButton.SetTitle("Do sum", UIControlState.Normal);
            sumButton.Layer.BorderWidth = 1f;
            sumButton.Frame = new RectangleF(15f, 140f, View.Frame.Width - 40f, 30f);
            sumButton.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleBottomMargin;

            View.AddSubview(lblValue1);
            View.AddSubview(txtValue1);
            View.AddSubview(lblValue2);
            View.AddSubview(txtValue2);
            View.AddSubview(lblSum);
            View.AddSubview(sumButton);
        }

     }
}

Listing 1.0 –  UI generation code for iOS app

As per Listing 1.0, we have created couple of UILabel and UITextField along with UIButton. View.AddSubView adds these controls in current view so it can be displayed when application runs.

Adding references for CalculatorService
Now let's call our CalculatorService that we created in Part 1 of this article. For that, just add reference to ServiceAgent project. Also we need to add references to System.Runtime.Serialization, System.ServiceModel, and System.ServiceModel.Web. Adding these references will be common for all three mobile applications.

With all these done, let's add the following code just above View.AddSubview(lblValue1); line.

sumButton.TouchUpInside += async (object sender, EventArgs e) =>
            {
                var task = CalculatorServiceAgent.DoSum(Convert.ToInt32(txtValue1.Text), Convert.ToInt32(txtValue2.Text));
                int res = await task;
                lblSum.Text = String.Format("Sum is {0}", res.ToString());
             };

Listing 1.1 –  iOS app calling WCF service through agent

Here as per Listing 1.1, the call to DoSum method on agent returns Tast<int> object. It is asynchronous operations so I need to use await for the task. Once it executes, it shows the result in lblSum. Now go ahead and Press F5. I assume that you have setup networked Mac machine for build running Xamarin build host. If not, please go through the links in Perquisites section at the beginning of this article.


Figure 1.0 – Xamarin iOS app consuming WCF service

Figure 1.0 shows our iOS app in action. I just put two values and hit Do sum button and result is displayed just above the button. It is just cool to develop iOS app in C#!

Android app

Let's quickly build Android app. Add new project of type Android Application to XamarinWCF solution and name it Android. In an android project, the default view is defined in Main.axml file located in Resources\Layout folder.
To create view, you can use Android designer in Visual studio or can directly construct using markup. For our application, the complete xml markup is as following for Main.axml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
         android:text="Value one"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
    <EditText
         android:inputType="number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtValue1" />
    <TextView
         android:text="Value two"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2" />
    <EditText
         android:inputType="number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtValue2" />
    <TextView
         android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtSumView" />
    <Button
         android:text="Do sum"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/SumButton" />
</LinearLayout>

Listing 1.2 –  Android app markup for Main.axml

The markup in Listing 1.2 is pretty self-explanatory as we are setting text and layout properties like height & width for the controls. Now the code for talking to service will be placed in Activity1.cs file. But before that, complete steps mentioned in section Adding references for CalculatorService above. Once you are done with it, just write following code for Activity1.cs.

using Android.App;
using Android.OS;
using Android.Widget;
using ServiceAgent;
using System;

namespace Android
{
    [Activity(Label = "Android", MainLauncher = true, Icon = "@drawable/icon")]
    public class Activity1 : Activity
    {
         protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

             // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button SumButton = FindViewById<Button>(Resource.Id.SumButton);
            SumButton.Click += SumButton_Click;
        }

        async void SumButton_Click(object sender, EventArgs e)
        {
            var txtValue1 = FindViewById<EditText>(Resource.Id.txtValue1);
            var txtValue2 = FindViewById<EditText>(Resource.Id.txtValue2);
            var txtSumView = FindViewById<TextView>(Resource.Id.txtSumView);
            var task = CalculatorServiceAgent.DoSum(Convert.ToInt32(txtValue1.Text), Convert.ToInt32(txtValue2.Text));
            var res = await task;
            txtSumView.Text = string.Format("Sum is {0}", res.ToString());
        }
    }
}

Listing 1.3 –  Android app calling WCF service through agent

Here as per Listing 1.3, the caller part to WCF service via agent is same as what we wrote for iOS app. At this point, you are all set to hit F5 and see Android app in action as Figure 1.1.



Figure 1.1 – Xamarin Android app consuming WCF service

Windows Phone 8 app
For windows phone app, add project of type Windows Phone App to XamarinWCF solution and name it WP8. Then replace the entire markup for default Grid in MainPage.xaml page with the following:

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Value one" VerticalAlignment="Top" Grid.Row="0"/>
        <TextBox x:Name="txtValue1" HorizontalAlignment="Stretch" Height="72" VerticalAlignment="Top" Grid.Row="1"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Value two" VerticalAlignment="Top" Grid.Row="2"/>
        <TextBox x:Name="txtValue2" HorizontalAlignment="Stretch" Height="72"  VerticalAlignment="Top" Grid.Row="3"/>
        <TextBlock x:Name="txtSum" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="4"/>
        <Button x:Name="sumButton" Content="Do sum" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Row="5" Click="sumButton_Click" />
    </Grid>

Listing 1.4 –  Windows phone app UI markup for MainPage.xaml

Now it's time to call service. Just add reference to ServiceAgent project and write following piece of code in MainPage.xaml.cs

private async void sumButton_Click(object sender, RoutedEventArgs e)
        {
            var task = CalculatorServiceAgent.DoSum(Convert.ToInt32(txtValue1.Text), Convert.ToInt32(txtValue2.Text));
            var res = await task;
            txtSum.Text = string.Format("Sum is {0}", res.ToString());
        }

Listing 1.5 –  Windows phone calling WCF service through agent

Now you are all set to hit F5 and run the application. I have Nokia Lumia 720 so I connected that to test the app.
Following is the screenshot of the app running on my phone.  



Figure 1.2 – Windows phone 8 app consuming WCF service on Nokia Lumia 720

I hope you enjoyed this article so much as I while writing!

Source Code
Download source code here.

By jay nanavati   Popularity  (7060 Views)