FLEX{er} » Events

Web Seminar – Multitouch development with Flex

Stelian Crisan — Thu, 11 Mar 2010 23:21:11 +0000

On Wednesday, March 17, 2010 from 12:00 PM – 1:00 PM (GMT+0200) will be available online an interesting web seminar hosted by Adobe Systems.

Join Piotr Walczyszyn for this 30 minutes e-seminar followed by 15 minutes of Q&A. Learn how to define mutitouch, how to support it, and how you can handle multitouch events. Also explore new techniques for interacting with software and devices with the latest capabilities of the Flash Platform.

For registration please go to: multitouchflex.eventbrite.com.

Flex/Flash Keyboard Key Codes

Andrei Ionescu — Sun, 20 Dec 2009 02:12:25 +0000

If you need to know the key codes when implementing a keyboard event use the following application that displays some info about the pressed key. First you need to click on the application to have focus on it then you can start trying out different key strokes.

Some key codes, ASCII codes tables are present bellow…

Letter or number key	Key code	ASCII key code
A	65	65
B	66	66
C	67	67
D	68	68
E	69	69
F	70	70
G	71	71
H	72	72
I	73	73
J	74	74
K	75	75
L	76	76
M	77	77
N	78	78
O	79	79
P	80	80
Q	81	81
R	82	82
S	83	83
T	84	84
U	85	85
V	86	86
W	87	87
X	88	88
Y	89	89
Z	90	90
0	48	48
1	49	49
2	50	50
3	51	51
4	52	52
5	53	53
6	54	54
7	55	55
8	56	56
9	57	57
a	65	97
b	66	98
c	67	99
d	68	100
e	69	101
f	70	102
g	71	103
h	72	104
i	73	105
j	74	106
k	75	107
l	76	108
m	77	109
n	78	110
o	79	111
p	80	112
q	81	113
r	82	114
s	83	115
t	84	116
u	85	117
v	86	118
w	87	119
x	88	120
y	89	121
z	90	122

Numeric keypad key	Key code	ASCII key code
Numpad 0	96	48
Numpad 1	97	49
Numpad 2	98	50
Numpad 3	99	51
Numpad 4	100	52
Numpad 5	101	53
Numpad 6	102	54
Numpad 7	103	55
Numpad 8	104	56
Numpad 9	105	57
Multiply	106	42
Add	107	43
Enter	13	13
Subtract	109	45
Decimal	110	46
Divide	111	47

Function key	Key code	ASCII key code
F1	112	0
F2	113	0
F3	114	0
F4	115	0
F5	116	0
F6	117	0
F7	118	0
F8	119	0
F9	120	0
F10	This key is reserved by the system and cannot be used in ActionScript.	This key is reserved by the system and cannot be used in ActionScript.
F11	122	0
F12	123	0
F13	124	0
F14	125	0
F15	126	0

Key	Key code	ASCII key code
Backspace	8	8
Tab	9	9
Enter	13	13
Shift	16	0
Control	17	0
Caps Lock	20	0
Esc	27	27
Spacebar	32	32
Page Up	33	0
Page Down	34	0
End	35	0
Home	36	0
Left Arrow	37	0
Up Arrow	38	0
Right Arrow	39	0
Down Arrow	40	0
Insert	45	0
Delete	46	127
Num Lock	144	0
ScrLk	145	0
Pause/Break	19	0

Some stuff about keyboard events bellow:
http://livedocs.adobe.com/flex/3/html/help.html?content=events_11.html
http://cookbooks.adobe.com/post_Global_keyboard_event_handling-304.html
http://livedocs.adobe.com/flex/3/html/help.html?content=Capturing_User_Input_3.html

How To Create Bindable Properties (using Getters and Setters Methods) in Flex

Andrei Ionescu — Fri, 26 Jun 2009 07:25:07 +0000

Let’s say you created a new component and you want to add some properties that need to be bindable. Something like this:

<flexer:myComp width="400" height="200" myNewSetter="{_myData}" />
<mx:Script>
    [Bindable]
    private var _myData:String= "";
mx:Script>

And when we do this

_myData = "new_val_1";

the myComp component should know that _myData has changed and should modify itself according to the new value.

This is quite simple. Do the following:

On the getter, just above it, use the bindable meta tag like this
```
[Bindable(event="mySpecialEvent")]
```
On the setter, at the end but in the setter’s body (just before closing the setter), dispatch the event used at point 1 like this
```
dispatchEvent(new Event("mySpecialEvent"));
```

Let me show you the following example…

The second text area field is not a TextArea compoment but a new created component that is extending the regular TextArea. I called it AlteredTextArea because the new property it has will alter its content. This is our component that implements a new property called alteration that is bindable.

The combo box will say to the AlteredTextArea component in which way to alter the content: lowercase or uppercase.

Now the code. It is short, commented and has 2 files: the main application and the AlteredTextArea component.

This is our component AlteredTextArea…

<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        [CDATA[
            // private variable saving the current alteration
            private var _alteration:String = "";
 
            // Getter
            // Allow other components to bind to this property
            [Bindable(event="changeAlteration")]
            public function get alteration():String
            {
                return _alteration;
            }
 
            // Setter
            public function set alteration(s:String):void
            {
                _alteration = s;
 
                // We dispatch an event when the value changes
                dispatchEvent(new Event("changeAlteration"));
             }
 
             // overiding the text setter
             override public function set text(value:String):void
             {
                 // adding alteration to the text
                 var newValue:String = "";
                 switch (_alteration) 
                 {
                     // applying lowercase
                     case "toLowerCase":
                         newValue = value.toLowerCase();
                         break;
                     // applying uppercase
                     case "toUpperCase":
                         newValue = value.toUpperCase();
                         break;
                     // no alteration
                     default:
                         newValue = value;
                         break;
                 }
                 // calling the super
                 super.text = newValue;
             }
        ]]>
    mx:Script>
mx:TextArea>

Now the main application…

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:flexer="com.flexer.*" 
    height="299" width="459">
    <mx:ComboBox id="alterationCombo" x="118" y="138" width="158"
        dataProvider="{_alterations}" 
        change="handleAlterationChanges(event)"/>
    <mx:Label x="10" y="140" text="Alteration:" width="100"/>
    <mx:Label x="10" y="11" text="Input text:" width="100"/>
    <mx:Label x="10" y="169" text="Output:" width="100"/>
    <mx:TextArea id="inputText" x="118" y="10" 
        width="330" height="120" 
        text="{_testText}"/>
    <flexer:AlteredTextArea x="118" y="168"
        id="alteredText" 
        width="330" height="120" 
        text="{inputText.text}" 
        alteration="{_currentAlteration}"
        editable="false"/>
 
    <mx:Script>
        [CDATA[
            // alteration available
            [Bindable]
            private var _alterations:Object = [
                {label:"Default",value:""},
                {label:"Lowercase",value:"toLowerCase"},
                {label:"Uppercase",value:"toUpperCase"}
            ];
 
            // the test to start with
            [Bindable]
            private var _testText:String = "Test TEST test";
 
            // the current alteration
            [Bindable]
            private var _currentAlteration:String = "";
 
            // handler for changes
            private function handleAlterationChanges(e:Event):void 
            {
                // setting current alteration
                _currentAlteration = e.target.selectedItem.value;
                // setting the text again
                alteredText.text = inputText.text;
            }
        ]]>
    mx:Script>
 
