Building an iPhone "Hello World" that uses a WCF service with Adobe Flash Builder

I will walk you through building an iOS application using Adobe Flash Builder 4.5.1. If you don’t have Flash Builder 4.5.1, you can get a trial from Adobe at http://www.adobe.com/products/flashbuilder/

Once you have Flash Builder 4.5.1 installed, open it and let’s get started.

At first, I was going to talk about a simpler Hello World app, one that just pop up a greeting message once it was opened, but after playing around with the idea, I thought it would be meaningful if we tried to build a more complex sample. The idea I came up was to build a mobile application that would take the name of a person from a text area, send it to a web service and the service will reply with a greeting message.

Create a Flex Mobile Project.

• Create a Flex Mobile Project by choosing File -> New -> Flex Mobile Project. This will open the wizzard, wich we will use to create the project.
• On the Project Location screen, we are going to set up the project name (HelloWorldWCF), location and Flex SDK.

• On the Mobile Settings screen, we are going to select settings specific to the target platform, for now, just select "Apple iOS" and "View Based Application" as a template.

• On the Server Settings screen, we are going to select NONE as the application server type, we are going to add the service reference latter on.

• On the Build paths screen, we are going to set the application ID. This ID should be unique, reverse domain naming convention works like a charm!

• Click on finish, Flash builder will create al required files and open the HelloWorldWCFHomeView.mxml by default, let's update its contents adding the following after the fx:Declarations:

<s:TextArea id="txtName" x="8" y="31" prompt="Name"/>

<s:Button id="btnSayHi" x="476" y="145" label="Say Hi!"/>

<s:Label id="lblResponse" x="10" y="239" width="610" height="190"/>

We are adding a TextArea (txtName) where the user will populate his or her name, a button (btnSayHi) that we are going to use to call the WCF service and a label (lblResponse) were we are going to show the WCF service response.

Setting up the simulator Environment.

For the sake of keeping this exercise as simple as possible we are going to use the simulator environment. Before you run the application for the first time, you will need to setup a simulator environment. Right click on the HelloWorldWCF project and select Run As -> Mobile Application.

The Run Configuration screen pop ups, select Apple iOS as Target Platform and "Launch on desktop" : "Apple iPhone 4".

Click on Run. The mobile application will start on the simulator environment.

Connect to Data/Service.

• Close the application and add the connection to the WCF service (the service code is at the end of the post, I will not explain how to set up the service, but you can contact me if you need help with this).
• Open the HelloWorldWCFHomeView.mxml (if it is not already open), open the Data/Services tab at the bottom of the screen and click on Connect to Data/Service...
• On the Connect to Data/Service for HelloWorldWCF, select WSDL and click on next. Add the following as WSDL URI: http://localhost/iOsHelloWorld/HelloWorld.svc?wsdl. Keep in mind this is the location where I have the service running on my local IIS, your configuration may be different.
• Click on Finish... Flash Builder will go and fetch the service configuration and create a Reference on the HelloWorldWCFHomeView and some plumbing on the HelloWorldWCF default package for us, be patient, it may take a while.
• Once it's back, right click on SayHi(name:String): String and select "Generate Service Call". A new node will be added with the code to call the service (fx:script) and another node will be added to the <fx:Declarations> section.

ET phone Home

• Add a event handler to the click event of the btnSayHi button:

<s:Button id="btnSayHi" x="476" y="145" label="Say Hi!" click="btnSayHi_clickHandler(event)"/>

• Add the function that will be handling the click event on the <fx:Script> section

import mx.events.FlexEvent;
protected function btnSayHi_clickHandler(event:MouseEvent):void
{
    sayHi(txtName.text);
}

• Since calling a WCF service is an asynchronous operation, we will need to set up a callback to receive the result.
• Modify the <s:CallResponder> node as follow:

<s:CallResponder id="SayHiResult" result="SayHi_resultHandler(SayHiResult.lastResult)"/>

• Add the function that will be handling the result event on the <fx:Script> section:

protected function SayHi_resultHandler(result:String):void
{
    lblResponse.text = result;
}

The final code should look like this:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:helloworld="services.helloworld.*"
        title="HomeView">
   
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            protected function sayHi(name:String):void
            {
                SayHiResult.token = helloWorld.SayHi(name);
            }
            protected function btnSayHi_clickHandler(event:MouseEvent):void
            {
                sayHi(txtName.text);
            }
            protected function SayHi_resultHandler(result:String):void
            {
                lblResponse.text = result;
            }
        ]]>
    </fx:Script>
   
    <fx:Declarations>
        <s:CallResponder id="SayHiResult" result="SayHi_resultHandler(SayHiResult.lastResult)"/>
        <helloworld:HelloWorld id="helloWorld"/>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:TextArea id="txtName" x="8" y="31" prompt="Name"/>
    <s:Button id="btnSayHi" x="476" y="145" label="Say Hi!" click="btnSayHi_clickHandler(event)"/>
    <s:Label id="lblResponse" x="10" y="239" width="610" height="190"/>
</s:View>

• Run the application as before in the simulator environment
• Set your name and click on "Say Hi!"
• You should get a message back from the WCF service as the one below:

Hope it helps you to create a mobile application for iOS using Adobe Flash Builder =)

Apendix

This is the WCF service code: pretty straight forward :)

using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Channels;

namespace iOsHelloWorld
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "HelloWorld" in code, svc and config file together.
    public class HelloWorld : IHelloWorld
    {


        public string SayHi(string name)
        {
            var context = System.ServiceModel.OperationContext.Current;
            return string.Format("Hi {0}, this is {1} saying hello back! It's {2} on my local time", name, context.Channel.LocalAddress.Uri.Host, DateTime.Now.ToLocalTime().ToString());
        }
    }
}