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).
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.
Create a new folder inside the “src” folder of your project…
…and call it “assets”.
Copy the XML file and paste it inside the “assets” folder.
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”
Choose HTTP from the pop-up and click Next.
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.
Check out the Data/Services and you’ll find our HTTP Service.
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”.
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…”
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.
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)
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.
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:
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/