分享

FLEX学习笔记

 Sky-Cool 2012-07-10

FLEX学习笔记

分类: FLEX教程 1887人阅读 评论(0) 收藏 举报

一、PopUpManger 是专门处理弹出窗口的对象。

1、addpopup(被弹出的窗口,其父对象(如this),model(true/fasle 是否让父对象失去交互能力)

其下的 popupbutton 这个按钮的弹出的内容要用 new 弹出的对象

2、popupmenubutton,指定datapriva时,内容为XML时,要加上  showRoot="false" 

    菜单的事件为 item.click 可用 evt.label来接收选择的菜单名称。

 

二、导航控件的子级元素必须是容器类

 

三、ViewStack每次只有一个容器是可见的,需要用AS来控件切换里面的容器。用 vew_1.selectchild=xxx哪个容器

 

四、表单验证

<mx:stringvalidator source={文本控件} property="text" ...../>

 

五、ComBox控件的弹出或收回,都会分派 DropdownEvent 的OPEN和CLOSE事件

 

六、可以用来作为itemRender的组件有一个共同的特点,那就是拥有一个名为 data 的属性,FLEX是通过"data"属性将数据传递给 itemRender的。

 

七、Alert组件

alert.show(文本,标题,ALERT.YES|ALERT.NO,窗口居中的参照对象(this),关闭后的函数用于捕捉用户选择,图标,默认选择的按钮)

其接受的事件是 CloseEvent

 

八、DataGrid自定义 itemrenderer 步骤[]

1、创建一个自定义组件 mx:checkbox,并定义一个函数用于状态改变时,向外派发事件。

2、自定义控件中的函数用 this.parentapplication.dispatchevent(new 自定义的事件(data,chk.selected)

parentapplication. [指向应用程序的application]

3、自定义事件 cartEvent()

cartEvent:Event{

定义要让事件接收者要接收的变量var1,变量var2

function 构造函数(_data:object,_isvar2):void{

var1=_data;

var2=_isvar;

super("事件名") -------- 事件的名称

}

在其构造函数中,定义了参数,参数赋给事件的变量,当接收函数接收这个事件时就可以访问事件中定义的变量了

 

4、在主程序中的initApp()中监听事件

addEventListener("事件名",处理函数)

 

5、在处理函数中接收 evt中的变量并处理

evt.var1

 

另一种方法:

直接在DataGrid的列下定义

<mx:itemRenderer>

    <mx:Component>

          <mx:LinkButton 内部控件  click="outerDocument.buttonDel()">

        //调用外部的函数,必须用 outerDocument

    <<mx:Component>

</mx:itemRenderer>

 

示例:

 // Define event listener for the itemEditEnd event.

            private function getCellInfo(event:DataGridEvent):void {

               

                // Get the cell editor and cast it to TextInput.

                var myEditor:TextInput =

                    TextInput(event.currentTarget.itemEditorInstance);

               

                // Get the new value from the editor.

                var newVal:String = myEditor.text;

               

                // Get the old value.

                var oldVal:String =

            event.currentTarget.editedItemRenderer.data[event.dataField];

           

                // Write out the cell coordinates, new value,

                // and old value to the TextArea control.

                cellInfo.text = "cell edited./n";

                cellInfo.text += "Row, column: " + event.rowIndex + ", " +

                    event.columnIndex + "/n";

                cellInfo.text += "New value: " + newVal + "/n";

                cellInfo.text += "Old value: " + oldVal;

            }                              

 

7、DataGrid的选择项可由 selectitem.data 得到后面加上 selectedItem.data.字段名。可得到此字段的值

     datagrid 的 dataprovider 可由xmllistcollection 得到

  

    var data_xml:XMLListCollection=dg_szjz.dataProvider as XMLListCollection;

    var data_array:Array=data_xml.toArray();

    var data_myarray:ArrayCollection=new ArrayCollection(data_array)

 

   DataGrid绑定 data_myarray 用这个

    dg_datasource=DataUtil.xmltoarray(myxmla);

     dg_szjz.dataProvider=dg_datasource.source[0].data;

 

 

 

九、dataGrid编辑功能的实现

1、在dataGrid定义中添加事件声明 itemeditend=函数名(event)

 

2、完成事件代码

chkinfo(evt:DatagridEvent

{

if (evt.reason==DataGridEventReason.CANCELLED){

return}

if (evt.dataField=="date"){

evt.preventDefault();

bg.editedItemRender.data.date=dateCell(DataGrid(evt.target).itemEditorInstance).num_year.value;

bg.destroyItemEditor();

bg.dataProfider.itemUpdataed(evt.itemRenderer.data);

}

}

 

十、设置字体

@font-face{

src:local("Arial");或者 src:url("./arial.swf")

fontFamily:myFont; 别名

fontyle:normal;

fontweight:normal;

flashtype:true} -------抗锯齿

 

十一、访问 xmllist的子节点值,在名称前要加 @,如访问菜单 evt.item@data

XMLLIST是多个XML数据的集合,根节点被忽略,ITEM节点被解析为独立的XML数据,item节点必须有一个根节点。

过滤   var myxml:XMLList=menuxml.children().(@name=="?÷±?").children();

 

十二、colorPicker取得的seleceedcolor值可以直接使用

 

十三、动画并行和串行效果

1、定义并行                             定义串行

<mx:parallel id="xxx">             <mx:sequence>

动画1                                                    

动画2                                        

</mx:parallel>

 

2、使用                                      同并行

xxx.play()

 

十四、state使用及过渡动画

在window--->state 中创建,另:动画效果必须用在容器上,才能实现。

 

十五、拖曳事件

1、在initApp()中对被拖的控件添加 dragevent.drag_enter,dragevent.drag_drop 分别注册事件函数,对拖的控件注册鼠标事件函数

 

2、在被拖的控件中的鼠标事件函数中

1> 得到拖曳的对象

var tg:image =image(evt.currentTarget);

2>创建拖曳的数据源

var ds:dragsource=new dragsource();

ds.add(object,"名称)

3>创建拖曳时显示的内容

var imgpxy=new imge();

imgpxy.source=xxxx

imgpxy.width=12

imgpxy.height=12;

4>开始拖曳

dragmanager.dodrag(被拖的对象,数据源,此函数所属鼠标事件[如evt],拖曳时显示的对象)

 

5>定义进入拖曳对象的函数 [用于响应dragevent.drag_enter]

enterhandel(evt:dragevent)

                if (event.dragSource.hasFormat("img"))

                {

                    DragManager.acceptDragDrop(Canvas(event.currentTarget));

                }

-----------------将原来不允许目标拖曳的属性设为TRUE

 

}

 

6>处理鼠标入下后的事件

drophandler{

var obj:object =evt.dragsource.dataforformat("名称");

  ......处理函数.........

}

 

[注意:被拖曳的容器一定要设样式,设BoardStyle和BoardColor也亦,设空的样式名称也行]

 

 

十六、[Bindable] 主要用于绑定已经存在着组件和对象。

1、变量级别的绑定,放在变量前,只要变量值发生变化,会引起使用它的控件更新

2、函数级别的绑定,函数必须是通过 setter 和 getter 方式定义的

    在大括号中使用函数,函数的参数必须支持绑定,否则绑定不起作用

3、对象级别的绑定,用在公有类之前,此类的所有公有变量,都可以用于绑定。

 

bindproperty 绑定不存在的对象

 

绑定出现问题有3种情况

1、数据源没有被子更改。如拼写错误或数据误操作

2、绑定事件未派发出去

3、目标对象没有收到资料,所以也无法更新了。

 

十七、XML的操作

1、. 和 .. 可以直接访问XML对象的子节点

2、@ 访问某一节点的属性

 

十八、使用 HttpService 通讯

1、发送消息

<mx:HTTPService id="srv" url="list.php" method="GET"  />

 

<mx:request>

<aaa>{xxxxx}</aaa>

<bbb>{zzzzz}</bbb>

</mx:request>

</mx:HTTPService>

 

或者:

 

var par:object=new object);

par.aaa="xxxxx";

par.bbb="zzzz";

src.send(par);

 

示例:

initialize="sdk.send();"

<mx:HTTPService id="charts" url="charts_explorer.xml" resultFormat="e4x" result="chartsLoaded();" fault="populateTree()" />

  private function chartsLoaded():void

        {

            explorerTree.appendChild(charts.lastResult.node);

            populateTree()

        }

 

        //we don't use data binding because the timing of the charts loading can be off

        private function populateTree():void

        {

            compLibTree.dataProvider = explorerTree;

        }

 

var data_xml:XMLListCollection=dg_szjz.dataProvider as XMLListCollection;

 

2、接收消息

当收到服务器端的数据时,evt:resultEvent 会被触发,失败会触发 evt:faultEvent

返回的数据会存放在 resultEvent 的 result 中,类型为 Object,如果是XML格式,会解析成树形结构的对象,可以直接读取了。

 

 

resultFormat默认的值是OBJECT,可选格式还有 text

 

如果是用AS方法则写法如下:

 1> 定义 HttpService 对象

var httpser:HttpService=new HttpService();

 

2> 设置要读取的外部文件的路径,添加事件监听

httpser.usr="http://xxxx/a.asp"

 

3>定义其使用的方法

httpser.method="POST"

 

4>为其定义成功,失败监听事件

httpser.addeventListenner("result",resultHandelr); //事件为 ResultEVENT

httpser.addeventListenner("fault",failHandelr);  //事件为 FailEvent

 

5>为其定义参数

var par:object=new object);

par.aaa="xxxxx";

par.bbb="zzzz";

src.send(par);

 

6>在监听函数中用 evt.result得到返回值,如果返回值想转换成OBJ,直接将XML文件传过去就OK了

employeesService.removeEventListener(ResultEvent.RESULT,resultHandler);

     employeesService.addEventListener(ResultEvent.RESULT,insertItemHandler);

     employeesService.method = "POST";

    params = {"method": "InsertEmployee", "id": NaN, "firstName": inputFirst.text,

               "lastName": inputLast.text, "officePhone": inputPhone.text};

     employeesService.cancel();

     employeesService.send(params);

 

var xmllist:XMLList=XMLList(xmla)

        var myxmllist:XMLListCollection=new XMLListCollection(xmllist);

        var data_array:Array=myxmllist.toArray();

    var data_myarray:ArrayCollection=new ArrayCollection(data_array)

        

 

7、在客户端对用户转入的参数进行解析,分别执行增,删,改

 

 

十九、WEBSERVICE

1、定义请求

<mx:WebService

     id="userRequest"

     wsdl="http://localhost:8500/flexapp/returnusers.cfc?wsdl">

 

    <mx:operation name="returnRecords" resultFormat="object"

     fault="mx.controls.Alert.show(event.fault.faultString)"

     result="remotingCFCHandler(event)"/>

    <mx:operation name="insertRecord" result="insertCFCHandler()"

         fault="mx.controls.Alert.show(event.fault.faultString)"/>

 <mx:request>

<aa>{aa}</aa>

<bb>{bb}</bb>

</mx:request>

</mx:operation>

</mx:WebService>

2、发送请求

ws.函数名.send()

 

3、接收请求

返回的数据会存放在 resultEvent 的 result 中,类型为 Object,如果是XML格式,会解析成树形结构的对象,可以直接读取了。

 

客户端传过来的VO类在JAVA中被转换成MAP类型

服务器返回的HashMap类型被自动转换成 ArrayCollection类型。其无法参与数据绑定,需转换成VO的类型。如

for (var i:* in obj)

{

 this[I]=obj[i]

}

 

AS3 支持不定个数的参数传递 用 ...参数就可以了,在静态函数中,只能访问类的静态变量和静态函数,而无法访问类的成员变量和成员函数。因为成员变量和函数只存在于类的实例中。

dotest(s:string,... rest){

for (var i=1 ;i<rest.lenght;i++){

trace(reset[i])                

}

数组的push可以传二维进去

myarr.push(["jyrq",str_date])  

 

 

如果是用AS方法则写法如下:

1> 定义 webservice 对象

2>指定其wsdl属性

3>调用其方法 loadwsdl() [亦可直接用 loadwsd("xxx.asmx?wsdl")]

4>注册其成功与失败函数 [同 HttpService]

5>ws.函数名(参数1,参数2)

当参数1,为一实体类时,。NET会接收成什么啊?

6> 在监听函数中用 evt.result得到返回值

 

接收过来的值要用 XML()进行转化 用 as 是不行的,会报错

 var myxml:XML=new XML()

 myxml=XML(evt.result) ;

 

 

二十、读取服务器文本文件,XML

var urlload :urlloader();

urlload.dataFormat=dataformat.varlables; -------------data为ojbect型

urload.load(new urlrequest("xxx.txt"))

 

调用 load()方法后,flash会读取URL的数据填充urlloader.data.完成后会发出 complete事件,此时设定处理函数来处理。loader.addeventlistener(Event.COMPLETE,处理函数)

 

处理函数写法

var loader:URLLoader=URLLoader(evt.target);

for (var i:string in loader.data)

{

xx=loader.data[i]

}

或者

function xmlLoaded(evtObj:Event){

myXML=XML(myLoader.data); 或者  var dataXML:XML = XML(event.target.data);

 

trace("数据装载完成.");

trace(myXML);

}

 

----如果知道名称,可以直接用

load.data.变量名

 

XML的读取直接设置 dataformat .Text ------------------ data为 string 类型

XMLLIST可以累加的

var xList:XMLList =myxml2.children()+myxml3.children()+myxml;

     

 

二十一、ShareObject

1、创建或打开共享对象

var exp:SharedObject =new ShareObject.getLocal("expm");

 

2、添加数据到LSO上

exp.data.变量="xxxx"

 

3、保存LSO到客户机上

var aa:string=exp.flush()

该方法出错可throw,但 shareobjectflashstatus.pending[即本机空间不够]和.flushed[用户没分配本地空间]不会抛出需判断

try{

}

 

4、从共享对象中读取数据

前提是打开了共享对象

if (exp.data.previouslyviewed) ---------如果是第一次读

else

{

exp.data.previouslyviewed=true

exp.flush();

}

 

5、删除整个共享对象

前提是打开了共享对象

exp.clear();

 

 

二十二、MENUBAR

如果只要显示一项用 <menu label="xx"> 其下是子节点就可以了

如果显示多个,则要用 xmllist ,最前最后要用 <> 和 </>

得到单击事件

if (event.item.@data != "top") {

 Alert.show("Label: " + event.item.@label

 

二十三、自定义格式化字符串

 

1、要导入 Formatter和SwitchSymbolFormatter类

2、类要继承于 Formatter

3、类的构造函数中要调用 super()

4、覆盖 override format()方法

 

使用

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

    xmlns:MyComp="*">

 

    <!-- Declare a formatter and specify formatting properties. -->

   

    <MyComp:SimpleFormatter id="upperFormat" myFormatString="upper" />

    <!-- Trigger the formatter while populating a string with data. -->

    <mx:TextInput id="myTI" />

   

    <mx:TextArea text="Your uppercase string is {upperFormat.format(myTI.text)}" />

 

</mx:Application>

 

二十四、自定义校验

1、定义

1>  导入.Validator 类的 validator 和 ValidationResult

2>  类要继承于 Validator

3> 类中定义一个数组供 doValidation()返回数组值   private var results:Array;

4> 构造函数中调用 super();

5> 覆盖 override doValidation():Array 方法

并定义如下代码:

            var fName:String = value.first;

            var mName:String = value.middle;

            var lName:String = value.last; 

 

            // 清除返回数组

            results = [];

 

            // 用父类产生的结果填充返回数组,如果父类调用的长度>0 ,就返回错误。

            results = super.doValidation(value);       

          if (results.length > 0) return results; 

            

        // 进行自己的判断。如果有错误,就用 push 压入数组。

        // Check first name field.

            if (fName == "" || fName == null) {

                results.push(new ValidationResult(true,

                    "first", "noFirstName", "No First Name."));

                return results;

            }

           

            // Check middle name field.            

            if (mName == "" || mName == null) {

                results.push(new ValidationResult(true,

                    "middle", "noMiddleName", "No Middle Name."));

                return results;

            }

 

 说明:ValidationResult说明如下:

ValidationResult(isError:Boolean, subField:String = "", errorCode:String = "", errorMessage:String = "")

results.push(new ValidationResult(true, null, "tooYoung", "You must be 18."));

 

 

2> 使用

MyComp:NameValidator id="nameVal"

        source="{person}" property="custName"

        listener="{firstInput}"/>  

   

    <mx:Button label="Validate" click="nameVal.validate();"/>

 

 

3>可以取代默认事件。

<mx:Validator id="reqValid" required="true"

        source="{fname}" property="text"

        valid="handleValid(event)" invalid="handleValid(event)"/>

 

private function handleValid(eventObj:ValidationResultEvent):void {

                if(eventObj.type==ValidationResultEvent.VALID)   

                      。。。。。。。。。

        else

                    submitButton.enabled = false;

            }

 

 

二十五、DataGrid过滤及排序

过滤在弹出窗口的回调函数中指定,arraycollection的filterfunc就可以了,此函数会循环DATAGRID的每一条记录,看是否返回满足条件,如果代码返回TRUE就表示满足过滤的条件

 

 

 

 

 

二十六、为自定义组件添加属性

[Inspectable(defaultValue="请在此指定图片")]

      public function set img_source(val:String):void {

        str_img = val;

          }

如果要得到属性定义一个 get 函数即可。

 

 

二十七、回调函数用法

回调函数用于一个窗口向另一个窗口传值。所以首先要将A窗口传给B窗口定义的一个 object对象,

使用步骤:

1、在被调用的窗口中声明。要传递的

public var mainApp:Object = null;

public var callbackFunction:Function;

  //调用父窗体的方法并以参数形式返回选择结果   

   callbackFunction.call(mainApp,str_chk);    

 

2、调用窗口

 msg.mainApp=this;

msg.callbackFunction = this.userchoose;  

 

二十八、ArrayCollection 中的记录发生改变时会触发CollectionEvent 事件.CollectionEventKind.ADD:等可以知道事件类型。如addItem等

这对数据源用数组绑定的很有用处。

 

 

 

二十九、Romoting与ASP.NET通讯

1、安装vs2005,flex3,fluorine

2、在VS2005新建 fluorine网站。

如果网站以后变动了位置,在项目的flex properties 在弹出的界面中左侧选择 Flex Server

修改右边的Root folder 和Root URL, 左侧选择 Flex Build Path 修改右边的 Output folder

3、.打开Flex 3,File-->New-->Flex Proje ),

Server technology 的Application Server Type选择CodeFusion之CodeFusion Flash Remoting,

在最后一步的Output Folder项, 将其指向.Net项目所在的文件夹下的Flex文件夹(如果不存在,创建它),单击 Finish

 

 

三十、用MX:filter指定的滤镜要放在组件之内,否则会影响整个程序。

 

三十一、使用自定义光标

1、嵌入准备做光标的图片

 [Embed(source="assets/hourglass.swf")]

public var HourGlassAnimation:Class;

 

2、添加光标

 CursorManager.setCursor(HourGlassAnimation);

 

3、删除光标

 CursorManager.setCursor(HourGlassAnimation);

 

 

 

三十二、类当参数传递的方法

private static var DEFAULT_TOOL:Class = LineTool;

LineTool 必须派生于 DrawingTool ,以便生成时有个类型撒

createTool(className:Class,event:MouseEvent):DrawingTool

var newClass:DrawingTool = new className();

 

三十三、springgraph 用法

1、声明引用自定义控件

xmlns:fc="com.adobe.flex.extras.controls.springgraph.*"

 

2、定义gp用于画图

 private var gp: Graph = new Graph();

 

3、设计界面加入主控件SpringGraph  

 <fc:SpringGraph id="s" itemRenderer="control.btnimg_see">

 并在 itemRenderer 中设定要画线的控件.

 或用:

<fc:itemRenderer>

    <mx:Component>

    <mx:VBox backgroundAlpha="0.3" backgroundColor="0x444444"

    paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">

    <mx:Label text="{data.id}" fontSize="{outerDocument.fontSizeSlider.value}"                      color="0xffffff" textAlign="center"/>           

     </mx:VBox>

   </mx:Component>

</fc:itemRenderer>

 

4、在按钮中生成新的item供加入.

private function newItem(name,title,x,y): void {

  var item: Item = new Item(new Number(++ic).toString());

 item.name = name;

 item.title = title;

 item.x = x;

 item.y = y;

gp.add(item);

prevItem = item;

s.dataProvider = gp;

}  

 

6、定义画线方法,去线方法

添加链接线     

private function linkItems(fromId: String, toId: String): void {

              var fromItem: Item = gp.find(fromId);

              var toItem: Item = gp.find(toId);

              gp.link(fromItem, toItem);

              s.dataProvider = gp;

}     

取消链线       

private function unlinkItems(fromId: String, toId: String): void {

              var fromItem: Item = gp.find(fromId);

              var toItem: Item = gp.find(toId);

              gp.unlink(fromItem, toItem);

              s.dataProvider = gp;

           }  

删除要链线的对象,其线也会消失。

           public function removeItem(id : String) : void {

              var item : Item = gp.find(id);

              gp.remove(item);

              s.dataProvider = gp;

           } 

 

 

7、在合适的事件中画线

    s.listenDrawLine();

    s.addEventListener(MouseEvent.CLICK,mouseDownListener);

 

8、进行处理。

private function mouseDownListener(e:MouseEvent):void

   {

      try {

        if(e.target.parent is Image) {

       if(pos==1) {

           arr[pos] = e.target.parent.name;

       Alert.show("è·è?á???£?","ìáê?",3,null,check,null,Alert.YES);

                      //CursorManager.removeCursor(cid);

                       }

                   else {

                       

                          arr[pos] = e.target.parent.name;

                           pos ++;

                      }

              }

        }

        catch(e) {}

        }

       

        private function check(e: CloseEvent) : void {

        if(e.detail == Alert.YES) {

               linkItems(arr[0],arr[1]);

           }

           pos = 0;

           s.removeEventListener(MouseEvent.CLICK,mouseDownListener);

           s.restoreLink();

        }

 

 

 

三十三、brokenImageSkin

图片无法加载时显示的图片

  <mx:Style>

        Image {

            brokenImageSkin: Embed("assets/flex_logo.jpg");

        }

    </mx:Style>

 

 

三十四、Ti

leList 中的数据源必须用  <mx:Model id 来加载 xml文件

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多