Flex学习总结

2008-10-7 11:35
---------------addEventListener（参数类型，处理函数）---------------
myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler);
上边表示把myMenu对象的MenuEvent.ITEM_CLICK事件交给menuClickHandler函数来处理


--------------可以直接定义XML，并将它设置为菜单的内容mx:MenuBar------------
import mx.controls.Alert;       
import mx.events.MenuEvent;
private var mXML:XML =
                <menu label = "系统菜单">
                    <item label="文件">
                        <node label="新建画板" data="new"/>
                        <node label="清除画板" data="clear" enabled="false"/>
                        <node type="separator" />
                        <node label="退出系统" data="logout"/>
                    </item>
                    <item label="帮助">
                         <node label="帮助" data="help"/>
                         <node label="关于作者" data="about"/>
                     </item>
                </menu>;
           
internal function initApp():void{
    //为MenuBar添加数据源
    myMenu.dataProvider = mXML;
    //监听Menu的点击实践
    myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler);
}
           
internal function menuClickHandler(evt:MenuEvent):void{
    Alert.show("选择菜单："+evt.item.@data,"提示信息");
}

<mx:MenuBar labelField="@label" height="30" id="myMenu" width="100%"></mx:MenuBar>

---------------用mx:Model来定义数组，关键词Model、id、item--------------
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
    <mx:Model id="myImages">
      <myImage2>
        <item label="图片12" data="images/Baby01.gif"/>
        <item label="图片22" data="images/Baby02.gif"/>
        <item label="图片32" data="images/Baby03.gif"/>
        <item label="图片42" data="images/Baby04.gif"/>
      </myImage2>
    </mx:Model>   
    <mx:List dataProvider="{myImages.item}" itemRenderer="ImageItem" x="41" y="52" height="235" width="130">
    </mx:List>
</mx:Application>

---------------文本有三种方式：TextArea、TextInput、htmlText------------------
<mx:TextArea x="51" y="96" text="文本区" editable="false" width="172" height="48"/>
<mx:TextInput x="51" y="171" text="输入框" displayAsPassword="true"/>

<mx:Text width="253" height="96" x="51" y="226">
    <mx:htmlText>
     <![CDATA[<font color="#0000FF">HTML文本</font> <u>支持html标签</u><img src="images/Baby01.gif"/>...    ]]>
    </mx:htmlText>
</mx:Text>

---------view:PenControl表示view目录下的PenControl.mxml文件中定义的钢笔控制面板：
<mx:Canvas width="100%" height="100%" id="paper">
   <view:PenControl id="control" x="10" y="23" />
   <view:Paper x="203" y="23" id="whitePaper">
   </view:Paper>
</mx:Canvas>


------------------super函数调用EventListener----------------
package bookEvent
{
    import flash.events.Event;

    public class cartEvent extends Event{
        public var isAdd:Boolean;
        public var book:Object;
        function cartEvent(_data:Object,_isAdd:Boolean):void{
            isAdd = _isAdd;
            book = _data;
           
            super("AddBook");
        }
    }
}
super函数将调用预先注册好的EventListener：
internal function initApp():void{
addEventListener("AddBook",AddHandler);
}

---------------------表格实现三要素:DCD-----------------------------------------
表格实现三要素：DataGrid，columns，DataGridColumn
<mx:DataGrid editable="true" id="book_DG" width="100%" height="156" itemEditEnd="checkInfo(event)" rowCount="5" dataProvider="{books.book}">
    <mx:columns>
       <mx:DataGridColumn dataField="name" headerText="书名"/>
       <mx:DataGridColumn dataField="author" headerText="作者"/>
       <mx:DataGridColumn dataField="date" headerText="出版日期" itemEditor="view.dateCell" />
       <mx:DataGridColumn headerText="购买" itemRenderer="view.cartCell" editable="false"/>
    </mx:columns>
</mx:DataGrid>

view.cartCell表示view目录下的cartCell.mxml文件中的内容.