mx:Application>

I think you already noticed the get alteration and set alteration methods and understood how is done.

If you want to know more take a look inside the TextArea component which has lots of getters and setters using this tehnique.

It seems that it can even be used like this

[Bindable("changeAlteration")]

without saying “event=“. But to be make the code more readable I use the first case.

Also on DevNet found the following resources:

http://www.adobe.com/devnet/flex/quickstart/building_components_in_mxml/ (go to the end and see the last example)
http://www.adobe.com/devnet/flex/quickstart/building_components_in_mxml/src/MxmlComponentAdvanced/index.html

Happy coding!

How To Change The Default Behavior of DisclosureIcon of a Tree Component

Andrei Ionescu — Mon, 20 Apr 2009 22:33:12 +0000

This weekend I’ve been programming a new tree component that is intended to be used as a hierarchical menu. One thing that I have to do was to change the default behavior of the disclosureIcon. If you wonder what is the disclosureIcon, it is the grey arrow that shows if there is a node or a leaf and if that node is opened or not. That is the disclosureIcon and it has its own behavior different than the item itself.

I needed to implement the same behavior of a regular item but to do this I had to stop the default behavior. So I created a new item renderer based the default TreeItemRenderer in which we will try to modify this behavior.

First I started to study the TreeItemRenderer, to see what it implements what can be changed or overridden, etc. disclosureItem is a protected object so it can be used in our new tree item renderer that extends TreeItemRenderer.

So a logical approach was to remove the event listener of the disclosureIcon. Well that is not possible because the function bind to the event is private so we cannot do:

disclosureIcon.removeEventListener(MouseEvent.MOUSE_DOWN, disclosureMouseDownHandler);

The method disclosureMouseDownHandler is private so cannot be accessed.

Digging further into the code I discovered that the disclosureMouseDownHandler method just sets some variables and then dispatches a TreeEvent.ITEM_OPENING type of event.

With this in my mind and because I didn’t need the TreeEvent.ITEM_OPENING event I just removed the event in the init method of my tree component like this:

15	removeEventListener(TreeEvent.ITEM_OPENING, mx_internal::expandItemHandler);

Please notice that the expandItemHandler is using mx_internal name space so we had to use that name space to be able to access the method.

Now having this removed I started to implement my needed event behavior. For this article I’ll implement another behavior to be more easily understood – just an alert pop-up containing the label of the clicked node.

You need to understand that by doing this there is no other default alternative to open the nodes. You may wonder you did I replaced the default behavior of the disclosureIcon? Well I needed to have the following behavior of my custom tree:

click on a closed item will select it and open it if it has children
click on a opened item will select it and close it if it has children
click on a closed item having already an opened node will close the previous node, then select the one clicked on and will open it

This should happen either if we click on the text or on the disclosureIcon. But this is not what we will do here only a short explanation regarding why I removed the default disclosureIcon’s behavior.

Bellow is our example. Click on an arrow to see the result – a simple alert with the name (label) of the clicked node.

In the following example we used four files (source files are bellow and also downloadable at the end of the article):

main application – DisclosureIconBehaviorChangeApp.mxml
our tree component – CustomTree.mxml
our custom tree item renderer – CustomTreeItemRenderer.as
our custom tree event – CustomTreeEvent.as

1) DisclosureIconBehaviorChangeApp

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:flexer="com.flexer.*"
    creationComplete="start()"
    >
    <flexer:CustomTree id="myTree"
        x="10" y="10"
        width="200" height="200"
        labelField="@label"
        />
    <mx:Script>
        [CDATA[
 
            // item tree structure
            private var _menuTreeContent:XML = <mlb>
    <league label="American League">
        <division label="East">
            <team label="Boston" />
            <team label="New York" />
            <team label="Toronto" />
            <team label="Baltimore" />
            <team label="Tampa Bay" />
        division>
        <division label="Central">
            <team label="Cleveland" />
            <team label="Detroit" />
            <team label="Minnesota" />
            <team label="Chicago" />
            <team label="Kansas City" />
        division>
        <division label="West">
            <team label="Los Angeles" />
            <team label="Seattle" />
            <team label="Oakland" />
            <team label="Texas" />
        division>
    league>
mlb>;
 
            // initialization
            private function start():void
            {
                // setting the data provider
                myTree.dataProvider = _menuTreeContent.league;
                // expanding the some nodes
                callLater(
                    function (node:XML):void {
                        myTree.expandItem(node.league[0], true);
                        myTree.expandItem(node.league[0].division[1], true);
                    },
                    [_menuTreeContent]
                );
            }
        ]]>
    mx:Script>
mx:Application>

2) CustomTree

<?xml version="1.0" encoding="utf-8"?>
<mx:Tree xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="init()"
    itemRenderer="com.flexer.CustomTreeItemRenderer"
    >
    <mx:Script>
        [CDATA[
            import mx.controls.Alert;
            import mx.events.TreeEvent;
 
            // initialization
            private function init():void
            {
                // removing the default event on opeining nodes
                removeEventListener(TreeEvent.ITEM_OPENING, 
                    mx_internal::expandItemHandler);
                // listening for our custom event
                addEventListener(CustomTreeEvent.ITEM_SELECTED, 
                    handleItemSelected);
            }
 
            // handler for our new custom tree event 
            private function handleItemSelected(e:CustomTreeEvent):void
            {
                Alert.show(e.data.@label.toString());
            }
 
 
        ]]>
    mx:Script>
mx:Tree>

3) CustomTreeItemRenderer

package com.flexer 
{
 
    import flash.events.MouseEvent;
 
    import mx.collections.*;
    import mx.controls.Tree;
    import mx.controls.treeClasses.*;
 
    public class CustomTreeItemRenderer extends TreeItemRenderer
    {
 
        public function CustomTreeItemRenderer() 
        {
            super();
        }
 
        override protected function commitProperties():void
        {
            super.commitProperties();
            disclosureIcon.addEventListener(MouseEvent.MOUSE_DOWN, 
                arrowMouseDownHandler);
        }
 
        private function arrowMouseDownHandler(e:MouseEvent):void
        {
            var stEvent:CustomTreeEvent = new CustomTreeEvent(
                CustomTreeEvent.ITEM_SELECTED, this.data);
            (listData.owner as Tree).dispatchEvent(stEvent);
        }
 
    }
}

