Home > Adobe, Flash Builder 4, Flex > Consuming a static XML with HTTP Service using the Data Centric Development (DCD) feature in Flash Builder 4

Consuming a static XML with HTTP Service using the Data Centric Development (DCD) feature in Flash Builder 4

Using an HTTP Service has become incredibly easy with the DCD feature of Flash Builder 4.

In Flash Builder, it is possible to define multiple operations in an HTTP Service. Each operation can point to a different URL. This is different from Flex Builder, where each HTTP Service pointed only to one URL.

We will now create a simple FB4 app which gets data from a static XML file in the project and displays it on the DataGrid.

Step 1 : Create a new project

Create a new flex project [File->New->Flex Project]. Give it a name (in this example, CDStoreApp).

Static XML S1P1

Now, we need an XML file in the project. You may create one of your own or find my sample XML file here – CDStore.xml. The file contains details about Music CDs at a fictitious store.

Static XML S1P2

Create a new folder inside the “src” folder of your project…

Static XML S1P3

…and call it “assets”.

Static XML S1P4

Copy the XML file and paste it inside the “assets” folder.

Static XML S1P5

So we have a flex project and a static XML file with the necessary data.

We’re good to go!

Step 2 : Create an HTTP Service

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

Static XML S2P1

Choose HTTP from the pop-up and click Next.

Static XML S2P2

Now you’ll see a screen where you can configure your HTTP Service.

Give your HTTP Service a name (say CDStoreService). You can define operations and enter the corresponding URLs.

For this example, we’ll just name one operation called getDiscs, which gets the data from our XML file. Enter the URL: “assets/CDStore.xml”  (path relative to the source folder of your flex project).  Finally, click on Finish.

Static XML S2P3

Check out the Data/Services and you’ll find our HTTP Service.

Static XML S2P4

We can now move on to building a UI and binding it to our HTTP Service.

Step 3 : Call the service and bind it to UI Controls

Go to the design view. Drag and drop a DataGrid onto your app. Now, right-click on the DataGrid and click on “Bind to Data”.

Static XML S3P1

You will see a wizard now, where you can choose the service and operation that you want to bind the DataGrid to. Since we have just one service and one operation in this example, your choice is made for you. Else, you can always make your choice with the drop down lists.

You will observe that you can’t proceed without configuring the return type. So go ahead and click on “Configure Return Type…”

Static XML S3P2

At this point, you can choose for your operation to return an existing data type, or the return type can be detected from sample data. We will choose the latter for this example.

Static XML S3P3

At this screen, you are expected to give a sample result so that Flash Builder can detect the return type. Out of the given options, select “Enter a sample XML/JSON response”. Your XML code can be found in the text area. Click next. (If the text area is empty, copy all the content from the XML file and paste it)

Static XML S3P4

Now, Flash Builder is able to determine the structure of the XML data from the sample code. Select the node of the XML file that you want as the root of the return type. In our file CDStore.xml, you would have noticed that “Disc” is the required node. Select “Disc” from the drop down list.

Static XML S3P5

Click on Finish. Then click OK in the “Bind To Data” pop-up box. Now, run the project and you should see the XML displayed on the DataGrid. It should look like this:

Static XML S3P6

Now wasn’t that a piece of cake? 🙂

More articles on using Flash Builder 4 can be found in Sujit’s Blog – http://sujitreddyg.wordpress.com/flash-builder-4/

Advertisements
Categories: Adobe, Flash Builder 4, Flex
  1. maruti borker
    October 8, 2009 at 2:03 pm

    better post than the previous one 🙂 gg !

  2. Reid Abel
    December 9, 2009 at 4:19 am

    Thanks for the article. When I get to the step: click on “Configure Return Type…”, my “Configure Return Type” button is not enabled. I have an operation that returns Object, just like yours:

    GetProviders_TXMLData(Param1: String): Object

    Any idea why this button is not enabled at this point? Thanks for any help you can give me …

    • December 15, 2009 at 2:55 pm

      Hi Reid,
      If you’re consuming an XML file, I don’t see why it should be disabled. Can you send me a few screenshots of your workflow so that I can try and figure out the problem? My email is flexedupshyam@gmail.com

  3. Reid Abel
    December 17, 2009 at 7:47 pm

    I actually just tried doing your tutorial the exact way you did it, and it works just fine. The problem seems to be that I was trying to do it with a web service. I thought that since I was just getting an XML-like string back from the web service, that I could have FB4b2 auto-detect a return type from the results of the web service call. Any hints on how to make this work from a web service? I can do it by forcing the result into an XMLListCollection, but then I have to add code in a result handler, define a bindable variable, and actually set up the datagrid’s columns manually. I was hoping for a more automated approach like the one you’ve nicely demonstrated here.

    Thank you …

  4. Reid Abel
    December 17, 2009 at 7:51 pm

    I just noticed an article you’ve done for doing this with web services, so I’ll check it out:

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

  1. No trackbacks yet.

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: