Flex学习笔记（一）——Hello World

来源：互联网发布：上虞用友软件编辑：程序博客网时间：2024/05/16 06:21

和学习其他语言一样，我们以一个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>

运行结果如下：

0 0