4) CustomTreeEvent

package com.flexer
{
    import flash.events.Event;
 
    public class CustomTreeEvent extends Event
    {
 
        public static const ITEM_SELECTED:String = "itemSelected";
 
        private var _obj:*;
 
        public function CustomTreeEvent(type:String, item:*, 
            bubbles:Boolean = false, cancelable:Boolean = false)
        {
            super(type, bubbles, cancelable);
 
            _obj = item;
        }
 
        override public function clone():Event
        {
            return new CustomTreeEvent(type, _obj, bubbles, cancelable);
        }
 
        public function get data():*
        {
            return _obj;
        }
 
    }
}

How To Find On Which Divider of a HDividerBox a Double Click Event Occured

Andrei Ionescu — Wed, 08 Oct 2008 14:53:30 +0000

This was a tricky issue… but solvable. I needed to found a way to collapse the left panel of a HDividedBox. This can be easily done by using moveDividerTo() method or setting getDividerAt().x (for vertical getDividerAt().y) property to the desired value. The problem is this: if you want to collapse the left at double click on the divider you cannot easily know on which divider the event occurred. This is because: the the double click event on the HDividedBox is triggered everywhere on the object and the currentTarget property of the event is always the HDividedBox object, and the target property of the event object returns two different things when clicking on the divider. If the double click is on the handle the target property is a skin, if it is upper or bellow the target is the BoxDivider object.

The whole process to find the divider on which the double click event occurred, is in handleDoubleClick() method. It should not rise any problems to you. The process is like this:

find if the double click is on the divider (on the handle or not) using e.target.name
if the e.target is skin we take its parent (which is BoxDivider object) otherwise we take it as it is (which is also BoxDivider object)
we iterate through all dividers of the HDividedBox (using numDividers property) and we compare the names to see which one is

Now here is the application… You can collapse the left panel by double clicking on the left divider, move dividers to the desired position by setting a position in the inputs and follow everything in a debug text area.

Please notice that even though we set the left divider position to 0 at double click it is 2. So, the divider will never reach 0 (zero) probably because in HDividedBox, in between the children is a gap/padding.

The code is well commented and easily to follow.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="600" height="588"
    applicationComplete="start()">
    <mx:HDividedBox 
        id="divBox"
        x="10" y="10" width="580" height="380"
        liveDragging="true"
        doubleClickEnabled="true"
        doubleClick="handleDoubleClick(event)">
        <mx:Panel title="Panel 1" height="100%" width="200">
            <mx:Canvas id="cnv1" width="100%" height="100%">
            mx:Canvas>
        mx:Panel>
        <mx:Panel title="Panel 2" height="100%" width="100%">
            <mx:Canvas id="cnv2" width="100%" height="100%">
            mx:Canvas>
        mx:Panel>
        <mx:Panel title="Panel 3" height="100%" width="250">
            <mx:Canvas id="cnv3" width="100%" height="100%">
            mx:Canvas>
        mx:Panel>
    mx:HDividedBox>
    <mx:Label x="10" y="398" text="First Divider"/>
    <mx:TextInput x="10" y="422" id="div1"/>
    <mx:Label x="231" y="398" text="Second Divider"/>
    <mx:TextInput x="231" y="422" id="div2"/>
    <mx:Button x="178" y="422" label="Set" 
        click="handleSetDiv1(event)"/>
    <mx:Button x="399" y="422" label="Set" 
        click="handleSetDiv2(event)"/>
    <mx:Label x="10" y="452" text="Debug"/>
    <mx:TextArea id="debug" x="10" y="478" 
        width="580" height="100"/>
    <mx:Script>
        [CDATA[
            import mx.controls.Alert;
 
            // variables making possible pannel colapse
            private var _previousDivierPos:Array;
            private var _isClosed:Array;
 
            // initialization
            private function start():void
            {
                _previousDivierPos = new Array();
                _isClosed = new Array();
                for (var i:int = 0; i < divBox.numDividers; i++)
                {
                    _isClosed[i] = false;
                }
            }
 
            // handle for first set button
            private function handleSetDiv1(e:MouseEvent):void
            {
                // set first divider at specified position
                divBox.getDividerAt(0).x = Number(div1.text);
                debug.text += "divider 0: " + divBox.getDividerAt(0).x + "px\n";
            }
 
            // handle for second set button
            private function handleSetDiv2(e:MouseEvent):void
            {
                // set second divider at specified position
                divBox.getDividerAt(1).x = Number(div2.text);
                debug.text += "divider 1: " + divBox.getDividerAt(0).x + "px\n";
            }
 
            // Handler for double click event
            private function handleDoubleClick(e:MouseEvent):void
            {
                // get the name of the current target
                var theName:String = e.target.name.toString();
                // search for "boxdivider" string in the name
                var found:int = theName.search(new RegExp("boxdivider","i"));
 
                if (found > -1)
                {
                    // if "boxdivider" found we double clicked 
                    // on a divider
                    var theDividerObject:Object = new Object();
                    if (e.target.hasOwnProperty("className") && 
                        e.target.className == "BoxDivider")
                        // if the event target is BoxDivider 
                        // object its className property 
                        // will be "BoxDivider"
                        theDividerObject = e.target;
                    else
                        // otherwise is its skin so we will
                        // use its parent
                        theDividerObject = e.target.parent;
 
                    // we iterate thourgh all dividers to find
                    // its position    
                    for (var i:int = 0; i < divBox.numDividers; i++)
                    {
                        // if names are the same we found our 
                        // BoxDivider object
                        if (theDividerObject.name == divBox.getDividerAt(i).name)
                        {
                            // display its name and position
                            debug.text += "divider " + i + ": " + 
                                divBox.getDividerAt(i).x + "px \n";
                            // we collapse it
                            closePanel(i);
                        }
                    }
                }
            }
 
            // method to colapse the left panel
            private function closePanel(divId:int):void
            {
 
                if (!_isClosed[divId])
                {
                    // we close all previous dividers
                    for (var i:int = 0; i <= divId; i++)
                    {
                        // if already closed no change required
                        if (!_isClosed[i])
                        {
                            // getting the current position
                            var currentDividerPos:int = 
                                divBox.getDividerAt(i).x;
                            // if closed we open
                            // save current position
                            _previousDivierPos[i] = currentDividerPos;
                            // move to zero position
                            divBox.getDividerAt(i).x = 0;
                            // set close flag
                            _isClosed[i] = true;
                        }
                    }
                }
                else
                {
                    // othewrwise we close
                    // move to previous saved value
                    divBox.getDividerAt(divId).x = _previousDivierPos[divId];
                    // set close flag
                    _isClosed[divId] = false;
                }
            }
        ]]>
    mx:Script>
