flex的组件及基础知识

1、冒泡排序：
private function maoPaoSort(arr:Array):Array
{
var max:Number = 0;
var key:Number = 0;
var newArr:Array = new Array();
for (var i:Number = 0; i <= arr.length; i++)
{
if (i == arr.length)
{
if (i == 0)
{
break;
}
newArr.push(arr[key]);
arr.splice(key, 1);
i = 0;
max = 0;
key = 0;
}
if (arr.length > 0)
{
if (max < arr[i]['level'])
{
max = arr[i]['level'];
key = i;
}
}else
{
break;
}
}
return newArr;
}

2、undefined未定义过的变量或对象；
null没有被赋值或创建的变量或对象;
3、获取combox（下拉框）的值
public var cards:ArrayCollection = new ArrayCollection(
[ {label:"Visa", data:1},
{label:"MasterCard", data:2},
{label:"American Express", data:3} ]);
ComboBox(event.target).selectedItem.**(label);
4、日期组件：
DateChooser：
<mx:DateChooser id="dateChooser1" yearNavigationEnabled="true" height="145"
change="displayDate(DateChooser(event.target).selectedDate)" color="0x000000"/>
DateField：
<mx:DateField id="dateField1" yearNavigationEnabled="true"
change="dateChanged(DateField(event.target).selectedDate)" color="0x000000"/>
5、 text与htmlText的区别：
private var htmlData:String="<br>This label displays <b>bold</b> and <i>italic</i> HTML-formatted text.";
simpleLabel.htmlText= htmlData;//不会显示html标签
simpleLabel.text= htmlData;//只显示字符串内容
6、NumericStepper（上下改变数值的大小）
<mx:VBox horizontalAlign="center" color="0x323232">
<mx:NumericStepper id="bb" minimum="0" maximum="10" stepSize="2" value="6"/>
</mx:VBox>
7、文本编辑器：
<mx:RichTextEditor titleStyleName="white" id="rte" title="RichTextEditor" width="70%" height="150"
borderAlpha="0.15" creationComplete="rte.htmlText=richText;" />

8、TextArea
<mx:TextArea width="400" height="60" color="0x323232">
<mx:text>
This is a multiline, editable TextArea control. If you need
</mx:text>
</mx:TextArea>
9、按钮
<mx:Button id="skinnedButton" label="Skinned Button" width="150" upSkin="@Embed('assets/btn_up.png')"
overSkin="@Embed('assets/btn_over.png')" downSkin="@Embed('assets/btn_down.png')"
focusSkin="@Embed('assets/btn_focus.png')" disabledSkin="@Embed('assets/btn_disabled.png')"
color="0x323232" textRollOverColor="0xffffff" textSelectedColor="0xffffff" paddingLeft="20"
click="{Alert.show('Skinned Button Pressed');}" />
10、空行
<mx:Spacer height="65" />
11、LinkBar
<mx:Panel title="LinkBar Control" layout="vertical" color="0xffffff" borderAlpha="0.15" height="240" width="550"
paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
<mx:LinkBar color="0x0050AA" horizontalAlign="center" width="100%" fontWeight="bold" dataProvider="{myViewStack}" borderColor="0xACACAC" borderStyle="solid"/>
<!-- Define the ViewStack and the three child containers -->
<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232">

<mx:VBox id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
<mx:Label text="Search Panel" width="100%" textAlign="center" paddingTop="10" />
<mx:HBox width="100%" horizontalAlign="center" >
<mx:TextInput id="Searchtxt" width="200" />
<mx:Button label="search" click="Searchtxt.text=''" />
</mx:HBox>
</mx:VBox>
.........
</mx:ViewStack>
</mx:Panel>
12、List拉菜单
<mx:Model id="mystates">
<states>
<state label="Alabama" data="AL"/>
<state label="Alaska" data="AK"/>
<state label="Arizona" data="AZ"/>
<state label="Arkansas" data="AR"/>
<state label="California" data="CA"/>
<state label="Colorado" data="CO"/>
<state label="Connecticut" data="CT"/>
</states>
</mx:Model>
<mx:List id="source" width="100" color="0x0050AA" dataProvider="{mystates.state}" height="120"
change="this.selectedItem=List(event.target).selectedItem" />
13、HorizontalList 把图片横着排
<mx:HorizontalList id="CameraSelection" height="170" color="0x323232" columnWidth="126" columnCount="3" >
<mx:dataProvider>
<mx:Array>
<mx:Object label="Backpack" icon="@Embed('images/backpack.jpg')"/>
<mx:Object label="Compass" icon="@Embed('images/compass.jpg')"/>
<mx:Object label="Goggles" icon="@Embed('images/goggles.jpg')"/>
<mx:Object label="Boots" icon="@Embed('images/boots.jpg')"/>
<mx:Object label="Helmet" icon="@Embed('images/helmet.jpg')"/>
</mx:Array>
</mx:dataProvider>
</mx:HorizontalList>
14、tree 树状节点
<mx:Script>
<![CDATA[

[Bindable]
public var selectedNode:XML;
public function treeChanged(event:Event):void {
selectedNode=Tree(event.target).selectedItem as XML;
}
]]>
</mx:Script>

