Extending Data Grid with ActionScript 3.0

Q: I want a custom component that behaves differently than the default grid. I mean, I want my grid’s behaviour be different against the core events. What should I do?

A: In fact, this can be done by MXML tags easily. Here is the problem, a developer never wants to be such alienated from the code flow as knowing nothing about the process. So we will extend our data grid with Actionscript 3.

Q: Then which properties we need to modify first?

A: We will call a remote service with some parameters. This service will response with an XML. We first need to set the data provider of the datagrid, then for viewing the data, we should set the grid columns and map them to data object fields. This is how we set and map the columns it by MXML:

<mx:DataGridColumn headerText=”NO” dataField=”id”/>

Here, we said the content of the column will be an object’s “id” property. And the web service returns us an XML content structured like this:

So, we must point our data provider to the PaperContentSummary node of the XML response. Right? Yeap, right. Then lets initialize our data provider in constructor of our custom data grid. We will use an ArrayCollection instance as a data provider and we will refresh it everytime our service returns a new response. In onEvent function we used a phrase “oEvent.result.PaperContentSummary”. Why? Because result attribute of the ResultEvent object is the root element of the XML. And the nested  nodes of XML are converted into object properties.

private function onEvent(oEvent:ResultEvent):void

{

// myDP is an ArrayCollection instance

myDP = oEvent.result.PaperContentSummary;

this.dataProvider = myDP;

}

Q: How to define the columns with Actionscript?

With AS, we should create an array, push all needed columns to this array and then assign it as columns attribute of the data grid:

var columns:Array = [];

var titleColumn:DataGridColumn = new DataGridColumn( “title” );

titleColumn.headerText = “TITLE”;

titleColumn.dataField=“title”;

titleColumn.showDataTips=true;

Define second column and make it invisible, we will use it in our inner processes, do not need to show it to user.

var idColumn:DataGridColumn = new DataGridColumn(“isOpened”);

idColumn.visible = false;

 

Assign the array to datagrid as “columns” property

//Add the columns to the array

columns.push(titleColumn);

columns.push(idColumn);

this.columns = columns;

Q: Columns are ready, function for reading remote service response reading is ready. But how to call the function and bind this function to the asynchronous service call?

We first create a service called “ContentService” which is extending HTTPServiceWrapper.

Setting the data provider is slightly different when we wanna do it by Actionscript. With XML, we define a CallResponder and assign its last result as our data grid’s data provider. But with this approach, we are alienized to asynchronous call result handling and etc. In background, CallResponder listens for the ResultEvent.RESULT or FaultEvent.FAULT events. We will add these listeners manually;

var pcs:ContentService; =  new ContentService();

pcs =  new ContentService();

pcs.addEventListener(ResultEvent.RESULT,this.onEvent);

And lets invoke the getContentsOfUser function of the service with a String parameter:

pcs.getContentsOfUser(“talha”);

That’s all. Whenever getContentsOfUser method returns a result, onEvent function which we bound to ResultEvent.RESULT event will be executed and the data will be refreshed by mapping the XML to the object. But wait wait wait; which object? We should define it in service return type. I will not delve into the details of this. Just giving you the structure of the object:

Here, title property will be mapped to the title column of the data grid because of our Data Grid Column configuration.

Thats all. Our custom data grid is ready. Bon appettite.

Passing external variables to Flex 4 application

Q: Why we need this?

A: Because we may need some information from server side code to initialize the client side application code developed with Flex 4.