mx:Application>

Hope this will get many of you out of the hassle finding the right divider.

Image Events Dispatch Order

Andrei Ionescu — Fri, 12 Sep 2008 10:20:31 +0000

Yesterday I’ve been working with images: loading, resizing, removing, etc. I got into a challenging issue: I had to vertically position a label after an image resize – but a resize that is triggered by setting maxWidth and maxHeight keeping also the aspect ratio.

I tried to get the new width and height after the resize event was triggered but no luck. I’ve been debugging a while and seen that the new width and the new height are in $height and $width internal variables. I had no luck getting the new width and the new height in this method triggered by the resize event.

So I started to investigate to see which event triggers the last that way making it sure all properties are updated. I created a simple application that will load an arbitrary image in mean time displaying the events triggered. There is also a button that moves the image horizontally by 50 pixels also showing the triggered events.

I found that after resize event update complete event triggers which contains the needed width and height in contentWidth and contentHeight properties.

I hope this will help you in different scenarios you’ll encounter in development.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    applicationComplete="start()" width="600" height="615">
    <mx:TextInput id="imageUrl" x="10" y="10" width="383" 
        text="http://www.flexer.info/wp-content/gallery/wallpapers/fxr_1600x1200.png"/>
    <mx:Button x="401" y="10"  label="Start" 
        click="handleButtonClick(event)"/>
    <mx:Button x="464" y="10"  label="Move it" 
        click="handleMoveButtonClick(event)"/>
    <mx:Image id="testImage" maxWidth="250" maxHeight="250" 
        x="10" y="40"
        addedToStage="handleAddedToStage(event)"
        complete="handleComplete(event)"
        creationComplete="handleCreationComplete(event)"
        currentStateChange="handleCurrentStateChange(event)"
        init="handleInit(event)"
        initialize="handleInitialize(event)"
        open="handleOpen(event)"
        preinitialize="handlePreinitialize(event)"
        progress="handleProgress(event)"
        removed="handleRemoved(event)"
        render="handleRender(event)"
        resize="handleResize(event)"
        show="handleShow(event)"
        unload="handleUnload(event)"
        updateComplete="handleUpdateComplete(event)"
        valid="handleValid(event)"
        valueCommit="handleValueCommit(event)"
        />
    <mx:TextArea x="10" y="300" width="580" height="305" 
        text="{_debug}"/>
    <mx:Script>
        [CDATA[
            import mx.events.ResizeEvent;
            import mx.events.StateChangeEvent;
            import mx.events.FlexEvent;
 
            [Bindable]
            private var _debug:String;
 
            private function start():void
            {
                _debug = "---> application started!!!\n";
            }
 
            private function handleButtonClick(e:MouseEvent):void
            {
                testImage.source = imageUrl.text;
                _debug += "---> handleButtonClick\n";
            }
            private function handleMoveButtonClick(e:MouseEvent):void
            {
                testImage.x += 50;
                _debug += "---> handleMoveButtonClick\n";
            }
 
            private function handleAddedToStage(e:Event):void
            {
                _debug += "handleAddedToStage\n";
            }
            private function handleComplete(e:Event):void 
            {
                _debug += "adddedToStage\n";
            }
            private function handleCreationComplete(e:FlexEvent):void
            {
                _debug += "handleCreationComplete\n";
            }
            private function handleCurrentStateChange(
                e:StateChangeEvent):void
            {
                _debug += "handleCurrentStateChange\n";
            }
            private function handleInit(e:Event):void
            {
                _debug += "handleInit\n";
            }
            private function handleInitialize(e:FlexEvent):void
            {
                _debug += "handleInitialize\n";
            }
            private function handleOpen(e:Event):void
            {
                _debug += "handleOpen\n";
            }
            private function handlePreinitialize(e:FlexEvent):void
            {
                _debug += "handlePreinitialize\n";
            }
            private function handleProgress(e:ProgressEvent):void
            {
                _debug += "handleProgress\n";
            }
            private function handleRemoved(e:Event):void
            {
                _debug += "handleRemoved\n";
            }
            private function handleRender(e:Event):void
            {
                _debug += "handleRender\n";
            }
            private function handleResize(e:ResizeEvent):void
            {
                _debug += "handleResize\n";
            }
            private function handleShow(e:FlexEvent):void
            {
                _debug += "handleShow\n";
            }
            private function handleUnload(e:Event):void
            {
                _debug += "handleUnload\n";
            }
            private function handleUpdateComplete(e:Event):void
            {
                _debug += "handleUpdateComplete\n";
                _debug += "     contentHeight: " + 
                    e.currentTarget.contentHeight + "\n";
                _debug += "     x: " + e.currentTarget.x + "\n";
            }
            private function handleValid(e:FlexEvent):void
            {
                _debug += "handleValid\n";
            }
            private function handleValueCommit(e:FlexEvent):void
            {
                _debug += "handleValueCommit\n";
            }
        ]]>
    mx:Script>
mx:Application>

I hope you won’t be offended by the fact that I created one event method for each event type instead of having just one method and “switching” for the type inside it.

MatrixGrid Component – Extending The DataGrid

Andrei Ionescu — Mon, 30 Jun 2008 10:49:53 +0000

MatrixGrid is a complex component I made that displays a bi-dimensional array and gives the possibility to change its values using combo boxes. These are the changes you can do:

change one single item
change one row at once
change one column at once

The MatrixGrid component receives for objects:

array with the possible values in each combo box
the top header array with (id, name) pairs
the left header array also with (id, name) pairs
the array to be displayed

In our application we will have an XML structure that will be transformed to our needed matrix object because we want to be able to test with different structures but keep in mind that the values will be find if there is a correlation between the matrix and the other three objects (the ids must be found).

MatrixGrid component is complex and involves a lot of files so it will not be displayed here but everybody will be able to download it.

