【教程】基于FlashBuilder创建的FLEX项目使用教程精简版

论坛 期权论坛 脚本     
匿名技术用户   2020-12-21 12:43   11   0

使用环境:使用FlashBuilder创建的FLEX项目和FLEX库项目

1、当创建一个FLEX项目(项目名例如叫做myFlex)的时候会自动建立一个叫做myFlex.mxml的文件:这是一个窗口类,系统会自动创建该实例,你可以认为是启动该工程时的主窗口,所以你也可以在这个文件里面给它添加各种组件,在启动的时候就会立即看见。它的类与父类的关系链:

myFlex ->WindowedApplication ->Application ->LayoutContainer ->Container ->UIComponent ->FlexSprite ->Sprite(flash的)
它的接口:IWindow

2、添加组件,插入到myFlex.mxml的WindowedApplication节点内,比如添加一个按钮:

<s:Button label="这是组件:按钮" click="onclick(event)" />

3、调用AS代码,你可以将代码嵌入在myFlex.mxml中也可以单独写在一个AS文件里(AS文件不是类):
嵌入代码,插入到WindowedApplication节点内:
<fx:Script>
  <![CDATA[
 private function onclick(event:MouseEvent):void
 {
  trace("点击了按钮");
 }
  ]]>
</fx:Script>
调用外部文件(注意如果不是相同的目录就要指定下目录了):
<fx:Script source="_myFlex.as" />
// ActionScript file _myFlex.as
<pre name="code" class="javascript">private function onclick(event:MouseEvent):void
{
  trace("点击了按钮");
}

PS:如果你熟悉HTML和JS的话,那么这里的跟嵌入JS和外部调用JS文件差不多的方式,你也可以把外调的AS文件当做复制了代码嵌入到MXML中。

4、也就是说你可以在这个主窗口上添加N个组件,你可以将这些组件看成是一个界面(Interface),这个界面默认添加到了主窗口(Window)里。

5、创建新的界面:文件->新建->MXML模块(比如叫做NewUI),这个时候你就创建了一个“界面”,这个界面不是WindowedApplication,而是Module,你可以将这个界面显示在主窗口中:
// 将该界面放置在当前窗口最前面显示(遮盖住其他的界面)
var ui:NewUI = new NewUI();
PopUpManager.addPopUp(ui,this,true);
// 这里的this表示主窗口,这意味着这段代码是在myFlex.mxml里写的或者它外调的文件里

6、关于Module的父类关系链:
NewUI -> Module -> LayoutContainer -> Container -> UIComponent -> FlexSprite -> Sprite(flash)

7、在NewUI的控件中设定按钮关闭掉自己这个界面,此段代码在NewUI.mxml中嵌入的,当这个界面中的某个按钮按下时执行的代码:
PopUpManager.removePopUp(this);

8、新建立一个窗口,并且将界面附加上去
var win:Window = new Window();
win.systemChrome = NativeWindowSystemChrome.NONE; 
win.transparent = true; 
win.title = "新窗口";
win.width = 800;
win.height = 800;
<pre name="code" class="javascript">var ui:NewUI = new NewUI();
PopUpManager.addPopUp(ui,<span style="font-family: Arial, Helvetica, sans-serif;">win</span><span style="font-family: Arial, Helvetica, sans-serif;">,true);</span>


9、关于Window的父类关系链
Window -> LayoutContainer -> Container -> UIComponent -> FlexSprite -> Sprite(flash)
接口:IWindow

10、你在实际创建实例的时候会发现有两个同名的版本,一个是mx的,一个是spark的,这是新旧版本的问题,后者是FLEX4.0的新版本类。包括在MXML中添加控件或者模块的时候你会发现<s:的和<mx:的,是同一个意思。

11、在MXML中添加接口:设置WindowedApplication或者Module节点的属性:implements="API.IModule"
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    implements="API.IModule"
    xmlns:mx="library://ns.adobe.com/flex/mx" width="1600" height="900">
PS:其他的关于窗口和界面的宽高、背景色之类、初始化完成时事件(creationComplete)等均可以在这里写入。


12、以上已经说明了窗口、界面、控件之间的使用和关系,接下来你翻阅下相关的API:Window、WindowedApplication 、Module 等以及常用控件的API即可。


附图,简单的文件结构和关系:


以下架构图仅供参考,主要是最近设计的一款工具的基本架构片段:


分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP