How to provide users options to switch on/off when using vnkeys
The goal of this post is to show how we can create a radio button group so users can switch on and off when using vnkeys as the swf above. To create TextArea and TextInput we use input components that follows vnkeys (see this how to for details). Bellow is our code example where we use flex RadioButtonGroup and RadioButton to create on/off options. We use Repeater to loop through options that we get from KeyConverter.getKeyMapOptions() This is done by calling init function initOptions() which fills element “options” with an array of available mapping types. On each option we attach function onMappingTypeChange as listener for onchange event so we can update mapping type on each KeyConverter instance.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:flex="org.vnmedia.flex.*" creationComplete="initOptions();"> <mx:Script> <![CDATA[ import mx.controls.RadioButton; public function initOptions():void { options = area.getKeyConverter() .getKeyMapOptions(); } public function onMappingTypeChange(e:Event):void { var radio:RadioButton = RadioButton(e.currentTarget); var item:Object = radio.getRepeaterItem(); text.getKeyConverter().setMapType(item.data); area.getKeyConverter().setMapType(item.data); } ]]> </mx:Script> <flex:FlexTextArea id="area" vnkeyType="VNI" height="50" width="220" x="50" y="50"> </flex:FlexTextArea> <flex:FlexTextInput id="text" y="120" x="50" width="220"> </flex:FlexTextInput> <mx:Array id="options"/> <mx:HBox id="hb" x="50" y="150"> <mx:RadioButtonGroup id="radioGroup" /> <mx:Repeater id="radioRepeater" dataProvider="{options}"> <mx:RadioButton id="radioButtons" label="{radioRepeater.currentItem.label}" group="{radioGroup}" change="onMappingTypeChange(event);" /> </mx:Repeater> </mx:HBox> </mx:Application>
Well done, Văn nhủ!