Now the application that uses the MatrixGrid:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:flexer="com.flexer.MatrixGrid.*"
    creationComplete="start()" width="520" height="745">
    <mx:TextArea x="10" y="10" width="500" height="200" id="indata">
        <mx:text>
            [CDATA[<matrix>
    <row id="lid1">
        <column id="cid1">q1column>
        <column id="cid2">column>
        <column id="cid3">ccolumn>
        <column id="cid4">dcolumn>
        <column id="cid5">q1column>
        <column id="cid6">q1column>
        <column id="cid7">q1column>
    row>
    <row id="lid2">
        <column id="cid1">q1column>
        <column id="cid2">column>
        <column id="cid3">ccolumn>
        <column id="cid4">dcolumn>
        <column id="cid5">q1column>
        <column id="cid6">q1column>
        <column id="cid7">q1column>
    row>
    <row id="lid3">
        <column id="cid1">q1column>
        <column id="cid2">bcolumn>
        <column id="cid3">ccolumn>
        <column id="cid4">dcolumn>
        <column id="cid5">q1column>
        <column id="cid6">q1column>
        <column id="cid7">q1column>
    row>
    <row id="lid4">
        <column id="cid1">q1column>
        <column id="cid2">bcolumn>
        <column id="cid3">ccolumn>
        <column id="cid4">dcolumn>
        <column id="cid5">q1column>
        <column id="cid6">q1column>
        <column id="cid7">q1column>
    row>
    <row id="lid5">
        <column id="cid1">q1column>
        <column id="cid2">bcolumn>
        <column id="cid3">ccolumn>
        <column id="cid4">dcolumn>
        <column id="cid5">q1column>
        <column id="cid6">q1column>
        <column id="cid7">q1column>
    row>
    <row id="lid6">
        <column id="cid1">q1column>
        <column id="cid2">bcolumn>
        <column id="cid3">ccolumn>
        <column id="cid4">dcolumn>
        <column id="cid5">q1column>
        <column id="cid6">q1column>
        <column id="cid7">q1column>
    row>
    <row id="lid7">
        <column id="cid1">q1column>
        <column id="cid2">bcolumn>
        <column id="cid3">ccolumn>
        <column id="cid4">dcolumn>
        <column id="cid5">q1column>
        <column id="cid6">q1column>
        <column id="cid7">q1column>
    row>
    <row id="lid8">
        <column id="cid1">q1column>
        <column id="cid2">bcolumn>
        <column id="cid3">ccolumn>
        <column id="cid4">dcolumn>
        <column id="cid5">q1column>
        <column id="cid6">q1column>
        <column id="cid7">q1column>
    row>
    <row id="lid9">
        <column id="cid1">q1column>
        <column id="cid2">bcolumn>
        <column id="cid3">ccolumn>
        <column id="cid4">dcolumn>
        <column id="cid5">q1column>
        <column id="cid6">q1column>
        <column id="cid7">q1column>
    row>
matrix>]]>
        mx:text>
    mx:TextArea>
    <mx:Button horizontalCenter="0" y="218" label="SetData"
        click="handleSetClick(event)"/>
    <flexer:MatrixGrid id="mdg"
        width="500" height="250" x="10" y="248"/>
    <mx:Button horizontalCenter="0" y="506" label="GetData"
        click="handleGetClick(event)"/>
    <mx:TextArea id="debug" x="10" y="536" width="500" height="200"/>
    <mx:Script>
        [CDATA[
            import mx.utils.ObjectUtil;
            import com.flexer.Debug;
            import mx.charts.chartClasses.DualStyleObject;
 
            private function xml2Matrix(x:XML):Object
            {
                var retObj:Object = new Object();
                for each (var item:XML in x.children())
                {
                    var rowName:String = item.attribute("id").toString();
                    retObj[rowName] = new Object();
                    for each (var item2:XML in item.children())
                    {
                        var colName:String = item2.attribute("id").toString();
                        retObj[rowName][colName] = item2.toString();
                    }
                }
                return retObj;
            }
 
            private function start():void
            {
                // our matrix
                // every item is defined by coordinates 
                // like this: (rowId, colId)
                var testdata:Object = xml2Matrix(new XML(indata.text));
                // the left header
                // contains pairs of: (rowName, rowId)
                var leftHeader:Object = {
                    "lid1":"row1",
                    "lid2":"row3",
                    "lid3":"row3",
                    "lid4":"row3",
                    "lid5":"row3",
                    "lid6":"row6",
                    "lid7":"row7",
                    "lid8":"row8",
                    "lid9":"row9"
                };
                // the top header 
                // contains pairs of: (columnName, columnId)
                var topHeader:Object = {
                    "cid1":"col1",
                    "cid2":"col1",
                    "cid3":"col1",
                    "cid4":"col4",
                    "cid5":"col5",
                    "cid6":"col6",
                    "cid7":"col7"
                }
                // possible values for comboboxes
                var _possibleValues:Array = [
                    {data:"",label:""},
                    {data:"q1",label:"v1"},
                    {data:"b",label:"v2"},
                    {data:"c",label:"v3"},
                    {data:"d",label:"v4"}
                ];
                // setting the left header width
                mdg.leftHeaderWidth = 150;
                // setting the possible values for comboboxes
                mdg.possibleValues = _possibleValues;
                // setting the left header
                // the leftheader is an object that 
                // contains pairs of: (rowName, rowId)
                mdg.leftHeader = leftHeader;
                // setting the top header
                // the top header is an object that 
                // contains pairs of: (columnName, columnId)
                mdg.topHeader = topHeader;
                // setting our matrix
                // every item is defined by coordinates 
                // like this: (rowId, colId)
                mdg.matrix = testdata;
            }
 
            private function handleSetClick(e:MouseEvent):void
            {
                mdg.matrix = xml2Matrix(new XML(indata.text));
            }
 
            private function handleGetClick(e:MouseEvent):void
            {
                var newData:Object = mdg.matrix;
                debug.text = Debug.dump(newData);
            }
        ]]>
    mx:Script>
mx:Application>

This component uses about 10 files to implement the following:

dataGrid
comboBox
itemRenderers:
- top header
- left header
- items
events
skins

Some interesting things I found when I implemented this MatrixGrid:

is that is hard to link back to the columns and the data grid from within an item renderer. It is possible to access the data grid by using owner property, but is hard to find out the current position from an item renderer, relative to the data grid – more precise to find the column and the row
is even harder to dispatch an event from the item renderer to the data grid

But there are ways, as you can see in the source files, but that involves to dive into the Flex framework to understand how data grid is working, in order to be able to take code and use it in you item renderers.

I hope MatrixGrid will be helpful for you and if it is please leave a comment and do not delete the licensing text inside source files.

How To Add New Rows To DataGrid And Scroll To Last Added Row

Andrei Ionescu — Wed, 18 Jun 2008 10:50:45 +0000

This will be a simple solution to be able to scroll to the last added row in a data grid. First of all I’ll explain what I mean and what I encountered when I needed to implement it.

