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…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <?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…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <?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!
Tags: bindable, component, Events
This post was written by Andrei Ionescu
Views: 3026
Articles
This post is a very welcome discovery, as I was struggling quite a bit to grasp the concept as it was presented in the Flex 3 Cookbook (recipe 1.13). They failed to complete the recipe by showing how all the pieces work together. Thank you!