Friday, January 9, 2009

Complex editors on a datagrid

There are times when you want to have a data grid whose cells can have other complex controls like combobox , numeric stepper.To achieve this multi-entity ,entry form t, we use the inline itemEditor field of the datagrid component.

The key here is the itemEditor property of the datagrid column to which you can specify a class ,aka editor or renderer(either flex built in or custom). Now how will flex know which property of the editor or renderer is the user input? . The editorDataField” property specifies which property of the renderer is to be taken as the user input. Example: value property of a numeric stepper, when numeric stepper is the itemEditor.

One very important thing to notice here is that the dataprovider is also synched with the values committed on the item renderers.

Here is an example that shows how to do this.



<?xml version="1.0" encoding="utf-8"?>

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

<mx:Script>

<![CDATA[

private function showArrayCollection():void {

resultText.htmlText="";

for (var i:Number=0;i<stateArray.length;i++) {

resultText.htmlText+="Name:"+stateArray.getItemAt(i).name;

resultText.htmlText+=" Age:"+stateArray.getItemAt(i).age;

resultText.htmlText+="<br>";

}

}

]]>

</mx:Script>

<!--

The data provider for the datagrid.The age property will be synched with the user's input,

when he selects it from the age property.

!-->

<mx:ArrayCollection id="stateArray">

<mx:Object name="Amitha" age="25"/>

<mx:Object name="Priyanka" age="27"/>

<mx:Object name="Krups" age="45"/>

</mx:ArrayCollection>

<mx:DataGrid x="531" y="82" editable="true" dataProvider="{stateArray}">

<mx:columns>

<mx:DataGridColumn headerText="Name" dataField="name" editable="false"/>

<mx:DataGridColumn headerText="Age" dataField="age" editable="true"

itemEditor="mx.controls.NumericStepper" editorDataField="value"/>

</mx:columns>

</mx:DataGrid>

<mx:Button label="show" click="showArrayCollection()">

</mx:Button>

<mx:TextArea width="300" height="300" id="resultText">

</mx:TextArea>

</mx:Application>

Hope it helps!!

Monday, January 5, 2009

Events for DUMMIES

Accept it, we all have used events but never really got to know what goes behind the scenes.

So here in vivid little words, I try to throw some light on this.

Here goes my “EVENTS for DUMMIES!”

Flash Player 9 implements an event model based on the World Wide Web Consortium’s (W3C) specification entitled Document Object Model Events available at http://www.w3.org/TR/DOM-Level-3-Events/events.html. According to this document, the lifecycle of an event that deals with display objects consists of three phases: capture, target, and bubbling.

You have probably heard of these names but never got to know why three phases are used??

The reason is simple.W3C recommends so! J

Capture: During this phase, Flash Player makes a first pass to check every object from the root of the display list to the target component to see if any parent component might be interested in processing this event. By default, events are ignored by the parents of the target component at the capture phase. Its like collecting who and all are interested in the a components events.

Ex:

If component 1 has a code like component2.addEventListener(“eventname”,myfunction);

Component 1 will be added to a list in this phase.

Target: At this phase, event object properties are set for the target and all registered event listeners for this target will get this event.

Event.name and event.whatever is set now!

Bubbling: Finally, the event flows back from the target component all the way up to the root to notify all interested parties identified during the capture phase. Not all events have a bubbling phase and you should consult the AS3 language reference for the events you’re interested in.

The three event phases described above don’t apply to the user-defined events because Flash Player 9 doesn’t know about parent-child relations between user-defined event objects. But AS3 developers can create custom event dispatchers, if they want to arrange event processing in three phases.

Hope it helps!