The expected behavior is after adding a new row into a data grid, it should scroll to that item if that row is not visible. First of all I tried to put scrollToIndex method right into the add method and unwanted behavior appeared. The data grid was just scrolling to the previous row of the last row leaving the last added row just under the bottom edge.

I started to look into the Flex Framework code and I found out the into the scrollToIndex method of ListBase class is a variable called maxVerticalScrollPosition which is calculated/updated into the ScrollControlBase class when the scroll bar is displayed. If the scroll bar is not visible maxVerticalScrollPosition variable will be 0.

Why is this happening to us? Because we try to scroll to the last added row before updating the data grid control visually. Finding that out I moved the scrollToIndex method into update complete event (FlexEvent.UPDATE_COMPLETE) and that fixed the problem because at that point the control is updated and the scroll bar is displayed.

So here is the application…

…and the code as usual.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="379" height="163">
    <mx:DataGrid x="10" y="10" id="dg" dataProvider="{dgdp}" height="112"
        updateComplete="handleUpdateComplete(event)">
        <mx:columns>
            <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
            <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
            <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
        mx:columns>
    mx:DataGrid>
    <mx:Button x="320" y="9" label="Add" click="handleAddRow(event)"/>
    <mx:NumericStepper x="75" y="130" 
        minimum="0" maximum="{dg.dataProvider.length-1}"
        change="handleScrollToChange(event)"/>
    <mx:Label x="10" y="132" text="Scroll To:"/>
    <mx:Script>
        [CDATA[
            import mx.events.NumericStepperEvent;
 
            [Bindable]
            private var dgdp:Array = [
                {
                    "col1":0,
                    "col2":"a1",
                    "col3":"b1"
                },
                {
                    "col1":1,
                    "col2":"a2",
                    "col3":"b2"
                }
            ];
 
            private function handleScrollToChange(e:NumericStepperEvent):void
            {
                dg.scrollToIndex(e.value);
            }
 
            private function handleAddRow(event:MouseEvent):void
            {
                dg.dataProvider.addItem(
                    {
                        "col1": dg.dataProvider.length,
                        "col2": "__CUST__",
                        "col3": "__CUST__"
                    }
                );
            }
 
            private function handleUpdateComplete(e:Event):void
            {
                var currLen:uint = dg.dataProvider.length;
                dg.scrollToIndex(currLen);
            }
        ]]>
    mx:Script>
mx:Application>

Resizable Canvas – …both directions

Andrei Ionescu — Mon, 19 May 2008 14:01:19 +0000

In the previous articles in this series I explained how to create a horizontally and vertically resizable canvas. In this third article we will add the possibility to resize in both direction by dragging the right bottom corner.

What we will do:

add the new UI control (the right bottom button)
create the necessary events for it
create CSS & skin

Because we already have both properties for horizontal and vertical resize we will use them. So inside each setter (horizontalResizable and verticalResizable) we will add our new button not before checking if it already exists.

// if the right-bottom button is already added
if (!_bothEdges)
{
    // we add the right bottom button
    _bothEdges = new Button();
    // no label
    _bothEdges.label = "";
    // no tooltip
    _bothEdges.toolTip = null;
    _bothEdges.tabEnabled = false;
    _bothEdges.setStyle("right", 0);
    _bothEdges.setStyle("bottom",0);
    _bothEdges.height = 12;
    _bothEdges.width = 12;
    // set its style
    // in this style we set the skin to not show anything
    _bothEdges.styleName = "canvasBothEdges";
 
    // if the canvas is only horizontally resizable
    // we use the same events and handlers like in that case
    _bothEdges.addEventListener(MouseEvent.MOUSE_OVER, 
            handleBothResizeOver, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_MOVE, 
            handleBothResizeOver, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_OUT, 
            handleResizeOut, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_DOWN, 
            handleBothDragStart, false, 0 ,true);
    _bothEdges.addEventListener(Event.ENTER_FRAME, 
            handleBothDragMove, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_UP, 
            handleDragStop, false, 0 ,true);
 
    addChild(_bothEdges);
}

After adding all those we have to remove the event handlers in case we set it not resizable (in both setters).

// we remove the events for the right bottom corner (button)	
if (_bothEdges)
{
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_OVER))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_OVER, 
                handleBothResizeOver);
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_OUT))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_OUT, 
                handleResizeOut);
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_DOWN))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_DOWN, 
                handleBothDragStart);
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_UP))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_UP, 
                handleDragStop);
    if (_bothEdges.hasEventListener(Event.ENTER_FRAME))
        _bothEdges.removeEventListener(Event.ENTER_FRAME, 
                handleBothDragMove);
}

We add three new event handlers:

handleBothResizeOver – used just to display the cursor
handleBothDragStart – if it is resizable in both directions we save the initial position
handleBothDragMove – this will resize the canvas

handleBothResizeOver

// event handler to show the resize cursor
private function handleBothResizeOver(event:MouseEvent):void
{
    // check if we already have the resize cursor set
    if (_currentCursorId == -1)
        _currentCursorId = 
                CursorManager.setCursor(_cResizeCursor,2,-10,-10);
}

handleBothDragStart

// event handler to start the drag
private function handleBothDragStart(event:MouseEvent):void
{
    if (_isResizableHorizontally)
    {
        _dragHStarted = true;
        // we save the initial position and width
        _dragStartHPosition = stage.mouseX;
        _dragLastWidth = width;
    }
    if (_isResizableVertically)
    {
        _dragVStarted = true;
        // we save the initial position and width
        _dragStartVPosition = stage.mouseY;
        _dragLastHeight = height;
    }
}

handleBothDragMove

