FlexBuilder 2.0 速学教程(收藏)

本教程介绍如何在FlexBuilder2.0中创建Flex项目,并教授如何使用Canvas容器实现基于约束的布局,使应用程序组件能根据窗口大小变化自动调整。

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

FlexBuilder 2.0 速学教程

这个速学教程向你介绍项目在Macromedia Flex Builder 2中的概念和教你该如何创建项目。在Flex Builder中,全部Flex应用程序都被包含在项目里面。

 

在Flex Builder中创建Flex应用程序之前,必须创建项目。当你在Flex Builder中创建项目,一个主应用程序文件会跟隨被创建。你能增加另外的资源。如:自定義MXML组件文件,ActionScript文件,以及其他的资源来组成你的Flex应用程序。

1.启动Flex Builder,从主菜单中选择File > New > Flex Project。
新Flex项目向导出现。


创建项目將會透过向导的步骤来指导你。

2.因为你将会不用使用Flex服务器,选择No选项并点击Next。
下一个屏幕要求你指定项目的名字和文件储存的位置。

3.在Project Name中输入QuickStart。
这个是项目的名称,当你创建一个新的项目后,Flex Builder会产生一个以你的项目名称为基础的Flex主应用程序文件

4.在Project Location中,确定路径为:
X盤:/Documents and Settings/your_user_name/My Documents/Flex/QuickStart
Flex Builder将会为你产生这一个文件夹。
作为新项目的默认位置是我的文档文件夹中的Flex文件夹。

5.确定Main Application File指定为QuickStart.mxml。
当编译时这个选项决定项目中的那个MXML为主应用程序文件。

6.确定Output Folder指定为bin。
这个选项决定, Flex Builder将会把你编译的Flex应用程序放置在那里(SWF文件与HTML文件).默认时,Flex Builder将放置编译后的SWF文件到项目的bin文件夹中。

 

7.点击Finish。
Flex Builder创建一个新的项目与显示它在Navigator视图中。

 

Flex项目向导自动地产生项目文件,输出文件夹(bin), Flex Builder将会把你编译的Flex应用程序放置在那里。还有主应用程序文件(QuickStart.mxml)。
開始這個速学教程之前,確定你完成下面的任務:

■在Flex Builder中創建QuickStart項目。
■在Flex Builder中打開Project菜單中確認Build Automatically選項已選上,如下:

 

這個選項在Flex Builder的standalone版本中是默認選上的。(-_-!!但不知為什麽我的沒有被默認選上)

學習在Flex Builder中編譯

在你用Flex Builder編譯之前,先說一些核心概念。

默認地, Flex Builder的standalone版本中當你添加文件到項目中或當你編輯後保存項目文件, Flex Builder會動創建应用程序。

編譯後, Flex Builder會將調試與發布的SWF文件放到默認的輸出文件夾bin文件夾中。

 

Flex Builder並會産生運行在瀏覽器中包裝SWF的HTML文件。

注意: 瀏覽器必須了安裝Flash Player 8.5,Flex 2应用程序才能在瀏覽器中運行。

當你創建一個新的項目時, Flex Builder自動地産生項目的配置文件, bin文件夾與主应用程序文件。在一個項目中可以有一個以上的应用程序文件,但只能有一個指定的主应用程序文件。
你隨時可以指定其他文件為主应用程序文件。所有的应用程序文件必須保存在Flex項目的根目錄下。

現在你明白基本概念後,你能在FlexBuilder中創建一個小的应用程序與編譯並運行他。

編譯與運行应用程序

當Build Automatically已選上了,你在Flex Builder中添加文件到項目中或當你編輯後保存項目文件, Flex Builder會動編譯你的应用程序。

這部分假設你已創建了QuickStart項目與Build Automatically已選上了。

1.打開Flex Builder差雙擊QuickStart.mxml文件。

2.在工具條上點擊Code按鈕,將視圖轉為代碼視圖。

 

當你創建QuickStart.mxml文件時, Flex Builder自動插入下面的代碼:

程序代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml"
xmlns="*">
<mx:Canvas width="100%" height="100%">
</mx:Canvas>
</mx:Application>


3.在<mx:Canvas>與</mx:Canvas>標簽中輸入下面的代碼:

程序代码:
<mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight" x="20"
y="20" />


這個標簽插入一個Label控件到Canvas容器中,並設定了Labe控件l在Canvas容器中的位置與事件。

貼士:你能在工具條上點擊Design按鈕預覽這個控件。

4.保存文件。

當你保存時,Flex Builder自動創建应用程序。你能看到在窗口的右下角看到創建的進度。

 

5.完成創建後,在工具條上點擊Run按鈕啟動应用程序。

 

瀏覽器自動打開並運行应用程序

 

注意: 浏览器必須了安裝Flash Player 8.5,Flex 2应用程序才能在浏览器中运行。

6.单击“Welcome to Flex!”文字看看他的效果。
这个速学教程教你该如何在Flex Builder中创建基于约束的布局。

一个基于约束的布局确保当在用户重设置应用程序窗口大小时,应用程序中的组件会聪明地自我调节大小。

開始之前
開始這個速学教程之前,確定你完成下面的任務:

