Archive

Author Archive

The largest Adobe conference in India is Back!

June 3, 2010 Leave a comment


Need I say more? 🙂

Categories: Adobe, Flash Platform

Adobe Dev Summit at Chennai and Hyderabad

November 19, 2009 Leave a comment

Watch out for the Adobe DevSummit in Chennai on the 24th of this month and Hyderabad on Dec 1st! After the great response we got in Bangalore this year, this is the first time that the DevSummit is hitting the cities of Chennai and Hyderabad.

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!

Categories: Adobe

Form Generation in Flash Builder 4 (Part II)

October 23, 2009 1 comment

In my previous post, we had seen how to generate forms for data types and service operations.

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/

Categories: Adobe, Flash Builder 4, Flex

Form Generation in Flash Builder 4 (Part I)

October 12, 2009 3 comments

The Form Generation feature in Flash Builder helps DCD users to create forms. Form code is automatically generated for the data types or service calls and the controls are bound to the properties of the required data type, saving us a lot of time.

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.

Form Generation 01

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.

Form Generation 11

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

Form Generation 12

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.

Form Generation 13

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

Form Generation 14

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.

Form Generation 11

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

Form Generation 22

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.

Form Generation 23

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.

Form Generation 24

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

Categories: Adobe, Flash Builder 4, Flex

Consuming a static XML with HTTP Service using the Data Centric Development (DCD) feature in Flash Builder 4

October 7, 2009 5 comments

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).

Static XML S1P1

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.

Static XML S1P2

Create a new folder inside the “src” folder of your project…

Static XML S1P3

…and call it “assets”.

Static XML S1P4

Copy the XML file and paste it inside the “assets” folder.

Static XML S1P5

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”

Static XML S2P1

Choose HTTP from the pop-up and click Next.

Static XML S2P2

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.

Static XML S2P3

Check out the Data/Services and you’ll find our HTTP Service.

Static XML S2P4

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”.

Static XML S3P1

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…”

Static XML S3P2

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.

Static XML S3P3

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)

Static XML S3P4

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.

Static XML S3P5

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:

Static XML S3P6

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/

Categories: Adobe, Flash Builder 4, Flex

Connecting to WebServices using the Data Centric Development (DCD) feature in Flash Builder 4

October 6, 2009 2 comments

WebServices are an elemental part of the Service-Oriented Architecture, and building SOAs using WebServices standards have gained broad industry acceptance. Flash Builder 4 makes this incredibly easy with the new Services Wizard feature.Let’s take a look how.

(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 1 Pic 1

Step 2 : Import the service

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

Step 2 Pic 1

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

Step 2 Pic 2

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]

Step 2 Pic 3

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)

Step 2 Pic 4

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

Step 2 Pic 5

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

Step 2 Pic 6

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”.

Step 3 Pic 1

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().

Step 3 Pic 2

Now run the application. You should see the following:

Step 3 Pic 3

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

Step 3 Pic 4

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

Step 3 Pic 5

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 🙂

Step 3 Pic 6

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

Categories: Adobe, Flash Builder 4, Flex

Flexed Up!

October 5, 2009 1 comment

Flexed Up is about my experiences as I wade through the world of Rich Internet Applications. It is an assortment of know-hows, code snippets, sample apps and tips and tricks about the framework which has come to be synonymous with Web 2.0 – Adobe Flex. So let’s take the finer world of RIAs and flex it up!

Categories: ActionScript, Adobe, Flash, Flex