flex 学习小思想

 最近由于项目需要，学习了一下flex，写片博客总结下：
1、flex布局hbox、vbox，不仅是布局的容器，还是填充空间的好东西。灵活运用可以将这两个小小的东西做成很多东西，就如进度条，可以用两个box填充不同背景色，动态设置width轻松搞定。再就是标题的分割线同样设置height="2"，width="100%"就行。作为容器可以verticalAlign和horizontalAlign分别设置垂直和水平方向上的对齐方式。

2、想要实现组件漂浮效果怎么办，动态计算x，y。在flex中要实现组件的叠放要么弹窗要么就用绝对布局（layerout="absolut"），而application和pannel可以用绝对布局。一般用pannel在application下实现，或在application中直接实现。下面代码为在datagrid某列添加进度条显示数据，该列的绑定属性为rate（小于一的数）。
<mx:itemRenderer>

<mx:Component>

<mx:HBox width="100%"  horizontalscrollpolicy="off">

<mx:Script>

<![DATA[

import mx.events.FlexEvents

public function dataFormat(data:Number):String

{

var str:String = ""+(data*100).toFixed(2)+"%";

return str;

}

public function barWrite(data:Number):Number

{

var num:Number = data*600;

return num;

}]]>

</mx:Script>

<mx:HBox width="600" paddingTop="3" paddingBottom="3" id="bar" height="26" backgroundColor="#F0F0F0">

<mx:HBox width="{barWrite(data.rate)}" backgroundColor="#91C73D" height="22" paddingBottom="2" paddingTop="2"/>

</mx:HBox>

<mx:label text="{dataFormat(data.rate)}" width="5%"/>

</mx:HBox>

</mx:Component>

</mx:itemRender>

3、小的动画制作，将某个属性绑定到播放器，使其变化从开始值到最终值有一个变化的过程，即增加一个渐变的时间段。下面是一个HBox高度的变化代码示例：

var ap:AnimateProperty = new AnimateProperty();

ap.target = this.rontBox;

ap.property = "height";

ap.fromValue = this.frontBox.height;

ap.toValue = tempFrontHeight;

ap.play();

4、在datagrid中有某一列的数据显示要加上单位，或者19990908要显示成1999-09-08的形式怎么办，这就需要自己定义这一列的lableFunction了，下面就是我自己定义的一个lableFunction：

public function formatDate(item:Object, column:DataFridColumn):String

{

var str:String = item.starihour as String;

if(csi.length==2)

{

return str+"时";

}

return str+"天";

}