Using WebServices with Data Centric Development in Flash Builder 4

As promised, here is my first post on how to use WebServices with Data Centric Development workflows in Flash Builder 4.

Links

• Introduction to Data Centric Development in Flash Builder 4 (Gumbo)
• http://en.wikipedia.org/wiki/Webservice

In this tutorial, We are going to create a Flex application which uses Zenfolio WebService to search & display images. Below is the final output of this tutorial

You can download the source of this entire project from here

So, lets get started with the tutorial now.

Step 1 : Import WebService

• Create a new Flex project and go to “Data->Connect to WebService” menu item.
• Enter some name for your Service say “ZenfolioService” without quotes. You can enter any name and this will be used to uniquely refer your WebService inside your project
• Enter the URL of your WebService. I’m going to Zenfolio’s WebService i.e. http://www.zenfolio.com/api/1.0/zfapi.asmx?WSDL
• You can click “Next” & choose “ZfApiSoap” from port combo box. This would automatically be selected for most of the WebServices.
• Click “Select All” button to select all operations or optionally you could also select only few operations that you are going to use in this project.
• Click on “Finish” button.

Step 2 : Explore WebService

• Have a look at “Data/Services” panel placed next to “Problems” view or Choose “Window->Data/Services” if the view is not available already.
• You can see that the WebService is introspected and all the Data types & Operations/Methods/Functions inside your WebService along with its signatures are displayed under your service name i.e. “ZenfolioService”.
• Thats the beauty of Data Centric Development. It makes your life a lot easier while working with your backends.
• We are going to use a method/operation called “GetPopularPhotos” which is available inside this WebService and as you can see in the “Data/Services” panel, this operation is taking two parameters namely “offset” & “limit” and returning an array of “Photo” objects as output.

Step 3 : Bind Components to Data

• As shown in the screenshot, place a “Label” on top as header, “List” component on the left side and an “Image” component to the right of “List”.
• Enter the “ID” for Image component as “imgPhoto”
• Now, we need to bind the response of “GetPopularPhotos” to the “List” component in our UI. So, select the List in Design View and choose “Bind to data” in context-menu that comes when you right-click on this component.
• Select “GetPopularPhotos” operation from “Operation” combo that appears in “Bind to Data” dialog and select “Title” from “Bind to field” combo box.
• As “GetPopularPhotos” operation is expecting two arguments, you will automatically be taken to Code view where you need to enter values for arguments for example “1,50”. So, your final call would look something like below

GetPopularPhotosResult.token = zenfolioService.GetPopularPhotos(1,50);

Step 4 : Display image on selection

• Select the “List” component in Design View, right-click on it and choose “Generate SelectionChanged handler”
• An event handler function is automatically generated for you and this function will automatically be called when user selects an item from List at runtime.
• Type below like in the event handler function that got generated.

imgPhoto.source = “http://www.zenfolio.com” + list.selectedItem.UrlCore +  “-4.jpg”;

Step 5 : Beautification

• I added a rectangle using the new “<s:Rect>” component.
• I added an “ItemRenderer” to display thumbnail image instead of text in List.
• You could get the code for above two beautifications from the project source posted here

You can download the source of this entire project from here

I hope that you all enjoyed this tutorial. Please feel free to mail me back on your Comments/Feedback/Questions that you may have.

More articles on Flash Builder 4 can be found here