// event handler for real rezise and other important stuff
private function handleBothDragMove(event:Event):void
{
    // we put the right-bottom always on the top of the other children
    if (getChildIndex(_bothEdges) < numChildren-1)
    setChildIndex(_bothEdges,numChildren-1);
    // we add the event to stop the drag also on the stage
    // we cannot add this event in set resizable because the
    // stage is not created because set resizable is done at
    // constructor time and stage is set after adding our
    // canvas to the application
    if (stage != null && !stage.hasEventListener(MouseEvent.MOUSE_UP))
        stage.addEventListener(MouseEvent.MOUSE_UP, 
                handleDragStop, false, 0 ,true);
    // we resize our canvas only if drag started
    if (_dragHStarted)
    {
        // get the amount of movement
        // difference between the current mouse x position relative 
        // to the stage and the saved position at mouse down event
        var hMovement:int = (stage.mouseX - _dragStartHPosition);
        // if the canvas is positioned relative to the center
        // the width will be changed in both left and right directions
        // so we will double the movement
        if (getStyle("horizontalCenter") != undefined)
        {
            hMovement *= 2;
        }
        // if we move to the left
        if (hMovement <= 0)
        {
            // check not to pass the minimum width
            if (minWidth < _dragLastWidth + hMovement)
                width = _dragLastWidth + hMovement;
            else
                width = minWidth;
        } else {
            // check not to pass the maximum width
            if (maxWidth > _dragLastWidth + hMovement)
                width = _dragLastWidth + hMovement;
            else
                width = maxWidth;
        }
    }
    if (_dragVStarted)
    {
        // get the amount of movement
        // difference between the current mouse x position relative 
        // to the stage and the saved position at mouse down event
        var vMovement:int = (stage.mouseY - _dragStartVPosition);
        // if the canvas is positioned relative to the center
        // the width will be changed in both left and right directions
        // so we will double the movement
        if (getStyle("veticalCenter") != undefined)
        {
            vMovement *= 2;
        }
        // if we move to the left
        if (vMovement <= 0)
        {
            // check not to pass the minimum width
            if (minHeight < _dragLastHeight + vMovement)
                height = _dragLastHeight + vMovement;
            else
                height = minHeight;
        } else {
            // check not to pass the maximum width
            if (maxHeight > _dragLastHeight + vMovement)
                height = _dragLastHeight + vMovement;
            else
                height = maxHeight;
        }
    }
}

We added also a new class in CSS, a new skin and a new icon for the right bottom button. These are the changes made to have the resize functionality in both directions. Now, enjoy the working application.

Previous in series

How To Build a Download Application in Flex

Andrei Ionescu — Mon, 12 May 2008 12:41:40 +0000

In this article I’ll show the same application I presented at FlexCamp Bucharest Romania 2008 – the video from the conference is available here and although it is in Romanian it might be useful. In the presentation I’m showing the power of Flex: doing complex applications with a few lines of codding.

With this article we are just starting because everything is explained in the powerpoint presentation and by the comments inside the source code found at the end of this article.

The application is simple – only one mxml file – and we will study:

Multiple Drag and drop (events)
HTTPService
FileReference
URLRequest

On the server-side:

dir.php – browsing (http service) – no parameters needed – returns a simple XML
download.php – download (url request) – array with the paths that will be included in archive as parameters – returns an archive (tgz)
archive.php – class to create arhives

On the client-side:

Tree ⇒ HTTPService ⇒ dir.php ⇒ HTTPService ⇒ Tree
Refresh ⇒ HTTPService ⇒ dir.php ⇒ HTTPService ⇒ Tree
Download ⇒ List ⇒ URLRequest ⇒ FileReference ⇒ file download

We are using multiple selection and dragging so you can drag more that one item from the list. Also the delete key erases the selected items from the list on the right. You can start over by pressing refresh button.

This is the start of it and you can get into it more and more reading the powerpoints and trying the source codes. All this can be downloaded from the end of this article.

Working example is bellow:

What can be added in the future:

download progress with cancellation possibility
upload functionality
user account functionality

The last two points are more difficult because it involves some work on the server-side but is doable.

