Flex基本控件總結
一、flex控件的分類:文本控件(text controls)、數據源控件(data provider controls)、菜單控件 (menu controls)、按鈕控件(button controls)、Flex控件(flex controls)、容器控件。
二、 文本控件
a) 標簽(Label):標簽:<mx:Label/>
- 標簽控件的特性:
- 用戶不能編輯文本,但程序可以改變它。
- 可以使用HTML格式定義文本。
- 可以控制對齊和改變大小。
- 可以定義標簽的背景為透明,這樣就可以看見容器的背景。
- 標簽控件沒有邊界,就像文本直接寫在背景上。
- 例如:<mx:Label id="lblLable" Text="標簽">.
- Label組件支持html標記。如果在標簽內容中包含html特殊標記,需要使用轉換字符:
例如,在標簽中顯示<符號
<mx:Label text="<<Prev" />
b) 文本(Text):標簽:<mx:Text/>
- 特性:
- 用戶不能編輯文本,但程序可以改變它。
- 控件不支持滾動條。
- 支持HTML格式定義文本。
- 默認的大小足夠顯示文本。
- 文本背景為透明,這樣就可以看見容器的背景。
- 文本控件沒有邊界,就像文本直接寫在背景上。
- 文本在邊界會自動轉行,而且文本總是排列在文本控件頂部。
- <mx:Text><mx:text>文本內容</mx:text></mx:Text>
c) 文本條(TextInput):標簽:<mx:TextInput/>
- 事件:change、enter。
- 屬性:editable:是否阻止對文本的編輯,false為是。
displayAsPassword:將輸入的字符顯示為*。
將一個變量綁定在文本條上:<mx:TextInput Text="{myInputText}"/>.
restrict(約束、限定):(此輸入可省去驗證的麻煩)
例如<mx:TextInput id="txt" restrict="0-9">,表示輸入框只能輸入0到9之間的數字。
maxChars:限定輸入的做多字符.
例如<mx:TextInput id="txt" maxChars="20">,標識輸入的字符不能超過20個。
d) 文本區域(TextArea):標簽:<mx:TextArea/>
- 特性:
- 文本可以被編輯。
- 可以可以具有滾動條。
- 支持HTM文本和富文本。
- 可以觸發change事件。
- 可定義文本區域控件為禁用狀態。
- 可定義為只讀屬性。
- 可使用displayAsPassword屬性將文本顯示為*。
- 文本區域控件的字符串最大長度為37440個字符。
- 如果文本超過界限,同時horizontalScrollPolicy屬性設置為true時,就會出現滾動條。
- 例如:
<mx:TextArea id="tarEdit" text="文本區域控件內容">
e) 富文本區域(RichTextArea):標簽:<mx:RichTextEditor/>
- 包含2個子控件:
- 文本區域,用來輸入文字。
- 工具條,包含了各類控件,用來改變文本特性。
- 富文本編輯器控件可以幫助用戶定義文本具有不同的字體、顏色、風格、文本的對正、列表或者URL超鏈接等。
- 例如:<mx:RichTextEditor id="rte" title="富文本編輯器" text="輸入富文本的內容">
三、數據源控件
a) 數據表格(DataGrid):標簽:<mx:DataGrid/>。
- 是一個可以展示多列數據的列表控件。是一個格式化的數據表格,可以設置可編輯的單元格,是許多數據驅動應用的基礎。
- 特性:
- 可改變大小;可以排序;用戶定義行列的布局,包括隱藏某一列。
- 可選自定義的行和列的標題頭。
- 用戶可以動態改變列的大小和排序。
- 多種模式的選擇(行、列、單元格)和編輯及選擇事件。
- 可以在一個單元格使用自定義組件。
- 支持數據翻頁。
- 鎖定不能滾動的行和列。
- 屬性:
- sorttableColumns:設置為false時,將關閉所有的列排序功能。
- sorttable:設置為false時,該列將關閉排序功能。
- showDataTips:設置為true時,浮現出提示信息。
b) 樹 (Tree):標簽:<mx:Tree/>。
- 樹結構控件是一個分支和葉節點的繼承結構。
- 樹中的每一項稱為節點,節點可以是根節點、分支節點和葉節點,根節點可以包含分支節點和葉節點,分支節點也可包含子分支節點和葉節點,而葉節點則是樹的一個末端點。
- 常用事件:change。
- 方法:
- addTreeNode():向tree添加節點。
- addTreeNodeAt():在tree的特定位置添加節點。
- getDisplayIndex():返回給定節點的顯示索引
- getIsOpen():指定節點是打開還是關閉。
- getNodeDisplayedAt():將tree的某個顯示索引映射到在給索引出顯示的節點。
- getTreeNodeAt():返回在樹的根上的節點。
- "refresh"():更新樹。
- removeAll():從tree中刪除所有的節點並刷新tree。
- setIcon():為指定的節點設置圖標。
四、菜單控件
a) 菜單(Menu):
- 菜單控件只能在ActionScript代碼中定義。
- 通過用戶的行為來觸發,彈出菜單項。
- 不具有MXML標簽。
- 當菜單打開后就處於可視狀態,除非用戶選擇了其中一項,或者選擇了其他的組建或者用一個腳本(script)腳本程序關閉了菜單。
- createMenu():創建menu對象
- 數據源:Xml、arrayList、model、XmlListCollection。
b) 菜單條(MenuBar):標簽:<mx:MenuBar/>
- 菜單條中控件中的每一項都可以彈出子菜單。
- 菜單條控件的數據從數據源中獲得。
- 菜單條總保持可視狀態,是一個靜態的控件。
- 菜單條可以在MXML中實現。
c) 彈出菜單按鈕(PopUpMenuButton):標簽:<mx:PopUpMenuButton/>
- 當用戶單擊彈出按鈕,並在彈出菜單中選擇了某個菜單項后,主按鈕就會顯示所選菜單項的標簽和圖像。
- 彈出菜單按鈕控件只支持單級的菜單,如果選擇了菜單的子菜單,主按鈕上的標簽或圖標將不會改變。
- 彈出菜單的工作流程:
- 單擊下的彈出按鈕,即有向下箭頭圖標的彈出按鈕后,控件在按鈕下面顯示彈出菜單。
- 選擇某一菜單項,改變主按鈕的標簽(不包括菜單中的所有子菜單項)。同時觸發MenuEvent.CHANGE事件。
- 單擊主按鈕,觸發MenuEvent.CHANGE事件和MouseEvent.CLICKS事件。
- 常用事件:itemClick。
- 常用屬性:
- dataProvider:數據源。
- iconField:要為每個菜單項顯示的圖標。
- labelFiled:要為每個菜單項顯示的文本。
- 例如:
<mx:PopUpMenuButton id="popbtn" dataProvider="{數據源}" labelField="@數據源中的label" itemClick="事件"/>
五、按鈕控件
a) 按鈕(Button):標簽<mx:Button>
- 常用事件:click(單擊)、buttonDown(按鈕按下)。
- 常用狀態:up(鼠標不在按鈕上,即按鈕的原始狀態)、down(鼠標按下)、over(鼠標放在按鈕上方)、Disable(按鈕處於禁用狀態)。
- 常用的屬性和方法:
- Emphasized:獲取或設置一個布爾值,指示當按鈕處於彈起狀態時,button組建周圍是否繪有邊框,默認為false。-屬性
- Label:按鈕上顯示的文本。-屬性
- Icon:按鈕顯示的圖標。-屬性
- Click:按鈕的監聽單擊事件的方法。其實事件:mouseMove、mouseOver、mouseOut、rollOver、rollOut、mouseDown和mouseUp。
- 例如:<mx:Button id=" btonButton" lable="按鈕" color=" red" width="100" icon="@Embed('image/eek.gif')" overIcon="@Embed('image/eek_over.gof')" downIcon="@Embed('image/eek_down.gif')" />。
b) 彈出按鈕控件(PopUpButtonControl):標簽<mx:PopUpButton/>
- 常用事件:itemclick(選項單擊事件).
- 初始化菜單函數:initMenu()。
- 例如:
定義控件:<mx:PopUpButton id="popB" creationComplete="initMenu();" />
初始化菜單:
import mx.control.*;
import mx.events.*;
private var myMenu:Menu;
private function initMenu():void{
myMenu =new Menui();
var dp:Object=[{label:"目錄1"},{label:"目錄2"},{label,"目錄3"}];
myMenu.dataProvider=dp;
myMenu.selectedIndex=0;
popB.popUp=myMenu;
popB.label="點擊彈出按鈕";
}
c) 按鈕條(ButtonBar):標簽:<mx:ButtonBar/>
- 常用事件:itemClick。
- 整個控件只有一個單一的監聽事件(itemClick),當某個按鈕被選擇時,此事件被觸發。
d) 鏈接按鈕(LinkButton):標簽:<mx:LinkButton/>
- 常用事件:click。
- 例如:
<mx:LinkButton label="連接1" click="viewStack.selectedIndex=0"/>
e) 鏈接條(LinkBar):標簽:<mx:LinkBar/>
- 常用事件:itemClick。
- 可通過<mx:datProvider>標簽將數據傳遞到linkBar控件上。
- 可使用addItem()和removeItem()方法來操作dataProvider屬性。
- 常用屬性和事件:
- dataProvder:數據源 -屬性
- separatorColor:設置分隔符的顏色 -屬性
- Direction:水平或垂直顯示 -屬性
- verticalGap:間隔的寬度,范圍“0-20” -屬性
- itemClick:點擊控件中的選項引發 -事件
f) 復選框(CheckBox):標簽:<mx:CheckBox/>
- 常用事件:click。
- 常用狀態:未選、被選、禁用、激活。
- 標識為被選擇,返回true;標識為未被選擇,返回false。
- checkBox沒有屬性值value,無法獲取。
g) 單選按鈕(RadioButton):標簽:<mx:RadioButton/>
- 常用事件:click。
- 當選按鈕是成組使用的,每一組選項都具有相同的組名。
- 每次只能選擇一個選項,當選擇了一個未選項,當前被選項就變成未選項。
- 常用屬性:
- Selected:true為已選定。
- 例如:
<mx:RadioButton groupName="amount" id="option1"/>
<mx:RadioButton groupName="amount" id="option2"/>
h) 單選按鈕組(RadioButtonGroup):標簽:<mx:RadioButtonGroup/>
- 常用事件:itemClick。
- 例如:
<mx:RadioButtonGroup id="amount" itemClick="handleBtn(event)"/>
<mx:RadioButton groupName="amount" id="option1"/>
<mx:RadioButton groupName="amount" id="option2"/>
- 遍歷radiobuttongroup中的radiobutton控件:
例:
private function foreachGroup():void{
var arr:Array=[];
var rb:RadioButton;
var idx:int;
var len:int=radioGroup.numRadioButton;
for(idx=0;i<len;i++){
rb=radioGroup.getRadioButtonAt(idx);
arr.push("index:"+idx+",label:"+rb.label);
}
Alert.show(arr.join("\n"));
}
i) 開關按鈕條(ToggleButtonBar):標簽:</mx:ToggleButtonBar>
- 常用事件:
- itemClick。
- 使用addItem()和removeItem()等方法處理dataprovider屬性,用於添加或刪除button控件。
- 常用屬性:
- toggleOnClick:如果設置為true,則選擇當前選中的按鈕將取消其選中狀態。
- 在整個控件中,只能保持一個按鈕為被按下的狀態。當單擊其他按鈕時,當前被按下的按鈕就會恢復正常狀態,而新單擊的按鈕則保持按下的狀態。
- 與“按鈕條”區分:電風扇的1、2、3擋的按下事件。
六、Flex控件
a) 警告(Alert):
- 調用靜態的show()方法來彈出一個對話窗口。
- 警告控件在其對話窗口中具有標題、按鈕和圖標。
- Show()方法的變量:
- 文本(text):對話窗口中的文本。
- 題目(title):對話窗口標題。
- 標記(flags):定義按鈕的種類,包含OK、Yes、No、CANCEL。
- 父類(parent):父類對象。
- 單擊監聽(clickListener):對按鈕單擊的監聽。
- 圖標類(iconClass):在信息文本的左邊定義一個圖標。
- 默認按鈕(defaultButton):定義一個默認的按鈕。默認值為OK按鈕。
b) 下拉列表(ComboBox):標簽:<mx:ComboBox/>.
- 常用事件:
- Close():隱藏下拉列表。
- Open():顯示下拉列表。
- Change():當下拉框項目更改是發生。
- 常用屬性:
- editable:當此屬性為true時,可以在下拉列表頂部直接輸入文本;當此屬性為false,輸入文本時,控件將會自動查找最接近輸入文本的列表項。
- Dataprovider:數據源。
- labelFileld:在下拉列表中顯示的標簽。
- rowCount:控件列表中可見行數的最大數目。
- selectedIndex:下拉列表中所選項目的索引。
- selectedItem:對dataprovider中所選項目的引用。
- 例如:<mx:ComboBox close="selectedItem=ComboBox(event.target).selectedItem" editable="true"/>
- 如下:變量selectedItem是用於下拉列表和標簽上的變量,定義了當前所選擇的列表項。
[Bindable]public var selectedItem:Object;
c) 選色器(ColorPicker):標簽:<mx:ColorPicker/>。
- 初始化為小方框,底色為已選擇的顏色。
- 屬性:
- showTextField:默認為true,用來在一個文本條中顯示所選擇顏色的標簽。
- Editable:設置為true,則用戶可輸入自己所需要顏色的十六進制值。
- selectedColor:初始化所選的顏色。
- selectedIndex:所選項目的索引
- 方法:
- Close():隱藏樣本面板。
- Open():顯示樣本面板。
- Change():所選顏色由於用戶交互操作而發生更改。
- 自定義調色板的注意事項:
- 1. 所顯示的顏色,要定義調色板中的顏色。
- 2. 文本條中的標簽,如果不定義標簽,則顯示十六進制值。
- 3. 每種顏色的信息。
d) 日期選擇器(DataChooser):標簽:<mx:DataChooser/>。
- 日期選擇器控件的界面是一個日歷,其中顯示了月份、年份和柵格中的日期以及星期標簽。
- 用戶可以選擇單個的日期。
- 日期選擇器控件可以改變大小以容納改變日期的格式,可以顯示日期的全名。
- 事件:change
- 屬性:yearNavigationEnabled:年份更改。
e) 日期條(DataField):標簽:<mx:DataField/>.
- 日期條控件是由一個文本條和文本條右邊一個日歷的圖標組成。
- 單擊日期控件的任何一部分都會彈出一個日期選器。
- 日期條控件是日期選擇器控件的超集。
f) 水平列表(HorizontalList):標簽:<mx:HorzontalList/>.
- 水平列表的優點是:只在其顯示區域用事例顯示對象。
- 水平列表從左到右顯示項目。
- 通過定義allowMultipleSelection屬性來選擇單個或多個項目。
- 綁定數據源和圖像文件:
在actionscript中寫如下的代碼:
數據源:dataProvider.
圖像文件:
[Bindable]
[Embed(source = "images/cathead.gif")]
public var headImg1:Class;
- 常用屬性:
- Dataprovider:數據源。
- numChildren:對象的子項數目。
- Selectable:是否將所選項目顯示為選中狀態。
- selectedIndex:所選項目的數據提供程序中的索引。
- Visible:顯示對象是否可見。
g) 水平尺/垂直尺(HRule/VRule):用於在容器內創建一條分割線
- 標簽:水平尺:<mx:HRule/>;垂直尺:<mx:VRule/>
- 屬性:水平尺:如顏色:shadowColor。
垂直尺:如顏色:strokeColor。
- 例如:
- 水平尺:<mx:HRule shadowColor="#FF0000"/> (顏色為紅色的水平尺)。
- 垂直尺:<mx:VRlue strokeColor="#00FF00"/> (顏色為綠色的垂直尺)。
h) 水平滑桿/垂直滑桿(HSlider/VSlier):
- 標簽:水平滑桿:<mx:HSlider/>;垂直滑桿:<mx:VSlider/>。
- 滑桿的5部分:滑軌、滑塊、刻度、標簽和數據提示。
- 滑塊的當前值:由他在滑桿兩端之間的相對位置決定。
滑桿兩端默認的最小值:0。
滑桿的最大值:10。
滑塊的當前值可以在最小值與最大值之間連續地改變,或者可以為一組不連續 值中的一個值。
- 滑桿的屬性:maximum:最大滑動值。
snapInterval:數值變化間隔。
tickIntervl:標識刻度。
Labels:標識標簽。
- 例如:
<mx:HSlider snapInterval="5" maximum="100" tickInterval="25" labels="[0,25,50,75,100]"/>
i) 圖像(Image):標簽:<mx:Image/>。
- 圖像控件可加載GIF、JPEG、PNG、SVG、和SWF格式的文件。
-
- 使用@Embed標識符來綁定數據源:<mx:Image source="@Embed("image/gif1.png")"/>
- 綁定成類:
[Bindable]
[Embed(source="image/gif1.png")]
public var icons:Class;
- 在需要圖片時動態加載:
var icons:String="images/gif1.png";
引入代碼:var image:Image=new Image();
Image.source=icons;
imgData.addChild(image);
j) 列表(List):標簽:<mx:List/>
- 常用事件:
- Change:選擇的行的改變時發生。
- itemClick:顯示選中的數據項的所有屬性。
- 通過定義alternatingItemColos來實現列表中項目交替的背景。
- 列表控件可以實現工具條標簽(toolTip),需要設置dataTipFunction和showDataTips為true。
- 常用屬性:
- Editable:指示用戶能否編輯數據提。
- dataProvider:數據源綁定。
- labelFiled:指明顯示數據源中的哪個屬性。
- dataTipFunction:顯示文本提示。
- wordWrap:當設置為true時,如果文字過長,允許換行。
- alternatingItemsColors:指定控件的交互底色。
k) 計數器(NumericStepper):標簽:<mx:NumericStepper/>。
- 計數器控件由文本條和按鈕組成。
- 計數器右邊的按鈕是由向上和向下兩個按鈕組成的。
- 單擊向上、向下的三角形按鈕可以遞增或遞減顯示數據,用戶也可以直接輸入一個合法的數據到文本條中。
- 計數器默認最小值為0,最大值為10,計數間隔為1.
- 常用屬性:
- minimum:最小值。
- maximum:最大值。
- stepSize:計數間隔。
- value:初始數值。
l) 進度條(progressBar):標簽:<mx:progressBar/>.
- 分類:
- 確定時間(determinate)進度條:用於線性體現事件在已知總體時間上的進度,以進度所用時間百分比來顯示,
- 未定時間(indeterminate)進度條:用於體現未知整體時間的進程。
- 進度條控件模式:mode。
操作模式:
1)、事件(event):使用屬性source定義一個發出progress和complete事件的加載進程。
2)、調查(polled):在使用source屬性定義加載時,列出getsBytesLoaded()和getsBytesTotal() 方法。
- 屬性:
- source:定義其進程是用來進行某種任務的加載過程。
- Label:隨進度欄顯示的文本。
- Maximum:最大進度值。
- Minimum:最小進度值。
- 進度條控件模式:mode。
操作模式:
1. 事件(event):使用屬性source定義一個發出progress和complete事件 的加載進程。
2. 調查(polled):在使用source屬性定義加載進程時,列出getBytesLoaded() 和getsBytesTotal()方法。
3. 手工(manual):在使用setProgress()方法過程中定義maximum、minmum 和indeterminate屬性。
- 事件:
- Hide:組件不可見。
- Show:組件可見。
- Complete:加載完成時。
- Progress:加載中。
m) 滾動條、水平滾動條、垂直滾動條(ScrollBar、HScrollBar、VScrollBar):
- 標簽:水平滾動條:<mx:HScrollBar/>、垂直滾動條:<mx:VScrollBar/>
- 滾動條的4部分:兩個箭頭按鈕、一個滑軌、一個滑塊。
- 滾動條根據一下4個參數來顯示狀態:
- 最小范圍值。
- 最大范圍值。
- 當前位置,其值必須在最小和最大范圍值內。
- 視窗大小,代表了在此顯示范圍內每次可顯示的數據量。
- 常見屬性:minScrollPosition:最小滾動條位置;maxScrollPosition:最大滾動條位置;scroll:滾動時觸發的事件。
- 例如:<mx:VScrollBar id="bar" minScrollPosition="0" maxScrollPosition="{panel.width-20}" scroll="myScroll(event);">
n) SWF加載器(SWFLoader):標簽:<mx:SWFLoader/>
- Swf控件可加載GIF、JPEG、PNG、SVG和SWF格式的文件到應用程序中。
- Swf加載器可以加載Flex應用程序。
- 綁定文件:<mx:SWFLoader id="load" source="@Embed(source='images/image.swf')"/>
- 設置是swfloader任意縮放:maintainAspectRatio=false;scaleContent=false;
- o) 排列列表(TileList):標簽:<mx:TileList/>
- 優點:只在顯示區域用實例顯示對象。
- 通常包括一個坐標方向的滾動條。
- 通過定義allowMultipleSelection屬性來選擇單個或者多個項目。
- 綁定數據:
在actionscript中的代碼如下:
Private var listArray:Array=[{image:"image/img1.gif",data,0},{image:"image/img2.gif",data,1}];
[Bindable]public var TileListdp:ArrayCollection=new ArrayCollection(listArray);
- 屬性direction:控制其子控件的方向。
p) 音像(VideoDisplay):標簽:<mx:VideoDisplay/>.
- 音箱控件用於影像和音響數據。
- 屬性:
- playheadTime:定義了當了當前在音像文件中的位置以秒計算。控件支持volume屬性,數值范圍為0.0~1.00,從無聲到有聲,默認值為0.75.
- miantainAspectRadio、height、width:用於設定控件大小。
- 方法:
- close():強制關閉輸入流以及Flash media server的鏈接。
- load():加載媒體文件,但不播放。
- pause():在不移動播放頭情況下暫停回放。
- stop():停止回放。
attachCamera():指定播放來自攝像機的視頻流。
- 綁定音像文件:<mx:VideoDisplay source="swf/head.flv"/>。
q) 標簽條(TabBar):標簽:<mx:TabBar/>
- 常用事件:itemClick。
- 標簽條控件定義了一系列標簽按鈕,放置在一個水平條上。每一個標簽條控件可以打來一個相應的子類容器。標簽條控件可用來設置單個容器的可視性。
- 遍歷控件中的各個tab,並通過labelPlacement屬性設置標簽位置:
var tab:Tab;
var idx:unit;
var len:unit=tabBar.numChildren;
for(idx=0;idx<len;idx++){
tab=tabBar.getChildAt(idx) as Tab;
tab.labelPlacement=tab.label.
}
七、容器控件
- 應用容器(Application):標簽:<mx:Application>
- 語法格式:<mx:Application 屬性 樣式 事件>.
- 特點:
a) 應用對象使MXMl文件具有<mx:Application>標簽。
b) 絕大多數情況下,Flex只有一個應用對象。
c) 根應用文件就是第一個加載的文件。
d) 應用對象一般是文本對象,但文本對象不一定是應用對象。
e) 通過mx.core.Application.application路徑,我們可以在程序的任何地方找到根的應用對象。
- 屬性:
a) Xmlns:用於定義當前文件將會使用到的命名空間。
b) Layout:在不特別設置的情況下,當前頁遵循的頁面布局。
- 事件:
a) Preinitialize:預初始化時發出。
b) creationComplete:完成構造,屬性,測量,布局,繪制后發出。
- 布局容器(Layout):標簽:<mx:Application>
- 畫布(Canvas):標簽:<mx:Canvas/>
a) 語法:<mx:Canvas>子類標簽</mx:Canvas>
b) 定位方式:
- 使用絕對值定位:(Absolute):在畫布上使用(x,y) 值來定義子類的位置。
- 使用約束版面布局(Constraint-based Layout):給出子類到畫布的頂邊、底邊和左右邊的距離,來進行布局和定位。
c) 畫布子類可重疊的特性:可用來得到不同的效果。
d) 要控制滾動條,通過屬性horizontalScrollPolicy和verticalScrollPolicy進行控制,值為:on/off/auto。
- 盒子、水平盒子、垂直盒子(Box、HBox 和VBox):
a) 盒子容器用於在水平或者垂直方向上按序列排序子類組件。
b) 語法:<mx:Box 屬性 樣式>子類標簽<mx:Box/>.
c) 標簽:盒子:<mx:Box>;水平盒子:<mx:HBox>、垂直盒子:<mx:VBox>.
d) 兩種方法定義垂直和水平的盒子:
- 使用<mx:HBox>和<mx:VBox>.
- 使用<mx:Box>,並設置direction屬性(水平-hoorizontal和垂直-vertial)。
e) 屬性:
- horizontalAlign、horizontalCenter:水平居中。其中horizontalAlign的屬性值為left、center、right;
- verticalAlign、verticalCenter:垂直居中。其中verticalAlign的屬性值為top、middle、buttom。
- 控制條(ControlBar):標簽:<mx:ControlBar>.
- 語法:<mx:ControlBar>子類標簽</mx:ControlBar>
- 應用控制條(ApplicationControlBar):標簽:<mx:ApplicationControlBar>
a) 應用控制條容器是控制條容器的子類.
b) 語法:<mx:ApplicationControlBar 屬性 樣式> 子類標簽</mx:ApplicationControlBar>
c) 兩種模式:
- 固定模式:控制條一直固定在窗口的頂部,不會隨着面板滾動。
- 浮動模式:控制條可以在窗口的任何地方,而且隨着面板滾動。
- 分離盒、水平分離盒、垂直分離盒(Vidided Box、HVididedBox 和VVididedBox):
a) 標簽:分離盒<mx:DividedBox>;水平分離盒:<mx:HDividedBox>;垂直分離盒:<mx:VDividedBox>.
b) 語法:<mx:DividedBox 屬性 樣式 事件>子類標簽</mx:DividedBox>.
- 表單、表單頭、單元格(From、FormHeading、FormItem)。
a) 標簽:表單:<mx:From>;表單頭:<mx:FormHeading>;單元格:<mx:FormItem>.
b) 語法:<mx:From 樣式>
<mx:FromHeading 屬性 樣式/>
<mx:FromItem 屬性 樣式>
子類標簽
<mx:FromItem>
</mx:From>
c) 設置必填項目的方式:在單元格中定義required屬性為true。
d) 存儲和確認表單數據:
- 在表單控件中存儲:如
<mx:Script>
private function processValues(myName:String,phoneNumber:String):void{}
</mx:Script>
- 定義一個數據模型來存儲:如
<mx:Script>
private function processValues():void{
var myName:String=myFrom.myName;
var ipPhone:String=myFrom.phoneNumber;
}
</Script>
e) 可通過backgroundColor和brderStyle屬性來修改背景色和邊框樣式。
f) formHeading組件用於顯示From容器中一組控件的標題,用來提示用戶該表單收集的是什么樣的數據。
g) formItem組件是定義一個標簽,通過設置label屬性來提示用戶每一個輸入組件的輸入內容。
- 格柵布局容器(Grid):標簽:<mx:Grid>
a) 格柵(Grid)由格柵(Grid)、格柵行(GrodRow)和格柵細目(GridItem)組成。
b) 語法:<mx:Grid 樣式>
<mx:GridRow>
<mx:GridItem>
子類標簽
</mx;GridItem>
<mx:GridRow>
<mx:Grid>
c) Grid容器允許按單元格的行和列來排列子項。Grid容器包含一行或多行,並且每行包含一列或多個單元格或項目。
- 面板布局容器(Panel):標簽:<mx:Panel>
a) 3中定義方式:水平(horizontal)、垂直(vertical)和精確(absolute)。
b) 語法:<mx:Panel 屬性 樣式 事件>
子類標簽
</mx:Panel>.
c) Panel容器包含題欄、標題、邊框以及子項分內容區域。使用panel容器包圍頂級應用程序模塊。
- 排列模板布局容器(Tile):標簽:(mx:Tile).
a) 排列模板容器將子類按順序排列在類似格柵的橫平豎直的單元格中,當一行放滿時會自動換到下一行。
b) 子類:<mx:Tile 屬性 定位>子類標簽</mx:Tile>。
c) Tile容器將其放在由大小相等的單元格組成的網格中。可以使用tileWidth和tileHeight屬性指定這些單元格的大小。讓Tile容器根據最大子項確定單元格大小。
- 標題窗口布局容器(TitleWindow):標簽:<mx:TitleWindow>。
a) 標題窗口具有標題條、邊框和容納子類組件的內容區域,並且可在其右上角顯示一個關閉的按鈕。
b) 語法:<mx:TitleWindow 屬性 事件>子類標簽</mx:TitleWindow>.
c) 彈出標題窗口:代碼如下:
private function showWindow():void{
var popWindow:IFlexDisplayObject=PopUpManager.createPopUp(this.myPanel,this.titleWindow,true);
PopUpManager.centerPopUp(popWindow);
}
d) 關閉標題窗口,代碼如下:
private function close():void{
PopUpmanager.removePopUp(this);
}
e) 對話框返回值id處理:
- 通過application處理。
在Application中定義一個public變量user_id,則可以在對話框 Dialog中賦值給Application.user_id變量,然后ModuleA中去讀 取Application.user_id變量。
- 通過Dialog.owner來處理。
觸發Dialog:
Var dialog:Dialog=PopUpManager.createPopUp(this,Dialog,true) as Dialog;
Dialog.owner=this;
在dialog中進行ModuleA的user_id變量賦值。
ModuleA(this.owner).user_id="用戶id";
- 通過自定義事件來處理。
自定義一個事件,然后在Dialog中新建一個事件,將user_id作為參數置入到事件中,然后派發該事件。
- 通過全局變量來處理。
定義全局變量,然后在Dialog中置user_id變量,在ModuleA中讀取user_id變量即可。
- 通過parentDocumnt來處理。
在dialog中進行ModuleA的user_id變量賦值:
parentDocument.user_id="用戶id";
f) 對話框返回值處理辦法:
- 如果該返回值影響Application,建議用全局變量來處理。
- 如果該返回值只是當前窗體,建議用parentDocument進行處理。
- 導航容器(Navigator):
a) 視窗堆棧導航容器:標簽:<mx:ViewStack>.
- 將一組子類容器從上到下堆棧起來,每次只有一個容器可視、可活動。
- 必須使用鏈接條、列表條、按鈕條和切換按鈕條來控制,選擇子類容器。
- 語法:<mx:ViewStack 屬性 樣式 事件>子類標簽</mx:ViewStack>。
- 屬性:
- selectedIndex:定義子類容器的指針。數目為0~numChildren-1.
- selectedChild:定義子類容器的ID。如果沒有容器被選擇,其值為null。屬性只能在actionscript中定義。
- numChildren:子類容器的總數目。
b) 列表導航容器:標簽:<mx:TabNavigator>。
- 語法:<mx:TabNavigator 樣式>子類標簽</mx:TabNavigator>。
- 列表導航容器每次只能有一個子類被顯示。可通過列表或者使用鍵盤導航控制來選擇不同的子類。在子容器發生該表時可以利用change事件相對應地進行監聽。自動建立子容器的列表,可改變列表文本。
c) 折疊導航容器(Accordion):標簽:<mx:Accordion>.
- 折疊導航容器建立一系列的面板,依次疊加起來。每一個面板的頭就是導航按鈕,單擊任何一個按鈕就會打開相應的面板。
- 語法:<mx:Accordion 屬性 樣式>子類標簽</mx:Accordion>
- 屬性:
- selectedChild:對當前可見子容器的引用。默認值為對第一個子項的引用。如果沒有子項,則此屬性為null。只能在actionscript中設置此屬性。
- selectedIndex:當前可見子容器的從零開始的索引。子索引從0開始,子項的數目-1。
八、其他控件
a) 高級表格(AdvancedDataGrid):標簽:<s:AdvancedDataGrid>
- AdvancedDataGrid擴展了DataGrid控件的功能,為應用程序增添了數據可視化功能。能更好地控制數據顯示、數據聚合和數據格式設置。可顯示多列數據,具有多個屬性的對象。
- AdvancedDataGrid具有如下功能:
- 列可以具有不同寬度或同一固定寬度。
- 用戶可以在運行時調整列的尺寸。
- 用戶可以在運行時重新排列列。
- 可選擇自定義列標題。
- 能夠對任何列使用自定義項顯示器來顯示數據(而非文本)。
- 支持通過單擊某列對數據進行排序。
b) OLAPDataGrid:標簽:<s:OLAPDataGrid>
- OLAPDataGrid控件擴展了AdvancedDataGrid控件的功能,可顯示OLAP查詢的結果。
- OLAPDataGrid用於統計的字段只能是數字,目前支持求和,求平均數,求最大最小四種運算。
- OLAPDataGrid繼承於AdvancedDataGrid,但是內容不能拖拽,排序和編輯。
c) 可編輯文本(RichEditableText):標簽:<s:RichEditableText>.
- 用於顯示、滾動、選擇和編輯各種格式的文本。
- 可包含可單擊的超鏈接以及可嵌入或從URL加載的內嵌圖形。
- 不包含滾動條,但可實現用於以編程方式滾動的接口(IViewport)。支持使用鼠標滾動垂直滾動。
- 不包括用於更改文本格式的任何用戶界面。但提供了可以通過編程方式執行此操作的接口。
d) RichText:標簽<s:RichText>。
- 可以顯示一行或多行富文本或嵌入圖像的UIComponent。
- 不支持滾動、選擇、編輯、可單擊的超鏈接或從URL加載的圖像。
- 如果文本超出了顯示這些文本的空間,RichText可以截斷文本,使用截斷指示符(如"...")替換超額文本。
e) Spinner:標簽:<s:Spinner>
- Spinner組件從有序集中選擇值。使用基於stepsize屬性的當前值增大或者減小當前值的兩個控件。
- Spinner控件由兩個必須按鈕組成,一個用於增大當前值,一個用於減小當前值。可使用向上箭頭和向下箭頭或鼠標滾輪遍歷這些值。
- Spinner組件的范圍是value屬性的允許的值集。允許的值為minimum和snapInterval屬性的整數倍數之和,且小於或等於maximum的值。
f) VideoPlayer:標簽:<s:VideoPlayer>
- VideoPlayer控件是一個可設置外觀的視頻播放器,它支持漸進式下載,多比特率流和流視頻。支持播放FLV和F4V文件。
- VideoPlayer組件可以播放本地攝像頭的視頻流。
- 屬性、方法與事件:
- 播放位置屬性:PlayHeadTime
a) 表示視頻播放頭的位置,以秒計算。
b) 屬性可即了讀取也可寫入。讀取PlayHeadTime屬性表示當前視頻播放的位置,設置PlayHeadTime屬性表示設置視頻流的位置。
- 常用方法
a) Close:關閉視頻流。
b) Load:加載視頻。
c) Pause:暫停視頻。
d) Play:開始播放。
e) Stop:停止播放。
注:pause方法與stop方法的不同:pause方法使得PlayHeadTime屬性暫時變化,stop方法使得PlayHeadTime屬性為0,並停止播放。
- 常用事件:
a) Complete:播放頭到flv文件結束位置事件。
b) PlayHeadUpdate:間隔一段事件更新事件。
c) Progress:加載flv文件進度事件。
d) Ready:flv視頻加載完成事件。
e) StateChange:視頻狀態發生改變事件,如播放、暫停、停止等。
g) BorderContainer:標簽:<s:BorderContainer>。
- BorderContainer類定義一組css樣式,用於控制容器的邊框外觀和背景填充。
- 默認情況下,邊框的筆觸是圓形的。可將筆觸的joints屬性設置成Joints.MITER來更改邊框的筆觸。
h) DataGroup:標簽 :<s:DataGroup>
- DataGroup類是數據項目的容器基類。DataGroup類將根據項目轉換為可視元素以進行顯示。通常僅用於包含作為子項的數據項目。
- 不能更改DataGroup容器的外觀。
- 屬性與方法:
- ItemRenderer:用於數據項目的項顯示器。該類必須實現IDataRenderer接口。-屬性。
- dataProvider:為DataGroup的數據提供程序。可用作數據綁定的源。-屬性。
- itemToLabel():返回可在項呈示器中顯示的String。將String寫入到項呈示器的labelText屬性。 -方法
- updateRenderer():更新呈示器以重用。此方法首先會准備項呈示器以重用,方法是清除任何舊屬性,同時使用新屬性進行更新。此方法應對項呈示器設置data屬性。-方法。
i) Group:標簽:<s:Group>。
- Group容器將實現IUIComponent接口的任何組件和實現IGraphicElement接口的任何組件視為子代。希望管理可視子項(可視組件和圖形組件)時,使用此容器。
- 不能設置Group容器的外觀。
- 常用方法:
- addElement():將可視元素添加到此容器中。該元素將在添加完所有其他元素之后添加,並出現於所有其他元素之上。
- addElementAt():將可視元素添加到此容器中。該元素將被添加到指定的索引位置。索引2代表顯示列表中的第一個元素。
- removeAllElements():從容器中刪除所有可視元素。
- removeElement():從此容器的子列表中刪除指定的可視元素。在該可視容器中,位於該元素之上的所有元素的索引位置都減少1.
j) HGroup:標簽:<s:HGroup>。
- HGroup容器是HorizontalLayout類的Group容器的一個實例。
- HGroup容器將所有元素進行橫排。
- 屬性:
- columnCount:返回視圖中的元素的當前數目。-屬性
- firstIndexInView:組成布局在布局目標的滾動矩形內的第一列的索引,或-1。-屬性
- lastIndexInView:組成布局在布局目錄的滾動矩形內的最后一列的索引,或-1。-屬性
k) ModuleLoader:標簽:<mx:ModuleLoader>。
- ModuleLoader組件是一種可視化的組件,方便開發人員在運行期間動態地加載和卸載module。
- 常用屬性、方法與事件:
- applicationDomain:applicationDomain類,將你的模塊加載到哪個應用域。-屬性
- Url:String類型,要加載的外部MXMLmodule的url。-屬性
- LoadModule:格式:loadModule(url:String=null,bytes:ByteArray=null):void,加載module。-方法
- unloadModule:格式:unloadModule():void,卸載module,釋放內存。-方法
- Error:當module拋出錯誤是派發。-事件
- Loading:當ModuleLoader開始根據URL加載module時派發。-事件
- Progress:Module加載過程中以一定的間隔周期派發。-事件
- Ready:當module完成加載時派發。-事件
- Setup:當module已下載,但module並沒有加載完成時派發。-事件
- Unload:當module卸載完成時派發。-事件
- urlChange:當ModuleLoader有了一個新的url是派發。-事件
l) SkinnableContainer:標簽:<s:SkinnnableContainer>。
- SkinnableContainer類是具有可視內容的可設置外觀容器的基類。SkinnableContainer容器將實現IVisualElement接口的任何組件視為子項。
- 屬性與方法:
- Layout:此容器的layout對象。負責容器中可視元素的測量與布局。-屬性
- numElements:此容器中的可視元素的數量。-屬性
- addElement():將可視元素添加到此容器中。該元素將在添加完所有其他元素之后添加,並出現與所有元素之上。-方法
- addElementAt():將可視元素添加到此容器中。該元素將被添加到指定的索引位置。索引0代表顯示列表中的第一個元素。-方法
- getElementAt():返回指定索引出的可視元素。-方法
- getElementIndex():返回可視元素的索引位置。-方法
- removeAllElements():從容器中刪除所有可視元素。-方法
- removeElement():從此容器中的子列表中刪除指定的可視元素。在該可視容器中,位於改元素之上的所有元素的索引位置都減少1。-方法
- removeElementAt():從容器中的指定索引位置刪除可視元素。-方法
m) SkinnableDataContainer:標簽:<s:SkinneableDataContainer>
- SkinnabkeDataContainer類是數據項目的容器基類。此類將數據項目轉換為可視元素以進行顯示。通常用於包含作為子項的數據項目。
- 項顯示器定義容器中數據項目的可視表示形式。項顯示器將數據項目轉換為可以由容器顯示的一種格式。必須將項顯示器傳遞該SkinnableDataContainer才能是當地顯示數據項目。
- 屬性:
- itemRendererFunction(屬性):為某個特定項目返回一個項顯示器IFactory的函數。應定義一個與此示例函數類似的顯示器函數:
function myItemRendererFunction(item:Objecy):IFactory
- itemRenderer(屬性):用於數據項目的項顯示器。該類必須實現IDataRenderer接口。
- Layout(屬性):此容器的layout對象。此對象負責容器中可視元素的測量和布局。
n) TileGroup:標簽:<s:TileGroup>
- TileGroup容器是使用TileLayout類的Group容器的一個實例。
- 屬性:
- columnCount(屬性):實際的列計數。默認值為-1.
- requestedColumnCount(屬性):要顯示的列數。設置為-1會允許TileLayout自動確定列計數。
- requestedRowCount(屬性):要顯示的行數。設置為-1會刪除顯式覆蓋並允許TileLayout自動確定行計數。
- o) VGroup:標簽:<s:VGroup>
- VGroup容器是使用VerticalLayout類的Group容器的一個實例。
- VGroup將容器中所有元素進行豎排。
- 屬性:
- firstIndexInView(屬性):組成布局且在布局目標的滾動矩形內的第一個布局元素的索引,或者-1。
- lastIndexInView(屬性):組成布局且在布局目標的滾動矩形內的最后一個布局元素的索引,或者-1。
- rowCount(屬性):可見元素的當前數目。
p) 面積圖表(AreaChart):標簽:<mx:AreaChart>.
- 使用AreaChart控件將數據展示為其線型邊界表示數據值的面積區域。面積區域有線條及其下邊所填充的顏色和圖案組成。可以使用圖標或符號沿着邊界線展示每個數據點,也可以展示不帶圖標的簡單區域線。
- 常用屬性:
- yField:指定數據源的某字段,確定其為每個數據點在y軸上的屬性。
- xField:指定數據源的某字段,確定其為每個數據點在x軸上的屬性。如不指定此屬性,flex將按照數據源中的數據順序排列數據。
- minField:指定數據源的某字段,確定面積區域分底部在y軸上的位置。如不指定此屬性,則面積區域的底部將與x軸對齊。此屬性對覆蓋、堆棧、100%堆積圖不產生影響。
- form:指定數據序列在圖表中的顯示方式。如:
a) segment:將每個數據點連成折現。此為form的默認值。
b) step:水平與豎直的交錯線,呈階梯狀。第一個數據點處,畫一條水平線,然后是一條連接第二個數據點的豎直線。
c) reverseStep:水平與豎直的交錯線,呈階梯狀。第一個數據點處,畫一條豎直線,然后是一條連接第二個數據點水平線。
d) vertical:在第二個數據點的x坐標處,從第一個數據點的y坐標到第二個數據點的y坐標畫出豎直線。
e) horizontal:在第一個數據點的y坐標處,從第一個數據點的x坐標到第二個數據點的x坐標畫出水平線。
f) curve:在數據點之間畫出曲線。
g) type:表示很多圖表的變化,如覆蓋、堆棧、100%堆積圖,高低面積區域圖等。
q) 條形圖表(BarChart):標簽:<mx:BarChart>
- .使用BarChart控件,以水平條的方式展示數據,並用水平條的長表示數據的值。使用BarSeries圖表序列為BarChart控件定義數據。
- 常用屬性:
a) yField:指定數據源的某字段,以確定圖標中的每個水平條的根部處於y軸的位置,如不指定此屬性,則flex將以數據源中的數據排列水平條。
b) xField:指定數據源的某字段,以確定每個位於x軸方向上的末端位置。
c) minField:指定數據源的某字段,已確定每個位於水平條根部的x軸位置。
d) type:要呈示的條形圖類型:
- Clustered:按類別分組條。Type的默認值。
- Overlaid:多個條以逐個疊加的方式按類別呈示,最后一個系列位於最頂部。
- Stacked:條以堆棧的方式收尾相接,並按類別進行組織。各條都表示其下方值的累計值。
- 100%:條以堆棧的方式首尾相接,一直累積到100%。各條表示該條所占該類別的值之和的百分比。
r) 氣泡圖表(BubbleChart):標簽<mx:BubbleChart>.
- 使用BubbleChart控件展示帶有三個值的數據點:相對於圖表中的其他數據點來決定的此數據點的x軸方向的位置、y軸方向的位置、圖形的大小。
- 屬性:
- minRadius:指定圖表元素以像素為單位的最小半徑。
- maxRadius:指定圖標元素以像素為單位的最大半徑。
- xField:指定數據源中的某字段,以確定每個數據點在x軸上的位置。
- yField:指定數據源中的某字段,以確定每個數據點在y軸上的位置。
- radiusField:指定數據源中的某字段,以確定每個數據圖形相對於其他數據圖形的半徑。
s) 蠟燭圖表(CandlestickChart):標簽:<mx:CandlestickChart>
- 使用CandleSickBart控件表示數據系列的高、低、開放和閉合值的一系列燭台圖表來表示財務數據。每個燭台圖表中垂直線段的頂部和底部分別表示數據點的高值和低值,而填充框的頂部和底部分別表示開放值和閉合值。每個燭台圖表的填充方式不同,具體取決於數據點的結束值是高於還是低於起始值。
- CandleSickBart控件要求其series屬性包含CandlestickSeries對象數組。
t) 圓柱圖表(ColumnChart):標簽:<mx:ColumnChart>
- ColumnChart控件將數據表示為一組垂直列,其高度有數據中的值確定。可使用ColumnChart表示包含簡單列、群集列、堆棧、100%堆棧或高/低的各種不同圖表。
- ColumnChart控件要求其series屬性包含ColumnSeries對象數組。
- 堆棧和100%列圖表會覆蓋其ColumnSeries對象的minField屬性。
- 屬性:
- Type:列圖表的類型:
a) Clustered:按類別分組來自不同系列的值。此為默認值。
b) Overlaid:多個值以逐個疊加的方式按類別呈示,最后的系列位於最頂部。
c) Stacked:列以堆棧的方式逐層堆疊,並按類別進行組織。各列都表示其下方列的累計值。
d) “100%”:列以堆棧的方式逐層堆疊,一直累積至100%。各列表示該列所占類別的值之和的百分比。
u) HLOCChart(HighLowOpenCloseChart):標簽:<mx:HLOCChart>
- HLOCChart控件將財務數據表示為一系列表示數據系列高、低、收盤和開盤值的元素。每個元素中垂直線的頂部和底部分別代表數據點的最高值和最低值。右側的刻度線表示收盤值,左側的刻度線代表開盤值。
- HLOCChart控件要求其series屬性包括HLOCserices對象Array。
v) Legend:標簽:<mx:Legend>
- Lengnd控件可向圖表中添加圖例,此圖例可為圖表中的每個數據系列顯示一個標簽,以及一個用於顯示系列的圖表元素的鍵。
- 可將圖表控件標識符綁定到Legend控件的dataProvider屬性,或者定義一個LegendItem對象Array,進而初始化Legend控件。
- 事件:
- itemClick:當用戶在Legend控件中的LegendItem上單擊時分派此事件。
- itemMouseDown:當用戶在Legend控件中的LegendItem上按下鼠標按鍵時分派此事件。
- itemMouseOut:當用戶將鼠標從Legend中的LegendItem上移走時分派此事件。
- itemMouseOut:當用戶將鼠標移至Legend控件中的LegendItem上時分派此事件。
- ItemMouseUp:當用戶在Legend中的LegendItem上釋放鼠標按鍵時分派此事件。
w) 折線圖表(LineChart):標簽:<mx:LineChart>。
- LineChart控件將數據系列表示為使用連續線條連接的多個點。
- 可使用圖標或元件來表示該線條上的每個數據點,或者顯示一條不帶圖標的線條。
- LineChart控件要求其series屬性包含LineSeries對象Array。
x) 圓餅圖表(PieChart):標簽:<mx:PieChart>。
- PieChart控件使用標准的餅圖來表示數據系列。數據提供程序的數據確定餅圖中每個楔子相對於其他楔子的大小。可使用PieSeris類創建標准的餅圖、環形圖或堆疊的餅圖。
- PieChart控件要求其series屬性包含PieSeries對象Array。
y) 散點圖表(PlotChart):標簽:<mx:PlotChart>
- PlotChart控件使用兩個值來表示每個數據點的數據。一個值用於確定數據點沿水平軸的位置,另一個值用於確定該點沿垂直軸的位置。
- PlotChart控件要求其series屬性包含PlotSeries對象A rray。
