LiveCycle Data Services 3.0 is released as part of LiveCycle ES 2

What’s New

1. Model driven development of Flex applications
2. Reliable Messaging
3. Throttling
4. Edge Server
5. Load test harness: Simulate Flex clients in Java

Documentation:

LiveCycle Data Services ES2 Quick Starts – http://www.adobe.com/go/learn_lcds3_modeling_howto

Other documentation – http://help.adobe.com/en_US/livecycle/9.0/lc_ds_list.html

Download Developer Version

You can Download the trial or a free developer version to get started from this URL http://www.adobe.com/go/trylivecycle_dataservices

Please find more details regarding the announcement on Anil Channappa’s (Product Manager LCDS and BlazeDS) blog at this URL http://anilchannappa.org/2009/11/20/lcds-3-0-released/

Congratulations to the entire LiveCycle Data Services team … LCDS team Rocks

iPhone has revolutionized the way world looks at Smart Phones. Apart from that, it had also set a new standard for Usability on phones & softwares in general.

I’m a huge fan of iPhone and I truly believe in it’s usability. Taking inspiration from it, I’m planning to port some of the iPhone components on to Flex and make it available for FREE.

Here is the first component in this series called iCheckBox. Its an equivalent to “Switch” component iPhone with more flexibility for controlling Labels, Width & Animation.

You can download the component,sample and source from here

Let me know how you like it or request any other interesting components that you want.

I will be speaking on Data Centric Development on Adobe Flash Platform and also will be handling the Learn by doing – Part 2: Integrate with server session along with Prashant Singh.

Summit attendees will get a complimentary Flex Builder 3 Professional License. Please find session abstracts and more details below

Adobe devsummit is the biggest annual developer event focused on the Adobe Flash Platform. This event attracts a rich demographic mix spanning designers and developers in India. Adobe has consistently showcased path breaking technologies at devsummit.

For the first time Adobe devsummit is coming to Chennai, India (24^th November, 2009) and Hyderabad, India (1^st December, 2009). Please find more details on Adobe devsummit Chennai and Hyderabad and register at this URL http://endtoend.in/apps/forms/adobe/DevSummitNovDec09/home.html

Excited to meet the developers in Chennai and Hyderabad

Session Abstracts

Data Centric Development on Adobe Flash Platform

See how to build an engaging Flex application for any server side technology productively. While application created with Flex and Flash already have ability to communicate with various back ends, see how data services can add power to a back end.

This session starts with showing how to use Data-Centric Development feature in Flash Builder 4 to productively create Flex applications connecting to various server technologies. Next, see how the brand new model-driven development feature of LiveCycle Data Services ES allows you to build and maintain data-driven Flex applications with an unprecedented level of productivity and flexibility.

Learn by doing – Part 2: Integrate with server

Learn how to connect your Flex application to servers for retrieving/storing data; and also deploy your application. We will demonstrate how you can connect to various server technologies like Java, .NET and PHP using remoting and web services. You will also learn how to use the Data-Centric development feature in Flash Builder 4 to develop Flex applications that connect with various server technologies.

If you are living in and around Chennai or Hyderabad, go ahead and register for the summit

Catch you all at the summit

There were some concerns over the performance of GroupingCollection class while grouping and calculating summaries.

So, a new class GroupingCollection2 is introduced in the data visualization components.

The major improvements in GroupingCollection2 are -
1. Grouping performance improved.
2. Summary calculation performance improved. Now, instead of looping over the data again and again, summaries are calculated in a single loop.
3. When using async refresh, the summaries are calculated as soon as each Group is built. Earlier, the summaries were calculated only after all the Groups have been made.

What has changed -
1. Introduced class GroupingCollection2 which replaces existing class GroupingCollection.
2. Introduced class SummaryField2 which replaces existing class SummaryField.

No no, classes GroupingCollection and SummaryField are not removed.
They will continue to exist to maintain backward compatibility.
So, you can use either GroupingCollection or GroupingCollection2 and AdvancedDataGrid will continue to work

The difference between SummaryField and SummaryField2 is -
SummaryField2 does not have “operation” and “summaryFunction” properties.
A new property “summaryOperation” in added in SummaryField2. It is an Object which takes one of the following -
* SUM, MIN, MAX, AVG or COUNT as String.
OR
* An implemtatation of mx.collections.ISummaryCalculator for calculating custom summaries.
The default value is SUM.

API changes -
1. Method refresh() has been changed in GroupingCollection2. The syntax now is –

function refresh(async:Boolean = false, dispatchCollectionEvents:Boolean = false):Boolean;

Code changes required to start using GroupingCollection2 -
1. Use GroupingCollection2 instead of GroupingCollection.
2. Use SummaryField2 instead of SummaryField.
3. Replace operation/summaryFunction in SummaryField with summaryOperation in SummaryField2.

An example is shown here:
With GroupingCollection –

<mx:GroupingCollection id="gc" source="{arr}"> <mx:Grouping> <mx:GroupingField name="name" > <mx:SummaryRow> <mx:SummaryField dataField="sal" operation="MAX" /> </mx:SummaryRow> </mx:GroupingField> </mx:Grouping>
</mx:GroupingCollection>

With GroupingCollection2 –

<mx:GroupingCollection2 id="gc" source="{arr}"> <mx:Grouping> <mx:GroupingField name="name"> <mx:SummaryRow > <mx:SummaryField2 dataField="sal" summaryOperation="MAX" /> </mx:SummaryRow> </mx:GroupingField> </mx:Grouping>
</mx:GroupingCollection2>

Try it and let us know your feedback.

HTTPService/HTTPMultiService have a cool concept of a Serialization Filter. This mechanism let’s you configure and manipulate various aspects of the HTTP call like the request, response, etc..
A default implementation of SerializationFilter is provided in mx.rpc.http.SerializationFilter

Usage -
You can create a custom SerializationFilter by extending from the default implementation and set it on the HTTPService instance or the Operation instance.

A sample implementation can be as simple as processing the response from the service.
For example, if your service returns a comma (,) separated list of values, you can convert it to an Array here.

package
{
import mx.rpc.http.AbstractOperation;
import mx.rpc.http.SerializationFilter; public class CustomSerializationFilter extends SerializationFilter
{ override public function deserializeResult (operation:AbstractOperation, result:Object):Object { var arr:Array = []; if (result is String) { arr = String(result).split(','); } return arr; }
}
}

And no, this is not all, there are other methods also which exposes more functionality.

For example, you can use the serializeURL() method to process/modify the url which this service/operation is about to invoke.

Livedocs here

Many times, while using RemoteObject, instead of processing the result of a remote method invocation in every result handler, you may want a mechanism to process the result before all the result handlers are notified.

convertResultHandler is such a property which was introduced in RemoteObject to process the result before sending it across to all the result handlers.

A sample implementation can be as simple as converting the result to ArrayCollection if its an Array -

public function convertResultHandler(result:*, operation:AbstractOperation):*
{
// convert result to ArrayCollection
if (result is Array)
return new ArrayCollection(result as Array);

return result;
}

Livedocs here

A similar property exists for WebService also.
Livedocs here

Adobe DevSummit is the biggest annual developer event focused on the Adobe Flash Platform. This event attracts a rich demographic mix spanning designers and developers in India. Adobe has consistently showcased path breaking technologies at DevSummit.

For the first time DevSummit is coming to Chennai and Hyderabad. DevSummit in Chennai will be on 24th November, 2009 and in Hyderabad on 1st December, 2009. We will be posting more details on the event and venue soon

We would love to have the experts from the Adobe developer community take the stage and share their knowledge and insights on Adobe Flash Platform. Please find more details and submit your session proposals at the URL below.

http://flashahead.adobe.com/events/devsummitsessionproposals/

Lab handout and sql script.

The version of WAMP which was installed on the lab machines can be downloaded from here.

Finally, in case you have any queries please post them at the Adobe Labs Forums.

Other References
Tour De Flex
Flex Devnet
Flash Builder 4 Tutorials
Flash Builder 4 Beta 2 and Flex 4 Beta 2 training videos

Adobe Flash Builder4 beta 2 is available on http://labs.adobe.com for downloading. One of the themes of Flash Builder 4 is to make data-centric development a lot more easier. You can find articles on developing Flex application for various server technologies using Flash Builder 4 at this URL http://sujitreddyg.wordpress.com/flash-builder-4

The Data Centric work flows in Flash Builder 4 are designed to be extensible i.e. you can add a new plugin to Flash Builder by implementing the interfaces exposed by Flash Builder and add support for any back end of your choice.

Gaurav Priyadarshi from Adobe Flex team extended to add support for consuming AMF(Remoting) based services running on a Ruby on Rails driven server.

You need Flash Builder 4 beta 2 to use this plugin, download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/ and then follow instructions below to set up Ruby on Rails plugin.

Please download the plugin and install from this URL http://dcdror.riaforge.org/

Details on installing the plugin and setting up Ruby on Rails project can be found at this URL http://dcdror.riaforge.org/blog/index.cfm/2009/10/9/Using-Ruby-On-Rails-plugin-for-DCD

Details on using the plugin can be found at this URL http://dcdror.riaforge.org/blog/index.cfm/2009/10/9/Using-the-plugin-from-FlashBuilder4

In this article we will create a CRUD application using Adobe Flex and LiveCycle Data Services. Flash Builder 4 allows developers to build Flex front end for LiveCycle Data Services (LCDS) Data management service destinations with just couple of clicks, so we will use Flash Builder 4 to develop this application.

Below are the steps we will follow to complete our application

1. Set up LiveCycle Data Services
2. Use Flash Builder to generate Flex code to invoke methods in Java class on the server
3. Retrieve data from server and display in the application
4. Allow user to add/update/delete entries from the application

In this article we will be building a Flex application for a Data Management service destination in the samples application called lcds-samples bundled with LiveCycle Data Services 3 Beta 3.

Article allows you to skip any of steps mentioned above and copy the code Let’s get started

You can download the completed project from here http://sujitreddyg.com/fb4articles/beta2/LCDSCRUD.zip

Install LCDS 3

Download LiveCycle Data Services 3 from this URL http://labs.adobe.com/technologies/livecycle_dataservices3/. You will be downloading a file named livecycle_dataservices3_b3_win_100509.exe, execute this file to install. I have installed LCDS 3 with Tomcat to C:\lcds3beta3

Enabling RDSDispatchServlet

Flash Builder uses the RDSDispatchServlet (part of LCDS) to retrieve destinations information from the server. By default the RDSDispatchServlet is commented out in web.xml. Open C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\web.xml using a text editor and remove comment around RDSDispatchServlet Servlet definition and the URL mapping as shown below. Also set the useAppserverSecurity parameter value to “false” as shown below.

<servlet>

<servlet-name>RDSDispatchServlet</servlet-name>

<display-name>RDSDispatchServlet</display-name>

<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>

<init-param>

<param-name>useAppserverSecurity</param-name>

<param-value>false</param-value>

</init-param>

<load-on-startup>10</load-on-startup>

</servlet>

<servlet-mapping id=”RDS_DISPATCH_MAPPING”>

<servlet-name>RDSDispatchServlet</servlet-name>

<url-pattern>/CFIDE/main/ide.cfm</url-pattern>

</servlet-mapping>

Defining item class name

Set the item-class property of the Data Management service destination in Data Management service configuration file (C:\lcds3beta3\tomcat\webapps\lcds-samples\WEB-INF\flex\data-management-config.xml) to the name of the object type which the assembler is expecting. Flash Builder 4 DCD requires this property to be set for the destinations you want to consume using DCD in Flash Builder. All the sample destinations in LCDS 3 beta 3 have this property set. Sample destination used in this article has item-class property set to flex.samples.product.Product class as shown below.

<properties>

<source>flex.samples.product.ProductAssembler</source>

<scope>application</scope>

<item-class>flex.samples.product.Product</item-class>

<metadata>

<identity property=”productId”/>

</metadata>

<network>

