Flex學習筆記（一）——Hello World

和學習其他語言一樣，我們以一個Hello World的程式開始。

在Eclipse中建立一個Flex Project命名為Hello World。Eclipse為我們自動生成了工程目錄及檔案。

1）Flex程式一般是由mxml檔案，as檔案(actionScript檔案)，css檔案組成的。

    2）通過mxml檔案(mx:application)來調用as檔案和css檔案。

    3）mxml檔案的命名規則

        ①mxml區分大小寫。

        ②mxml檔案名不能用"Application"命名。

        ③mxml檔案名不能和程式中任何一個元件的ID的名字相同。

1、src目錄是工程的源檔案目錄，包括mxml檔案 as檔案或者css檔案。

2、Flex 4.6.0是工程的Flex的程式包。在mxml中使用的元件都可以在這裡查到。

3、bin-debug是工程編譯之後的檔案。包括.swf .html .js檔案。

4、html-template是html的模版檔案。

5、libs是工程的資源包。

我們檢視HelloWorld.mxml檔案内容：

<?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">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>
           

就是一個xml的檔案：

<?xml version="1.0" encoding="utf-8"?>
           

xml檔案的版本和編碼方式。

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

一個工程必須有一個Application節點。 xmlns是xml的命名空間（namespace）分别對應的是不同的schema。

我們可以檢視對應的檔案：

flex builder安裝目錄\sdks\4.6.0\frameworks目錄下的flex-config.xml

<namespaces>
      <!-- Specify a URI to associate with a manifest of components for use as MXML -->
      <!-- elements.                                                                -->
         <namespace>
            <uri>http://ns.adobe.com/mxml/2009</uri>
            <manifest>mxml-2009-manifest.xml</manifest>
         </namespace>
         <namespace>
            <uri>library://ns.adobe.com/flex/spark</uri>
            <manifest>spark-manifest.xml</manifest>
         </namespace>
         <namespace>
            <uri>library://ns.adobe.com/flex/mx</uri>
            <manifest>mx-manifest.xml</manifest>
         </namespace>
         <namespace>
            <uri>http://www.adobe.com/2006/mxml</uri>
            <manifest>mxml-manifest.xml</manifest>
         </namespace>
      </namespaces>
           

可以看到分别對應的是哪個schema。

我們稍微修改一下這個檔案：

<?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" backgroundAlpha="0.0" backgroundColor="#FBF5F5"
			   pageTitle="context" preloaderChromeColor="#F5EDED">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:controlBarContent/>
	<s:Label x="228" y="10" width="133" height="30" color="#EE0C0C" fontSize="25" text="Hello World"/>
	<s:Form left="102" right="425" top="73" bottom="321" backgroundColor="#D8B6B6"
			horizontalCenter="-162" verticalCenter="-124">
		<s:layout>
			<s:BasicLayout/>
		</s:layout>
		<s:Button x="108" y="102" width="123" height="34" label="送出"/>
		<s:TextInput x="150" y="43" width="165" height="31"/>
		<s:Label x="25" y="2" width="98" height="31" fontSize="23" text="使用者名："/>
		<s:TextInput x="150" y="5" width="165" height="28"/>
		<s:Label x="25" y="46" width="98" height="28" fontSize="23" text="密碼："/>
	</s:Form>
</s:Application>
           

運作結果如下：