■在Flex Builder中創建QuickStart項目。
■在Flex Builder中打開Project菜單中確認Build Automatically選項已選上,如下:

 

学习在Flex中基于约束的布局
当用户重设置Flex应用程序窗口大小时,你想组件在你的布局中是聪明地自我调节大小时,基于约束的布局就能发挥它的作用。

你将使用Canvas容器创建基于约束的布局。Canvas容器使组件的大小与位置更有弹性。它附属你当Canvas容器重设置大小时自动伸缩与移动组件的能力。

例如,如果当用户将应用程序窗口拖大,你想TextInput文件本框的宽度跟着伸长,你能固定文件本框与Canvas容器左边与右边的位置,那么文件本框的宽度将被窗口的宽度而设定。

注意:在Flex中,所有的约束是相对于Canvas容器边缘设置的。不能相对于其它的控件而设置。。

現在你明白基本概念後,你能在FlexBuilder中創建一個简单的应用程序与定义约束的布局。

插入与放置组件

创建基于约束的布局的第一个步骤是在Canvas容器中放置组件。在Flex的容器中,只有Canvas容器是支持绝对坐标。

像Macromedia Flash的场景一样,你能拖放与放置组件到Canvas容器的任何位置。对于象素点的准确性来说,你能设置x与y轴。

在这部分里,将插入与放置组件来组成一个简单的反馈表单。

1.打开QuickStart项目,选择File > New > MXML Application,在File Name中输入Layout.mxml。

2.在Navigator视图中右击Layout.mxml文件,选择Application Management > Set As Default Application,将它指定为默认被编译的文件。

 

3.在设计视图中,从Components面板(Window > Show View > Components)中拖放一个Label与一个TextInput控件到Canvas容器里。

 

4. 使用鼠标拖动Label与TextInputl控件肩并肩在Canvas容器3 分之1下的位置上(其实只要放到Canvas容器里就可以,下面会进行具体的调整)。

5.在Flex属性面板中,展开General与Layout属性面板。

设置General与Layout属性的选项出现。

 

如果你看到的视图与上面的不一样,那请点击视图工具条上的View As Form按钮。

 

6.在Canvas容器上,选择Label控件与在Flex属性面板给Label设置以下属性:
■ text: Email
■ x: 20
■ y: 60

7. 在Canvas容器上,选择TextInput控件与在Flex属性面板给TextInput设置以下属性:
■ x: 90
■ y: 60
■ width: 300

8. 在工具条上点击Code按钮,将视图转为代码视图。

Layout.mxml文件将包含下面的MXML代码:

程序代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml"
xmlns="*">
<mx:Canvas width="100%" height="100%">
<mx:Label x="20" y="60" text="Email"/>
<mx:TextInput x="90" y="60" width="300"/>
</mx:Canvas>
</mx:Application>


9.在<mx:TextInput>标签后面输入下面的代码来插入剩下的Flex控件:

程序代码:
<mx:Label x="20" y="90" text="Comments"/>
<mx:TextArea x="90" y="90" width="300" />
<mx:Button x="330" y="150" label="Send"/>


你能通过工具条上点击Design按钮来预览已做好的布局。这个布局将如下图:

 

10.保存文件。

11.点击工具条上的Run按钮。

浏览器自动打开并运行你的Flex应用程序。

 

注意: 浏览器必须了安装Flash Player 8.5,Flex 2应用程序才能在浏览器中运行。

12.拖动应用程序的窗口的边缘,使应用程序的窗口变大或变小。
组件仍然保持与窗口的左与上边缘的绝对坐标位置,在重设置应用程序窗口大小时,他们不会伸长与缩小。例如:如果你将窗口缩小, Button控件将消失, TextInput与TextArea控件将被留下一部分。

下一个步骤设置对控件有约束性的布局,当用户在重设置应用程序窗口大小时,他们会自动调整大小。

定义约束的布局

给组件在你的布局定位完后, 你将定义约束的布局,它能使组件跟随应用程序窗口自我调整大小。

1.在设计视图,选择TextInput组件。

2.在Flex属性面板,确定Layout类别已被展开。

Layout类别包含设置固定的选项。

 

3.定义约束的布局,在Layout类别中点击左边与右边的固定选框,并在左边文本框输入90,右边文文本框输入60。这是TextInput控件与Canvas容器的左边与右边保持的距离,如下:

 

这两个固定选框, 跟随窗口固定TextInput控件的左右两边。在文本框中输入的数字是指定TextInput控件与Canvas容器保持的距离有多远(单位:像素(pixels))。

这些约束在MXML代码里被表示如下:

程序代码:
<mx:TextInput y="60">
<mx:layoutConstraints>
<mx:EdgeAnchor left="90" right="60"/>
</mx:layoutConstraints>
</mx:TextInput>


4.在Canvas容器中选择TextArea控件,在Flex属性面板中,选择所有的四个固定选框并输入与边缘保持的距离,如下:
■ left: 90
■ right: 60
■ top: 90
■ bottom: 190

TextArea的Flex属性面板如下:

 

5.在Canvas容器中选择TextArea控件,在Flex属性面板中,选上右边与下边的固定选框,并在右边文本框输入60,下边文本框输入150。

 

6.保存文件,等待Flex Builder直到编译完成应用程序,再点击工具条上的Run按钮。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值