itemEditor定义了当前数据项应该由哪个编辑器来修改它：
<mx:DataGridColumn dataField="date" headerText="出版日期" itemEditor="view.dateCell" />


2008-10-6 16:35
<mx:Move id="myMove" target="{img}" xFrom="50" xTo="350" duration="10000"/>
xFrom、xTo定义了水平移动的起点和终点。

<mx:Style source="style.css" />
mx:Style设置了css文件
Application{
    fontSize:12;
    backgroundGradientColors: #c0c0c0, #c0c0c0
}

模糊效果的blureXFrom和blurXTo定义了模糊效果相对于应用对象的位置。只有当blurXFrom为0或者blurXTo为0时，才有可能看到清晰的文字.
为0表示没有水平模糊偏移.
<mx:Blur id="Effect_Blur" effectEnd="endBlur()"
        blurXFrom="0" blurXTo="30" duration="1500"/>

数组和<mx:Blur的应用：
Effect_Blur.targets = [myPanel];               
//var arr:Array = new Array();
//arr.push(myPanel);

三种擦除效果：
<mx:Iris id= "myIris" effectStart="effectStartHandler()" effectEnd="effectEndHandler()" />
<mx:WipeLeft id= "myWipe" />
<mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/>

通过一行多个等于符合可以给多个变量赋值：
<mx:Button label="改变图片" x="37" y="153" click="image.visible = image2.visible= !image.visible"/>



2008-9-25 11:30
ViewStack里边可以放多个Canvas。
ViewStack支持selectedChild属性


2008-9-24 15:37
分析：Tile用来显示列表内容，其中tileHeight，tileWidth用来定义小方格的高和宽:
<mx:Tile id="holder" x="41" y="45" width="330" height="280" horizontalGap="2"
   direction="horizontal" tileHeight="80" tileWidth="80">


//----------可以根据id来显示或者隐藏一个控件-------------下边的win1就是一个id号----
<mx:Script>
    <![CDATA[
        //点击后出发 close 事件，执行该函数
        import mx.controls.Button;
       
        internal function doClose():void{
            txt.text = "关闭按钮被点击了";
            win1.visible = false;
        }
       
        internal function doShow():void{
        win1.visible = true;
        }
    ]]>
</mx:Script>



2008-9-24 13:39
TabNavigator里边多放一个Canvas，上边的标签处就会多一个tab标签

优化flex builder的方法：
preferences => general => workspace
去掉Build automatically和 Refresh automatically前边的勾

<tree:Panel2 x="54" y="24">       
</tree:Panel2>
使用tree可以载入另外一个mxml文件的内容

应用程序放在标签<mx:Application中



2008-9-24 12:55
表单的相关元素：
放在Panel里
Form里边有FormHeading元素定义表单的头
一个FormItem定义一个表单的具体元素，里边包含TextInput元素输入填写内容
按钮放在ControlBar里边，它里边再放入Button
输入验证包含如下几个验证器：
StringValidator
EmailValidator
PhoneNumberValidator
DateValidator



2008-9-23 15:14
flex build去除网上粘贴的代码的前边的行号：
[\d]+{1,2}\.
记住一行一行操作，因为<?xml1.0 这样的也可以被替换。

2008-9-23 14:23
1 flex发布：file => export => Release build
2 CSS的使用
<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          
        <mx:Style>
            Button {  
               color: #ff0000;  
               borderColor: #cccccc;  
               themeColor: #00ff00;  
               fontFamily: Arial;  
              fontSize: 12;  
              fontWeight: normal;  
           }  
           .mylinkButton {  
              rollOverColor: #00ff00;  
              selectionColor: #00ff00;  
              color: #ffff00;  
           }  
       </mx:Style>
         
       <mx:Button x="10" y="10" label="Button"/>
       <mx:LinkButton styleName="mylinkButton" label="LinkButton" x="10" y="40"/>
         