<paging enabled=”false” pageSize=”10″ />

</network>

</properties>

</destination>

Start LCDS server

Start LCDS samples data base from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start Samples Database

Start LCDS server from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start LiveCycle Data Services Server

Please make sure both the database and the server are started.

We have everything ready to develop a Flex application for data management service destinations using Flash Builder 4.

Create a Flex project

Start Flash Builder 4 from the start menu, start -> All Programs -> Adobe -> Adobe Flash Builder Beta 2

Create a Flex project from the file menu. You will see a window launched with options to fill project properties as shown in the image below. Fill project properties as shown in the image below.

In this screen:

1. Set project name to LCDSCRUD
2. Let the Application type be Web
3. Set the SDK version to 3.4
4. Set the Application server type to J2EE
5. Select Use remote object access service check box
6. 6. Select LiveCycle Data Services ES
7. 7. Click next to continue

Now we need to set the server properties, you will see a screen with options to set the server properties as shown in the image below.

In this screen:

1. Set the Root folder to c:\lcds3beta3\tomcat\webapps\lcds-samples
2. Set the Root URL to http://localhost:8400/lcds-samples
3. Set the Context root to /lcds-samples
4. Leave the Output folder to default, which is on the server
5. Click finish to continue

All we have to do now is to see how we can consume the service and create a Flex application. With Flash Builder 4 this is very simple, let’s see how Data centric Development (DCD) features in Flash Builder 4 lets us easily consume data management services and bind them to UI controls.

Consuming data management services from Flash Builder 4

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” in the Data/Services window

You will see a window launched with options to select the type of service as shown in the image below.

In this screen, select LCDS and click on Next to continue. You will be prompted for credentials, since we don’t have RDS authentication enabled, just select No password required check box and click OK to continue.

Now Flash Builder will retrieve all the Remoting service and Data Management service destinations exposed by the web application and displays as shown in the image below.

Our server settings are configured to point to the sample application bundled with LCDS called lcds-samples. This web application has lots of destinations exposed as shown in the image above. Destinations whose service-type is remoting-service are the Remoting service destinations and the ones whose service-type is data-service are the Data Management service destinations. In this sample we will use the “inventory” data management service destination. Select the destination and click on Finish to continue.

Flash Builder will generate all code required to consume the service selected and will list the Inventory service in the services explorer as shown in the image below.

You can also see that the return types for the operations (functions/methods of assembler) are properly set. Now that we have the service created, let’s create UI.

Creating UI

Please copy the code from this URL http://sujitreddyg.com/fb4articles/beta2/LCDSCRUD_1.mxml.txt into your main application file (LCDSCRUD.mxml in this sample). Code in the URL will add UI controls required for this sample application. After copying the code, your Flash Builder design view should look as shown in the image below.

Note: In this article to refer to a control, we will use value set for the id property of the controls.

Create Form for the Customer data type

We will display the details of the product entry selected in the listProducts control (created in previous step) in formSelectedProduct. Using Flash Builder you can bind a Form control to an entity instance. Right click on the formSelectedProduct and select “Bind to Data” as shown in the image below.

Flash Builder will display window as shown in the image below.

In this screen:

1. We want the Form items to be generated based on a data type (Product) so select “Data type”
2. Select Product from the list of data types
3. We want the form to be editable, so select the “Make form editable” check box
4. Flash Builder will display the list of properties in the selected data type as shown in the image below. Flash Builder will also assign a UI control which it will use to display the property value as shown in the image below.

In this window, you can select the items which you want to be included in the form and UI control in which you want the property value to be displayed. You can also arrange the controls in the order in which you want them to be displayed. Select, arrange the properties and modify the controls as shown in the image above.

Flash Builder will add FormItems to formSelectedProduct and binds the values of the controls under formSelectedProduct to Product instance. In this sample Flash Builder generated a Product instance with “product” as its id. So we will refer to the Product instance bound to the items in formSelectedProduct as product.

Binding data to UI Controls

Now that we have our UI is ready, let’s get the data from the server and display it in the application.

Right click on the List and click on “Bind to Data ..” as shown in the image below.

Flash Builder will display window as shown in the image below.

In this screen:

1. Select New service call
2. Set Service to ProductService
3. Set Operation to fill(): Product[]
4. Set Bing to field to name
5. Click on OK to continue

In previous step we bound the service call result to listProducts component, listProducts will send a request to the fill() function on the server and displays the result.

listProducts is displaying only the name of the Product, so let’s display complete details of the product in formSelectedProduct. Right click on the listProducts and select “Generate Change Handler” as shown in the image below.

Flash Builder will generate a function which will be invoked when user selects a different item in the listProducts. Flash Builder will also switch the view to Source view as shown in the image below, so that you can write code in the handler function generated.

Add the code below to the generated change handler function as shown in the image above.

product = listProducts.selectedItem as Product;

In the code snippet above, product is the instance of Product which was bound to the formSelectedProduct. In the code above, we are passing the reference of the selected Product instance in listProducts to the Product instance bound to formSelectedProduct. This line of code will populate formSelectedProduct with details of the selected product in listProducts control.

Now, let’s keep formSelectedProduct populated with values of the first Product entry in listProducts as soon as the product data is loaded from the server.

Understanding the CallResponder

How will you know when the data is returned from the server? For each service call generated in the application there will be a CallResponder class instance associated with it. CallResponder dispatches result event when the call to the service is successful and the data returned from the server can be accessed using a property called lastResult in CallResponder instance. To map the CallResponder instance with the service call, you have to pass the reference of the AsyncToken returned by the service call to the token property of the CallResponder. You can see service call AsyncToken reference passed to the CallResponder in listProducts_creationCompleteHandler function as shown below.

protected function listProducts_creationCompleteHandler(event:FlexEvent):void

{

fillResult.token = productService.fill();

}

CallResponder class will dispatch result event when the data is retrieved successfully from the server. You can add a handler to the result event to perform any logic when the server response is successful. In our case we will keep the first product in the listProducts to be selected and its value to be displayed in formSelectedProduct as soon as the data from the server is loaded on to the client.

Add a result event handler to the fillResult CallResponder as shown in the image below.

In the generated result handler add the following code. In the code below list is the List instance added in previous steps.

protected function fillResult_resultHandler(event:ResultEvent):void

{

if(listProducts != null)

{

listProducts.selectedIndex = 0;

product = listProducts.selectedItem as Product;

}

}

You can see the LCDSCRUD.mxml file with code till this step at this URL http://sujitreddyg.com/fb4articles/beta2/LCDSCRUD_2.mxml.txt

At this point you can save and run the application. Application will launch in a browser and displays the data retrieved from the server as shown in the image below. You can view details of the products by selecting them from the list.

Performing Add/Update/Delete operations

Any data retrieved from a Data Management service destinations are managed on the client i.e. any changes made to the objects on the client will reflect on the server immediately. Since we want to commit changes to the server only on user interaction, let’s turn off the autoCommit property to false. Add the code below to listProducts_creationCompleteHandler function to turn off auto commit as shown in the image below.

productService.serviceControl.autoCommit = false;

Let’s invoke functions in the productService AS3 class when user clicks on Add/Update/Delete buttons created earlier.

Right click on the button labeled “Add” (id = “btnAdd”) and select “Generate Service Call ..” as shown in the image below.

Flash Builder displays window as shown in the image below, in which you can select the service call which you want to invoke when user clicks on the Button.

In this screen:

1. Set the Service to ProductService
2. Set the Operation to createProduct(arg0:Product)
3. Click on OK to continue

The createProduct function selected expects an argument of the type Product. So Flash Builder 4 will switch to the source view and lets you enter the argument as shown in the image below.

We are creating a new instance of Product with default values to few properties and pass the reference to createProduct function. We pass the newly created Product instance reference to product so that user can modify the values of newly created product from formSelectedProduct control.

Code in the button click handler function will look as shown below. In the code snippet below we are also passing the AsyncToken returned by createProduct function to createProductResult, so that createProductResult object will dispatch result event when the service call is successful.

protected function btnAdd_clickHandler(event:MouseEvent):void

{

var newProduct:Product = new Product();

newProduct.category = “Enter category”;

newProduct.description = “Product description”;

newProduct.name = “Enter Name”;

newProduct.price = 0;

newProduct.qtyInStock = 0;

product = newProduct;

createProductResult.token = productService.createProduct(newProduct);

}

If you remember we turned off auto commit, so we need to call when user clicks the btnCommit. We also need to make sure the btnCommit is enabled only if there are any changes to the data on the client and that’s very simple just bind the btnCommit enabled property to commitRequired property as shown in the image below.

In the btnCommit_clickHandler function add the code below to commit all changes to the server.

protected function btnCommit_clickHandler(event:MouseEvent):void

{

productService.serviceControl.commit();

}

Similarly generate service calls for Update and Delete buttons, select updateProduct and deleteProduct operations respectively and pass the same product object as argument. You can view/copy the completed LCDSCRUD.mxml file at this URL http://sujitreddyg.com/fb4articles/beta2/LCDSCRUD.mxml.txt

Save and run your application. You will see your application launched in a browser and ready for performing CRUD operations on the database entries.

More articles on how to use Flash Builder 4 are available at this URL http://sujitreddyg.wordpress.com/flash-builder-4/

We developed a complete CRUD application for Data Management service destination in just few minutes. Flash Builder 4 and LCDS rocks

In this article we will create a CRUD application using Adobe Flex and Java. Flash Builder 4 allows you to build Flex front end for Java classes on the server with just couple of clicks, so we will use Flash Builder 4 to develop the application.

BlazeDS is a Java based server technology from Adobe which lets you invoke methods in Java class on server from your Flex applications. BlazeDS is the best solution for integrating Flex with Java so obviously we will use this in our sample project.

Below are the steps we will follow to complete our application

1. Set up BlazeDS (copying files )
2. Expose Java class as Remoting service destination
3. Use Flash Builder to generate Flex code to invoke methods in Java class on the server
4. Retrieve data from server and display in the application
5. Allow user to add/update/delete entries in a database table from the application

Article allows you to skip any of steps mentioned above and copy the code Let’s get started

You can download the completed project from here http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD.zip

Set up BlazeDS

Download BlazeDS from this URL http://flexorg.wip3.adobe.com/blazeds/trunk/11835/blazeds-bin-4.0.0.11835.zip follow instructions at this URL to setup BlazeDS http://sujitreddyg.wordpress.com/2009/04/07/setting-up-blazeds/

Once BlazeDS is setup you need to expose the Java class as Remoting destination, visit this URL to know how to expose a Java class as Remoting destination http://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/

After exposing your Java class as Remoting destination using BlazeDS, follow steps below to build the Flex application.

In this sample we will expose SimpleCustomerService.Java as Remoting destination. SimpleCustomerService communicates with database and returns SimpleCustomer objects.

Setting up BlazeDS RDSDispatchServlet

After setting up BlazeDS, you have to enable RDSDisptachServlet, which is used by Flash Builder 4 to get destination details. This is disabled by default. It’s very simple all you have to do is to un-comment/add the Servlet mapping in the web.xml.

Copy the Servlet URL mapping and declaration for the RDSDispatchServlet below and copy it into your web application web.xml under <web-app> node.

<servlet>
<servlet-name>RDSDispatchServlet</servlet-name>
<display-name>RDSDispatchServlet</display-name>
<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
<init-param>
<param-name>useAppserverSecurity</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping id=”RDS_DISPATCH_MAPPING”>
<servlet-name>RDSDispatchServlet</servlet-name>
<url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/

Creating new Flex project with BlazeDS server configurations

Create new Flex project

Create a new Flex project from the File menu and enter project details as shown below.

In this screen:

1. Enter project name
2. set “Web (runs in Adobe Flash Player)” as the application type
3. Set the Flex SDK to Flex 3.4
4. Set the application server type to J2EE
5. Select BlazeDS
6. Click on Next to continue

Configure J2EE server settings

In this screen:

