DataGrid ItemEditor with Two Input Fields

Several folks have been asking about how to have a DataGrid ItemEditor with two input fields (say you want to separately edit first name and last name or something like that).

It’s a bit tricky because of some missing pieces in the underlying Flash focus APIs and because of how Focus events work. Here is my take on how to do it. Usual caveats apply (i.e, code is not supported and may have bugs etc).

Download Source
Run Example

Data Grid With CheckBox and ComboBox

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.utils.ObjectProxy;
[Bindable] private var comboArr:ArrayCollection = new ArrayCollection([new ObjectProxy({"checked":true}),new ObjectProxy({"checked":true}),new ObjectProxy({"checked":false}),new ObjectProxy({"checked":true}),new ObjectProxy({"checked":false})]);
]]>
</mx:Script>

<mx:DataGrid dataProvider=”{comboArr}”>
<mx:columns>
<mx:DataGridColumn headerText=”Check Box” dataField=”checked”>
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
<mx:CheckBox id=”checks” selected=”{data.checked}” change=”{data.checked = this.checks.selected}”/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText=”Combo Box” dataField=”checked”>
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
<mx:ComboBox visible=”{data.checked}”>
<mx:dataProvider>
<mx:ArrayCollection>
<mx:source>
<mx:String>Data1</mx:String>
<mx:String>Data2</mx:String>
<mx:String>Data3</mx:String>
<mx:String>Data4</mx:String>
<mx:String>Data5</mx:String>
</mx:source>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Replicating click Event on a MouseOver event in Flex Accordion

The following code is solution to a problem where you need to make the accordion component’s MouseOver event to behave like a click event. The code will work only in the case if you have not given the names to the AccordionHeader explicitly. Check the solution out here

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
public function onMouseOver(evt:MouseEvent):void{
var strName:String = evt.target.name;
var strLen:int = String("_header").length;
if(strName.indexOf("_header") > -1){
accordion.selectedIndex = int(strName.substr(strLen,strName.length));
}
}
]]>
</mx:Script>
<mx:Panel title=”Accordion Container Example” height=”90%” width=”90%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>
<mx:Label width=”100%” color=”blue”
text=”Select an Accordion navigator button to change the panel.”/>
<mx:Accordion id=”accordion” width=”100%” height=”100%” mouseOver=”onMouseOver(event)” >
<!– Define each panel using a VBox container. –>
<mx:VBox label=”Accordion Button for Panel 1″>
<mx:Label text=”Accordion container panel 1″/>
</mx:VBox>
<mx:VBox label=”Accordion Button for Panel 2″>
<mx:Label text=”Accordion container panel 2″/>
</mx:VBox>
<mx:VBox label=”Accordion Button for Panel 3″>
<mx:Label text=”Accordion container panel 3″/>
</mx:VBox>
</mx:Accordion>
<mx:Label width=”100%” color=”blue”
text=”Programmatically select the panel using a Button control.”/>
<mx:HBox>
<mx:Button label=”Select Panel 1″ click=”accordion.selectedIndex=0;”/>
<mx:Button label=”Select Panel 2″ click=”accordion.selectedIndex=1;”/>
<mx:Button label=”Select Panel 3″ click=”accordion.selectedIndex=2;”/>
</mx:HBox>
</mx:Panel>
</mx:Application>

Enabling Handcursor on a MovieClip having dynamic TextField in AS3

You can enable the hand cursor on a MovieClip by defining the following statement

MovieClip.buttonMode = true;

However the solution does not work in-case you have a dynamic textField in that movieclip. To enable hand in this case you have to additionally write the following statement

MovieClip.mouseChildren = false;

The reason is that the mouseChildren property determines whether or not the children of the object are mouse enabled. If an object is mouse enabled, a user can interact with it by using a mouse. The default is true which makes the dynamic textfield interactable and due to the textfield behaviour the flash player does not show the hand-cursor.

Attaching MovieClip from library by passing classname as a string in function in AS3

The post contains a solution for a case where you need to attach a Library symbol and you have to pass that class name as a string to the function.

The approach followed here is by using the getDefinitionByName utility which interprets the string and convert it into a Class. Then you can use a new syntax with that particular class. Following is a code for the same solution and you can download the source files from here. The “testMC” here is a movieClip in library with the className as testMC and BaseClass as flash.display.MovieClip

import flash.utils.getDefinitionByName;


function addMovieFromLibrary(mcIName:String){
var tMC:Class = getDefinitionByName(mcIName) as Class;
var newMc:MovieClip = new tMC() as MovieClip;
addChild(newMc);
}




Get Data Grid Value on Button Click

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” width=”800″>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.collections.ArrayCollection;
[Bindable] private var employees:ArrayCollection = new ArrayCollection([{"name":"Christina Coenraets","phone":"555-219-2270","email":"ccoenraets@fictitious.com","active":"true"},{"name":"Joanne Wall","phone":"555-219-2012","email":"jwall@fictitious.com","active":"true"},{"name":"Maurice Smith","phone":"555-219-2012","email":"maurice@fictitious.com","active":"false"},{"name":"Mary Jones","phone":"555-219-2000","email":"mjones@fictitious.com","active":"true"}]);

private function dgItemClick(event:ListEvent):void{
if (event.columnIndex != 3) //to check if the button has not been clicked
loadItem(event.itemRenderer.data);
}

public function loadItem(dataObj:Object):void{
var str:String = “”;
for (var items:String in dataObj)
{
if (items != “mx_internal_uid”)//this is an extra unique id that Flex assigns by itself
str += items + “:” + dataObj[items] + “\n”;
}
Alert.show(str);
}
]]>
</mx:Script>

<mx:DataGrid id=”dg” width=”500″ height=”200″ rowCount=”5″ dataProvider=”{employees}” itemClick=”dgItemClick(event)”>
<mx:columns>
<mx:DataGridColumn dataField=”name” headerText=”Name”/>
<mx:DataGridColumn dataField=”phone” headerText=”Phone”/>
<mx:DataGridColumn dataField=”email” headerText=”Email”/>
<mx:DataGridColumn headerText=”">
<mx:itemRenderer>
<mx:Component>
<mx:Button label=”Select” click=”{outerDocument.loadItem(data)}”/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

</mx:Application>