Flex开发总结--->完善中

                                                                Flex开发总结

  1、  介绍：虽然我们对java，js，html都很熟悉了，但是flex还是有很多地方需要我们注意，以免遇到问题就纠结半天，时间就白白浪费了，我将我在开发中遇到的技术点，易错点，常用点全部记录下来，这需要一个过程了，大家看了博客后有什么技术点可以留言，希望能越来越完善分享给大家。有什么问题可以加下面QQ:

Java-QQ群：180258862； 

2、tree:实现数据绑定，默认选中菜单，自动展开菜单

    <fx:XML id="dp">
<root>
<node label="环保局">
<node label="环境监测部" >
<node label="陈" />
</node>
<node label="环境统计部">
<node label="张" />
<node label="钟" />
</node>
<node label="环境监察部">
<node label="霍" />
<node label="徐" />
</node>
</node>
</root>
</fx:XML>

<mx:Tree x="0" y="52" width="100%" height="100%" id="trees" dataProvider="{dp}" selectedIndex="0" openItems="{dp.node[0]}"
showRoot="false" labelField="@label"  useRollOver="true"   verticalAlign="top"></mx:Tree>

 

3、combox数据绑定：
     private var dp:ArrayCollection = new ArrayCollection([{cmbx_lblfield:"许爱你"},{cmbx_lblfield:"小名"}]);

        dp.addItem({cmbx_lblfield:"动态添加数据"});

 <mx:ComboBox  width="106" id="nd" dataProvider="{dp}" selectedIndex="4" labelField="cmbx_field" ></mx:ComboBox>

4、获取浏览器的高度和宽度：

          this.stage.stageWidth;

           this.stage.stageHeight;

5、Alert点击了取消按钮还是确定按钮，如果是确定按钮就触发事件：

      private  function  alt():void{

          Alert.show("确定提交吗？","系统提示",Alert.OK|Alert.NO,this,method);

    }

  private function method(e:CloseEvent):void{

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

            ｝

     }

6、打开一个界面并居中显示：

    var scu:titlewindow=new titlewindow();
    scu.x = (this.stage.stageWidth-scu.width)/2;
    scu.y = (this.stage.stageHeight-scu.height)/2;
    PopUpManager.addPopUp(scu,this,true);

7、日期选择器(支持中文、年份选择)：

<mx:DateField  id="date" yearNavigationEnabled=true formatString="YYYY-MM-DD" dayNames="[日,一,二,三,四,五,六]"  monthNames="[一,二,三,四,五,六,七,八,九,十,十一,十二]" />

8、双击事件的实现：

   btn.doubleClickEnabled = true;
   btn.addEventListener(MouseEvent.DOUBLE_CLICK,double_grid);

<mx:button id="btn" >

  9、2个界面数据交互：

  界面一代码Page1.mxml：

private  var xzqdm:Page2= null;
   private function select_Page2():void
   {
       xzqdm = new Page2();
       xzqdm.x = (this.stage.stageWidth-xzqdm.width)/2;
       xzqdm.y = (this.stage.stageHeight-xzqdm.height)/2;
       xzqdm.addEventListener("clickXzqdm",getParam);
       PopUpManager.addPopUp(xzqdm,this,true);
   }
   public function getParam(e:Event):void
   {
     var result:String = xzqdm.abc;
   }

 

 界面二代码Page2.mxml：

 private var abc:String="你好";

   private function double_grid(event:MouseEvent)
     {
      var outgoingEvent:Event = new Event("clickXzqdm", true);
      dispatchEvent(outgoingEvent);
      PopUpManager.removePopUp(this);
     }

 10、界面布局：使用vbox和hbox布局。

11、得到datagrid表格选中的值：

var str:String = this.dg.selectedItem["NAME"].toString();

