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)"/>