Accessing a WCF – SOAP service from Flex

Flex development for a .NET guy

I’ve been working on Flex for last couple weeks using Flash Builder 4.7. I touched the second Adobe product in my life first is Dreamweaver, not Photoshop. I know that’s quite surprising but the truth is I haven’t used Photoshop yet and I don’t even know how to use it.

Leaving my history aside; I started Flex and soon I had to create some complex controls for the project. I did them and now I think I do fairly good. I write this post in order to help the newbies like me who jump into Flex development without any clue and for my personal reference.

As a developer you can put some basic controls and do simple development. You can find plenty of beginners tutorials for Flex. This post  explains how to make a web service call from Flex and access data.

Flex make it very simple to connect to a SOAP based services.

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <s:Application     xmlns:fx="http://ns.adobe.com/mxml/2009" 

   3:                    xmlns:mx="library://ns.adobe.com/flex/mx" 

   4:                    xmlns:s="library://ns.adobe.com/flex/spark"

   5:                    creationComplete="application_creationCompleteHandler(event)">

   6:     <fx:Script>

   7:         <![CDATA[

   8:             

   9:             private var serverServiceUrl:String = "http://localhost/yourservice.svc?wsdl";

  10:             

  11:             [Bindable]

  12:             private var prodSAH:Object;

  13:             

  14:             protected function application_creationCompleteHandler(event:FlexEvent):void

  15:             {

  16:                 productionService.GetProductionData("SAH","","","Month To Date");

  17:             }    

  18:             

  19:             

  20:             protected function productionService_resultHandler(event:ResultEvent):void

  21:             {

  22:                 prodSAH = event.result as Object;

  23:  

  24:                 Alert.show(prodSAH.CompanyName);

  25:             }

  26:             

  27:             

  28:                    

  29:         ]]>

  30:     </fx:Script>

  31:     

  32:         

  33:     <fx:Declarations> 

  34:         

  35:         <s:WebService id="productionService" wsdl="{serverServiceUrl}" result="productionService_resultHandler(event)">

  36:         </s:WebService>

  37:             

  38:     </fx:Declarations>

  39:     

  40:     

  41:     

  42:     

In the code above [Bindable] attribute makes the variables responsively coupled with the controls, if you’re from Silverlight background you can understand this as a INotifyPropertyChanged interface implemented variables. Any change to those variables would reflect in the UI.

“Declarations” section contains the declarations of the MXML application, web service reference sits here. GetProductionData is one OperationContract of the WCF service and it returns a Production object as SOAP message. Production object contains several properties, here I have shown how to access the properties. It is simple, just put a dot(.) and type the property name (in this case CompanyName). But when you put the dot don’t expect Intellisense to be popped out and give you suggestions. It will never happen, so be careful about the spelling.

If you’re getting a collection from the service you can simply load it into a ArrayCollection in Flex.

I haven’t included any UI controls in this sample, but they’re straight forward as XAML markup (probably MXML came first).

Flash Builder IDE

This section discusses about the Flash Builder as an IDE.

In my Boolean world if some one asks me how do I rate Flash Builder as an IDE either god or bad it’s definitely bad.

I use Flash Builder 4.7. As an IDE it has plenty of glitches and personally for me as a person who spend entire work time with VS this is a direct kick on my midriff as a new developer for Flex. The IDE continuously eats up your heap. There’s an option that you can enable to view the heap size of the IDE. In my 4GB work station my OS allocates 740 ~ 760 Mb for Flash Builder. But after few builds during development the entire heap is full and IDE stops responding and goes dead slow. I often have to restart the IDE in order to work in my pace. I checked with other developers as well, same story.

And mainly there’s a disastrous problem there’s no design view. Believe it of course no design view. I got to know that they removed the design view from this version onwards. 

When you create a project Flash Builder creates a default MXML application in the name of the project. One project can contain multiple MXML applications. But if you delete the MXML file in the name of the project you cannot export any other MXML files. This is really a stupid and senseless bug.

As a VS lazy guy Intellisense is the god of development, in Flash Builder it’s there for the sake. Almost all the time I have to bring it up after putting a dot using Ctrl + Space. There’s a hell lots of improvements needed for Flash Builder as an IDE.

Advertisement

Windows Phone All in One Kick Start => Meet Jack Sparrow

Hi this is a quick and simple WP7 application, which demonstrates some of the advanced features within very few steps.

If you are already familiar wit h WCF and Silverlight then WP7 development is very easy for you.

This application explains the following features.

  • Accessing the WCF service from the WP7 application.
  • Handling Cross reference threads in Wp7 and create responsive UI.

Application

The application asks you simple question, and if you answer correct then you will be taken to meet Jack Sparrow. If you do not answer correctly, then the application asks another question and this process repeats.

WCF service is responsible for generating the questions and evaluating the answer. Thread is used to load the web browser.  Browser object is in the Collapsed Visibility mode, and the thread used to navigate the page, and bind the delegate of Navigated event.

Since the web browser is created in the main thread and accessed in another thread, this creates the cross thread reference problem. It is solved using the traditional way of the BeginInvoke() call. But the BeginInvoke() call is made from the Dispatcher object of the current thread.

Code Implementation

In my WCF service I have 2 operational contracts. One is to generate the question and the other one is for evaluate the answer. (Read the comments within the code blocks)

Code for my IService1.cs

image

Code implementation of those methods are mentioned here, You can download the complete solution here

As like Silverlight we have to call the WCF service through asynchronous method calls and binding a delegate to that. But we do not have to worry much since VS generates the Async methods for us.

Build the service, and the reference of the Service to the WP7 application.

The below image shows my WP7 application interface in the design mode.

image

 

In the MainPage.xaml.cs file we have code logic of the application.

Here is the code for calling a service in WP7. It is 100% similar to Silverlight applications. (Read the comments ..)

image

Once the Method call is returned from the service, the following method will be fired. (Note that GetQuestion() is the method we created. GetQuestionAsync() is generated by VS. We have to simply call that. (If you are familiar with Silverlight then this is not a big deal for you)).

image

The following method handles the cross thread reference problem, and provides a responsive UI. (Note that I didn’t code any explicit Threads. In .NET you can do this with simple delegates, .NET handles the thread for you).

image

Notice that in the BeginInvoke() I’m again making a call to my main thread for the Navigated event.

After the application completes it happily displays Jack Sparrow Winking smile

 

image