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





Introduction to Data Centric Development in Flash Builder 4 (Gumbo)

1 06 2009

As a part of “Adobe Flash Platform” branding strategy, “Flex Builder” is now renamed to “Flash Builder”.

Flash Builder Beta build can be downloaded for Free from http://labs.adobe.com/technologies/flashbuilder4/

Links

Using WebServices with Data Centric Development in Flash Builder 4

__

Data Centric Development (DCD) is an exciting new Rapid Application Development feature in Flash Builder 4 which helps traditional web developers to quickly build Flex applications that talk and fetch data from various backends like ColdFusion, PHP, BlazeDS, LCDS, WebService & HTTPService.

DCD Service List

This feature provides an easy-to-use unified workflow to import Services, see them inside Flash Builder & bind UI elements in your application to data coming from server.

Below are some of the compelling features offered as a part of Data Centric Development workflows:

  • Import existing ColdFusion/PHP/BlazeDS/LCDS/HTTP/WSDL services using very easy to use “Connet to Data/Service “wizard
  • Generate sample code for  ColdFusion/PHP service
  • View all functions & data types of your Service inside Flex Builder IDE using “Data/Services” panel
  • Test & Configure the output return type of your server side function/operation inside Flex Builder using “Configure Return Type”
  • Easily invoke & show the data from services using simple Drag & Drop and other gestures
  • Automatic client side Paging
  • Automatic client side Data Management
  • Automatic Input & Output Form Generation
  • Automatic Master-Detail view generation

Whole of this workflow can be categorized into 4 important steps. They are:

 

DCD Workflow

 

1. Connect to Data/Service

In this step, user is supposed to Import existing service by providing File path (for ColdFusion/PHP) or URL (for HTTPService/WebService) or Destination name (for BlazeDS/LCDS) to the service or generate a new service (for ColdFusion/PHP only). This step can be done using “Data->Connect to Data/Service” menu item.

2. Explore Service

Once the service is imported or created, all the available functions/methods along with its signatures from your backend service would appear in “Data/Services” panel inside Flash Builder.

3. Configure Return Type

In most of the cases, Flash Builder automatically identifies the data type of input arguments and return type of the operations by introspecting your server code & metadata. But, in some cases, Flash Builder would need to invoke the operation, introspect the output returned by the operation and create client-side ActionScript VOs if required.

4. Bind Components to Data

Once Flash Builder knows the Input argument types or Return types of the operation, you can start binding the output returned by these operations to UI elements like DataGrid, List, Button, ComboBox, Form, Charts etc..

 

Over the next few days, I will be explaining in detail about each of these wizards and backend specific workflows to make your life exciting with DCD.

More articles on Flash Builder 4 can be found here