|
Sometimes for a more structured code, we need to create custom components. And sometimes this creates a difficulty.
Imagine the situation where we have a component within it, we have a collection of CheckBoxs. And when you click one of the CheckBoxes need to pass the result of there to click the page you are instantiating the component.
Sounds easy, but it is not. Raising an event is one thing, shooting a passing event data is quite another.
So my friend Pedro Claudio Silva (pcsilva) had done something similar and wrote an example for me to post here on the blog.
So we know that one way to get this value back in the page out is through events. And for that we need to make a custom event. And let's see how this event would be to solve our problem.
TransferDataEvent.as
package events
{
import flash.events.Event;
public class TransferDataEvent extends Event
{
public static const TRANSFER_DATA:String = "dataChanged";
private var _data:Object;
public function get data():Object
{
return _data;
}
public function set data(value:Object):void
{
_data = value;
}
public function TransferDataEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
{
super(type, bubbles, cancelable);
}
override public function clone():Event
{
return new TransferDataEvent(TRANSFER_DATA);
}
}
}
Now for the entire code to understand how it works.
CheckboxGroup.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="library://ns.adobe.com/flex/halo" height="50"
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
[Event(name="dataChanged",type="events.TransferDataEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import events.TransferDataEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var dataProvider:ArrayCollection = new ArrayCollection();
private function clickItem(event:MouseEvent):void
{
var customEvent:TransferDataEvent = new TransferDataEvent(TransferDataEvent.TRANSFER_DATA);
customEvent.data = event.currentTarget.label;
dispatchEvent(customEvent);
}
]]>
</fx:Script>
<mx:Repeater id="rpt" dataProvider="{dataProvider}">
<s:CheckBox label="{rpt.currentItem.label}"
click="{clickItem(event)}"/>
</mx:Repeater>
</mx:HBox>
index.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:view="view.*"
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import events.TransferDataEvent;
import mx.collections.ArrayCollection;
private function dataChangedHandler(event:TransferDataEvent):void
{
see.text = event.data.toString();
}
]]>
</fx:Script>
<s:TextInput id="see"/>
<view:CheckboxGroup
dataProvider="{new ArrayCollection([ {label:'letter'}, {label:'mobile'}, {label:'e-mail'} ])}"
dataChanged="dataChangedHandler(event)"/>
</s:Application>
In the end we have the result below.
I hope this tutorial helped a lot.
I would like to thanks to Pedro Claudio Silva (pcsilva) for their support, by providing that such super practical for you to post.
|