1. Set the Root folder to the root folder of your web application with BlazeDS configured. Its C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\demo in this sample
2. Set the Root URL to root URL of your BlazeDS enabled web application
3. Set the Context root to context root of your BlazeDS enabled web application
4. Leave the output folder to default value
5. Click on validate configuration button
6. Click finish to continue

Using DCD feature to connect to consume Remoting Service

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4 which lets you develop data centric applications very easily. In this sample we will see how to create a Flex application which consumes BlazeDS Remoting service. Same steps can be followed for LCDS Remoting services also.

Creating Service using DCD

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” in the Data/Services window
3. Window as shown in the image below will be launched

Select BlazeDS and click on Next. Flash Builder will display a window asking for RDS credentials. Since we turned off security for our RDSServlet in the web.xml, select “No password required” and click on OK to continue.

Selecting Remoting destination

You can see that Flash Builder listed all service destinations exposed from your web application as shown in the screen below.

In this screen we are selecting the destination the newly created service should use. Select a destination (SimpleCustomerServiceDestination in this sample) and click on Finish to continue.

Code for invoking the Remoting service will be generated, you can see the service and its operations (methods exposed by the Java class) being displayed in the “Data/Services” window and in the package explorer.

Flash Builder 4 introspects return types for the Java class methods and creates AS3 classes for any custom Java classes. We have the service class ready, let’s create UI.

Creating UI

Please copy the code from this URL http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD_1.mxml.txt into your main application file (BlazeDSCRUD.mxml in this sample). Code in the URL will add UI controls required for this sample application. After copying the code, your Flash Builder design view should look as shown in the image below.

Note: In this article to refer to a control, we will use value set for the id property of the controls.

Create Form for the Customer data type

We will display the details of the customer entry selected in the listCustomers control (created in previous step) in formSelectedCustomer. Using Flash Builder you can bind a Form control to an entity instance. Right click on the formSelectedCustomer and select “Bind to Data” as shown in the image below.

Flash Builder will display window as shown in the image below.

In this screen:

1. We want the Form items to be generated based on a data type (SimpleCustomer) so select “Data type”
2. Select SimpleCustomer from the list of data types
3. We want the form to be editable, so select the “Make form editable” check box
4. Flash Builder will display the list of properties in the selected data type as shown in the image below. Flash Builder will also assign a UI control which it will use to display the property value as shown in the image below.

In this window, you can select the items which you want to be included in the form and UI control in which you want the property value to be displayed. You can also arrange the controls in the order in which you want them to be displayed. Arrange the properties and modify the controls as shown in the image above.

Flash Builder will add FormItems to formSelectedCustomer and binds the values of the controls under formSelectedCustomer to SimpleCustomer instance. In this sample Flash Builder generated a SimpleCustomer instance with “simpleCustomer” as its id. So we will refer to the SimpleCustomer instance bound to the items in formSelectedCustomer as simpleCustomer.

Binding data to UI Controls

Now that we have our UI is ready, let’s get the data from the server and display it in the application.

Right click on the List and click on “Bind to Data ..” as shown in the image below.

Flash Builder will display window as shown in the image below.

In this screen:

1. Select New service call
2. Set Service to SimpleCustomerServiceDestination
3. Set Operation to getAllCustomers(): SimpleCustomer[]
4. Set Bing to field to customerName
5. Click on OK to continue

In previous step we bound the service call result to listCustomers component, listCustomers will send a request to the getAllCustomers() function on the server and displays the result.

listCustomers is displaying only the name of the customer, so let’s display complete details of the customer in formSelectedCustomer. Right click on the listCustomers and select “Generate Change Handler” as shown in the image below.

Flash Builder will generate a function which will be invoked when user selects a different item in the listCustomers. Flash Builder will also switch the view to Source view as shown in the image below, so that you can write code in the handler function generated.

Add the code below to the generated change handler function as shown in the image above.

simpleCustomer = listCustomers.selectedItem as SimpleCustomer;

In the code snippet above, simpleCustomer is the instance of SimpleCustomer which was bound to the formSelectedCustomer. In the code above, we are passing the reference of the selected SimpleCustomer instance in listCustomers to the SimpleCustomer instance bound to formSelectedCustomer. This line of code will populate formSelectedCustomer with details of the selected customer in listCustomers control.

Now, let’s keep formSelectedCustomer populated with values of the first customer entry in listCustomers as soon as the customer data is loaded from the server.

Understanding the CallResponder

How will you know when the data is returned from the server? For each service call generated in the application there will be a CallResponder class instance associated with it. CallResponder dispatches result event when the call to the service is successful and the data returned from the server can be accessed using a property called lastResult in CallResponder instance. To map the CallResponder instance with the service call, you have to pass the reference of the AsyncToken returned by the service call to the token property of the CallResponder. You can see service call AsyncToken reference passed to the CallResponder in listCustomers_creationCompleteHandler function as shown below.

protected function listCustomers_creationCompleteHandler(event:FlexEvent):void

{

getAllCustomersResult.token = simpleCustomerServiceDestination.getAllCustomers();

}

CallResponder class will dispatch result event when the data is retrieved successfully from the server. You can add a handler to the result event to perform any logic when the server response is successful. In our case we will keep the first Customer in the listCustomers to be selected and its value to be displayed in formSelectedCustomer as soon as the data from the server is loaded on to the client.

Add a result event handler to the getAllCustomersResult CallResponder as shown in the image below.

In the generated result handler add the following code. In the code below list is the List instance added in previous steps.

if(listCustomers != null)

{

listCustomers.selectedIndex = 0;

simpleCustomer = listCustomers.selectedItem as SimpleCustomer;

}

You can see the BlazeDSCRUD.mxml file with code till this step at this URL http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD_2.mxml.txt

At this point you can save and run the application. Application will launch in a browser and displays the data retrieved from the server as shown in the image below. You can view details of the customs by selecting them from the list.

Performing Add/Update/Delete operations

In the SimpleCustomerService Java class on the server we have methods which can perform Add/Update/Delete operations in the database. If you observe Flash Builder generated AS3 functions in SimpleCustomerServiceDestination.as class for each public method of the selected Remoting destination including the addCustomer() , updateCustomer() and deleteCustomer(). We just have to invoke these AS3 function in order to invoke corresponding Java method on the server.

Let’s invoke functions in the SimpleCustomerDestination AS3 class when user clicks on Add/Update/Delete buttons created earlier.

Right click on the button labeled “Add” (id = “btnAdd”) and select “Generate Service Call ..” as shown in the image below.

Flash Builder displays window as shown in the image below, in which you can select the service call which you want to invoke when user clicks on the Button.

In this screen:

1. Set the Service to SimpleCustomerServiceDestination
2. Set the Operation to addCustomer(arg0:SimpleCustomer)
3. Click on OK to continue

The addCustomer function selected expects an argument of the type SimpleCustomer . So Flash Builder 4 will switch to the source view and lets you enter the argument as shown in the image below.

simpleCustomer is the object which is bound to formSelectedCustomer and so any changes made by the user in formSelectedCustomer control will reflect in the simpleCustomer instance so pass simpleCustomer as an argument to the addCustomer function as shown in the image above. Code in the button click handler function will look as shown below. In the code snippet below we are passing the AsyncToken returned by addCustomer function to addCustomerResult, so that addCustomerResult object will dispatch result event when the service call is successful.

protected function btnAdd_clickHandler(event:MouseEvent):void

{

addCustomerResult.token = simpleCustomerServiceDestination.addCustomer(simpleCustomer);

}

Similarly generate service calls for Update and Delete buttons, select updateCustomer and deleteCustomer operations respectively and pass the same simpleCustomer object as argument. After generating service calls for other two buttons your application code in this URL http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD_3.mxml.txt

Clicking on the Add/Update/Delete buttons will reflect the changes on the server. Let’s get the updated collection of customers from the server by invoking getAllCustomers function of the SimpleCustomerServiceDestination class if the Add/Update/Delete operations are successful.

You will have CallResponder instances created for Add, Update and Delete service calls in the application, invoke getAllCustomers() function in the result event of these call responders so that we will get updated customers list after Add, Update and Delete operation are performed successfully.

You can view/copy the completed BlazeDSCRUD.mxml file at this URL http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD.mxml.txt

Save and run your application. You will see your application launched in a browser and ready for performing CRUD operations on the database entries.

Data centric applications can be developed very easily and effectively using Data Centric Development features in Flash Builder 4. Try enabling client side data management and client side data paging for the service used in this article, you can find the articles at the URL below. Please find more articles on using features in Flash Builder 4 at this URL http://sujitreddyg.wordpress.com/flash-builder-4/

Adobe Rocks

FlashBuilder 4 Beta 2 was released as part of MAX 2009 and with it a new set of features for data centric development (DCD). Sujit has a series of posts on DCD at http://sujitreddyg.wordpress.com.

One of the goals of DCD is to enable the developer to work with data in an object oriented way irrespective of the data format (XML, JSON, AMF) or the data exchange protocol (HTTPService, SOAP) with the back end.

The classes in Flex 4 sdk through which data could be got are HTTPService, HTTPMultiService, WebService and RemoteObject

HTTPMultiService

HTTPMultiService is a new class that is added to the flex sdk and supports serialization of data through a property called serializationFilter – you can find more info here . This enables one to convert the HTTP response which could be XML or JSON to a ActionScript class. This is accomplished by the default XML and JSON serializers that are there as part of serializers.swc that comes as part of the FlashBuilder project when you use the Data Menu to define a service this swc gets added as part of your build path.

The serializers are

• com.adobe.serializers.xml.XMLSerializationFilter
• com.adobe.serializers.json.JSONSerializationFilter

Also, one could plugin their own serializers or override the functions of the default serializers to add custom behaviors while decoding or encoding XML / JSON data in a flex project.

Note: One could still continue to use E4X as the means to access XML responses, but working with strong types and AS classes gives much more flexibility and results in more maintainable code.

WebService

WebService class has not changed much since Flex 3, where one can use the the schemaregistry to convert the result SOAP response to AS classes. Check the section “Customizing web service type mapping” in the link http://livedocs.adobe.com/flex/3/html/help.html?content=data_access_3.html. Though sometimes, the response itself will not be indicative enough of what is being returned (check this http://www.webservicex.net/uszip.asmx?wsdl) which tells the result is of type “any” and we cannot use the schemaregistry to register a class also for this so that the webservice class converts this to a appropriate AS class (check the bug https://bugs.adobe.com/jira/browse/SDK-22574 )

This has subsequently been resolved by providing a convertResultHandler property in WebService which could be set to a function which can there by convert the returned result to any AS class that the developer wants. The signature of convertResultHandler is

public static function convertResultHandler(result:*, operation:AbstractOperation):*
{

}

Notice that this could be used across operations and based on the operation one can convert the result which is sent as the parameter and to an AS class that could be referenced in the resultHandlers of those operations.

RemoteObject

Most PHP, CF developers love their platform because of the flexibility it provides with respect to typing of objects and they have a choice to use strong types i.e. PHP classes or CFC components or just work without classes. FlashBuilder provides a unique way to work with weak types on the server and can convert them to strong types on the client without the developer having to do anything on the client side (ofcourse you might have to invoke a wizard and type in a name for the strong type, which is not hard , compared to writing your own client side data layer and doing all the conversions of data yourself )

Check the “Configuring return type” section in http://sujitreddyg.wordpress.com/2009/10/05/building-flex-applications-for-java-based-http-services-using-flash-builder-4/

This will set you up with a return type for your data returned from PHP or CF.

But you feel that you might need additional massaging of the data returned by the server or change the type of a particular property. You can customize again by using the convertResultHandler which is again used for converting a RemoteObject response to a strong type.

you can find this in the _super_* class file’s constructor generated by FlashBuilder in the following piece of code

_serviceControl.convertResultHandler = TypeUtility.convertResultHandler;

TypeUtility is a utility class defined in serializers.swc.

The message here is that

