Adobe Flex sdk beta 3 and Adobe AIR beta 3 just release to Adobe Labs yesterday, so I have updated my version checker AIR application to detect the new SDK and also compiled the app against the new AIR classes targeting the new AIR runtime.
All other blog references will be pointing to this new version >>>> here <<<<<.
No Comments »
This isn’t as difficult as some may think. Basically your itemRenderer opens up a popup. When the renderer creates the popup, it sets an “opener” property on the popup pointing back to “this”, which is the itemRenderer. That way, when the editing is finished in the popup, the popup can pass data back to a function in the itemRenderer to do the update, close itself, and set focus back to the itemRenderer.
Here is the code for the app:
<?
xml version=
"1.0" encoding=
"utf-8"?>
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" xmlns:local=
"*" >
<mx:
Array id=
"arr">
<mx:
Object articleName=
"Finding out a characters Unicode character code Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data=
"15" />
<mx:
Object articleName=
"Setting an icon in an Alert control" data=
"14" />
<mx:
Object articleName=
"Setting an icon in a Button control" data=
"13" />
<mx:
Object articleName=
"Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data=
"10" />
<mx:
Object articleName=
"Detecting which button a user pressed to dismiss an Alert dialog" data=
"9" />
<mx:
Object articleName=
"Using the Alert control Formatting data tips in a Slide" data=
"8" />
</mx:Array>
<mx:ArrayCollection id=
"AC" source=
"{arr}" />
<mx:DataGrid height="250" dataProvider="{AC}" variableRowHeight="true" width="60%" editable="true">
<mx:columns>
<mx:DataGridColumn dataField="data" headerText="ID" editable="false" width="125"/>
<mx:DataGridColumn
editable="false" wordWrap="true"
headerText="Article Name"
itemRenderer="MyRenderer" dataField="articleName"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Read the rest of this post»
No Comments »
I had a customer asking how to do this.
Sorting the datagrid sorts the underlying dataprovider.
Remember that things like ArrayCollections are just essentially views of the data. So adding an element to the underlying data, regardless of the position at which you add the new item, will not affect its position in the “view”. It will get added in its sorted position if the view is showing sorted data. The workaround to this is show in the simple sample below:
<?
xml version=
"1.0" encoding=
"utf-8"?>
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" creationComplete=
"init()">
<mx:Script>
<!
[CDATA
[
import mx.
collections.
ArrayCollection;
public var objs:ArrayCollection =
new ArrayCollection
();
/*
* initialize the dataprovider
*/
private function init
():
void {
var obj:
Object =
new Object();
obj.
name =
"carry";
objs.
addItem(obj
);
obj =
new Object();
obj.
name =
"fred";
objs.
addItem(obj
);
obj =
new Object();
obj.
name =
"henry";
objs.
addItem(obj
);
obj =
new Object();
obj.
name =
"issac";
objs.
addItem(obj
);
obj =
new Object();
obj.
name =
"mary";
objs.
addItem(obj
);
obj =
new Object();
obj.
name =
"tom";
objs.
addItem(obj
);
obj =
new Object();
obj.
name =
"tom2";
objs.
addItem(obj
);
dg.
dataProvider = objs;
}
import flash.
utils.
ByteArray;
private function clone
(source:
Object):*
{
var myBA:ByteArray =
new ByteArray
();
myBA.
writeObject(source
);
myBA.
position =
0;
return(myBA.
readObject());
}
private function addObj():void{
var temp:Array = clone(objs.toArray());
objs=new ArrayCollection(temp);
dg.dataProvider=objs;
var obj:Object = new Object();
obj.name=‘’;
objs.addItemAt(obj, 0);
}
]]>
</mx:Script>
<mx:Button width="150" label="Add New Row" click="addObj()" />
<mx:DataGrid id="dg" editable="true" width="50%" height="80%">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"
editable="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
Browse the source of this example.
Download a zipfile containing the source to this sample.
This movie requires Flash Player 9
No Comments »
I have seen a few people and had a customer ask how to detect when a flex app loses focus.
Here is a sample app that shows the technique and a practical application of this functionality.
When you click and drag a DividedBox separator, if you move the mouse outside the Flex application window, the app should realize this and “drop” the separator at that horizontal or vertical position (depending on the orientation of your divider). It doesn’t do this automatically (and maybe is should), but it is easily done and demonstrates the technique that can be used for other reasons.
Here is the simple app:
<?
xml version=
"1.0" encoding=
"utf-8"?>
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" creationComplete=
"addListeners(event)">
<mx:Script>
<!
[CDATA
[
private var lastX:
Number;
private var lastY:
Number;
private function addListeners
(event:Event
):
void{
systemManager.
stage.
addEventListener(Event.
MOUSE_LEAVE, mouseLeave
);
systemManager.
stage.
addEventListener(Event.
DEACTIVATE,deactivate
);
systemManager.
stage.
addEventListener(MouseEvent.
MOUSE_MOVE, mouseMove
);
}
private function removeListeners
(event:Event
):
void{
systemManager.
stage.
removeEventListener(Event.
MOUSE_LEAVE, mouseLeave
);
systemManager.
stage.
removeEventListener(flash.
events.
Event.
DEACTIVATE,deactivate
);
systemManager.
stage.
removeEventListener(MouseEvent.
MOUSE_MOVE, mouseMove
);
}
private function mouseMove(event:MouseEvent):void{
//trace("move…");
lastX=event.stageX;
lastY=event.stageY;
}
private function mouseLeave(event:Event):void{
//trace("left");
removeListeners(event);
dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP,true,false,lastX,lastY));
}
private function deactivate(event:Event):void{
//trace("deactivate");
removeListeners(event);
dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP,true,false,lastX,lastY));
}
]]>
</mx:Script>
<mx:VDividedBox id="div1" dividerPress="addListeners(event)" dividerRelease="removeListeners(event)">
<mx:VBox height="200" width="300" borderStyle="outset">
<mx:Button label="Something"/>
</mx:VBox>
<mx:VBox height="200" width="300" borderStyle="outset">
<mx:TextArea width="100%"/>
</mx:VBox >
</mx:VDividedBox>
</mx:Application>
Browse the source of this example.
Download a zipfile containing the source to this sample.
This movie requires Flash Player 9
No Comments »
XML and ampersands do not mix well.
Flex uses mxml which is XML.
This can lead to issues when writing binding expressions in mxml tags for component properties when you are trying to write logical expressions using ‘and’.
Here is a simple sample that demonstrates how to escape the ampersands in the expression and how to create a logical expression that does not even use ‘and’, but achieves the same result.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var bOne:Boolean=false;
[Bindable]
public var bTwo:Boolean=false;
]]>
</mx:Script>
<mx:Button label="(click to toggle) bOne: {bOne}" click="bOne=!bOne"/>
<mx:Button label="(click to toggle) bTwo: {bTwo}" click="bTwo=!bTwo"/>
<mx:Label text="If bOne and bTwo are true, the buttons below will be Enabled"/>
<!–escape the ampersands for the logical and operator –>
<mx:Button label="enabled?" enabled="{(bOne && bTwo)}"/>
<!–or use this compounded logical statement which will evaluate to the same thing –>
<mx:Button label="enabled?" enabled="{(bOne ? bTwo : false)}"/>
</mx:Application>
Browse the source of this example.
Download a zipfile containing the source to this sample.
This movie requires Flash Player 9
No Comments »
Recent Comments