I’ve posted also the whole flex source code because it is easier to follow the article and study the code in the same page.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    width="439" creationComplete="init()" height="271">
    <mx:HTTPService id="dir" url="{SERVER_URL}dir.php" resultFormat="e4x" />
    <mx:Tree id="leftTree" x="10" y="10" height="250" width="204" 
        dataProvider="{dir.lastResult}" labelField="@name" showRoot="false" 
        dragEnabled="true" dropEnabled="false" allowMultipleSelection="true" 
        click="showThumb(event)"/>
    <mx:List id="downloadList" x="222" y="10" height="135" width="207" 
        allowMultipleSelection="true" dataProvider="{fileListProvider}" 
        dragEnter="handleDragEnter(event)" dragOver="handleDragOver(event)" 
        dragDrop="handleDragDrop(event)" dragExit="handleDragExit(event)" 
        click="showThumb(event)" keyUp="handleKeyUp(event)"/>
    <mx:Button id="downloadButton" x="347" y="153" label="Download" 
        enabled="false" click="initializeDownload(event)" />
    <mx:Button id="refreshButton" x="347" y="239" label="Refresh" 
        click="refresh(event)"  width="82"/>
    <mx:Canvas id="imageHolder" x="222" y="153" width="117" height="108">
        <mx:Image id="imageThumb" x="0" y="0" width="117" height="108" 
            source="{currentPhotoPath}"/>
    mx:Canvas>
    <mx:Script>
        [CDATA[
            import mx.messaging.channels.StreamingAMFChannel;
            /* File downloading application
               Drag and drop between two different controlers: tree and list */
 
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            import mx.controls.listClasses.ListBase;
            import mx.core.UIComponent;
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.controls.List;
            import mx.events.DragEvent;
 
            // internet - on flexer
            public const SERVER_URL:String = 
                "http://www.flexer.info/wp-content/uploads/2008/05/";
 
            // bindable variable used for the list
            [Bindable]
            public var fileListProvider:ArrayCollection = new ArrayCollection();
 
            // bindable variable used for thumbnail
            [Bindable]
            public var currentPhotoPath:String = "";
 
            public var fRef:FileReference = new FileReference();
 
            public function init():void
            {
                /* initialization function */
 
                // file reference events - used for debug purposes
                fRef.addEventListener(Event.CANCEL, doEvent);
                fRef.addEventListener(Event.COMPLETE, doEvent);
                fRef.addEventListener(Event.OPEN, doEvent);
                fRef.addEventListener(Event.SELECT, doEvent);
                fRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
                fRef.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
                fRef.addEventListener(ProgressEvent.PROGRESS, doEvent);
                fRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);				
 
                // getting folder content
                dir.send();
            }
 
            private function handleDragEnter(event:DragEvent):void
            {
                /* this function validates the drop */
 
                if (event.dragInitiator is Tree) {
                    var ds:DragSource = event.dragSource;
                    // check if the format is what we need - treeItems
                    if (!ds.hasFormat("treeItems")) 
                        return;
                    var items:Array = ds.dataForFormat("treeItems") as Array;
                    for (var i:Number=0; i < items.length; i++) {
                        var item:XML = XML(items[i]);
                        // we want only files to be dragable
                        if (item.@type != "file") 
                            return; 
                    }   
 
                    // check for the item to be unique
                    var paths:ArrayCollection = 
                        downloadList.dataProvider as ArrayCollection;
                    for (var j:Number=0; j < paths.length; j++)
                    {
                        if (item.@path == paths[j].path.toString()) return;
                    }
                }
 
                // accept the drop
                DragManager.acceptDragDrop(UIComponent(event.currentTarget));
            }
 
            private function handleDragOver(event:DragEvent):void
            {
                /* this function shows feedback to the user */
 
                // show feedback icon
                DragManager.showFeedback(DragManager.COPY);
            }
 
            private function handleDragDrop(event:DragEvent):void
            {
                /* this function adds new items to the list */
 
                // getting source
                var ds:DragSource = event.dragSource;
                // getting target
                var dropTarget:List = List(event.currentTarget);
                // tempoaray array used to add items to list
                var arr:Array;
 
                // getting the nodes dragged 
                // multiple selection is allowed so we have arrays
                if (ds.hasFormat("items")) {
                    arr = ds.dataForFormat("items") as Array;
                } else if (ds.hasFormat("treeItems")) {
                    arr = ds.dataForFormat("treeItems") as Array;
                }
 
                // adding the dragged nodes to list
                for (var i:Number=0; i < arr.length; i++) {
                    // getting node
                    var node:XML = XML(arr[i]);
                    // creating new list item
                    var item:Object = new Object();
                    // setting item's properties
                    item.label = node.@name;
                    // we set path also which is needed for download
                    item.path = node.@path;
                    // add to data provider
                    fileListProvider.addItem(item);
                }
                // finish drag
                handleDragExit(event);
            }			
 
            private function handleDragExit(event:DragEvent):void
            {
                /* this function finishes the drag and drop */
 
                // we hide the feedback
                var dropTarget:ListBase=ListBase(event.currentTarget);
                dropTarget.hideDropFeedback(event);
                // we check the data provider to enable the download button
                if (dropTarget.dataProvider.length > 0)
                    downloadButton.enabled = true;
            }
 
            private function showThumb(event:MouseEvent):void
            {
                /* this function shows the thumbnail 
                   used for both tree and list click events */
 
                // if click is on the tree
                if (event.currentTarget.name == "leftTree") {
                    // folders cannot show thumbnail
                    // other file types than images are automatically not shown 
                    if (leftTree.selectedItem.@type == "file")
                        currentPhotoPath = SERVER_URL + leftTree.selectedItem.@path;
                    else
                        currentPhotoPath = "";
                // if click is on the list
                } else if (event.currentTarget.name == "downloadList") {
                    currentPhotoPath = (downloadList.selectedItem ? SERVER_URL + 
                                        downloadList.selectedItem.path : "");
                }
            }
 
            private function handleKeyUp(event:KeyboardEvent):void
            {
                /* this function is used for deleting items from the list */
 
                // if we have pressed the DELETE key and 
                // also there is at least one item selected
                if (event.keyCode == Keyboard.DELETE && 
                        downloadList.selectedIndex > -1) {
                    var removeItems:Array = downloadList.selectedIndices;
                    // remove selected items
                    for (var i:Number = 0; i < removeItems.length; i++) {
                        downloadList.dataProvider.removeItemAt(removeItems[i]);
                    }
                    currentPhotoPath = "";
                    // if the list is empty we disable the download button
                    if (downloadList.dataProvider.length <= 0)
                        downloadButton.enabled = false;
                }
            }
 
            private function initializeDownload(event:MouseEvent):void
            {
                /* this function starts the download 
                   we use FileReference to download */
 
                // get the items dragged in the list
                var paths:ArrayCollection = 
                    downloadList.dataProvider as ArrayCollection;
                // initialize the query/url string
                var qStr:String = "";
                // compose the query/url string
                // we are sending an array to the server
                for (var i:int = 0; i < paths.length; i++)
                    qStr += "&name[]="+escape(paths[i].path.toString());
                // get the file
                // the file download.php on the server gets the array
                // and in the memory creates an tgz archive
                // and sends it back as being a file (using http headers)
                // we are using FileReference for this
                fRef.download(
                    new URLRequest(SERVER_URL + "download.php?" + qStr),
                    "archive.tgz");
            }
 
            private function doEvent(evt:Event):void {
                /* Function is displaying events reached when downloading 
                   For debug purposes */
 
                var fr:FileReference = evt.currentTarget as FileReference;   
                // for debug purposes */
                //trace("type:"+evt.type+", eventString:"+evt.toString()); 
                //trace(fr.creationDate);
                //trace(fr.creator);
                //trace(fr.modificationDate);
                //trace(fr.name);
                //trace(fr.size);
                //trace(fr.type);
            } 		
 
            private function refresh(evt:Event):void {
                /* Function is refresing both the tree and the list and 
                   disables the download button */
 
                // empty the list
                fileListProvider = new ArrayCollection();
                // disable the download button
                downloadButton.enabled = false;
                // refresh the tree
                dir.send();
            }
        ]]>
    mx:Script>
mx:Application>

This is it! As I just wrote at the beginning of the article, the power and beauty of Flex framework is that you can do great things with a few lines of codding. So enjoy Flex!

Letter or number key	Key code	ASCII key code
A	65	65
B	66	66
C	67	67
D	68	68
E	69	69
F	70	70
G	71	71
H	72	72
I	73	73
J	74	74
K	75	75
L	76	76
M	77	77
N	78	78
O	79	79
P	80	80
Q	81	81
R	82	82
S	83	83
T	84	84
U	85	85
V	86	86
W	87	87
X	88	88
Y	89	89
Z	90	90
0	48	48
1	49	49
2	50	50
3	51	51
4	52	52
5	53	53
6	54	54
7	55	55
8	56	56
9	57	57
a	65	97
b	66	98
c	67	99
d	68	100
e	69	101
f	70	102
g	71	103
h	72	104
i	73	105
j	74	106
k	75	107
l	76	108
m	77	109
n	78	110
o	79	111
p	80	112
q	81	113
r	82	114
s	83	115
t	84	116
u	85	117
v	86	118
w	87	119
x	88	120
y	89	121
z	90	122

Letter or number key	Key code	ASCII key code
A	65	65
B	66	66
C	67	67
D	68	68
E	69	69
F	70	70
G	71	71
H	72	72
I	73	73
J	74	74
K	75	75
L	76	76
M	77	77
N	78	78
O	79	79
P	80	80
Q	81	81
R	82	82
S	83	83
T	84	84
U	85	85
V	86	86
W	87	87
X	88	88
Y	89	89
Z	90	90
0	48	48
1	49	49
2	50	50
3	51	51
4	52	52
5	53	53
6	54	54
7	55	55
8	56	56
9	57	57
a	65	97
b	66	98
c	67	99
d	68	100
e	69	101
f	70	102
g	71	103
h	72	104
i	73	105
j	74	106
k	75	107
l	76	108
m	77	109
n	78	110
o	79	111
p	80	112
q	81	113
r	82	114
s	83	115
t	84	116
u	85	117
v	86	118
w	87	119
x	88	120
y	89	121
z	90	122