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