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

最新推荐文章于 2017-12-16 23:33:18 发布

sencerity

最新推荐文章于 2017-12-16 23:33:18 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/ml5271169588/article/details/8972941

版权

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中最好不要用中文路径，这样会导致图片无法正确显示

sencerity

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
Flex开发总结--->完善中

Flex开发总结 1、介绍：突然接触到flex发现代码及像java又像js又像html，倒不如说java+js+html=flex;虽然我们对java，js，html都很熟悉了，但是flex还是有很多地方需要我们注意，以免遇到问题就纠结半天，时间就白白浪费了，从现在开始我将我在开发中遇到的技术点，易错点，常用点全部记录下来，这需要一个过程了，大家看了博客后有什么技术点可以留言，希望能越来
复制链接

扫一扫