<mx:DataGrid width="100%" height="100%" id="dg" dataProvider="{pageList}" click="dg_click()">
  <mx:columns>
   <mx:DataGridColumn headerText="姓名" dataField="NAME"/>
 </mx:DataGrid>

12、加载xml文件：

<mx:XML xmlns="" id="dataProviderXML" source="chinaArea.xml" />

13、函数初始化：

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  width="932" height="1710" creationComplete="init()" >

<mx:Script>
 <![CDATA[

 private function init():void{

  Alert.show("初始化");
     }

 ]]>
</mx:Script>

</mx:TitleWindow/>

14、Java中的集合和flex中的集合互相转换

flex中的键值集合:  var whereValue:Object = new Object();  whereValue={CODE:“你好”};

java中的键值集合:   Map<String, String> where = new HashMap<String, String>（）;

如果Java中的函数参数是map对象，在flex中直接传Object的键值格式给Java就行。

flex中的Array数组：var arr:Array =["Java","flex"];

java中的数组:  String[] str = ["java",,"felx"];

如果Java函数返回值是string[],那么在flex中用获取

private function getZiDuan(event:ResultEvent):void
   {
       var arr:Array =  event.result as Array;
           for(var c:int=0;arr.length>c;c++){
          try{ 
            var str:String = arr[c].toString();
          }catch(e:Error){
           continue;
          }
          } 

  }

15、flex中的异常处理机制try{}catch(){}: 

private function getZiDuan():void
   { try{var str:String = null;}catch(e:Error){Alert.show(e.message); }   }

16、获取ID2中方法：

this["txt_nihao"].text = "你好";  //动态给不确定的id赋值

txt_nihao.text="你好";//给固定的id赋值

<mx:TextInput id="txt_nihao"/>

17、flex和Java交互Ablanzd：

  <mx:RemoteObject id="simpleService" destination="SimpleService">
         <mx:method name="select" concurrency="last"  result="select_result(event)" fault="fault_result(event)"/>
</mx:RemoteObject>

private  function fault_result(event:FaultEvent):void
    {
       Alert.show("连接到服务器出现异常!"+event.result);
    }

private function getZiDuan(event:ResultEvent):void
   {
      var arr:Array=  event.result as Array;
  
   }

  private function init():void{
       simpleService.method("你好");  //method是Java中的方法
     }

<mx:button  click="init()" label="点击"/>

18、反射，将从数据中获取的值绑定到多文本框，请慢慢看下下面代码，非常有用的；

注意：文本框的id必须要有相应规律，比如id="txt_数据库字段名_阿拉伯数字"：

//columnValue要比对的值，resultArr数据库中的值（对应Java中的格式List<Map<String, Object>>）

 private function getProperty(columnValue:String,resultArr:ArrayCollection):String{ //如果返回值是result变量，那么string可以改成Object
           var result:Object=null;
           var temp:Object =null;
           for(var i:int=0;i<resultArr.length;i++){
            temp=resultArr[i];
            if( temp["CODE"]==columnValue){//CODE是数据库表的字段
             result=temp;
             break;
            }
           }
           return result["NAME"]; //获取到数据库中Name字段的值
          } 

//result是数组，temps是id编号(id='txt_1',id="txt_2",那么temps可以等于1或者2)

  private function setProperty(result:Object,temps:String):void{
       var tInput:TextInput=null;
      var temp:String="";
      for each(var columnName:String in array_columnName){
       try{
        tInput=this[columnName+"_"+temps];
       }catch(e:Error) {
        continue;
       }
       temp=result[columnName];
       if(tInput==null){
       }else{
       if(temp==null){
       }else{
        tInput.text=temp;
       }
      }
     }
    }
var resultObjectG1:Object=this.getProperty("G1","1",result_data);var resultObjectG1:Object=this.getProperty("G1","1",result_data);var resultObjectG1:Object=this.getProperty("G1","1",result_data);var resultObjectG1:Object=this.getProperty("G1","你好",result_data);//result_data 是数据库中获取的多行数据，G1是数据库表字段名，得到G1="你好"的数据