• FlashBuilder has a robust framework to work with weak data types in a object oriented way
• There is a good customization mechanism to override and extend the default conversion mechanisms

Data Centric Development (DCD) in Flash Builder 4 allows developers to build Flex front end for LiveCycle Data Services (LCDS) Data management service destinations with just couple of clicks. Continue reading to see how Flash Builder and LCDS are improving J2EE developer productivity.

In this article we will be building a Flex application for a Data Management service destination in the samples application called lcds-samples bundled with LiveCycle Data Services 3 Beta 3.

Install LCDS 3

Download LiveCycle Data Services 3 from this URL http://labs.adobe.com/technologies/livecycle_dataservices3/. You will be downloading a file named livecycle_dataservices3_b3_win_100509.exe, execute this file to install. I have installed LCDS 3 with Tomcat to C:\lcds3beta3

Enabling RDSDispatchServlet

Flash Builder uses the RDSDispatchServlet (part of LCDS) to retrieve destinations information from the server. By default the RDSDispatchServlet is commented out in web.xml. Open C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\web.xml using a text editor and remove comment around RDSDispatchServlet Servlet definition and the URL mapping as shown below. Also set the useAppserverSecurity parameter value to “false” as shown below.

<servlet>

<servlet-name>RDSDispatchServlet</servlet-name>

<display-name>RDSDispatchServlet</display-name>

<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>

<init-param>

<param-name>useAppserverSecurity</param-name>

<param-value>false</param-value>

</init-param>

<load-on-startup>10</load-on-startup>

</servlet>

<servlet-mapping id=”RDS_DISPATCH_MAPPING”>

<servlet-name>RDSDispatchServlet</servlet-name>

<url-pattern>/CFIDE/main/ide.cfm</url-pattern>

</servlet-mapping>

Defining item class name

Set the item-class property of the Data Management service destination to the name of the object type which the assembler is expecting. Flash Builder 4 DCD requires this property to be set for the destinations you want to consume using DCD in Flash Builder. All the sample destinations in LCDS 3 beta 3 have this property set. Sample destination used in this article has item-class property set to flex.samples.product.Product class as shown below.

XML Snippet below is from C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\flex\data-management-config.xml

<destination id=”inventory”>
<properties>
<source>flex.samples.product.ProductAssembler</source>
<scope>application</scope>
<item-class>flex.samples.product.Product</item-class>
<metadata>
<identity property=”productId”/>
</metadata>
<network>
<paging enabled=”false” pageSize=”10″ />
</network>
</properties>
</destination>

Start LCDS server

Start LCDS samples data base from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start Samples Database

Start LCDS server from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start LiveCycle Data Services Server

Please make sure both the database and the server are started.

We have everything ready to develop a Flex application for data management service destinations using Flash Builder 4.

Create a Flex project

Start Flash Builder 4 from the start menu, start -> All Programs -> Adobe -> Adobe Flash Builder Beta 2

Create a Flex project from the file menu. You will see a window launched with options to fill project properties as shown in the image below. Fill project properties as shown in the image below.

In this screen:

1. Set project name to LCDSSampleProject
2. Let the Application type be Web
3. Set the SDK version to 3.4
4. Set the Application server type to J2EE
5. Select Use remote object access service check box
6. 6. Select LiveCycle Data Services ES
7. 7. Click next to continue

Now we need to set the server properties, you will see a screen with options to set the server properties as shown in the image below.

In this screen:

1. Set the Root folder to c:\lcds3beta3\tomcat\webapps\lcds-samples
2. Set the Root URL to http://localhost:8400/lcds-samples
3. Set the Context root to /lcds-samples
4. Leave the Output folder to default, which is on the server
5. Click finish to continue

All we have to do now is to see how we can consume the service and create a Flex application. With Flash Builder 4 this is very simple, Data centric Development (DCD) features in Flash Builder 4 lets us easily consume data management services and bind them to UI controls.

Consuming data management services from Flash Builder 4

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” in the Data/Services window

You will see a window launched with options to select the type of service as shown in the image below.

In this screen, select LCDS and click on Next to continue. You will be prompted for credentials, since we don’t have RDS authentication enabled, just select No password required check box and click OK to continue.

Now Flash Builder will retrieve all the Remoting and Data Management destinations exposed by the web application and displays as shown in the image below.

Our server settings are configured to point to the sample application bundled with LCDS called lcds-samples. This web application has lots of destinations exposed as shown in the image above. Destinations whose service-type is remoting-service are the Remoting destinations and the ones whose service-type is data-service are the Data Management service destinations. In this sample we will use the “inventory” data management service destination. Select the “inventory” destination and click on Finish to continue.

Flash Builder will generate all code required to consume the service selected and will list the Inventory service in the services explorer as shown in the image below.

You can also see that the return types for the operations (functions/methods of assembler) are properly set. Now that we have the service created, let’s bind the data to a UI control. Switch to design view as shown in the image below.

In this screen:

1. Set the layout of the Application to vertical
2. Drag and drop a DataGrid on to the design view
3. Set the width of the DataGrid to 100% and height to 50%

Now let’s bind the data to DataGrid.

In this screen:

1. Select the DataGrid
2. Right click on the DataGrid
3. Select Bind To Data

You will a window launched with options to select the service.

In this screen:

1. Select New service call
2. Set the Service to ProductService
3. Set the Operation to fill(): Product[]
4. Click on OK to continue

You will see that the DataGrid will change its columns in the design view to reflect the properties of the Product entity.

Configuring DataGrid columns

Flash Builder 4 has an excellent feature which allows developers to configure columns. Select the DataGrid. Right click on the DataGrid and select “Configure Columns …” as shown in the image below.

A window with options to configure the columns for the DataGrid will be launched as shown in the image below.

In this screen:

1. Select “productId” column and move it to top
2. Similarly re-arrange columns as shown in the image above
3. Click on OK

Save and run the application. Application will launch in the browser. You can observe the application sending request to the server and displaying the response in the DataGrid as shown in the image below.

More articles on how to use Flash Builder 4 are available at this URL http://sujitreddyg.wordpress.com/flash-builder-4/

We developed a Flex front end for Data Management service destination in just few minutes. Flash Builder 4 and LCDS rocks

Have a J2EE application and want to create Adobe Flex front end? With Data Centric Development feature in Flash Builder 4 it’s very simple. This article explains communicating with Java classes on the server using HTTP Service. Since its HTTP Service you will create a JSP/Sevlet which will invoke the required Java class and returns the data as either XML or JSON.

You can also invoke methods in Java classes on the server from Flex application and get objects as response instead of invoking a JSP/Servlet which returns XML/JSON. Please find more details on invoking Java methods from Flex application at this URL http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-blazeds-remoting-service-using-flash-builder-4/

In this article we will be using getallcustomers.jsp file which will invoke SimpleCustomerService.java class and returns the entries in the database in XML format. We will use Flash Builder DCD to create a Flex application which will consume the XML data returned by the server.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/

Create a new Flex project

Create a new Flex project as shown in the image above and explained below.

In this screen:

1. Set the project name to “SampleHTTPJavaProject”
2. Set the Application type to “web (run in Adobe Flash Player)”
3. Set the Flex SDK to “Flex 3.4”
4. Click on finish to continue

Using DCD to consume data returned by the server

Data-Centric Development (DCD) is one of the advancements to the Flash Builder 4. Let’s see how DCD is making developers productive. We will use Flash Builder DCD to consume the data from the Java server.

Creating a service

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” in the Data/Services window
3. Window as shown in the image below will be launched

Selecting service type

Since we are using HTTP Service to communicate with the server, select HTTPService from the options and click on next button to continue.

Setting service properties

A service can have any number of operations. Each service will be a class and each operation of a service will be a function inside the class. Each operation has an URL associated with it, when the operation is invoked a HTTP request is sent to the corresponding URL. We will create a service and an operation to consume the data from the getallcustomers.jsp.

In this screen:

1. Change the operation name to “getAllCustomers”
2. Set the URL of the operation to http://<server-name>:<server-port>/<webapp-context>/getallcustomers.jsp in this sample it is http://localhost:9191/demo/getallcustomers.jsp
3. Since we are not expecting any parameters in the JSP file we will skip the parameters section
4. Set the service name to “CustomerService”
5. Click on finish button to create the service

Service will be created and listed in the services explorer as shown in the image below.

Configuring return type

We will configure service to create an AS3 VO class based on nodes in the XML data returned by the JSP file. The VO class will be the return type for the operation. This will make coding easier, since it is easier to deal with strong typed objects than parsing the XML data.

Right click on the “getAllCustomers” operation and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Entering parameters required by the server

Our JSP file is not expecting any parameters, so we don’t have to pass any parameters in this step.

Flash Builder also allows you to give sample response rather than sending a request to the server to get the data. This will be useful when the server side code is not ready but you want to continue creating the Flex application without waiting for the server. Since we have the server ready in our case, let’s send a request to the server and configure return type. Click on next to continue.

Flash Builder parses the XML data returned by the server and displays the same as shown in the image below. You can select the XML node based on which you want the return type AS3 class to be generated. In this step, you can choose to create a new data type or merge the properties to existing AS3 class.

In this screen:

1. Select the “customer” node
2. Click on finish to continue

You can see the return type of the operation in the “data/services” panel changed as shown in the image below. When we invoke the “getAllCustomers” operation, response will be object of the type “Customer” will be created based on the response from the server and returned.

Binding data/service to UI controls

We usually write code to display the response from the service in a DataGrid or any other control. Flash Builder 4 has an awesome option which allows you to just bind a service response to a control.

In this screen:

1. Switch to design view
2. Change the Application layout to “vertical” using the properties panel
3. Drag and drop a “DataGrid” from the “components” panel on to the design area
4. Set the width and height properties of the “DataGrid” to 100%

Right click on the DataGrid and select “Bind to Data …” as shown in the image below

A window as shown in the image below will be launched.

In this screen:

1. We select a “New service call” because there are no existing services in the current application.
2. Select the “CustomerService”
3. Select “getAllCustomers():Customer[]” from the operations list
4. Click OK

You can see the DataGrid in the design updated with properties of the Customer object as shown in the image below.

Save and run the application, you can see the data retrieved from the Remoting service and displayed in the DataGrid as shown in the image below.

More article on using Flash Builder 4 http://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we created a Flex UI for a JSP file using DCD features in Flash Builder. Flash Builder 4 rocks

Two mins. of seeing and using the app, I’m in love with it and for the first time I think I have found a worthy replacement of Google Reader. Hopefully one day it’ll have OPML support so that I can move all my feeds from reader to this app :).

Excellent work Anirudh!

Thank you very much for the overwhelming support. I added few new features and fixed couple of issues I am sorry I couldn’t add all features requested. I will add pending requested features and more to the next version and publish as soon as possible.

Following are the changes incorporated in BlazeMonster version 2:

1. Added support for Spring BlazeDS i.e. BlazeMonster can now generate code for Remoting destinations exposed using Spring BlazeDS.
2. AS3 VO class generation now supports nested custom data types
3. You can save generated code into files on a button click
4. Added AS3 data types mappings for all Java data types for code generation
5. Web application root URL and AMF endpoint values are now persisted
6. And couple of minor fixes.

Please download and install latest version from this URL http://sujitreddyg.wordpress.com/blazemonster/

Adobe Rocks

This is my last blog post on this blog. The last 4 years have been an amazing journey. From being fresh out of college into Macromedia to the Adobe-Macromedia acquisition, from working on Flex 1.5,2,3 to being a full time evangelist was as good a career I could have dreamed of.

I worked with a great team, right from the Flex QE team to the most awesome India Evangelism. People were always supportive and encouraging and taught me a great lot of things.

The most thanks goes out to my dear friend and evangelist Harish, my mentor Ramesh, the ever supporting Ananth (Director Flex & CF Engineering India), Ben Forta. Special thanks to Lauren for being the best manager I ever had and for encouraging me to follow what I wanted to do.

Cheers to the India Evangelism team, the best team I ever had… You guys are great.

