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

最新推荐文章于 2025-07-21 23:21:46 发布

原创最新推荐文章于 2025-07-21 23:21:46 发布 · 674 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #Hello World

flex 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在Eclipse中创建一个Flex项目并编写一个简单的HelloWorld程序，包括项目的目录结构、文件命名规则以及如何在mxml、as和css文件之间进行调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

运行结果如下：