I will be taking a hands-on session on building the user experience, along with fellow evangelist Harish. Really looking forward to it! We also have a few speakers from the Adobe Developer Community sharing their expertise.

You can find the agenda of the event here. Go ahead and register now!

Now, let us generate a form for master-detail view. As we saw in the earlier post, this refers to the case where there is a control (for eg. List, ComboBox) that displays the instances of a data type and a form is generated which displays the details of the selected item in the control.

In this example, we have with us a data service named PopulationService…

… and a ComboBox which is bound to the getCountries() operation. (To know how to create the complete app from scratch, go here).

The form will retrieve the details of the selected country in the ComboBox.

So, let’s get started! Switch to Design View. Then, right-click on the ComboBox and click on ‘Generate Details Form’.

A pop-up is thrown. By default, Generate form for: Master-Detail, is selected. Ensure that ‘Make form editable’ is kept unchecked because we don’t need an editable one in this case.

In this example, the Population Service has a service called getPopulation(String) which takes as argument the name of the country, and returns the details of that country.  Hence, check ‘Call a service to get the detail data…’. Then make sure the service and operation are selected and hit Finish!

You’ll automatically be directed to the source view (to the ComboBox’s change handler). And you’ll see the following code.

protected function comboBox_changeHandler(event:ListEvent):void

{

getPopulationResult.token = populationService.getPopulation(/*Enter value(s) for */ strCountry);

}

Here, change the parameter to the getPopulation(String) operation (to comboBox.selectedItem.toString() ). So the code looks like this:

protected function comboBox_changeHandler(event:ListEvent):void

{

getPopulationResult.token = populationService.getPopulation(comboBox.selectedItem.toString());

}

As simple as that! You have yourself a details form. Adjust the position of the generated form in the design view and run the application.

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

Forms can be generated:

• For a data type. Controls for each property of a data type are auto generated and bound.

• For a service operation.  Controls of the form are generated for the input parameters or the return type of the service.

• For a master-detail view. This refers to the case where there is a control (for eg. List, ComboBox) that displays the instances of a data type and a form is generated which displays the details of the selected item in the control.

Let us take a look at how forms can be generated. This post will talk about form generation for data type and service operation (My next post talks about generating a master detail form). We start off with the following example, which has a service called CarsService.

Generating a Form for a data type

First we’ll generate a Form to take in details of an object of type ‘Cat_type’. Go to the Data/Services tab.

Right-click on the data type (which is Car_type in this case) and click on ‘Generate Form’.

Now you’ll see a window where you can choose what type of form you want. By default it says Generate form for: Data type. And the data type is Car_type. Keep the box checked to keep the form editable. Now click Finish.

Run the application. An editable Form is generated with each property of the data type.

Generating a Form for a service operation

Now, we want to generate a Form that lets the user give details to add a new Car. Go to the Data/Services tab.

Right-click on the operation, which is addCar(Car_type) in this case, and click on ‘Generate Form’.

A window appears and you’ll see that all the options we want are selected. Make sure Generate form for: ‘Service Call’ is selected and ‘New Service Call’ is chosen. Since we want the Form to provide us with the argument to the addCar operation, keep ‘Form for input parameters’ checked. And yes, it is obvious, but also ensure that the CarsService service and addCar operation are selected.

Finally, click on Finish.

And there you go! Run the application. You have the form you want along with a button. Clicking the button will invoke the addCar operation and take the Form control values as its argument.

If you want to check out how to generate a master detail form, check out my next post.

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/

(Note: This is an update of Raghu’s blog post, for Flash Builder 4 Beta 2)

There are 3 steps to working with Web Services (HTTPService or Remoting using any backend technologies like ColdFusion, Java, PHP etc)

1. Add the service.
2. Configure the return type.
3. Call the service and bind it to UI controls.

A WSDL(Web Service Description Language) Document is what signifies how a Web Service is exposed. Each WS has the following:

• Elements
• Complex-types
• Messages
• Operations

Each operation will have an input & output message and each message may be built with an element or complex-types.

In the following example, the data to the application will be served using this Population WS (click to see the link). The operations that will be used are:

• getCountries – to get the various countries for which data is available.
• getPopulation – for getting the population of a selected country.

And here we go!

Step 1 : New project

Create a new project by clicking File->New->Flex Project. Give your project a name (say PopulationApp) and hit the Finish button.

Step 2 : Import the service

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

Choose Web Service from the pop-up and click Next.

Now, enter a Service Name (say PopulationService) that you’d like it to be called in the Flex application. Also enter the path to the WSDL file [http://www.abundanttech.com/WebServices/Population/population.asmx?WSDL]

If your WSDL is not SOAP 1.1 protocol compliant, you will encounter this screen. Choose the appropriate SOAP port from the drop down menu. (However, you might not see this screen if your WSDL is SOAP 1.1 compliant. In that case, you will be shown the operations screen directly – the next screen described below)

Now, you can choose the operations that your application requires. Or you may just click Select All and hit Finish.

And voila! You have a Data/Services tab with all the operations configured.

Observe that in the above step, Flash Builder introspects the WSDL and the selected operations and generates the required classes. You will notice that the return type for getPopulation() is created as a client side model class called Population. However, getWorldPopulation() has a return type of Object. The reason is that the WSDL for the getWorldPopulation() is not well formed.

Hence, if the operation is well formed, then the introspector creates the model classes. If it’s not well formed, Flash Builder keeps the return type as Object. Therefore, return types need not be configured for well formed operations because the WSDL itself defines the input and output types.

Now let’s build a UI and bind the service to it!

Step 3 : Build the UI

Go to the design view. Drag and drop a ComboBox onto your app (You might want to set its editable property to false if it isn’t already so). Now, right-click on the ComboBox 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 ComboBox to. In this case, it is getCountries().

Now run the application. You should see the following:

Now, we’ll get the population details for a selected item on the ComboBox. Right-click on the ComboBox and click on “Generate Details Form”

A pop-up is thrown. You can choose which operation to call on change of selected item, and what to display. Then click Finish.

You will be automatically directed to the source view and asked to provide the parameter for the getPopulation() method.

This is what the change handler will look like:

protected function comboBox_changeHandler(event:ListEvent):void

{ getPopulationResult.token =

populationService.getPopulation(/*Enter value(s) for */ strCountry);}

Change it to:

protected function comboBox_changeHandler(event:ListEvent):void

{getPopulationResult.token = populationService.getPopulation(comboBox.selectedItem.toString());}

Now for the final step. Go to the design view and adjust the position of the generated Form. Run the application.

We now have a fully functional application served by a Web Service

More articles on using Flash Builder 4 can be found at http://sujitreddyg.wordpress.com/flash-builder-4/