But its time for me to move on and follow my aspirations. Today, I am starting my MBA at Ross School of Business, University of Michigan, Ann Arbor. If things turn out as I hope it would, I might continue on this blog in 2 years.

I will blog about my MBA experience here -http://raghuformba.wordpress.com/

I am a bit late in blogging about this. Flex in a Week challenge was launched on 5^th August, 2009 and is already being attempted by 210 users

Flex in a Week video training is one of the best resources to start learning Flex. India Platform Evangelism team has given more reasons to learn Flex in a week by going through this video training course.

Go through the course and complete the Flex in a Week Challenge, you can get a cool badge you can sport on your website, blog or any other place where you think it will be useful. There are tee shirts also to be won by top 25 scorers and the first 25 users who clear the challenge.

If you already know Flex, take Flex in a Week challenge and get a badge for yourself and sport it to everyone

Please find more details at this URL http://flashahead.adobe.com/challenges/

India Platform Evangelism team also took couple of initiatives to communicate with the community easily. You can follow any of the following to get updates from the team and information about the various events and activities

Portal – http://flashahead.adobe.com

Blog – http://flashahead.wordpress.com

Twitter - http://twitter.com/flashahead

Adobe Rocks

Watch the two spaces for the latest news from them…

Adobe Dev Summit is back to present you the latest happenings of Adobe Flash Platform. Don’t miss this unique opportunity to hear from the experts about the power & awesomeness of Adobe Flash Platform & Flash Builder 4.

Date : 4th August 2009, Tuesday
Time : 9 AM to 6 PM
Where : Lalit Ashok, Bangalore

Highlights

• See the new, improved and rocking LiveCycle Data Services 3 in action! If you are a Java developer, you wouldn’t want to miss this one!
• If you are a PHP/Java developer, get on the RIA expressway using the new Data Centric Development features on Adobe Flash Builder 4
• If you’re into enterprise-wide RIA development, things have just got hot! Check out the brand new version of ColdFusion with the sparkling new developer IDE – ColdFusion Builder.
• User Interfaces are a thing of the past now. Build User Experiences of tomorrow with Adobe Flash Catalyst. Quicker than ever!

You can attend this event for FREE using Gold Pass or signup for the Platinum pass and get a Flex Builder 3 Professional license worth USD 699 FREE!!!.

You can get more details about the event and register here.

Come, be there to experience the awesomeness.

Its back and its bigger than ever.

Adobe Dev Summit is back to present you the latest happenings of Adobe Flash Platform. Don’t miss this unique opportunity to hear from the experts about the power & awesomeness of Adobe Flash Platform & Flash Builder 4.

Date : 4th August 2009, Tuesday

Time : 9 AM to 6 PM

Where : Lalit Ashok, Bangalore

What more ? You can attend this event for FREE using Gold Pass or pay nominal fee of Rs. 3000/- ( or Rs. 2500/- before 24th July 2009 ) for Platinum pass and get a Flex Builder 3 Professional license for FREE.

You can get more details about the event and register here

Come, be there to experience the awesomeness.

http://www.endtoend.in/ete2009/adobe/devsummit/mailer.html

On the 27th June 2009, The CF & Flex User Groups in Chennai are collaborating to conduct a Flash Platform & CF pre-Launch event at Hotel Dee Cee Manor in Chennai. It is a full day event with ColdFusion and Flash Platform Sessions followed by Hands-on experience using Flash Builder and ColdFusion. Bring your laptops so that you can experience the software yourselves.

I will be there from Adobe along with Manju Kiran, a Sr.Lead Software Engineer Adobe ColdFusion team and will show exciting new features of the next generation of CF & Flash Platform.

It is a free event. Register here… Seats limited! See you all in Chennai on the 27th

This setup allows you to edit and debug you PHP files along with your flex application in the same instance of eclipse. All features of PDT like PHP code coloring, auto complete will be available in addition to the wonderful features that Flash Builder 4 providesJ.

1. Download Eclipse 3.4.2 based PDT All-in-One bundle
a. Windows
b. Mac OSX Carbon

2. Extract it to a location of your choice. (say C:\opt\eclipse)

3. Download XDebug dll from http://xdebug.org/download.php. For the purposes of this tutorial I downloaded and used http://xdebug.org/files/php_xdebug-2.0.4-5.2.8.dll

4. Place this dll at any location accessible by your php installation, the PHP home directory itself is a good location.

5. Add the following entries to your php.ini file:

;
; Changes to enable XDebug
; zend_extension_ts="C:/opt/php526/php_xdebug-2.0.4-5.2.8.dll"
zend_debugger.allow_hosts=127.0.0.1
zend_debugger.expose_remotely=always
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.profiler_enable=0
xdebug.profiler_output_dir="C:/temp"
xdebug.remote_enable=On
xdebug.remote_autostart=On
xdebug.remote_host=127.0.0.1
xdebug.remote_mode=req
xdebug.remote_log="C:/temp"

You need to be extra careful while editing the php.ini file as installations like WAMP tend to have a php.ini file inside the php folder and another one inside the apache/bin folder. The one under apache/bin is used. So a good way to figure out which php.ini file is being used by your PHP installation run phpinfo() and check the value of “Loaded Configuration File”

6. Restart your web server and view the phpinfo() output. XDebug should be listed there. If you don’t have a phpinfo() file, you can create one by putting the text below in a php file and saving it under your webroot. Then load the file in your browser.

<?php phpinfo();
?>

7. Now download the plug-in version of Flash Builder and install it. When prompted to select the host eclipse, choose the “Plug into another copy of Eclipse” option and enter the path of the eclipse installed in Step 2 – “C:\opt\eclipse”

8. Start eclipse and create a new Flex Project with server type PHP

9. Create/Import a new PHP service the flex project

10. Click on the filters icon at the top of the flex package explorer and uncheck some .* & .project

11. Create a .buildpath file right under the Flex Project and add the following content to it, take care not to overwrite the text in BOLD in your .project file:

<?xml version=”1.0″ encoding=”UTF-8″?>

<buildpath>

<buildpathentry kind=”src” path=”services”/>

<buildpathentry kind=”con” path=”org.eclipse.php.core.LANGUAGE”/>

</buildpath>

12. Update your project’s .project file to look like this:
<?xml version=“1.0″ encoding=“UTF-8″?>

<projectDescription>

<name>PdtFlexTest</name>

<comment></comment>

<projects>

</projects>

<buildSpec>

<buildCommand>

<name>org.eclipse.wst.validation.validationbuilder</name>

<arguments>

</arguments>

</buildCommand>

<buildCommand>

<name>org.eclipse.dltk.core.scriptbuilder</name>

<arguments>

</arguments>

</buildCommand>

<buildCommand>

<name>com.adobe.flexbuilder.project.flexbuilder</name>

<arguments>

</arguments>

</buildCommand>

</buildSpec>

<natures>

<nature>com.adobe.flexbuilder.project.flexnature</nature>

<nature>com.adobe.flexbuilder.project.actionscriptnature</nature>

<nature>org.eclipse.php.core.PHPNature</nature>

</natures>

<linkedResources>

<link>

<name>bin-debug</name>

<type>2</type>

<location>C:/projects/www/htdocs/PdtFlexTest-debug</location>

</link>

<link>

<name>services/TestService.php</name>

<type>1</type>

<location>C:/projects/www/htdocs/PdtFlexTest-debug/services/TestService.php</location>

</link>

</linkedResources>

</projectDescription>

13. Now click on the Debug menu and go to Debug configurations, create a new “PHP Web Page” debug configuration.

14. Click on debug, the browser will open and this debug session in PDT will wait for the service class to be invoked.

15. Now launch your flex application which uses this services, the PDT debugger should break at the first line of gateway.php. In case you would like the debugger to break on a breakpoint in the service class, uncheck the “Break at First Line” option in the Debug launch configuration and place a break point on the exact line in the service file where you would like the debugger to stop.

That’s all there is to it J. You can now edit your PHP code and Flex code in the same instance of eclipse. Full coloring, autocomplete and other PDT feature support for editing your PHP file in addition to all the awesome features of Flash Builder for editing you Flex applications J.

Enjoyyy!!!

This is a question that is often asked to me. A lot of people have complex graphics done in SVG and want to leverage it in their Flex apps. Its actually quite simple.

Like any asset used in your app, copy the svg files into your project structure. You can use the Image control (mx.controls.Image) to draw SVG content. Just that the source has to pointed to classes containing the SVG content instead of the images as you do with JPG and PNG assets. Here is a small bit of code that generated the following result

Code

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” backgroundColor=”0xffffff” layout=”horizontal”>
<mx:Script>
<![CDATA[
[Embed(source="assets/bird.svg")]
[Bindable]
public var bird:Class;

[Embed(source="assets/tux.svg")]
[Bindable]
public var tux:Class;

]]>
</mx:Script>
<mx:Image source=”{tux}”/>
<mx:Image source=”{bird}”/>
</mx:Application>

Result

The SVGs I have used can be found here:

• Tux SVG
• Bird SVG

<snip url=”http://forums.adobe.com/message/2017154#2017154″>

Let me take a shot at explaining asynchronous calls. Most PHP/CF/web developers are used to calling functions in one way only: synchronously. In ActionScript a sychronous function call looks like this:

var stuff = getStuff();

Pretty straightforward. It’s how you expect functions to work: you call them, and then immediately on line #2 of this example you have a value in the stuff variable to work with.

But when it comes to calling remote functions on services sitting on a server somewhere, Flex calls them asynchronously. This is so that the Flex client can continue working while the request is pending. An aync call looks more like this (at least, the first part):

responder.token = getStuffFromService();

What this means is, “stuff” does not come back right away as the result of the function. Instead, what it returns is a kind of ticket. Sort of like ordering some food from a lunch counter and getting a receipt with a number on it. You don’t get your food right away. Instead, you go hang out or do some other stuff while your order is pending, and then your number is called when it’s ready. And then you “respond” to your number.

Well, that’s what a CallResponder is. When you “place your order”, you hook up a CallResponder to it. When your order is ready (data comes back from the service call), the responder kicks into action. It fires a result event (or a fault if something went wrong), and it updates its bindable lastResult property.

So, if you want to work with data from an async call, you can’t simply do it on line #2 of the above snippet. You have to wait until the CallResponder for that call gets its result. If you create a databinding to lastResult, that will automatically update when the result is ready. But since you want to run some script on the result, you have to trigger that script from the CallResponder’s result event handler.

Does that help? Async is definitely a new concept for many web developers to wrap their heads around. But it lets you build some interesting UIs once you get the hang of it.

</snip>

Hope this helps …

Enjoyyy !!!

1. Howto: Connect a flex application to database (for PHP developers)
2. Howto: Use createItem method of the generated sample PHP file

The following video shows how simple it is to connect the PHP sample’s update and delete methods to your flex application.

http://my.adobe.acrobat.com/p77178814/

Now we have a fully functional CRUD application.

The next post will discuss how client side data management can take this CRUD application to the next level :).

Enjoyyy!!!

• getAllItems()
• getItem($itemID)
• createItem($item)
• updateItem($item)
• count()
• getItems_paged($startIndex, $numItems)

These methods help you easily use the client side data management functionalities of FB. Before we reach the final goal of using client side data management, we’ll explore how these methods would be used conventionally.

My previous post explained how you can connect to the getAllItems() method of the generated file. This post I’ll explain how to configure and use the createItem method.

Video - http://my.adobe.acrobat.com/p15003296/

Next post I’ll cover delete and update.

Enjoyyy!!!

The new Flash Builder 4 (formerly Flex Builder) is out in its Beta. It has loads of new features. Some of them are -
Developer Productivity – Event Handler generation, Getter/setter generation code indentation, file templates, etc..
Debugging – Contitional Breakpoint, Run to line, etc..
Working with data in a brand new way (Data Centric Development) – Connecting to HTTPService, WEBService, PHP, ColdFusion, BlazeDS, LCDS has been made so easy.
Flex Unit Support.
and many more….