<mx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management"/>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
</node>
</mx:XMLList>
<mx:Panel title="Tree Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500"
paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">

<mx:Label width="100%" color="0x323232"
text="Select a node in the Tree control."/>
<mx:HDividedBox width="100%" height="100%" color="0x323232">
<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
<mx:TextArea height="100%" width="50%"
text="Selected Item: {selectedNode.@label}"/>
</mx:HDividedBox>

</mx:Panel>
15、颜色库
<mx:Label width="100%" color="0x000000"
text="Select the background color of the VBox container."/>
<mx:ColorPicker id="cp" showTextField="true" selectedColor="0xFFFFFF"/>
<mx:VBox width="100%" height="100%" backgroundColor="{cp.selectedColor}" borderStyle="solid"/>
16、缩小放大（带有滑动条）
<mx:Script >
<![CDATA[
private var imageWidth:Number = 0;
private var imageHeight:Number = 0;
private function changeSize():void
{
boxImage.width = (imageWidth*hSlider.value)/100;
boxImage.height = (imageHeight*hSlider.value)/100;
}
private function smoothImage(ev:Event):void{
//set image smoothing so image looks better when transformed.
var bmp:Bitmap = ev.target.content as Bitmap;
bmp.smoothing = true;

imageWidth=boxImage.width;
imageHeight=boxImage.height;
}
]]>
</mx:Script>
<mx:Style>
HSlider{
color:#323232;
}
</mx:Style>

<mx:Panel title="HSlider Control" layout="vertical" height="240" color="0xffffff" borderAlpha="0.15" horizontalScrollPolicy="off"
verticalScrollPolicy="off" paddingTop="2" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" verticalAlign="bottom">

<mx:Image id="boxImage" source="@Embed('images/backpack.jpg')" creationComplete="smoothImage(event);" />

<mx:Label width="100%" color="0x323232"
text="Drag the slider to resize the image."/>

<mx:HSlider id="hSlider" minimum="10" maximum="100" value="100" dataTipPlacement="top" tickColor="0x323232"
snapInterval="1" tickInterval="10" labels="['10%','100%']" allowTrackClick="true"
liveDragging="true" change="changeSize()" />

</mx:Panel>
17、进度条：
labelPlacement//放置标签的位置（top、bottom）

<mx:Script>
<![CDATA[

private var j:uint=10;

// Event handler function to set the value of the
// ProgressBar control.
private function runit():void
{
if(j<=100)
{
bar.setProgress(j,100);
bar.label= "CurrentProgress" + " " + j + "%";
j+=10;
}
if(j>100)
{
j=0;
}
}
]]>
</mx:Script>

<mx:Panel title="ProgressBar Control" layout="vertical" color="0xffffff" borderAlpha="0.15"
paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">

<mx:Label width="100%" color="0x323232"
text="Click the button to increment the progress bar." />
<mx:Button id="Speed" label="Run" click="runit();" color="0x323232"/>

<mx:ProgressBar id="bar" labelPlacement="bottom" themeColor="#EE1122" minimum="0" visible="true" maximum="100"
color="0x323232" label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/>

</mx:Panel>
18、表格
<mx:Label width="100%" color="0x323232" textAlign="center"
text="A 2 by 1 Grid container of Button controls."/>

<mx:Grid color="0x707070" verticalGap="10" horizontalGap="10">
<mx:GridRow>
<mx:GridItem>
<mx:Button label="Row 1 Col 1" width="100"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Button label="Row 2 Col 1" width="100"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>