this.setProperty(resultObjectG1,“id”);//绑定数据

19、移除DataGrid的行：

 for(var a:int=4; 10>a;a++){ //假设有10行
            this.grid.removeChildAt(4);  //每次移除第5行；不能写成this.grid.removeChildAt(a);
        }

 20、<flexlib:TreeGrid>运用：这是google的一个框架；在开发中运用多。

<mx:XML xmlns="" id="dataProviderXML" source="cqtk/wp/chinaArea.xml" />

 <flexlib:TreeGrid
   openItems="{dataProviderXML.node[0]}"
   itemClick="treegridItemClickHandler(event)"
   styleName="datagridStyle"
   headerStyleName="dataGridHeader"
   width="100%" height="100%"
   dataProvider="{ dataProviderXML }"
   paddingLeft="25"
   verticalTrunks="normal"
   rowHeight="30"
    showRoot="false"
   disclosureClosedIcon="@Embed(source='cqtk/wp/image/tree_openNode.png')"
   disclosureOpenIcon="@Embed(source='cqtk/wp/image/tree_closeNode.png')"
   folderClosedIcon="@Embed(source='cqtk/wp/image/status.png')"
   folderOpenIcon="@Embed(source='cqtk/wp/image/status.png')"
   id="grid_xzq"> 
   <flexlib:columns>
    <flexlib:TreeGridColumn dataField="@name" headerText="行政区名称" />
    <mx:DataGridColumn dataField="@id" headerText="行政区代码" />
   </flexlib:columns>
   
  </flexlib:TreeGrid>

21、加载配置文件：

private var currentNode:XML ;

 private function init_chinaArea_xml():void
   {
       var url:URLRequest = new URLRequest("cqtk/wp/chinaArea.xml");
       var loader:URLLoader = new URLLoader();
       loader.addEventListener(Event.COMPLETE,xml_complete);
       loader.load(url);
  
   }
   private function xml_complete(event:Event):void
   {
     var result:URLLoader = URLLoader(event.target);
     areaDatas = XML(result.data)
   }

 22、flex图片根据浏览器大小自动适应：

  <mx:Image source="@Embed(source='wawaw.jpg')" width="100%" height="100%" id="top_image" scaleContent="true" maintainAspectRatio="false" />

 23、非常不错的flex实例网站：

       A.  http://blog.minidx.com/2008/03/23/626.html (flex事例网站)

       B. 中国开源社区

      C.http://resources.esri.com/help/9.3/arcgisserver/apis/flex/samples/index.html   在线arcGis for flex API

      D.Flex样式生成工具.swf

24、常用的flex第三方组建：

     agslib-1.3-2009-10-31.swc   用于mapArcgis for flex3.0开发      

    flex3d.swc ，CoverFlow_lib.swc   第3方特效，一般用于相册

     flexiframe.swc  flex框架，可以支持html文件引用

     FlexPaper.swc   文档在线浏览

     pageGrid.swc   用于dategrid表格分页，自动分页，不用自己去分页了

    IConUtility.as  用于加载图片，可以到百度下载该文件。（原来用法：[Embed(source="1.png")] private var myicon:Class;）

                              （现在用法：var Button btns = new Buttons; btns.setStyle("icon", IconUtility.getClass(btns, "1.png", 40, 40));）

25、eclipse的flex代码格式化工具：FlexPrettyPrintCommand_0.9.0

26、flex中Image对象无法加载中文路径：从数据库中获取的图片路径在Image对象中无法显示，调试了很久，发现不支持中文路径

     var img:Image = new Image();

    //第一种加载图片路径(中文路径); 中文路径下，图片不能显示

   //img.source="image/图片.png";

  //第二种用英文路径;

   img.source="image/image.png";

提示：flex中最好不要用中文路径，这样会导致图片无法正确显示