Useful links -
Download – http://labs.adobe.com/technologies/flashbuilder4/
What’s new – http://www.adobe.com/devnet/flex/articles/flex4builder_whatsnew.html
List of Articles – http://sujitreddyg.wordpress.com/flash-builder-4/
Don’t forget to log the issues/enhancement you encounter in the bug-base here – http://bugs.adobe.com/flex

Go ahead, download it and give us feedback to make it better.

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

The post takes PHP as a sample service, the same workflow holds good for all services in Flash Builder. One of the cool benefits of using Services and DCD workflow in Flash Builder 4.

One point to note while trying to enable paging for functions you write on your own. For PHP & CF, the operation should contain two parameters startIndex and numItems as the last two parameters of the operation. Their types should be number/int.

getItems_paged($startIndex, $numItems)

For Java the name restriction is relaxed, but the type of the last two parameters should be int.

Once paging is enabled for an operation, the data will be paged automatically by the flex controls! How cool is that :). Paging enabled operations can then be bound to data-driven controls like datagrid, list controls, combo box, advanced data grid and tree. These controls take care of asking of invoking the paging enabled operation to fetch the required data.

Short video (http://my.adobe.acrobat.com/p27433395/) showing the paging enabled operation working with a tree :).

Enjoyyy!!!

http://sujitreddyg.wordpress.com/flash-builder-4/

My colleague and good friend, Sujit is aggreagating some of the very cool tutorials, articles and feature walk-through posts by the Flash Builder & Evangelism teams. Be sure you book mark it. You can see it here:

http://sujitreddyg.wordpress.com/flash-builder-4/

This is Part 3 of a 3 part series:

• Part 1 – Importing the Service
• Part 2 – Integrating the Service with UI
• Part 3 – Complete Screen cast of the work flow
  

This is a continuation posts about working with Web Services in Flash Builder 4. Here you can see the screen cast of the whole work flow that I described in the other 2 parts. To view the screen cast, click on the image below or download it here (right-click and select Save-As)

Click on the image above to see the screen cast

This is Part 2 of a 3 part series:

• Part 1 – Importing the Service
• Part 2 – Integrating the Service with UI
• Part 3 – Complete Screen cast of the work flow

This is a continuation of my Web Services import which was discussed in Part 1. Once you have imported the Web Service it’s time to build the UI and bind the service to it.

Step 3 – Building the UI

Go to the design view and drag and drop a ComboBox. Right click and click on “Bind to Data”.

This throws a wizard where you can choose the service you want to bind it to, which in this case is getCountries().

Click “OK” and run the application. You should see the following

Now lets get the population details for a selected item on the combobox. This is simple. Click on the ComboBox and click “Generate Details Form”

This throws a pop-up where you can choose which operation to call on change and what to display.

It automatically redirects to the code view and ask you to provide the parameter for the getPopulation() method.

So change

protected function comboBox_changeHandler(event:ListEvent):void

{ getPopulationResult.token = populationService.getPopulation(strCountry);}

To

protected function comboBox_changeHandler(event:ListEvent):void

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

Now go to design view, reposition the generated Form and run the app and we have a fully functional application served by a webservice. Just to make it pretty, I added a prompt to the ComboBox.

In the next part, you can see a screencast of the workflow that was defined in Part 1 & Part 2.

This is Part 1 of a 3 part series:

• Part 1 – Importing the Service
• Part 2 – Integrating the Service with UI
• Part 3 – Complete Screen cast of the work flow

Web Services are an integral part of the SOA infrastructure and also a preferred way of exposing services, especially in the Enterprise. The new Services Wizards feature in Flash Builder 4 makes it extremely simple to work with Web Services.

To work with the Services Wizard which is part of the Data Centric Design feature in Flash Builder 4 ( for connecting to HTTPService, Web Services or Remoting using any back-end technologies like Java, PHP, CF… etc) you need to do the following:

1. Add the service
2. Configure Return Type (create client-side Model classes by inspecting the service)
3. Call the service and bind it to UI Controls

Before I start to explain how to access Web Service (WS) from Flash Builder, let me discuss some aspects of the WS Architecture. A WSDL(Web Service Description Language) Document is what signify how a WS is exposed. On a high-level, 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. We will be using this Population WS (click to see the WSDL file) for serving data to our application. We will use the following operations:

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

Let’s get started:

Step 1: Create Project

Begin by creating a new Project [File>New>Flex Project]. Type a name and press finish…

Step 2: Import the Service

In your Flash Builder 4 environment, you will see the new Data/Services Tab like below:

Click on “Connect to Data/ Service” and choose WebService from the pop-up

In the next screen, enter the Service Name (that you want it to be called in your Flex application) and path to WSDL file, which in this case is – [http://www.abundanttech.com/WebServices/Population/population.asmx?WSDL]

If your WSDL is SOAP 1.1 protocol compliant, it will directly show the operations screen (the screenshot after the one below). Otherwise, it will ask you to choose the appropriate SOAP port as below. Remember this screen will only appear if your WDSL is not WSDL1.1 compliant.

Then you can choose the operations that you are interested in. You can either choose just the operations you are interested in or press Select All and press “Finish”.

This will give you a Data/Services tab with all the operations imported and configured…

A moment to explain the above operation…

Flash Builder introspects the WSDL and the selected operations and generates the required classes. But you will notice that while the return type for getPopulation() is created as a client side model class called Population, getWorldPopulation() has a return type of Object. The introspecter does the following:

• If the operation is well formed Flash Builder 4 creates the required classes (as in the case of getPopulation() method it creates a Population Class)
• If the operation is not well formed then Flash Builder 4 keeps the return type as Object (as in the case of getWorldPopulation() Method)

Since WSDL itself defines the input and output types, it will create the required classes provided the operations are well formed.

The Part 2 of this series will deal with binding this service to UI and creating an application.

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.

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:

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

Here is the day you have all been waiting for. Flex Builder has got a redesign and power packed with new features and titled Flash Builder 4 and one of the most awaited software from the Adobe stable Flash Catalyst is finally available for the public…

Go ahead and check it out… Here are some links to get you started:

• Flash Builder 4 page on Adobe Labs
• Flash Catalyst on Adobe Labs
• Flash Builder 4 & Flash Catalyst demo Videos
• What’s new in Flex 4 SDK an article by Matt
• Differences in Flex 3 SDK & Flex 4 SDK, an article by Joan

And watch this space for more videos, tutorials, and sneek peaks into Flash Builder 4 & all the new additions to the Flash Platform. From now on, I will tag all those posts as “Flash Platform”…

I am sure you have all been hearing about the new and exciting tools that we at Adobe have been building. We will preview many of these new innovations - Adobe Flash Builder (formerly known as Flex Builder), Adobe Flash Catalyst, upcoming versions of LiveCycle and BlazeDS at the “Adobe Flash Platform Tools Preview” to be held on 3rd June 2009 at Taj Residency in Bangalore. You can read more about the event by visiting our website.

Entry to this event is by invitation only. If you would like to join us for this event (it is an evening event with dinner:) drop me an email with your name, company, designation and contact number to  rrao (at) adobe (dot) com and I will send you an invite. Seats availabe on a FCFS basis. SOLD OUT! See you on June 3rd

Adobe swept the “Great Indian Developer Awards – II”. Thanks to all who voted. We increased our tally from 1 last year to 3 this year and was the company with the most number of awards… w00t!

Adobe swept the stage in 3 categories:

• Best Collaboration Solution – Adobe Acrobat Connect Professional (nominated along with WebEx, MS Office Online.. etc)
• Best Web Development Platform – Adobe ColdFusion 8 (nominated along with ASP.NET, DOJO… etc)
• Best Framework – Adobe Flex (nominated along with .NET framework, Sprint & Struts)

This has been in my mind for quite a while. I have had serious problems with my hosting of files and examples in the past. I was also considering moving to my own domain name (http://flexgeek.in).

After a lot of deliberation (yeah – compromising the page rank, getting all my readers book mark the new address, mxna aggregation…) I have finally decided to transition my blog to http://blog.flexgeek.in. Please update the link in your RSS readers and bookmarks. For some time I will continue to post in both the locations, but I aim to discontinue this blog soon.

What that would mean is that many of my readers who have been *extremely* pissed with the broken links and my not fixing them have a reason to be a little less angry at me. I have re-instated all the examples and source code into my new blog. A good reason to update your bookmarks to http://blog.flexgeek.in

I have had this blog on wordpress for about 2 years now, its time to part and move on.

I have been toying with the idea of building an AIR app that would do something more than the usual flickr photo searching. That’s when I came across this cool application from Idée labs .

I just spent a couple of days to something similar using Adobe AIR and Flex as a desktop app. In the process I also got the Adobe Kuler APIs tied in to this application. I call this experiment colrful desktop.

Feel free to test drive this application and tell me what you think. There are plenty of bugs in it, since I have spent very little (read that as nothing) effort in testing this out. Its a fun app, so go ahead, play with some colors, find images and save them to your desktop. All in a seamless work flow.

Features at a glance

1. Select colors from the palette and search. You will get images matching that color (Results restricted to 25 in the preview build)
2. Search for themes in Adobe Kuler, select a theme and you will get search results matching that theme.
3. Paste the URL of your favorite image in the web and colrful will look up similar images from the web
4. Preview the image of your choice from the search results and download it to your desktop. Just a couple of clicks

Coming soon:

A whole lot of offline stuff, which I am currently working on.

I haven’t gotten a whole lot of time setting up install badge for this one (and wordpress wont let me embed it here anyways. grrr)

A special word of thanks goes to my colleague and sr evangelist Ramesh Srinivasaraghavan for all the value added features. He is the ultimate idea machine!

You need Adobe AIR runtime to use colrful. If you dont have AIR, get it here

Download and Install colrful desktop from here

Stay colrful!

I just finished my presentation and demo for my talk on gumbo. Just got to see the shortlisted submissions for the riathon as well! The apps just rock. I can’t wait to see the showdown at riathon finals @ flash ahead tomorrow. Its going to be one hell of a finals, I am sure.

If you are going to be in bangalore tomorrow and want to attend Flash ahead tomorrow, I still have about 10 invites left with me. If you haven’t signed up, just come to Lalit Ashok, Bangalore tomorrow and ask for me. For all those coming, See you all tomorrow.

Flash Ahead! Its gonnabe fun!

Woah! The response has been overwhelming. We have the last few seats left for Flash Ahead. Sign up now to get a glimpse of all that’s new and smoking in Adobe Flash Platform.

http://adoberiathon.wordpress.com

Here’s announcing Flash Ahead… The event that will showcase the future of the Flash platform to the Indian audience for the first time.

Date: 17th January, 2009

Venue: Lalit Ashok (erstwhile Grand Ashok), Bangalore

Time: 09:00 to 18:00

At Flash Ahead we are going to announce the selected finalists of riathon’08 and they will battle it out in an on-stage showdown of application, in front of the crowd and judges. Later in the day, the results will be announced and prizes will be distributed. You will also get to see the latest technologies on the Adobe Flash Platform.

For more info and event details, visit: http://adoberiathon.wordpress.com

Register here: http://endtoend.in/apps/forms/adobe/flash/adobe.htm

If you are a Flex/Flash/AIR developer and think you can be the one behind the coolest of all RIAs, you cannot afford to miss this event! Put on your RIA development shoes, build the coolest app that you can imagine and send it to us on or before 26th November 2008. If your application catches our attention, you will be invited to a very special event on the 29th of November at Grand Ashok, Bangalore where the top applications will go on stage for a demo showdown! This is your chance to Flash your design skills, Flex your coding muscles and AIR your demos in front of an elite judge panel & the Adobe community.

The Grand winner / winning team will walk away with a groovy Apple IPhone.

The runners up will take home with them a Sony home theater system.

What’s more, there are loads of IPod Nano’s, shuffles and Adobe branded goodies to be won.

This event also brings to you an exclusive preview on the new developments in the Adobe Flash Platform. Experience the Flash Catalyst (code name Thermo), Gumbo(code name for the upcoming version of Flex) ,FXG and Flash Player 10.

Register today at http://adoberiathon.eventbrite.com

Rules & Regulations http://adoberiathon.wordpress.com/rules-regulations/

Terms & Conditions http://adoberiathon.wordpress.com/terms-and-conditions/

Hello People, Welcome back.

Its good to start blogging again after many days. I was very busy working on the next version of Flex i.e. Gumbo. I’m kinda free now after releasing the MAX Preview release of Gumbo. So, here I’m starting to share interesting stuff again.

Demos, Tutorials, Videos, Interesting applications and lots of other cool stuff to show you all. So, stay tuned to this blog to see all these

And, Thanks a ton for your all your comments and feedback on my earlier post on “Refreshingly new Flex Calendar controls” that really encouraged me to add one more to the list i.e MAC Dashboard style calendar along with source.

Click here to download Component / Source

If you are a Flex/ Flash / AIR developer in India and think you can be the one behind the coolest of all RIAs, you cannot afford to miss this event! Put on your RIA development shoes, build the coolest app that you can imagine and send it to us on or before 26^th November 2008. If your application catches our attention, you will be invited to a very special event on the 29^th of November at Grand Ashok, Bangalore where the top applications will go on stage for a demo showdown! This is your chance to Flash your design skills, Flex your coding muscles and AIR your demos in front of an elite judge panel & the Adobe community.

The Grand winner / winning team will walk away with a groovy Apple IPhone.

The runners up will take home with them a Sony home theater system.

What’s more, there are loads of IPod Nano’s, shuffles and Adobe branded goodies to be won.

This event also brings to you an exclusive preview on the new developments in the Adobe Flash Platform. Experience the Flash Catalyst (code name Thermo), Gumbo(code name for the upcoming version of Flex) ,FXG and Flash Player 10.

Register today at http://adoberiathon.eventbrite.com

For more information and contest rules & regulations, please visit http://adoberiathon.wordpress.com

Consider a scenario in which you want to group some data and display it in an AdvancedDataGrid. Now, you open some nodes. And you want to add summaries to the data. Adding summaries means to re-group the data by calling GroupingCollection.refresh(). But the state of open nodes will be lost as new Objects are created for the group nodes while re-grouping.

I’m posting a sample in which the open nodes are preserved.

Sample here.

Source here.

Open the sample, click on Group data, open some nodes and then click on Add Summary. The nodes which are open will remain open.

Basically, here I’m giving the same UID for the group nodes as they were before (re-grouping). That’s why, the open state is maintained.

Note: This sample will work only if the grouping fields are same for both groupings. It’ll need some tweaking in case the grouping fields are changed.

I wanted to post this small fix that I tried out for fixing the memory leak when changing itemRenderers for a flex chart.

The sample files for the bug mentioned in http://bugs.adobe.com/jira/browse/FLEXDMV-1882 are used to illustrate the fix.

The fix done was, to set the instance cache of the itemRenderer in ColumnSeries to be removed when not being used. Specifically the following needs to be done.

1. Goto this function in ColumnSeries.as which is part of your DMV source at src\mx\charts\series\ColumnSeries.as

override public function styleChanged(styleProp : String) : void

2. For the condition – else if(styleProp == “itemRenderer”)

Have the following code

_instanceCache.discard = true;
_instanceCache.remove = true;
_instanceCache.count = 0;
_instanceCache.remove = false;
_instanceCache.discard = false;

This should take care of removing unwanted instances when the itemRenderer gets changed.

I ran the sample without and with the changes for 1 minute by changing the itemRenderer every 5 seconds. Here is the result of that, i.e. the itemRenderers that needed to get updated at that given time. Notice the number of itemRenderers that existed after the change is far fewer than the one without the change.

With Change

itemRenderer2 : 47
itemRenderer1 : 59

Without Change

itemRenderer2 : 391
itemRenderer1 : 451

This fix is only for ColumnSeries, if you want it for any other series make sure to make similar changes in that file as well.

Let me know if this fixes the memory leak on changing of item renderers as well as some of the real-time flex charting itemRenderer related memory leaks.

<riathon> :: hack . play . win – the Adobe way.

Calling all the RIA developers, designers & User experience geeks from all over India for an 8 hour long RIA hackathon. Here is your chance to build the coolest RIA ever and walk away with some seriously kick ass prizes (Will post more on the prizes later, but trust me there are really, really BIG prizes to be won!) Come to hack, play, get famous and most importantly walk away with the prizes!

Register here - http://adoberiathon.eventbrite.com/ and we will tell you more!.

Where: Bangalore
When: Coming Soon

Also, watch this place for more info.

Get ready to hack.play.win

This section is for a user of flex automation with the following details.

1. You are a flex automaiton user .

2. You are using QTP as the testing tool

3. You are facing some issue with the automaiton and you would like to know the details of QTP calls or you would like take the help of Adobe Flex Automation team for resolving your issue.

If you like to inform Adobe about your issue – What you need to do?

1. File an issue in JIRA – the open Adobe bug base. http://bugs.adobe.com/jira Project FLEXENT

2. Have a log file related to QTP interaction and provide the log file also as a part of the bug details.

The steps below describes how to enabling the logging for QTP 9.2 (or lesser versions)

Steps to enable QTP logging.

1. Go to the mercury installation/bin directory say: “C:\Program Files\Mercury Interactive\QuickTest Professional\bin” and run MicLogSetting.exe

2. Select the log settings as:
Level: MicLogLevelDebug2
Folder:C:\Program Files\Mercury Interactive\QuickTest Professional\
Selected Categories:LogCatPackTEA

Ensure the max size of the file is reasonably high (else once the size reaches the maximum limit another file is created. So please ensure that all newly created files are identified)

Note: Please zip these files before uploading them to bug base.

3. Run QTP and repeat the operation which is found non functioning (please try to have minimum steps in your application recorded or executed and those are related to the issue. Else the log file can be huge )

4. A log file would have been generated like C:\Program Files\Mercury Interactive\QuickTest Professional\MicLogFile_QTPro_pid1912_11_32_32.html

Dear All:

The links to the examples and source code of most of my applications in this blog has been broken for a very long time and I have had a lot of folks mail / comment me pointing this out. I apologize for not having gotten back to many of you in the past weeks primarly because I was absolutely busy with my official commitments which is taking quite a bit of my bandwidth. I am changing my hosting provider and I will have all the examples and source code back up for download. In the meanwhile, I will also try and send the source of my applications to whoever has requested it in the coming days. I might be a little slow in responding, apologize for that.

Thank you once again for hitting this space, Things will be back, up and running really quick.

Thanks
Vodka.

AIR APIs are very robust and powerful. Along with platform independence, They also offer many exciting new possibilities for Flash, Flex & other Web developers.

So, I made this funny simple Screensaver like application named “SWFMyScreen” to demostrate some of the cool features of the AIR. Using this application, user will be able to set any Local or Remote SWF as Screensaver which will be displayed in fullscreen after given number of idle minutes.

Features:

1) Chosee your favourite SWF Photo albums or any other SWF animations as your Screensaver

2) Set the idle time-out to display Screensaver

3) Configure the background color

