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