</mx:Application>


2008-9-18 14:22
1 constraintColumns和constraintColumn定义了<mx:Canvas>的列和列的数量，一个Canvas只能定义一个constraintColumns
<mx:constraintColumns>
<mx:ConstraintColumn
跟html表格不同的是，Canvas的列宽ConstraintColumn可以随意指定，只需要定义好列里边的元素的 width就可以了！

2 constraintRows定义了<mx:Canvas>的列和列的数量，一个Canvas只能定义一个ConstraintRows
<mx:constraintRows>
<mx:ConstraintRow

3 left和top属性里边可以访问其他别的id里边的位置，例如left="column1:0",表示，左边距为id为column1的元素的0像素的位置。
<mx:Button label="Row 2 Col 1" width="100" left="column1:0" top="row2:0"/>

4 DividedBox定义了分割的区域，相互之间还可以拖动。<mx:Panel定义了其中的一块区域。用起来真是相当棒！！！！
<mx:DividedBox direction="horizontal" width="100%" height="100%">
<mx:Panel title="Panel 1" width="25%" height="100%" backgroundColor="0xCCCCCC">

5 表单用Form、FormHeading、FormItem、TextInput，注意FormItem和TextInput必须成对出现，表示一个输入项。
<mx:Form width="100%" height="100%">
<mx:FormHeading label="Enter values into the form."/>
<mx:FormItem label="First name">
<mx:TextInput id="fname" width="200"/>

6 HBox是水平方向的布局框，H2O就是水的化学分子式嘛.
<mx:ComboBox/>是下拉列表框,下拉列表框的内容用
<mx:Array>
<mx:Object label="请选择性别"/>   
来显示


2008-9-16 13:46
1 用VedioDispaly这个组件加上button来实现视频和mp3的播放
2 RemoteObject是最快速的（相比WebService,httpservice这些数据方式)
3 RO走的是AMF协议

4 trace("My name is " + userName + ".");
这样就可以在flex builder的console视图显示出变量username的值了。

5 监控按下的字符代码：
private function onKeyDown(event:KeyboardEvent):void {
trace("key down: " + event.charCode);
}

6 关闭强类型检测：
trace(5 == 6); // : false
trace(6 == 6); // : true
trace(6 == "6"); // : true
trace(5 == "6"); // : false
默认的工程项目，在运行上面的代码会出错。因为编译器被设置为强类型编译检测。关掉强类
型检测，会把数字型转换为字符型，然后再进行比较。一般不推荐关闭强类型检测,这样可能会
引发一些隐蔽的错误不利于程序稳定。

7 HTTPService组件读取XML产生乱码问题。（Skey）
我是用HTTPService组件读取XML 而我的XML是gb2312的编码
事后才发现 加一句flash.system.System.useCodePage=true 可以解决乱码问题

8 由于AMF采用二进制编码，这种方式可以高度压缩数据，因此非常适合用来传递大量的资料。数据量越大，Flash Remoting的传输效能就越高，远远超过Web Service

9 定义数组用<mx:Array，定义XML用<mx:XML，定义列表用<mx:List，定义树形菜单用<mx:Tree，相当棒！

10 <mx:Tree的labelField="@label" dataProvider="{myData}"，其中dataProvider定义了数据显示来源，labelField利用@来访问每个node的对应属性值,"@label"

11 Accordion是手风琴的意思，菜单会像手风琴那样滑动。

12 tab_menu.selectedIndex = 1;
其中tab_menu是id名，selectedIndex表示当前显示那个菜单。如果值为1，表示显示第二个菜单。id都可以直接访问

13 Canvas是画布的意思，在画布里边的任何组件均可以被放置在任意位置，例如：<mx:ColorPicker，<mx:Label，均可以被放置在画布的任意位置。

14 <mx:VBox是竖向排列的布局组件，<mx:Text text="这里插入内容"用来显示文字内容。 <mx:ComboBox>实现下拉列表框，下拉列表框里边的元素是<mx:Array>。