-> Click here to download application

-> Click here to download source

-> Click here to install AIR ( Adobe Integrated Runtime )

 AIR Features demonstrated in this application:

1) Tracking user presense

2) Automatic login during system start-up

3) System tray icon with context menu

4) Full screen AIR application

5) Transparent window with custom chrome

6) Drag a window that does not have title bar

7) Browse dialog for file selection

Oh yeah, They have now done this in silverlight – The kind of stuff we used to do back in Flash 4 days! (Stop embarassing yourself, MSFT! Do it in Flash – there isn’t any other way to do this. Ever.)

Check out http://www.mojaveexperiment.com/ . This is a campaign for Windows vista and is done Entirely in Flash.

I am extremely impressed by seeing Microsoft’s confidence (or the lack of it) on their own platform when it comes to building their own applications. (or may be they know there isn’t a better way (there can’t be one!) of doing this other than doing this in Flash! That’s more like it!)

The application looks great nevertheless! Good work, Microsoft

My hosting provider screwed up bigtime $#@#@% – Still working to get the site back up, Apologies for the broken download links. Will be back up soon.

-vodka.

Flex is a very flexible language and I’m here to prove it again.

Today, I’m posting these two new cute flex calendar controls which uses inbuilt “CalendarLayout” class for functionality and has a completely new layout and interface defined in MXML.

I’m open sourcing these components and you are allowed to edit / use them in your projects with no restrictions.

So, go a head, have fun with these components and unleash your creativity bring out more cooler calendars.

Click here to Download Component / Source

Dear Readers, Please feel free to send me your Feedback / New Component Requests through comments or email.

Venom Ponders :

I am wondering how UI programming can have so many use cases which I never felt when I was working on Solaris long back . Nah! Too much indigestion .

The undo feature in ADG header for the sorting has been pretty sought after for a while now . As a matter of fact, undo feature in everything is a good practice. So I thought I will just build it voila here it is ! I have extended it from a previous renderer I built from scratch modelled on the AdvancedDataGrid cos it had a few things I would want to be assigned a protected modifier rather than a private modifier .

The approach :

Nothing much to write here . Put an image and spliced out the elements from the sort.fields of the grid instance based on the listData. Thats it and good to go . But yeah ! placement needs to be managed .

Take it!!

You can check out the app here

You can grab the source from here .

Screenshot :

Although Cricket is played by a few countries in the world, it is a religion in the Indian sub-continent and followed by millions in India alone.

Thanks to Twenty20 cricket & IPL tournament, the craze has increased lot more in the recent days and added lot more glamour to the game.

Even though we are Web 2.0 world, people watching cricket match through internet portals miss the excitement of game due to plain vanilla interface.

However this can be changed using RIA technologies and many aspects of watching a match live such as chatting with friends, participating in contests, enjoying charts and graphics can all be brought to user following through internet as well.

So, CricketNirvana.com brings you “CricketCentre”, the next generation of Cricketing experience to your desktop through Adobe AIR. This is a Rich Internet Application developed using Adobe Flex and runs on your desktop using Adobe AIR.

Home Page -http://www.cricketnirvana.com/CricketCentreWeb/CricketCentre.html

Feature Demo – http://www.cricketnirvana.com/CricketCentreWeb/FeatureDemo.html

 Features

1) Realtime ball-by-ball score updates

2) Full & Mini-Scorecards

3) System tray & Pop-up notifications

4) Live Analytics & Statistics

5) Player profiles

6) Express Emotions

7) Gossip with friends

8 ) Watch Videos, News and lot more…

So, go a head and experience it…

It’s been a long time since I wrote anything . Promise to be more regular. You heard that right. It is a promise.

So venom is back and this is what he is pondering for now :

Sometimes it is so obvious that you wonder why we dint put somethings into the component which you would assume to be there for granted . What can we say , the use and popularity of the component outgrows its features at times. One such use case which many users have encountered but not been able to get around to is the limitation of custom row heights at different levels of a group when the data provider of tree type is set to the Advanced Data Grid.

This is a very common need especially in financial analysis and when heavy use of item renderers is used for representing the data in a more methodical manner. In fact , a little bit of tweaking to the AdvancedDataGrid component has enabled me to meet this need. Probably you can add on to it whatever you might feel fit to meet your needs.

The two use cases:

I believe the need to set different row heights at different levels of a tree display can be two fold : one being that I would like every row at one particular depth to have a particular height with everything else being the same and the other being that I would want different rows to have different heights to avoid a lot of layout fiasco .

The approach :

There are two additions to the code here here :

• Property by the name depthForCustomHeight to which the depth needs to be set . When this value is set ( default being -1) , then this will take the groupRowheight value and set it only to the corresponding depth mentioned.
• A depth array can be passed to the component which will specify which height needs to be set to which depth. This array should be an array of objects with each object being of the signature :

