Flex / ActionScript --- 下拉式選單怎麼作？動態產生＆抓取子選項

2009-06-03

20926
0
ActionScript 3.0 / FLEX與AIR
2009-07-21

連這麼基礎的小應用，書上都不講。
作者實在該用點心，為讀者想想。

只會在畫面上，作靜態設定，這種把戲上不了戰場的

這個範例很實用喔！

在ASP.NET裡面是必學的東西。但在 FLEX / ActionScript上面，讓我吃了小苦頭........

FLEX裡面並沒有直接對應的下拉式選單（如html裡面的<select></select>，或是 ASP.NET的DropDownList）

必須用 ComboBox來作。寫成下面這個樣子，畫面上才會出現下拉式選單。

<mx:ComboBox id="user_calendar_CB" >

<mx:ArrayCollection>

<mx:Object label="00:30" data="AAA"/>

<mx:Object label="01:00" data="BBB"/>

</mx:ArrayCollection>

</mx:ComboBox>

簡單地說，ComboBox包含一個 ArrayColection，就能做出下拉式選單。

ArrayCollection裡面可以有兩個屬性，分別是 ----

label屬性（下拉式選單的Item文字）與 data屬性（實際傳遞的值）

.............................................................................................................................................................

OK，廢話不多說。

我們這篇文章就如同我書本裡面常說的「範例、實戰決定一切！」

講這些設定就能完成的東西，無三小路用（沒用啦！人人都會）

我們真正在開發案子時，下拉式選單的 Item內容，經常都是動態產生的。

哪有可能跟上面一樣事先設定好就不更動了？

Q : 動態產生 FLEX / ActionScript的下拉式選單 Item，該怎麼作？

假設有一個陣列，裡面傳來了下拉式選單的 Item內容。

我們撰寫這兩行程式碼，就能動態產生下拉式選單 Item （下面這行，請自己加上迴圈）

myComboBoxID.push({label: uc_Array[0].toString(), data: uc_Array[1].toString()});

然後把動態產生的資料，作資料細節，放到ComboBox裡面。

user_calendar_CB.dataProvider = CalendarList;

所謂的 Label與 data都是自己設定的「物件.屬性」。

Q : 動態產生 FLEX / ActionScript的下拉式選單 Item，使用者點選之後，如何取得選取的值（data屬性）

假設下拉式選單的 Item跟上面一樣是動態產生的。

使用者點選之後，要抓取 Item子選項的 Label文字，有預設的寫法 -- myComboBoxID.selectedLabel

但要抓取（data屬性）......哈哈哈，就沒得玩了！（這也是我很不愛用flex的原因，覺得缺三丟四的，很多該給的東西不給，你叫人家怎麼用得上手？）

解法，請看下面的程式 ----

你如果直接寫 myComboBoxID.selectedItem，哈哈，那麼只會抓到 [object OBJECT]這樣的鬼東西。

雖然不正確，但我們卻因而知道了 myComboBoxID.selectedItem抓到一個 "物件"

物件後面可以加上「屬性」，寫成「物件.屬性」就可以搞定。

答案就是 ---- myComboBoxID.selectedItem.data.toString()

我並沒有找到雷同的範例，是看到這一篇程式碼而得到靈感（http://snippets.dzone.com/posts/show/5632）

內容如下：

var valueArray:Array = new Array();
02

var emptyItem:Object = new Object();
03

emptyItem.data = "";
04

emptyItem.label = "";
05

var buildingItem:Object = new Object();
07

buildingItem.data = "building";
08

buildingItem.label = "Building";
09

var regionItem:Object = new Object();
11

regionItem.data = "region";
12

regionItem.label = "Region"
13

valueArray.push(emptyItem);
15

valueArray.push(buildingItem);
16

valueArray.push(regionItem);
17

filterComboBox = new ComboBox();
19

filterComboBox.dataProvider = valueArray;
20

filterComboBox.addEventListener(ListEvent.CHANGE, filterUpdate);

國內幾本 Flex的書都沒講到這段

但這真的很常見、很實用............該不會是逼我出馬寫一本 "FLEX專題實務"吧？

理論太多，有時會模糊焦點。

各位 FLEX的作者大人，來點實戰經驗的分享吧...........

我真是討厭你啊.......... FLEX / ActionScript

------------------------------------------------------------------------------------------------

2009/7/21補充--- 找到一篇很棒的文章，跟這個議題相關 http://riashanghai.com/zh-hant/node/43

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學，遠距教學 (Web Form 約51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學，遠距教學 (ASP.NET MVC 約75~88hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

ASP.NET MVC線上課程第一天免費看 (5.5小時)

寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.台灣 或 school (at) mis2000lab.net

ASP.NET遠距教學、線上課程（Web Form + MVC）。 第一天課程， "完整" 試聽。

................ facebook社團 https://www.facebook.com/mis2000lab ......................

................ YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

Blog文章 "附的範例" 無法下載，請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍（嚴格認定）。

......................................................................................................................................................