使用 ComboBox 組件

與 ComboBox 組件的使用者互動
ComboBox 組件參數
建立具有 ComboBox 組件的應用程式
- 使用 ActionScript 建立 ComboBox

此 ComboBox 組件可以讓使用者從下拉式清單選取單一項目。ComboBox 可以是靜態的或是可供編輯。可編輯的 ComboBox 能讓使用者直接在清單頂端的文字欄位輸入文字。如果下拉式清單碰到文件底部，它會以向上開啟方式取代向下開啟。ComboBox 由下列三個子組件構成：BaseButton、TextInput 和 List 組件。

在可編輯的 ComboBox 中，只有按鈕才是作用區域 (而非文字方塊)。但是對於靜態 ComboBox，按鈕和文字方塊都是作用區域。開啟或關閉下拉式清單便會使作用區域產生回應。

當使用者透過滑鼠或鍵盤選取清單中的項目時，選取項目的標籤便會複製到 ComboBox 頂端的文字欄位。

與 ComboBox 組件的使用者互動

若有任何表單或應用程式需要從清單中選取單一選項，您就可以使用 ComboBox 組件。例如，您可以在客戶地址表單中提供「州」的下拉式清單。對於較複雜的情況，您可以使用可編輯的 ComboBox。例如，在提供行車指引的應用程式中，使用可編輯的 ComboBox 讓使用者輸入出發點及目的地的地址。下拉式清單會包含使用者先前輸入的地址。

如果 ComboBox 可以編輯，表示 editable 屬性為 true ，則下列按鍵會從文字輸入方塊移除焦點，並保留先前的值。Enter 鍵則是例外，因為如果使用者輸入文字，此鍵便會先套用新的值。

按鍵	說明
Shift+Tab	將焦點移到上一個項目。如果已經選取新的項目，則會傳送 `change` 事件。
Tab 鍵	將焦點移到下一個項目。如果已經選取新的項目，則會傳送 `change` 事件。
向下鍵	將選取範圍向下移動一個項目。
End	將選取範圍移到清單底部。
Escape	關閉下拉式清單，使 ComboBox 成為焦點。
Enter	關閉下拉式清單，使 ComboBox 成為焦點。當 ComboBox 為可編輯組件，而且使用者輸入文字時，Enter 會將值設定為輸入的文字。
首頁	將選取範圍移到清單頂端。
Page Up	將選取範圍向上移動一頁。
Page Down	將選取範圍向下移動一頁。

將 ComboBox 組件加入應用程式時，您可以加入下列 ActionScript 程式碼，讓螢幕朗讀程式能夠存取此組件：

import fl.accessibility.ComboBoxAccImpl; 
 
ComboBoxAccImpl.enableAccessibility();

不論您有多少個組件實體，都只需要啟用組件的輔助功能一次。

ComboBox 組件參數

您可以在「屬性」檢測器或「組件檢測器」中，為每個 ComboBox 實體設定下列參數： dataProvider 、 editable 、 prompt 和 rowCount 。這些參數都具有相對應的 ActionScript 同名屬性。如需有關這些參數可能值的詳細資訊，請參閱 Flash Professional 的 ActionScript 3.0 參考中的 ComboBox 類別。如需有關 dataProvider 參數用法的詳細資訊，請參閱使用 dataProvider 參數。

建立具有 ComboBox 組件的應用程式

下列程序說明如何在編寫時將 ComboBox 組件加入應用程式。ComboBox 為可編輯，而且如果您在文字欄位中輸入 Add ，範例就會在下拉式清單中新增一個項目。

建立新的 Flash (ActionScript 3.0) 文件。
將 ComboBox 拖曳到「舞台」，並賦予實體名稱 aCb 。在「參數」索引標籤中，將 editable 參數設定為 true 。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列程式碼：

import fl.data.DataProvider; 
import fl.events.ComponentEvent; 
 
var items:Array = [ 
{label:"screen1", data:"screenData1"}, 
{label:"screen2", data:"screenData2"}, 
{label:"screen3", data:"screenData3"}, 
{label:"screen4", data:"screenData4"}, 
{label:"screen5", data:"screenData5"}, 
]; 
aCb.dataProvider = new DataProvider(items); 
     
aCb.addEventListener(ComponentEvent.ENTER, onAddItem); 
 
function onAddItem(event:ComponentEvent):void { 
    var newRow:int = 0; 
    if (event.target.text == "Add") { 
        newRow = event.target.length + 1; 
            event.target.addItemAt({label:"screen" + newRow, data:"screenData" + newRow},  
            event.target.length);  
    } 
}

選取「控制 > 測試影片」。

使用 ActionScript 建立 ComboBox

下列範例會使用 ActionScript 建立 ComboBox，並在其中填入位於加州舊金山地區的大學清單。接著設定 ComboBox 的 width 屬性以配合提示文字的寬度，並將 dropdownWidth 屬性設定為稍寬一些，以配合最長的大學名稱。

此範例在 Array 實體中建立大學清單，並使用 label 屬性儲存學校名稱，使用 data 屬性儲存每一所學校網站的 URL。它會設定 ComboBox 的 dataProvider 屬性，以指定由 Array 提供資料給組件。

當使用者從清單中選取一所大學時，便會觸發 Event. CHANGE 事件並呼叫 changeHandler() 函數，然後將 data 屬性載入至 URL 要求，以存取該學校的網站。

請注意，最後一行程式碼將 ComboBox 實體的 selectedIndex 屬性設定為 -1，以便於清單關閉時重現提示；否則，該提示將由所選取的學校名稱取代。

建立新的 Flash (ActionScript 3.0) 文件。
將 ComboBox 組件從「組件」面板拖曳到「元件庫」面板。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列 ActionScript 程式碼：

import fl.controls.ComboBox; 
import fl.data.DataProvider; 
import flash.net.navigateToURL; 
 
var sfUniversities:Array = new Array( 
    {label:"University of California, Berkeley",  
                data:"http://www.berkeley.edu/"}, 
    {label:"University of San Francisco",  
                data:"http://www.usfca.edu/"}, 
    {label:"San Francisco State University",  
                data:"http://www.sfsu.edu/"}, 
    {label:"California State University, East Bay",  
                data:"http://www.csuhayward.edu/"}, 
    {label:"Stanford University", data:"http://www.stanford.edu/"}, 
    {label:"University of Santa Clara", data:"http://www.scu.edu/"}, 
    {label:"San Jose State University", data:"http://www.sjsu.edu/"} 
); 
 
var aCb:ComboBox = new ComboBox(); 
aCb.dropdownWidth = 210; 
aCb.width = 200;  
aCb.move(150, 50); 
aCb.prompt = "San Francisco Area Universities"; 
aCb.dataProvider = new DataProvider(sfUniversities); 
aCb.addEventListener(Event.CHANGE, changeHandler); 
 
addChild(aCb); 
 
function changeHandler(event:Event):void { 
    var request:URLRequest = new URLRequest(); 
    request.url = ComboBox(event.target).selectedItem.data; 
    navigateToURL(request); 
    aCb.selectedIndex = -1; 
}

選取「控制 > 測試影片」。

您可以在 Flash 編寫環境中實作及執行此範例，但如果嘗試以按一下 ComboBox 中項目的方式存取大學網站，就會收到警告訊息。若要在網際網路上存取功能完整的 ComboBox，請存取下列位置：

http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html