{depth:2,height:100}

This array will specify the height mentioned in the object to depth mentioned. Note that the depthArray is overridden when the depthForCustomHeight variable is set ( as it should be ) and the latter takes precedence over the former. So , under all circumstances before specifying depthArray, we have to ensure that depthForCustomHeight is of default value -1 .

Enough with the gyaan now. You can check out the app here :

Here are some screenshots of the feature :

When the depthForCustomHeight variable is set to a depth

When the depthArray is mentioned :

You can grab the source of the application here . The source for quiet a few of my personal initiatives in Flex are also there for peruse. The component name is VenomGroupRowHeightGrid and the MXML is VariableGroupRowHeight.mxml .It has a few dependencies , so keep the whole lot and run like hell.

Usually people like to write the AdvancedDataGrid component in mxml. But there are some scenarios where there is a need to create the grid dynamically.

Here is a simple sample in which an AdvancedDataGrid is created dynamically with column groups.

Source is posted here.

From the past few days, I’m seeing a problem with AIR HTML Component that is being reported by many users in many forums. So, i thought of giving a small solution which will help developers to overcome this problem.

Problem

AIR HTML Component fails to open new HTML pop-up window when the “target” of the link is set to “_blank” or “_new”.

Solution

The solution is very straight and simple.

Step 1 - Get all the available links of the page after it is completely loaded and add “onClick” event listener to all required links.

Step 2 – Get the Link’s URL in “onClick” event handler and open a new browser window using “navigateToURL()” or implement a custom window in AIR to handle this.

Code


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTML id="htmlComp" width="100%" height="100%" location="http://www.rediff.com" complete="addEventListenersToLinks(event)" />

<mx:Script>
<![CDATA[

private function addEventListenersToLinks(e:Event):void
{
var dom:Object = e.currentTarget.domWindow.document;
var links:Object = dom.getElementsByTagName("a");

for(var i:Number = 0; i < links.length; i++)
{
if(links[i].target.toLowerCase() == "_blank" || links[i].target.toLowerCase() == "_new")
links[i].onclick = linkClickHandler;
}
}

private function linkClickHandler(o:Object):void
{
navigateToURL(new URLRequest(o.currentTarget.href),"blank");
}
]]>
</mx:Script>
</mx:WindowedApplication>


I was responding to one of the queries by Matt Horn, who is part of the Flex Documentation team on how to get the exact DataPoint for a series based on the mouse position which has one of its axis as a DateTimeAxis, thought let me share it here.

The usual code is

var d:Array = series1.localToData(p); // p is the point for which you want the data

if you notice d[0] will be x-coord and d[1] will be y-coord and if DateTimeAxis is representing the x-Axis then d[0] will be some huge number, basically it is the number of milliseconds from midnight of Jan 1 1970, so just create a Date object with that to get the actual data point.

To get the same data point which actually gets displayed on the Chart, just use the following code.

var d:Array = series1.localToData(p);
var da:Date = new Date(d[0]);
var str:String = daxis.formatForScreen(da); // daxis is the DataTimeAxis of the Chart.

formatForScreen is a public method which translates the date object to the one which is currently being displayed on the Chart based on the dataUnits that has been specified. Its a simple method, but nevertheless handy.

Hello Advanced DataGrid users,

We have added a poll about AdvancedDataGrid’s performance. Please take part in the poll and help us identify the areas which needs improvement.

The poll is hosted at flexpearls

Thanks again.

In this sample, I’m using an Advanced DataGrid as an item renderer within another Advanced DataGrid. This type of configuration is very useful to give a master-detail view. This configuration can be customized more depending on any specific requirements.

Sample here

Application Source, Renderer source

Thanks to Sreeni for coming up with this.

The summit kicked off to a great start with Naresh Gupta(MD, Adobe India) giving insight into the exciting things to come followed by an eye opener by David Wadhwani ( VP and GM,Platform BU, Adobe ).

And then Ben Forta took over . Ben had the entire room raptured with awe and admiration at the technology . He demonstrated back end integration with the Flex applications, styling and skinning of the UI components and conflict management of the back end server all within insanely few lines of code. I have never seen some one present the power of Flex in such a unique style of presentation.

Go Flex and AIR . More to follow . This has been nothing but just the tip of ice berg.

Venom ponders : It is not always silence before storm. Sometimes there is heavy traffic .

9 AM . Bangalore. Busy day. People rushing in and around. Heavy traffic. It is Thursday and two days away from the glorious weekends we all wait impatiently wait for .

Typical Thursday, right ? Wrong..

The history of internet interactivity is being rewritten here at the Chancery Pavilion , Bangalore.

Ladies and gentlemen. Presenting the Adobe RIA Architect Summit ‘08 , Bangalore.

The summit aims at bringing to light the next generation components and controls that define the layout of web and desktop applications of tomorrow, converging the design and creativity of a host of designer tools like the Adobe Flash, Dreamweaver,Fireworks etc. with optimized flex code thus bridging the designer-developer canyon, displaying mind blowing transition effects that zoom in and glide through the desktop and web, building business logic that don’t look drab anymore, architecting major applications using the highly recommended MVC architecture, changing the way you will look at video and images on the web .. ever., inviting the entire civilization of the interaction, innovation and animation of the web to your very own desktop ………. the list goes on .

Two words to sum it up : AIR and FLEX

What does it make you ? An artist

So spread the word around and become a part of what might go down into history .

I am trying to cover the common issues faced by automation customers of Adobe Flex.

Issue Description :
When the application is compiled with automation libraries some controls become non click-able. (Without automation libraries, the controls behaves perfectly fine).Please note that issue is different from controls not recording right events.

Reason:
In application layout, a container is overlapping the controls. Containers are invisible, and without automation, there are no event listeners to the containers. Hence all operation on the controls under the containers also work.
But when automation libraries are included, containers gets listeners registered, hence it will not pass to the containers physically present under them. (You can visualize the container as a transparent sheet kept on controls)
There are two samples below, working and no working case, when automation libraries are enabled.

Non working case:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

<mx:Button label=”Hi” click=”{l1.text=’button clicked’}” />

<mx:VBox width=”100%” height=”100%” alpha=”0″ id=”vb1″>

<mx:Spacer height=”20″ />

<mx:Label id=”l1″ text=”button not clicked” />

</mx:VBox>

</mx:Application>

The application above does not allow the button to be clicked, if it is compiled with automation libraries. Without automation libraries it can be clicked.Reason is that, the invisible VBox overlaps this button. When we click on the button the following script gets recorded.Browser(“Browser”).FlexApplication(“temp”).FlexBox(“vb1″).Click

Working equivalent case:

If such a case exists it can be changed as follows.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”><mx:VBox width=”100%” height=”100%”>

<mx:Button label=”Hi” click=”{l1.text=’button clicked’}” />

<mx:Spacer height=”20″ />

<mx:Label id=”l1″ text=”button not clicked” />

</mx:VBox>

</mx:Application>

Here button is inside the VBox. And hence the script gets recorded as

Browser(“Browser”).FlexApplication(“temp”).FlexButton(“Hi”).Click

Note from the script that , the user can find out what container is overlapping the control. And they can use the design view also to find this.

I.e. in short , in such scenario problem is with the application layout of components.

The day got started pretty early literally at around 3:30 AM IST (So any glitches / goof-ups that happened during the presentation, you know the reason), we were told about 700+ participants have registered for this session worldwide in the developer week organized by Adobe, that was an awesome response, Thank you.

I hope the presentation gave an overview of the data visualization capabilities available in Flex Builder Pro. Aparting from Charting, Advanced Data Grid and OLAP capabilities are part of this library. I have attached the presentation here and some samples that were shared during the presentation.

Developer Week – Data Visualization and Charting PDF

Charting Samples

ADG&OLAP Samples – Thanks to Sreenivas for providing these

When you set Object/Collection as a source for an AdvancedDataGrid to display the source in a Hierarchical manner, the AdvancedDataGrid.dataProvider will return an instance of IHierarchicalCollectionView because internally the source is used to construct a HierarchicalCollectionView which is returned via the dataProvider property.

What if, you want the original source from this IHierarchicalCollectionView. Well, there are some API’s for achieving this -


// First, get the HierarchicalData used to create the HierarchicalCollection
var hd:IHierarchicalData = IHierarchicalCollectionView(adg.dataProvider).source;



//From the HierarchicalData, get the source collection/object
var source:Object = hd.getRoot();


Here is a sample.
Source here.

In Flex 3, we added multiple axes and renderers feature, where the developer could have any number of axes and they could place the horizontal axes either on bottom / top and the vertical axes on left / right. However there were some requests to place it in the middle of the chart.

One could easily customize the Charting API to achieve this, just override the function updateAxisLayout in a customized chart as shown and change the positions of the axisrenderers, you should get something like the screenshot below

override protected function updateAxisLayout(unscaledWidth:Number, unscaledHeight:Number):void
{

super.updateAxisLayout(unscaledWidth,unscaledHeight);

verticalAxisRenderer.move(verticalAxisRenderer.x – unscaledWidth / 2, verticalAxisRenderer.y);
horizontalAxisRenderer.move(horizontalAxisRenderer.x,horizontalAxisRenderer.y – unscaledHeight / 2);

}

You can notice that there is some amount of overlap between the labels of the verticalAxisRenderer and the horizontalAxisRenderer, you could circumvent this by using your own labelRenderer for the AxisRenderer, something like this.

<mx:horizontalAxisRenderer>
<mx:AxisRenderer>
<mx:labelRenderer>
<mx:Component>
<mx:HBox>
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = data;
l1.text = value.text;
}
]]>
</mx:Script>

<mx:Label paddingTop=”-25” id = “l1“/>
</mx:HBox>
</mx:Component>
</mx:labelRenderer>
</mx:AxisRenderer>
</mx:horizontalAxisRenderer>

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!

“Venom Ponders : If context weren’t that important, then man can pray for being the lone male in a world full of women and God can give him that pleasure…………………while making him a raving homosexual “

BackGround:

Some of the most intriguing applications of a grid is a task planner . A task planner has the kind of functionality that can push the limits of customization we can push a grid to. One of the most important features of a task planner will be to filter the data based on some category without compromising on the oft neglected “intuitive” factor . Enter the AdvancedDataGrid.

Among the many customizable pieces of the AdvancedDataGrid, the headerRenderer should top the list . It is surprising the kind of things a person can fathom and apply with modifications here and there to the ADG header , my latest lap mate . But then again , she has has her limitations. She is not that great in accommodating three or more UIComponents . I thought I will get around to it to solve both the problems .

Code explained:

The headerRenderer here in this code sample is a modification to the existing AdvancedDataGridHeaderRenderer. She accomodates a popUpButton with a popUpMenu whose members change on the basis of the dataField of the column whose header carries it.

Two functions in particular need to be mentioned here. These being :

protected function onPopUpMouseDown(event:MouseEvent):void{…} and

protected function filterData(event:MenuEvent):void {…}

The first function provides the functionality and the dataProvider to load the PopUpMenu while the second function provides the functionality to specify the filter function. Thats it. Simple is’nt it ? Now if someone needs to provider a different functionality to the code altogether rather than specify the filter function , then these are the functions to override to get the functionality working.

P.S : I confess the code can be buggy . And yeah. The dataFields are hard coded into the set data of the headerRenderer. Dint think of a better means of getting around it . This being a prototype component you are free to modify it , steal it and sabotage it at your will to suit your requirements. She is for open stuff.

Here’s how the output of a sample program using this headerRenderer will look like :

Goodies:

Heres a sample application using this popUp header renderer component

You can find the source here

There is a post in Flex component Yahoo group on how to show a 3-state checkbox in an AdvancedDataGrid.

It has been implemented for the Flex Tree Control in the Flex cookbook.

I thought lets write a similar example for AdvancedDataGrid. I made some changes in the original sample and here it is; working for the AdvancedDataGrid control.

Example here

Source here