Flex学习笔记_03 Hello Flex

1. 可创建项目类型

可通过Flex Builder 2.0创建下面3种类型的项目：

    Flex 2 项目 ：基于Flex Framework；

    AS 3.0 项目 ：创建ActionScript 3.0 ，使用AS动态绘制界面等。

    Flex 库项目 ：创建自己的库文件，将Flex组件或者其他资源封装在一起，形成一个SWC文件，Flex Framework就被封装为一个SWC文件。可在任何地方使用。

2. 创建Flex项目 Flex Project

选择菜单：File->New->Flex Project

 

    

 

Flex 有3种类型 ：

    Basic ：一般配置，适用于以HTTP或者Web Service等进行数据传送。

    ColdFusion Flash Romoting Service ：专用于和ColdFusion 服务端进行Flash Remoting方式的通信。

    Flex Data Services ：用于FDS通信。FDS是Flex 2系列中的一个服务器端产品，提供了对Java对象的直接访问、实时通信等功能。

 

这里我们选择第一中类型

 

输入项目的名称 Project name和存放的路径 Folder

 

配置程序的一些源代码和运行库环境。默认，不用修改，点击Finish，完成创建

 

等待Builder自动生成所有的基本文件（主程序文件、项目的库文件配置、HTML页面模板等），这时在左侧的导航式视图中，可以看到所有项目的文件结构：

 

bin： 用来存放程序编译后输出的SWF和HTML等一系列文件。XML文件、图片、样式表等其他资源也放在这里。

html-template：生成HTML页面的文件模板，包括检测用户浏览器插件版本的JS脚本和自动下载最新插件的SWF文件。

HelloFlex.mxml ：项目的主程序文件。

 

3. 插入组件和代码

却换到视图模式，在组件面板中分别把Button和Label拖入到编辑区。却换到代码模式。

 

完整代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
 <mx:Script>
  <![CDATA[
   internal function doClick():void{
    tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
   }
  ]]>
 </mx:Script>
 
 <mx:Button x="41" y="90" label="Hello Flex" click="doClick()"/>
 <mx:Label id="tip_txt" x="41" y="41" text="你好，Flex" fontSize="12"/> 
</mx:Application>

mxml文件是一个标准的XML文件，只不过是以mxml为扩展名。

mx: 为flex的命名空间，以后出现的标签不能以mx为命名空间。

<mx:Application> 为程序的根标签。代表一个应用程序。一般对于应用程序的设置在这个标签下。其他标签包含在里面。更多关于Application下次再介绍。

<mx:Script> 包含在里面的代码是AS脚本，<![CDATA[]]>为XML标准输出，就是不管里面的代码是什么就输出什么，可以避免<、>、&等跟XML解析时冲突。
<mx:Button> 定义一个按钮，并绑定了click事件，触发AS定义的doClick方法

<mx:Label> 定义了标签

 

4. 编译和运行程序

点击工具栏的运行图标，开始编译。如果程序有错误，将中止编译，并在错误面板中列出错误信息。否则编译结束后将自动打开浏览器，来显示程序。点击上面的按钮标签显示的文字变化。

trace('字符串'); 调试模式在控制台输出。