[教學]如何利用Flex設計表單？

發表時間：

當Flex的專案建立完成後，接著就要進行Flex的程式設計。當然要設計Flex程式，首先要了解Flex軟體介面的各項功能，不然怎麼寫程式都不知道。接下來會簡單的和大家介紹Flex該怎麼使用，如何利用Flex拉出表單，簡單的介面設計等等，當然這篇文章仍是屬於筆記類型，所以有些東西會跳過或是稍略介紹。

因為學校作業要利用Flex寫出「查課系統」，而查課系統介面就是表單設計，所以第一步我們要先利用Flex拉出表單來，然後將整個外觀處理好，之後若要傳值，有機會的話會再介紹給大家，如果急需的話，就要上網搜尋一下Flex教學了，或是看看梅干的教學。

若拋開程式碼撰寫部分，其實Flex的介面使用上和Dreamweaver很像，一些介面的東西都是拖曳就可以完成，所以難度不是很高，比較有問題的會發生在物件該哪一項包住哪一項，排版定位很容易跑位，不然基礎的操作部分並不困難。

在設計表單之前，首先要了解哪個東西要包住哪個東西。整個Flex專案裡，首先你要先拉出一個「Panel」元件當作底，接下來所有東西都在上面處理。再來要拉表單「Form」到Panel裡，接著表單(Form)裡面要再拉「Grid」，這個用途是為了表單內的小項要排版，透過表格(Grid)來切割方便排版，然後每個表格(Grid)裡面就是擺放表單內各小項，像是下拉式選單(ComboBox)、文字輸入區塊(TextInput)等等，最後把按鈕(Button)擺在表格外面表單裡面，這樣才能完成一個簡單的表單。您可以參照以下示意圖來幫助了解。

利用Flex設計表單

第1步 當你先前的專案建立好後，在Flex程式的主畫面中，首先要先拉一個「Panel」，您可以在左下角的【Components】中的找到「Panel」然後拖曳到編輯區，就會產生一個Panel，您可以在右下角調整Panel大小、對齊格式，當然您也可以點擊左上角的綠色按鈕或是「Ctrl+F11」產生預覽來查看結果。

利用Flex設計表單

第2步 如果你有按下左上角的綠色按鈕或是Ctrl+F11，這時候Flex就會開始編譯程式碼產生結果，當然第一次編譯會比較慢，出現以下畫面時請不用擔心，等待畫面處理完成後，就會跳出瀏覽器並秀出您製作的結果了。

利用Flex設計表單

第3步 當處理完「Panel」後，接著請在右下角找到「Form」，然後拖曳到Panel上面，Panel要包住Form，一樣，在右下角也可以調整Form的大小與對齊格式。

利用Flex設計表單

第4步 再來請在左方中找到「Grid」然後拖曳到編輯畫面中，這時會跳出表格的格數設定，在Row中輸入「5」，在Column中輸入「2」然後點擊﹝OK﹞，建立Grid就是為了幫助排版。

利用Flex設計表單

第5步 當Grid建立好後，可能大小不是您需要的，您可以透過又下角的部分來設定表格大小或是將滑鼠移到表格的右下角，透過拖曳來調整大小，當調整完成後建議按一下「Crrl+F11」來預覽看看是不是版面正確，若不正確再調整看看，再按一次預覽來檢查。

利用Flex設計表單

第6步 當Grid處理完後，接著我們可以開始拉表格內要放置的東西，首先我們要拉的是下拉式選單(ComboBox)，請在左下角找到「ComboBox」然後拖曳到表格之外。

利用Flex設計表單

第7步 接著再點選你剛拖曳的物件，記得點選時要連同下拉式選單旁的Lable字樣也要包在線內，然後拖曳到你要放置的表格位置，這樣就可以了，如果你有很多個下拉式選單(ComboBox)要產生，請重複本步驟與上一步驟，將下拉式選單處理完。

利用Flex設計表單

第8步 當處理完下拉式選單後，接著可能需要單行的文字輸入區塊，所以請找到左下角的「TextInput」，然後拉到表格之外。

利用Flex設計表單

第9步 接著再點選你剛拖曳的「TextIput」物件，記得點選時要連同下拉式選單旁的Lable字樣也要包在線內，然後拖曳到你要放置的表格位置，一樣，若有多個文字欄位要放置，請重複本步驟與上一步驟，完成單行文字區塊的物件新增。

利用Flex設計表單

第10步 當您的下拉式選單與單行文字輸入區塊都拖曳完成後，相信這時您應該看到一大堆「Lable」字樣，您可以點擊兩下「Lable」字樣，然後進行編輯，如果不需要則把Lable刪除即可。

利用Flex設計表單

第11步 當前面的部分都處理完成後，您可以先點擊「Ctrl+F11」來看看呈現的結果，若確定版面都可以後，最後我們在左下角找到「Button」然後拖曳到畫面的表格以框、表單以內，如果有出現Lable，可以將它刪除。

利用Flex設計表單

第12步 當表單整個都完成後，也確定面板都顯示正確，接著我們要來加入下拉式選單中的值，所以請先點擊任一個下拉選單(ComboBox)，然後在點擊編輯區的左上方的「Source」切換到原始碼編輯畫面。

利用Flex設計表單

第13步 接著請在<mx:ComboBox>下方加入以下語法，語法中的「data=”數字”」應該是選單的序列，而「lable=”變數”」則是選單的顯示的名稱，因為網路上好像沒又詳細解釋這部分的資料，若有說錯，麻煩指正一下，謝謝。

<mx:Object data="0" label="" />
<mx:Object data="1" label="98" />
<mx:Object data="2" label="97" />
<mx:Object data="3" label="96" />

利用Flex設計表單

第14步 接著在切回「Design」部分，你就會看到下拉式選單就會出現一個「0」，這就表示設定成功，若您有其他下拉式選單，請按照本步驟與上一步驟處理，完成後建議按一下「Ctrl+F11」查看，看看效果有沒有出現，如果都出現了就表示設定正確囉！

利用Flex設計表單

基本上，經過以上操作已經把基本的介面都處理好了，這時候有些人可能以為完成了，就會想要點按鈕試試看，不過因為我們沒有加入Script，所以點了並不會有反應的，做完的東西記得儲存檔案，忘記儲存就要重做一次，那是很累人的唷！

在Google News上追蹤我們最新文章