flex入门1

1，flex有两部分语言构成：mxml,ActionScript.
2，初学者可以认为 mxml=html  actionscript=javascript;
3，开发flex快速查阅apid的方式：
   打开动态帮助窗口，鼠标放在那个组件代码上，动态帮助窗口自动显示该组件的超链接。
   悬停帮助：鼠标停留在某个组件代码上一会儿就会弹出帮助层。
   shift+
3，javascript的事件处理机制和Actionscript的机会相同：主要区别在于ActionScript的事件处理机制还提供了一个事件对象。
   在ActionScript中，所有的事件都发端于一个通用的事件对象，事件通过继承添加其他详细信息。有了事件对象，就能轻松编写出具有高度可重用性的事件处理程序，因为事件处理程序可以从事件对象中获得事件的详细信息包括：
     1，事件的来源   clickEvelt.cameFrom
     2,数据的引用。
     3，事件的类型（例如是鼠标单击还是鼠标进入）
注意：CDATA标签的使用：
      由于mxml文件符合xml标准，因此必须遵循xml的规则。cdata在这里告诉flex builder方括号中的内容原样不动，不作为xml代码处理，如果不使用cdata那么如果出现大于，小于等符号flex会认为是标签的结束，所以始终把Actionscript代码放进cdata中是明智的选择。
   下面是实例：

    <?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<!--类似javascript的Actionscript-->
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function clickHandler(clickEvent:Event):void
			{
			  Alert.show("Event Type:" + clickEvent.type +
			             " came from:" + clickEvent.currentTarget.id);
			}
		]]>
	</fx:Script>
	<!--Mxml文件中添加的一切都可成为组建，像button这种可以看得见的组建又叫做控件-->
	<s:Panel x="84" y="86" width="367" height="211">
		<s:Button id="me" label="Hello World!" fontSize="40" x="0" y="0" click="clickHandler(event)"/>
	</s:Panel>
</s:Application>

2，调用函数

<?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">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function textMerge(input1:String,input2:String):String
			{
			var x:String = input1 + input2;
			return x;
			}
		]]>
	</fx:Script>
	<s:Group>
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<s:TextInput id="value1"/>
		<s:Label text="and"/>
		<s:TextInput id="value2"/>
		<s:Button label="Join the two"
				  click="Alert.show(textMerge(value1.text,value2.text))"/>
	</s:Group>
</s:Application>

3，把Actionscript代码放进一个单独的文件中
   创建myFunctions.as文件内容如下：

   // ActionScript file
public function textMerge(input1:String,input2:String):String{
    var x = input1 + input2;
	return x;
}

   创建mxml文件并包含上面的Actionscript文件：

   <?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">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script source="myFunctions.as"></fx:Script>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
		]]>
	</fx:Script>
	<s:Group>
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<s:TextInput id="value1"/>
		<s:Label text="and"/>
		<s:TextInput id="value2"/>
		<s:Button label="Join the two"
				  click="Alert.show(textMerge(value1.text,value2.text))"/>
	</s:Group>
</s:Application>