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).
<?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>
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>
<?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>
As you know, all MXML files are converted to ActionScript Classes which are later compiled in SWF file. If you want to view / study these automatically generated classes, you can use Compiler Argument -keep-generated-actionscript in Flex Builder Project.
In Flex Builder navigate to Project > Properties > Flex Compiler > Additional compiler arguments and add following configuration: -keep-generated-actionscript
This will create a folder named generated in project source folder which will have all ActionScript classes which Flex Builder automatically generates from MXML ({MXML file name}-generated).
I have been exploring the ways to copy an Array object to a new Array with less of the effort. Reason being the following statements in ActionScript
var arrayA:Array = new Array(”Jack”,”Steve”,”Mark”,”Ted”);
var arrayB:Array = arrayA;
The above statements appears to create a copy of arrayA, however in the actual it creates a new reference to the arrayA object. The problem is that if you execute any operation on arrayB object now it will impact the arrayA eventually. For example:
arrayB.pop();
trace(arrayA);
The statement is supposed to trace “Jack,Steve,Mark,Ted” whereas it will trace “Jack,Steve,Mark”.
To overcome this problem we use the following methodology
var arrayA:Array = new Array(”Jack”,”Steve”,”Mark”,”Ted”);
var arrayB:Array = new Array();
for(var i:int = 0; i < arrayA.length; i++) {
arrayB[i] = arrayA[i];
}
arrayB.pop();
trace(arrayA);
Now it will trace the desired result i.e. “Jack,Steve,Mark,Ted” and if you trace arrayB then it will trace “jack,Steve,Mark”
This methodology is very good when you are dealing with single array objects but when it comes to Nested Arrays it is really a tedious job as you have to look for every inner object of an array if it is an Array type and then again create a new array and copy it’s element. To overcome this we can use now the ByteArray class of Flash.utils package
You can review the following code used to copy an array. There is a disadvantages of using the ByteArray and that is you will loose on some speed. The ByteArray.Read method is slower than copying an Array. You can see a benchmark here
——————————–
Copying a 100000 elements array
——————————–
Copy with loops starts at :: 802504163
Copy with loop ends at :: 802504210
Time elapsed :: 47 milliseconds
Copy with ByteArray Starts at :: 802504257
Copy with Byte Array :: 802504382
Time elapsed :: 125 milliseconds
There is certainly a significant amount of processing time which ByteArray take however it is eventually helping us out when it comes to copying nested objects.
Download the fla from here.
Here is the code for the same.
——————————————————–
——————————————————–
import flash.utils.ByteArray;
var tDate:Date = new Date();
var iStartTime:uint;
var iTime:uint;
var byteArray:ByteArray = new ByteArray();trace(”——————————–”);
trace(”Copying a 100000 elements array “);
trace(”——————————–”);
//———- Create and Populate Array ———
var arrayA:Array = new Array();
for (var i:uint; i<=100000; i++) {
arrayA.push(Math.random()*i);
if (i == 100000) {
copyArray();
}
}//———– Copy Array using Loops ——–
function copyArray():void {
tDate = new Date();
iStartTime = tDate.time;
trace(”Copy with loops starts at :: ” + iStartTime);
var arrayB:Array = new Array();
var arr_len:uint = arrayA.length -1;
for (var i:int = 0; i <= arr_len; i++) {
arrayB[i] = arrayA[i];
if (i == arr_len) {
tDate = new Date();
iTime = tDate.time;
trace(”Copy with loop ends at :: ” + iTime);
trace(”Time elapsed :: ” + (iTime – iStartTime) + ” milliseconds”);
copyWithByteArray();
}
}
}
//——- Function copy with Byte Array ———
function copyWithByteArray():void {
tDate = new Date();
iTime = tDate.time;
trace(”Copy with ByteArray Starts at :: ” + iTime);
byteArray.writeObject(arrayA);
byteArray.position = 0;
var arrayB:Array = byteArray.readObject() as Array;
tDate = new Date();
var iByteArrTime:uint = tDate.time;
trace(”Copy with Byte Array :: ” + iByteArrTime);
trace(”Time elapsed :: ” + (iByteArrTime – iTime) + ” milliseconds”);
}
There are two ways to achive the same.
Method : 1)
private var monitor:URLMonitor;
public function checkConnectionStatus():void
{
var checkUrl:URLRequest = new URLRequest(“http://www.google.com“);
monitor = new URLMonitor(checkUrl);
monitor.addEventListener(StatusEvent.STATUS,updateConnectionStatus);
monitor.start();
}
public function updateConnectionStatus(event:StatusEvent):void
{
monitor.stop();
if(event.code == “Service.available”)
{
Alert.show( “Online”);
}
else if(event.code == “Service.unavailable”)
{
Alert.show(“Offline”);
}
}
Method 2) :
When you login to the application , If
internet connection goes out or comes back , the below event will be
fired, you can catch this event an call back the method described
in MEthod 1)
Application.application.addEventListener(Event.NETWORK_CHANGE,handleNetwork
This is a prototype to load external flash9 swf file into flex and using the library items from the swf. In given example we have two library symbols with linkage ids (”mc1″, “mc2″).
Just make sure when you create a movieclip from these definitions, you firstly add these to a UIComponent and then that component to stage or any container, otherwise there will be a conversion error you will be getting
You can download sources from here
Following is the code for the same.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”init()” layout=”absolute”>
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
//-------- Declare Variables --------
private var swfLoader:Loader;
private var fileURL:URLRequest;
//----- Initialize Function ------------
private function init():void{
// Security.allowDomain("*");
swfLoader = new Loader();
_fileURL = new URLRequest("sample.swf");
configureListeners(swfLoader.contentLoaderInfo);
try{
swfLoader.load(_fileURL);
}
catch(e:IOErrorEvent){
trace(e.toString());
}
}
private function configureListeners(dispatcher:IEventDispatcher):void {
dispatcher.addEventListener(Event.COMPLETE, onSWFLoaded);
dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
dispatcher.addEventListener(Event.INIT, initHandler);
dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
dispatcher.addEventListener(Event.OPEN, openHandler);
dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
dispatcher.addEventListener(Event.UNLOAD, unLoadHandler);
}
private function completeHandler(event:Event):void {
trace("completeHandler: " + event);
}
private function httpStatusHandler(event:HTTPStatusEvent):void {
trace("httpStatusHandler: " + event);
}
private function initHandler(event:Event):void {
trace("initHandler: " + event);
}
private function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}
private function openHandler(event:Event):void {
trace("openHandler: " + event);
}
private function progressHandler(event:ProgressEvent):void {
trace("progressHandler: bytesLoaded=" + event.bytesLoaded + " bytesTotal=" + event.bytesTotal);
}
private function unLoadHandler(event:Event):void {
trace("unLoadHandler: " + event);
}
//-----
private function onSWFLoaded(event:Event):void{
var mClip:Class = event.target.applicationDomain.getDefinition("mc1") as Class;
var mClip1:Class = event.target.applicationDomain.getDefinition("mc2") as Class;
var mClipInstance:MovieClip = new mClip() as MovieClip;
var mClipInstance1:MovieClip = new mClip1() as MovieClip;
//trace(mClipInstance.totalFrames);
var uiComp:UIComponent = new UIComponent();
uiComp.addChild(mClipInstance);
uiComp.addChild(mClipInstance1);
addChild(uiComp);
uiComp.x = 100;
uiComp.y = 100;
uiComp.getChildAt(0).x = 150;
}
]]>
</mx:Script>
</mx:Application>
The lifecycle of component in flex is certainly somewhat similar to the old V2 framework where you create a component holder, craetechildren, set-sizes and dispatch events. Following four methods plays a role for component rendering
Here is what I found after doing some studies. The most of the following part is taken from Adobe flex help however what I am trying to do here is to elaborate it more by putting up some comments to each step to make it clearer.
The green comments shows the methods and events performed by or on component itself whereas the comments in blue represents the methods and events performed on or by the parent container.
Following steps are demonstrating the Button component life cycle
//– The preinitialize event(mx.events.FlexEvent) is triggered when the UIComponent is in a very raw stage and there is no children in existence at that time
createChildren is a protected method of UIComponent class which we need to override when we create a subclass of the UIComponent. Also from within an override of the createChildren() method, you call the addChild() method to add each child object.
You do not call this method directly. Flex calls the createChildren() method in response to the call to the addChild() method to add the component to its parent.
invalidateProperties() marks a component so that its commitProperties() method gets called during a later screen update.
invalidateSize () Marks a component so that its measure() method gets called during a later screen update.
invalidateDisplayList () Marks a component so that its updateDisplayList() method gets called during a later screen update.
The only exception to this rule is that Flex does not call the measure() method when the user sets the height and width of the component.
Initizlize event gets dispatched when the component has finished its construction and has all initialization properties set.
After the initialization phase, properties are processed, the component is measured, laid out, and drawn. After which the creationComplete event is dispatched.
The childAdd event is dispatched when the addChild() or addChildAt() method is called. At the time when this event is sent, the child object has been initialized, but its width and height have not yet been calculated, and the child has not been drawn on the screen. If you want to be notified when the child has been fully initialized and rendered, then register as a listener for the child’s creationComplete event.
Dispatched when the component has finished its construction and has all initialization properties set. After the initialization phase, properties are processed, the component is measured, laid out, and drawn, after which the creationComplete event is dispatched.
