其他互動設計
在互動設計控件中，除了文本控件、按鈕控件和圖表控件等之外，還有其他一些比較實用的互動式控件，如
數字選擇器、日期顯示、加載外部swf檔案、加載圖像、顔色選擇器、警告框、進度條、滾動條
一、數字選擇器
數字選擇器NumericStepper控件的主要是用來選擇數字的，是由一個文本域和兩個上下箭頭的按鈕組成。除了使用兩個上下箭頭的按鈕選擇數字之外，還可以通過鍵盤的上下方向鍵選擇。在很多方面的應用都會使用到數字選擇器NumericStepper控件，如日期的年月日、時間的時分秒等。
1 建立NumericStepper控件
建立一個數字選擇器NumericStepper控件有兩種方式：一種是直接拖放控件到設計視圖中；另一種是編寫代碼。第一種方式拖放控件到設計視圖中相對直覺，不用編寫代碼。在開發小型的應用程式的時候，可以提高開發效率。數字選擇器NumericStepper控件有兩個很重要的屬性：Minimum和Maximum。Mnimum表示選擇數字的最小值。Maximum表示選擇數字的最大值。
應用NumericStepper建構一個複合型的日期控件。
<mx:NumericStepper minimum="1908" maximum="2000"
x="10" y="10" />
<mx:Label text="年" x="85" y="10" />
<mx:NumericStepper minimum="1" maximum="12"
x="100" y="10" />
<mx:Label text="月" x="160" y="10" />
<mx:NumericStepper minimum="1" maximum="31"
x="175" y="10" />
<mx:Label text="日" x="235" y="10" /> 
二、日期顯示
日期可以通過兩種控件來顯示，一個是DateChooser控件，另一個是DateField控件。DateChooser控件是以月曆的形式顯示的，而DateField控件則是以文本的形式顯示的。
2.1使用DateChooser控件實作日期選擇
DateChooser控件是一個月曆形式的控件，在頭部顯示了年份和月份的名稱，主體部分則是以網格的顯示排列了目前年份和月份的所有的天。使用者可以從中選擇任意的一天。
<mx:DateChooser x="37" y="10"/> 
2.2 使用DateField控件實作日期選擇
DateField控件是一個以文本形式顯示的日期控件。在文本框的右側是一個月曆的小圖示，當使用者單擊圖表的時候，會彈出一個包含DateChooser控件的視窗。使用者選擇了一個日期之後，選擇的日期會填充到文本框中，同時，此視窗會自動關閉。DateField控件的主要應用在表單等的操作上。
<mx:DateField x="52" y="46"/> 2.3 使用日期類
日期類中包含了一些常用的關于日期的方法，使用這些方法，可以很友善的擷取日期資訊。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="InitApp()">
<mx:Script>
<![CDATA[
// 初始化
private function InitApp():void
{
// 建立日期對象
var date1:Date = new Date(2008, 07, 08);
// 設定預設顯示日期
dc1.selectedDate = date1;
}
]]>
</mx:Script>
<mx:DateChooser id="dc1" x="100" y="100" />
</mx:Application> 2.4 設定DateField控件的日期格式
在實際開發過程中，經常會需要自定義某些特殊的日期格式，以滿足需要。使用formatString屬性就可以設定DateField控件的日期格式。formatString屬性的值可以設定為諸如MM、DD、YY和YYYY等字元的組合。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:DateField x="281" y="208" formatString="YYYY-MM-DD" />
</mx:Application>
2.5 設定DateChooser控件的中文顯示
預設情況下，DateChooser控件是顯示英文的月份和周的。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function InitDataChooser():void
{
// 設定月份名稱
var arrMonthName:Array =
["一月", "二月", "三月", "四月", "五月", "六月",
"七月", "八月", "九月", "十月", "十一月", "十二月"];
// 設定周名稱
var arrWeekName:Array = ["星期日", "星期一", "星期二",
"星期三", "星期四", "星期五", "星期六"];
dc1.monthNames = arrMonthName;
dc1.dayNames = arrWeekName;
}
]]>
</mx:Script>
<mx:DateChooser id="dc1" x="151" y="86" creationComplete="InitDataChooser()"/>
</mx:Application>
三、 加載外部SWF檔案
如果在一個Flex應用程式中，把另一個Flex應用程式作為SWF檔案加載進來，就需要使用SWFLoader控件。
3.1建立SWFLoader控件
SWFLoader控件的主要用途就是加載外部的SWF檔案，這個檔案可以Flash CS3編譯生成的，也可以是Flex Builder 3編譯生成的。
預設情況下SWF檔案的内容可以自适應SWFLoader控件的大小。SWFLoader控件除了加載SWF檔案格式外，也可以加載其他的檔案格式到Flex應用程式中，如GIF、JPEG、PNG、SVG等。
定義一個SWFLoader控件可以在代碼中使用<mx:SWFLoader>标記，也可以直接從工具面闆中拖放控件到主視窗中。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:SWFLoader x="10" y="10" source="@Embed(source='Asset/test.swf')"/>
</mx:Application> 3.2 與已加載的SWF檔案互動
把SWF檔案加載到Flex程式中後，首要的問題就是怎麼樣能與這個SWF檔案互動，即通路這個SWF檔案的相關内容。首先看一下怎麼樣使用SWFLoader控件，在一個Flex程式中加載另一個Flex程式。
1．通路已加載的SWF檔案中的控件
lbl.text = loadedSM.application["lblShow"].text;
2．通路已加載的SWF檔案中的變量
loadedSM = SystemManager(myLoader.content);
loadedSM.application["strShow"] = "這是更新後的文字。";
3．通路已加載的SWF檔案的方法
ChildApp(loadedSM.application).SetShowText("這是更新後的文字。");
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.managers.SystemManager;
private var loadedSM:SystemManager;
// 初始化SWF檔案，并把其内容賦給 SystemManager 對象
private function InitSWFApp():void
{
loadedSM = SystemManager(myLoader.content);
}
// 擷取SWF檔案中 Label 控件的 text 屬性
private function GetSWFLabel():void
{
lbl.text = loadedSM.application["lblShow"].text;
}
// 修改SWF檔案中 Label 控件的 text屬性
private function UpdateSWFLabel():void
{
loadedSM.application["lblShow"].text = "這是更新後的文字。";
}
]]>
</mx:Script>
<mx:Label id="lbl" x="203" y="62"/>
<mx:SWFLoader id="myLoader" width="300" source="ChildApp.swf" x="10" y="10"
creationComplete="InitSWFApp();"/>
<mx:Button click="GetSWFLabel();" x="10" y="60" label="擷取SWF檔案中的Label控件"/>
<mx:Button label="修改SWF檔案中的Label控件" click="UpdateSWFLabel();" x="10" y="90"/>
</mx:Application> ChildApp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label id="lblShow" text="這是已加載的SWF檔案中的控件" fontSize="20" x="1" y="0"/>
</mx:Application> 四、 加載圖像
在Flex應用程式中，也可以實作加載圖像的功能。Flex支援絕大部分主流的圖檔格式，包括GIF、JPEG、PNG、SVG等等4.1建立Image控件
在Flex中，加載圖像的常用方法之一就是使用Image控件。
<mx:Image x="10" y="10" source="@Embed(source='assets/test.jpg')"/> 4.2 加載圖像
除了設定Image控件的Source屬性直接加載圖像外，還可以使用代碼來控制圖像的加載。加載圖像主要使用Image控件的load()方法。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function InitImage():void
{
// 加載圖檔資源
img.load("assets/test.jpg");
}
]]>
</mx:Script>
<mx:Image id="img" x="10" y="10" creationComplete="InitImage();"/>
</mx:Application> 五、顔色選擇器
顔色選擇器允許使用者從一個下拉式的顔色面闆中，選擇适合的顔色值。顔色選擇器主要應用于文本編輯器，更換控件樣式顔色等。
5.1建立ColorPicker控件
在Flex中，已經提供了ColorPicker控件來建立顔色選擇器。
<mx:ColorPicker x="10" y="10"/> 5.2 自定義面闆顯示的顔色
預設情況下，顔色面闆會列出系統所有的顔色。當然，通過代碼還可以自定義面闆中列出的顔色。自定義顔色通過ColorPicker控件的dataProvider屬性，與數組綁定，然後可以在數組中定義要列出的顔色的值。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
// 建立數組，填充各種顔色的RGB值
public var simpleDP:Array = ['0x000000', '0xFF0000', '0xFF8800',
'0xFFFF00', '0x88FF00', '0x00FF00', '0x00FF88', '0x00FFFF',
'0x0088FF', '0x0000FF', '0x8800FF', '0xFF00FF', '0xFFFFFF'];
]]>
</mx:Script>
<mx:ColorPicker x="10" y="10" dataProvider="{simpleDP}" />
</mx:Application>
5.3 自定義面闆顯示的标簽
除了可以自定義顔色的值外，還可以定義顔色标簽的描述。其方法與5.2節類似，也是通過綁定數組。不同的是，需要定義一個數組集合，其中定義了顔色标簽、顔色值和描述。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
import mx.events.DropdownEvent;
// 建立數組，并填充顔色相關資料
[Bindable]
public var complexDPArray:Array = [
{label:"黃色", color:"0xFFFF00",
descript:"黃色"},
{label:"粉色", color:"0xFF66CC",
descript:"粉色"},
{label:"深紅色", color:"0x990000",
descript:"深紅色"},
{label:"藍色", color:"0x000066",
descript:"藍色"},
{label:"深綠色", color:"0x006600",
descript:"深綠色"},
{label:"褐色", color:"0x666666",
descript:"褐色"}];
]]>
</mx:Script>
<mx:ArrayCollection id="complexDP" source="{complexDPArray}"/>
<mx:ColorPicker id="cp" dataProvider="{complexDP}" editable="false" x="23" y="19"/>
</mx:Application>
六、警告框的設計
警告框是在實際開發中使用最多的功能。在Flex中，提供了一個Alert類來實作警告框，其中定義了一個全局的靜态方法show()。
6.1建立警告框
所有的Flex元件都可以調用Alert類中的靜态方法show()，彈出一個帶有消息的模式警告框。
text 在 Alert 控件中顯示的文本字元串。此文本将在警告對話框中居中顯示。title 标題欄中顯示的文本字元串。此文本左對齊。flags Alert 控件中放置的按鈕。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ // 引用 Alert 類 import mx.controls.Alert; private function Btn_Click():void { // 調用show方法，彈出警告框 Alert.show("這是一個警告框！", "警告框"); } ]]> </mx:Script> <mx:Button click="Btn_Click()" label="警告框" x="77" y="50" fontSize="12"/> </mx:Application> 6.2 警告框的事件
預設情況下，彈出的警告框隻有OK按鈕。使用Alert類還可以設定其他的按鈕和顯示數量，并且還可以偵聽到警告框中按鈕的事件。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
// 建立 Alert 對象
private var myAlert:Alert;
// 按鈕單擊事件
private function Btn_Click():void
{
myAlert = Alert.show("确認執行此操作嗎？", "提示框",
Alert.YES | Alert.NO, this,
AlertListener, null, Alert.YES);
}
// 對話框偵聽事件
private function AlertListener(e:CloseEvent):void
{
// 判斷對話框中被單擊的按鈕
if(e.detail == Alert.YES)
{
lbText.text = "您按了确認按鈕。";
}
else
{
lbText.text = "您按了取消按鈕。";
}
}
]]>
</mx:Script>
<mx:Label id="lbText" />
<mx:Button click="Btn_Click();" label="提示框" x="77" y="50" fontSize="12"/>
</mx:Application> mx.controls.Alert.show(text:String="", title:String="", flags:uint=4, parent:Sprite=null, closeHandler:Function=null, iconClass:Class=null, defaultButtonFlag:uint=4, moduleFactory:IFlexModuleFactory=null):Alert
彈出 Alert 控件的靜态方法。在 Alert 控件中選擇一個按鈕或按下 Esc 鍵時，将關閉該控件。
text 在 Alert 控件中顯示的文本字元串。此文本将在警告對話框中居中顯示。
title 标題欄中顯示的文本字元串。此文本左對齊。
flags Alert 控件中放置的按鈕。有效值為
Alert.OK
、
Alert.CANCEL
Alert.YES
和
Alert.NO
。預設值為
Alert.OK
。使用按位 OR 運算符可顯示多個按鈕。例如，傳遞
(Alert.YES | Alert.NO)
顯示“是”和“否”按鈕。無論按怎樣的順序指定按鈕，它們始終按照以下順序從左到右顯示：“确定”、“是”、“否”、“取消”。
parent Alert 控件在其上居中的對象。
closeHandler 按下 Alert 控件上的任意按鈕時将調用的事件處理函數。傳遞給此處理函數的事件對象是 CloseEvent 的一個執行個體；此對象的
detail
屬性包含
Alert.OK
Alert.CANCEL
Alert.YES
或
Alert.NO
值。
iconClass 位于 Alert 控件中文本左側的圖示的類。
defaultButtonFlag 指定預設按鈕的位标志。您可以指定一個值，并且隻能是
Alert.OK
Alert.CANCEL
Alert.YES
Alert.NO
中的一個值。預設值為
Alert.OK
。按 Enter 鍵觸發預設按鈕，與單擊此按鈕的效果相同。按 Esc 鍵觸發“取消”或“否”按鈕，與選擇相應按鈕的效果相同。
moduleFactory 此 Alert 應在其中查找其嵌入字型和樣式管理器的 moduleFactory。
6.3 自定義警告框的按鈕标簽
預設情況下，警告框的按鈕标簽是英文的。通過Alert類，可以設定其按鈕标簽，使其成為中文。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
// 按鈕單擊事件
private function Btn_Click():void
{
// 設定對話框的按鈕文字描述
Alert.yesLabel = "是";
Alert.noLabel = "否";
Alert.cancelLabel = "取消";
// 彈出對話框
Alert.show("确認執行此操作嗎？", "提示框",
Alert.YES | Alert.NO | Alert.CANCEL);
}
]]>
</mx:Script>
<mx:Label id="lbText" />
<mx:Button click="Btn_Click();" label="提示框" x="77" y="50" fontSize="12"/>
</mx:Application> 6.4 設定提示框的文本大小
從6.3節中的示例可以看出，在警告框設定成中文後，文字較小而且模糊不清。要解決這個問題，就需要通過樣式來設定按鈕标簽文本的大小。使用Alert類，還可以設定警告框的寬度和高度。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- 設定對話框的樣式 -->
<mx:Style>
Alert
{
font-size:14px;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// 建立Alert對象
private var myAlert:Alert;
// 按鈕單擊事件
private function Btn_Click():void
{
myAlert = Alert.show("這是一個警告框！", "警告框");
// 設定對話框的寬度和高度
myAlert.width = 200;
myAlert.height = 150;
}
]]>
</mx:Script>
<mx:Button click="Btn_Click();" label="警告框" x="77" y="50" fontSize="12"/>
</mx:Application> 6.5 設定提示框的圖示
預設情況下，警告框是沒有任何圖示的。但是，可以通過Alert類的參數，自定義一個警告框的圖示。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// 嵌入圖檔資源
[Embed(source="assets/alertIcon.png")]
[Bindable]
public var alertIcon:Class;
private function Btn_Click():void
{
Alert.show("這是一個警告框！", "警告框", Alert.OK, null, null, alertIcon);
}
]]>
</mx:Script>
<mx:Button click="Btn_Click();" label="警告框" x="77" y="50" fontSize="12"/>
</mx:Application> 七、進度條的設計
進度條可以用來顯示某個任務執行的進度，如檔案下載下傳、播放位置等。進度條可以使程式操作界面更加人性化、更加直覺。本章将詳細講述Flex中進度條的設計。
7.1建立ProgressBar控件
建立一個ProgressBar控件是相當容易的，隻需要把控件拖放到設計視窗，并設定其屬性Source即可。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function LoadImage():void
{
// 加載圖檔
img.load("assets/test.jpg");
}
]]>
</mx:Script>
<mx:Button x="10" y="10" label="加載圖檔" fontSize="12" click="LoadImage()"/>
<mx:ProgressBar x="10" y="42" source="img"/>
<mx:Image id="img" x="10" y="78"/>
</mx:Application> 7.2 設定進度條的标簽
預設情況下，進度條的标簽顯示的是英文描述。通過其屬性Label的值，可以設定為中文顯示。在标簽屬性中，有一些特殊字元代表了特殊的含義。這些特殊字元表示的含義如下所示。
?%1：已經加載的位元組數。
?%2：位元組總數。
?%3：加載的百分比。
?%%：百分比符号（%）。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function LoadImage():void
{
// 加載圖檔
img.load("assets/test.jpg");
}
private function InitProgBar():void
{
// 設定進度條文字說明
progBar.label = "圖檔大小：%2 位元組，已加載： %1 位元組 , 加載百分比：%3%%";
}
]]>
</mx:Script>
<mx:Button x="10" y="10" label="加載圖檔" fontSize="12" click="LoadImage()"/>
<mx:ProgressBar id="progBar" x="10" y="42" source="img" creationComplete="InitProgBar()"/>
<mx:Image id="img" x="10" y="78"/>
</mx:Application>