Flex4学习笔记(三)--常用功能的使用
1.监测键盘的输入
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" keyDown="application1_keyDownHandler(event)"> <fx:Script> <![CDATA[ import mx.controls.Alert; protected function application1_keyDownHandler(event:KeyboardEvent):void { if(event.keyCode==13) { Alert.show("你按了回车键"); } } ]]> </fx:Script><s:Button x="164" y="191" label="按钮"/>
必须激活flash才可以监控键盘的输入,我这里使用了一个Button
2.控件使用动态的属性,以及控件之间属性的关联
<fx:Script> <![CDATA[ [Bindable] private var str:String = "hello world!"; ]]> </fx:Script> <fx:Declarations> </fx:Declarations> <s:TextInput text="{str}" x="113" y="77"/> <s:TextArea id="textarea1" text="{text1.text}" x="113" y="190"/> <s:TextInput id="text1" x="113" y="134"/>
3.使用Timer类制作最简单的计数器
<fx:Script> <![CDATA[ import mx.events.FlexEvent; private var timer:Timer; private var count:Number = 0; private function timer_event(event:TimerEvent):void { count++; timerLabel.text = String(count); } protected function button1_clickHandler(event:MouseEvent):void { if(timer.running) { timer.stop(); } } protected function button2_clickHandler(event:MouseEvent):void { if(!timer || !timer.running) { timer = new Timer(1000,0); timer.addEventListener(TimerEvent.TIMER,timer_event); timer.start(); } } ]]> </fx:Script> <fx:Declarations> </fx:Declarations> <s:Label id="timerLabel" text="0" x="166" y="160" fontSize="30"/> <s:Button x="289" y="168" label="停止计数" click="button1_clickHandler(event)"/> <s:Button x="289" y="130" label="开始计数" click="button2_clickHandler(event)"/>
4.使用s:States创建最简单的编辑器,主要是演示切换状态的功能
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)" currentStateChange="application1_currentStateChangeHandler(event)"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import mx.events.StateChangeEvent; [Bindable] private var value:String = ""; protected function button1_clickHandler(event:MouseEvent):void { if(this.currentState=="display") { this.setCurrentState("edit"); } else { this.setCurrentState("display"); } } protected function application1_creationCompleteHandler(event:FlexEvent):void { this.setCurrentState("edit"); } protected function application1_currentStateChangeHandler(event:StateChangeEvent):void { if(this.currentState=="display") value = text1.text; } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <s:Label id="label1" text="{value}" includeIn="display" x="100" y="100"/> <s:TextInput id="text1" text="{value}" includeIn="edit" x="100" y="100" /> <s:Button x="94" y="42" label="切换状态" click="button1_clickHandler(event)"/> <s:states> <s:State name="display" /> <s:State name="edit" /> </s:states> </s:Application>
5.用下拉框列出所有字体,并且动态修改字体
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.events.FlexEvent; import spark.events.IndexChangeEvent; [Bindable] private var arr:Array; protected function application1_creationCompleteHandler(event:FlexEvent):void { arr = Font.enumerateFonts(true); arr.sortOn("fontName",Array.CASEINSENSITIVE); } protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void { text1.setStyle("fontFamily",(dd1.selectedItem as Font).fontName); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <s:DropDownList id="dd1" dataProvider="{new ArrayCollection(arr)}" labelField="fontName" x="165" y="88" change="dropdownlist1_changeHandler(event)"/> <s:TextArea id="text1" x="165" y="124"/> </s:Application>
6.修改选中文字内容的样式
<fx:Script> <![CDATA[ import flashx.textLayout.edit.SelectionState; import mx.controls.textClasses.TextRange; import mx.events.FlexEvent; protected function button1_clickHandler(event:MouseEvent):void { var textrange:TextRange = new TextRange(text1,true,text1.selectionBeginIndex,text1.selectionEndIndex); textrange.color = 0xff0000; } ]]> </fx:Script> <mx:TextArea id="text1" x="129" y="152" text="这是一个测试,好的"/> <s:Button x="129" y="104" label="修改" click="button1_clickHandler(event)"/>