Using WebServices with Data Centric Development in Flash Builder 4

3 06 2009

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

Links

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

FinalApplication

You can download the source of this entire project from here

So, lets get started with the tutorial now.

Step 1 : Import WebService


ConnectToWebservice


  • 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


DataServicePanel

  • 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

ZenfolioDesignView

  • 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

FinalApplication

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

About these ads

Actions

Information

8 responses

3 06 2009
Introduction to Data Centric Development in Flash Builder 4 (Gumbo) « My journey in the world of RIA

[...] Using WebServices with Data Centric Development in Flash Builder 4 [...]

16 06 2009
Ajitpal Singh

Thax for such a nice tutorial. While accessing some web service its returning type is object. How can i handle it. It give result as [Object Object]. I don’t know what to do next.

22 06 2009
srinivasannam

Hi Ajitpal, If Flash Builder introspects the operations inside WebService as “Object”, then there could be a problem with the way your WebService is exposed.

Can you send the URL if the WSDL is public or save the WSDL file and send it across to my email ID.

7 07 2009
Ajitpal Singh

Hi. Thanks for reply. I’m getting live market data from the BSE and NSE. Basically the web serive is private and only be accessible to me. Web service is exposed as private so the only referred user can use it. Here is the link of image {http://rapidshare.com/files/252887894/webservice.bmp.html} .

Web service package name is :- demoService . If the host provide username and password. How is accessible though webserive . Do we have to add it manually every time. Or while accessing data web service interface , we can add username and password, as we add while using cold fusion.

I didn’t have your mail-Id. plz forward it. bye TC

9 07 2009
Lance

great tutorial! Thank you!

25 02 2010
Grafton

Good tutorial, thanks.

When trying to Connect to Web Service… with the WSDL URL provided:

http://www.zenfolio.com/api/1.0/zfapi.asmx?WSDL

I got the error: “Selected WSDL port is not compliant with SOAP 1.1 protocol. Operations and Entities cannot be read from this port. Please select a different port.”

I can navigate to the URL in my browser and see the WSDL.
I am using the latest Flash Builder 4 Beta 2.

Thanks,
Grafton

10 03 2010
Srinivas Annam

Can you please make sure that “zfApiSoap” is selected in the “Port” combo-box on the top of the page where you are getting the error and try again.

11 03 2010
Grafton

Thanks. That worked.

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




Follow

Get every new post delivered to your Inbox.

%d bloggers like this: