Home > Adobe, Flash Builder 4, Flex > Connecting to WebServices using the Data Centric Development (DCD) feature in Flash Builder 4

Connecting to WebServices using the Data Centric Development (DCD) feature in Flash Builder 4

WebServices are an elemental part of the Service-Oriented Architecture, and building SOAs using WebServices standards have gained broad industry acceptance. Flash Builder 4 makes this incredibly easy with the new Services Wizard feature.Let’s take a look how.

(Note: This is an update of Raghu’s blog post, for Flash Builder 4 Beta 2)

There are 3 steps to working with Web Services (HTTPService or Remoting using any backend technologies like ColdFusion, Java, PHP etc)

  1. Add the service.
  2. Configure the return type.
  3. Call the service and bind it to UI controls.

A WSDL(Web Service Description Language) Document is what signifies how a Web Service is exposed. Each WS has the following:

  • Elements
  • Complex-types
  • Messages
  • Operations

Each operation will have an input & output message and each message may be built with an element or complex-types.

In the following example, the data to the application will be served using this Population WS (click to see the link). The operations that will be used are:

  • getCountries – to get the various countries for which data is available.
  • getPopulation – for getting the population of a selected country.

And here we go!

Step 1 : New project

Create a new project by clicking File->New->Flex Project. Give your project a name (say PopulationApp) and hit the Finish button.

Step 1 Pic 1

Step 2 : Import the service

Go to the Data/Services Tab in your Flash Builder IDE and click on “Connect to Data Service”

Step 2 Pic 1

Choose Web Service from the pop-up and click Next.

Step 2 Pic 2

Now, enter a Service Name (say PopulationService) that you’d like it to be called in the Flex application. Also enter the path to the WSDL file [http://www.abundanttech.com/WebServices/Population/population.asmx?WSDL]

Step 2 Pic 3

If your WSDL is not SOAP 1.1 protocol compliant, you will encounter this screen. Choose the appropriate SOAP port from the drop down menu. (However, you might not see this screen if your WSDL is SOAP 1.1 compliant. In that case, you will be shown the operations screen directly – the next screen described below)

Step 2 Pic 4

Now, you can choose the operations that your application requires. Or you may just click Select All and hit Finish.

Step 2 Pic 5

And voila! You have a Data/Services tab with all the operations configured.

Step 2 Pic 6

Observe that in the above step, Flash Builder introspects the WSDL and the selected operations and generates the required classes. You will notice that the return type for getPopulation() is created as a client side model class called Population. However, getWorldPopulation() has a return type of Object. The reason is that the WSDL for the getWorldPopulation() is not well formed.

Hence, if the operation is well formed, then the introspector creates the model classes. If it’s not well formed, Flash Builder keeps the return type as Object. Therefore, return types need not be configured for well formed operations because the WSDL itself defines the input and output types.

Now let’s build a UI and bind the service to it!

Step 3 : Build the UI

Go to the design view. Drag and drop a ComboBox onto your app (You might want to set its editable property to false if it isn’t already so). Now, right-click on the ComboBox and click on “Bind to Data”.

Step 3 Pic 1

You will see a wizard now, where you can choose the service and operation that you want to bind the ComboBox to. In this case, it is getCountries().

Step 3 Pic 2

Now run the application. You should see the following:

Step 3 Pic 3

Now, we’ll get the population details for a selected item on the ComboBox. Right-click on the ComboBox and click on “Generate Details Form

Step 3 Pic 4

A pop-up is thrown. You can choose which operation to call on change of selected item, and what to display. Then click Finish.

Step 3 Pic 5

You will be automatically directed to the source view and asked to provide the parameter for the getPopulation() method.

This is what the change handler will look like:

protected function comboBox_changeHandler(event:ListEvent):void

{ getPopulationResult.token =

populationService.getPopulation(/*Enter value(s) for */ strCountry);}

Change it to:

protected function comboBox_changeHandler(event:ListEvent):void

{getPopulationResult.token = populationService.getPopulation(comboBox.selectedItem.toString());}

Now for the final step. Go to the design view and adjust the position of the generated Form. Run the application.

We now have a fully functional application served by a Web Service 🙂

Step 3 Pic 6

More articles on using Flash Builder 4 can be found at http://sujitreddyg.wordpress.com/flash-builder-4/

Categories: Adobe, Flash Builder 4, Flex
  1. maruti borker
    October 6, 2009 at 3:59 pm

    love the theme ! Nice post

  1. October 12, 2009 at 9:31 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: