一、准备工作：

所需要的软件Eclipse 3.3 + FlexBuilder3 beta2 插件版+MyEclipse 6.0 +Lcds + Tomcat 5
 

二、安装过程：

1.       安装MyEclipse6.0(在此不再详述)。

2.       安装FlexBuilder3 beta2 插件版(FB3_WWEJ_Plugin.exe)，请参考下图所示

（1）双击可执行文件

在MyEclipse6.0中部署FLEX的WEB工程的过程

1）  建立Flex项目，首先在MyEclipse下打开Flex视图，右键建立Flex工程。

在其中输入项目名称，点击“Next”按钮。

建立TomCat服务器，如下图所示

注意一定要选择和你MyEclipse下对应的TomCat版本，然后点击“Next”按钮，进入下一个界面，点击“finish”即可。

3）  回到了第二步的界面，点击“Brower..”按钮，选择ds-console.war这个文件（此文件需要安装lcds软件，
我们只是要此软件下的这个war文件即可，对于此软件的安装，没有特殊的地方，正常安装即可完成），
最后点击“Next”即可进入以下界面，点击完成即可。

各个包的讲解：

src:放的是Java的项目包

flex_src:放的是Flex项目用的文件

（实际上这个项目是有两个项目框架组成的）

6）  弹出的对话框后，将下面的Create web.xml这一项的对勾去除（因为项目下面已经存在了web.xml文件，
所以去除掉。），点击“Finish”按钮即可。

在Flex中完成项目各个文件的部署工作

1）我们先总体看一下项目现在的样子

可以看到其中有一个Flex_J2eeDemo.mxml文件，它就是Flex项目的应用程序的入口位置，

项目的开始都是从这里开始的，一个项目中只有一个这样的文件，其他均是组件文件。

2）Flex项目的分层结构，下图是我现在的项目样子：

我们可以看到flex_src文件夹下，我建立了三个文件夹

ascode：用于放ActionScript文件。

css：用于放css样式文件。

view：用于放项目中组件文件(mxml文件)。

（注意：这三个文件夹很像Java中的包，当然也可以像Java一样按照功能模块进行划分，这里面只是分一个大体的层，要根据项目决定。）

3）Java项目下的分层步骤：

和以前的Java项目一样，还是在src包中建立自己所需要的包结构。

在此项目中，我们是按照模块进行划分的，然后在每个模块下分出：Biz，Dto，Dao，Entity层，而VO层将交给Flex中的View文件夹进行统一管理。

 1import mx.formatters.*;
 2private var myDataate=new Date(); 
 3private function changeDatas():void
 4{
 5// 格式化函数
 6var myDateFormatterateFormatter=new DateFormatter();
 7// 定义日期格式
 8myDateFormatter.formatString="YYYY-MM-DD JJ:NN:SS";
 9mx.controls.Alert.show(myDateFormatter.format(myData));
10}

The following table describes the valid pattern letters:

 1<?xml version="1.0"?>
 2<!-- Simple example to demonstrate the LinkBar control. -->
 3<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 4    <mx:Script>
 5        <![CDATA[            
 6        ]]>
 7    </mx:Script>
 8    <mx:Model id="catalogService" source="news.xml" /> 
 9    <mx:ArrayCollection id="myXC" source="{catalogService.news}"/> 
10    <mx:Panel title="TestLinkBarForXML" 
11        height="323" width="466" horizontalAlign="center"
12        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
13   
14        <mx:Text width="100%" 
15            text="一个LinkBar的测试"/>
16
17        <mx:LinkBar color="#0000FF" fontWeight="bold" dataProvider="{myViewStack}"/>        
18        
19        <!-- Define the ViewStack and the three child containers. -->
20        <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
21
22            <mx:Canvas id="show1" backgroundColor="#FFFFCC" label="显示一" width="100%" height="100%">
23            
24            </mx:Canvas>
25
26            <mx:Canvas id="show2" backgroundColor="#CCFFFF" label="显示二" width="100%" height="100%">
27            <mx:DataGrid dataProvider="{myXC}"/>
28            </mx:Canvas>
29
30            <mx:Canvas id="show3" backgroundColor="#FFCCFF" label="显示三" width="100%" height="100%">
31            </mx:Canvas>
32        </mx:ViewStack>
33        
34    </mx:Panel>
35    <mx:XML id="myXML" source="news.xml" />
36  
37      <mx:Text id="myText"  width="292"/>
38</mx:Application>
39
40

 1<?xml version="1.0" encoding="utf-8"?>
 2<main>
 3  <news>
 4     <newsTitle>1-1</newsTitle>
 5     <newsItem>1-2</newsItem>
 6  </news>
 7  <news>
 8     <newsTitle>2-1</newsTitle>
 9     <newsItem>2-2</newsItem>
10  </news>
11</main>

运行后画面:

1<?xml version="1.0"?> 
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="catalogService.send()"> 
3    <mx:HTTPService id="catalogService" url="catalog.xml" resultFormat="e4x"/> 
4    <mx:XMLListCollection id="myXC" source="{catalogService.lastResult.product}"/> 
5    <mx:Repeater id="r" dataProvider="{myXC}" startingIndex="1"> 
6        <mx:RadioButton id="Radio" label="{r.currentItem.name}"/> 
7    </mx:Repeater> 
8</mx:Application>
9

 1<?xml version="1.0"?> 
 2<products> 
 3  <product> 
 4    <name>Name</name> 
 5    <price>Price</price> 
 6    <freeship>Free Shipping?</freeship> 
 7  </product> 
 8  <product> 
 9    <name>Whirlygig</name> 
10    <price>5</price> 
11    <freeship>false</freeship> 
12  </product> 
13  <product> 
14    <name>Tilty Thingy</name> 
15    <price>15</price> 
16    <freeship>true</freeship> 
17  </product> 
18<product> 
19    <name>Really Big Blocks</name> 
20    <price>25</price> 
21    <freeship>true</freeship> 
22  </product> 
23</products>

从Action Script到Java

从Java到ActionScript

        那么这个非常重要的东西，该如何去应用呢？在这之前，我们要清楚一个事情，那就是Event是Object这个伟大父亲的220多个孩子之一，也就是说，它是直接继承于Object的。可是我们知道这有什么用处呢，嘿～，用处大啦，因为这代表了Event的贵族气质，即：在Event中，级别高的控件触发的事件，在级别低的控件中是无法被监听到的，怎么样，够高傲了吧。
        到了这里，有人会说，这有点扯了吧，只从这个就能看出这点吗？答案当然不是啦，原理听小生一一道来～

        在flex中，事件分成了两类，一个是系统事件，一个自定义事件。系统事件是包含鼠标点击，焦点获得等等。自定义，顾名思义，是自己定义的事件啦，但是要注意，自定义的事件必须要继承于Event这个类，否则，listener是不会搭理你滴～。那么自定义事件该如何定义呢，下面有一个例子，会对你有帮助。

 import flash.events.Event;
 
 public class MyEvent extends Event
 {      
     public function MyEvent (type:String, nextPage:String, bubbles:Boolean = false, cancelable:Boolean = false) {
         super(type, bubbles, cancelable);
     }  
 }

        够简单了吧，当然，这只是一个不包含任何其它处理的自定义事件。现在有人可能会问了，自定义方法中的参数有啥用，都是干哈的啊？嘿，暂时保密。

        有了自定义事件，那么我们的下一个问题就来啦，自定义事件有了，那么该如何触发，又如何监听呢，别着急啦～～，下面就说。
        在flex中，我们自定义触发事件用的是dispatchEvent（Event），里面存放的就是我们上面提到的自定义Event事件～。系统定义的触发事件,例如：<mx:Button id="testMs" x="71" y="295" label="Button" click = “”/>鼠标点击的事件等等。
那么监听的方法呢，监听是这样来定义的。

 function addEventListener(eventName:String, //事件的KEY
                             listener:Function,   //事件的方法
                             useCapture:Boolean=false, //确定侦听器是运行于捕获阶段、目标阶段还是上浮阶段。
                             priority:Integer=0, //优先级
                             useWeakReference:Boolean=false // 是否设定为弱引用
                             ):

        怕了吧，是不是参数很多，和我们平时用的有点不太一样，我们平时，一般都是这样用的

testMs.addEventListener(MouseEvent.CLICK,changeVboxLabel);，

        后面多出的参数是什么意思呢？要想清楚知道这些，我们必须要先说明一下flex中事件处理的流程。
        在Flex中，触发事件后，流程分为三部分，例如，我们有下面这个

<mx:Panel>
    <mx:HBox>
        <mx:VBox>
                <mx:Button />
        </mx:VBox>
    </mx:HBox>
</mx:Panel>

        假设，在<mx:VBox>中触发一个事件。事件的触发顺序是这样的，先捕捉，然后目标，最后上浮。
        捕捉:在我们刚才的假设中，首先触发器会按<mx:Panel>-><mx:HBox>-><mx:VBox>这个顺序来检查每个节点.这个阶段,我们称为捕捉阶段,在addEventListener的构造函数中，我们默认是不监听这个阶段的。
        目标：顾名思义，就是<mx:VBox>这个触发事件的节点。
        上浮：<mx:VBox>-><mx:HBox>-><mx:Panel>是按照这个顺来检查每个节点是否注册了监听。
        了解了Flex中事件的处理流程，那么我们可以解释addEventListener三个参数的意义啦。
        useCapture:Boolean=false，表示的，这个监听是能在目标阶段和上浮阶段进行监听
        useCapture:Boolean=true，表示的是这个监听只能在捕捉阶段进行监听。

        priority:Integer=0, 优先级，监听是有优先级的，那么通过这个字段，我们可以轻松的改变监听的优先级，是不是很方便，默认的时候为0；

        useWeakReference:Boolean=false // 是否设定为弱引用 这个参数的意思是，在该监听不使用的时候，是否允许垃圾回收器，将该监听回收。这个很重要，因为addEventListener有点类似千年老龟，生命周期比较长，如果没有被回收掉，会一直占着系统资源的。

        最后有一点，要非常注意，在UI的监听执行完毕后，一定要将该监听移除removeEventListener，否则，即使UI被移除掉，监听也不会被销毁。这个比较重要，因为一些看起来比较诡异的错误，大部分是因为这个导致的。

        现在来解惑先前的埋伏下的悬念：
        MyEvent (type:String, bubbles:Boolean = false, cancelable:Boolean = false)

        bubbles:Boolean = false：这个事件是否参与上浮阶段

        cancelable:Boolean = false // 确定是否可以取消 Event 对象

        所以，在application中，触发的事件，它的底层，是无法监听到的，收笔回家～