15 数组使用实例：
<mx:Array>
      <mx:Object label="请选择性别"/>                   
      <mx:Object label="女"/>
      <mx:Object label="男"/>
</mx:Array>

16 Panel也是布局组件，翻译为面板。
<mx:Panel title="内嵌的Panel" label="Item 3" width="90%" height="90%">

17 画布、VBox、Panel均可以直接放在Accordion里边，实现一个手风琴的按钮。



-----------------MovieClip有play,stop,和gotoAndStop方法----------------------------
下面的代码指示名为 shortFilm 的 MovieClip 开始播放：
shortFilm.play();
下面的代码行使名为 shortFilm 的 MovieClip 停止播放（播放头停在原地，就像暂停播放
视频一样）：
shortFilm.stop();
下面的代码使名为 shortFilm 的 MovieClip 将其播放头移到第 1 帧，然后停止播放（就像
后退视频一样）：
shortFilm.gotoAndStop(1);


-----------------数字应该调用toString()方法来显示在文本字段中：----------------------------
var numericData:Number = 9;
var textData:String = numericData.toString();
例如，如果希望在屏幕上的文本字段中显示 Number 变量的值，应使用 toString() 方法。
TextField 类的 text 属性（表示实际在屏幕上显示的文本内容）被定义为 String，所以它
只能包含文本值。下面的一行代码将变量 numericData 中的数值转换为文本，然后使这些文
本显示在屏幕上名为 calculatorDisplay 的 TextField 对象中：
calculatorDisplay.text = numericData.toString();


----------------先定义响应函数，再用addEventListener绑定响应函数---------------------------
function eventResponse(eventObject:EventType):void
{
// 此处是为响应事件而执行的动作。
}
eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);
此代码执行两个操作。首先，定义一个函数，这是指定为响应事件而要执行的动作的方法。接
下来，调用源对象的 addEventListener() 方法，实际上就是为指定事件“订阅”该函数，


程序员实际编写的代码如下所示：
function eventResponse(event:MouseEvent):void
{
// 此处是为响应事件而执行的动作。
}
myButton.addEventListener(MouseEvent.CLICK, eventResponse);


2008-10-14
------------脚本标识---------------
<mx:Script>

-----------导入相关包--------------
import mx.rpc.events.ResultEvent; //WEB请求结果处理包
import mx.rpc.events.FaultEvent; //WEB请求失败后的处理包
import mx.controls.Alert;         //弹出信息框

--------函数的返回类型也用冒号-----
public function handleXML(event:ResultEvent):void
这里():void表示该函数不返回任何变量

--声明变量直接用var，用:来指定类型--
private var shippingInfo:XMLList;

-------------文本输入框------------
<mx:TextInput

---------------按钮----------------
<mx:Button

---------------表格----------------
<mx:DataGrid

-------------表格的列--------------
<mx:columns>

------------表格的列头-------------
<mx:DataGridColumn headerText="Service"

-------------文本标签--------------
<mx:Label

-----x表示离最左边有多远，y表示离最顶端有多远-----
<mx:Label x="400" y="32"
x表示水平左边距，y表示垂直上边距

-----------HTTPService描述web请求-----------------
<mx:HTTPService result="handleXML(event);" fault="handleFault(event);" id="xmlRPC" resultFormat="e4x"
        url="http://examples.adobe.com/flex3app/flex3samples/exchangingdata/xml/xmlHttpService.jsp" useProxy="false">
result设置结果处理函数，fault设置错误处理函数，resultFormat="e4x"设置返回的xml格式，url定义访问地址
注意：函数声明时需要指定形参的类型，但是函数调用的时候不用指定

-----------request描述web请求的参数和参数值-------
<mx:request xmlns="">
<zipcode>{zipcode.text}</zipcode>

----------类型转换用as----------------------------
hippingInfo = event.result.option as XMLList;
这里as表示类型转换