Flex3 之 Hello World


因為以後的工作可能會需要利用 Flex 來作 RIA 的開發,先大概來摸一下。之前雖然有在Adobe CS3(4) 上做過一些 project 的開發,以為 Flex 應該也差不多,想不到完全不一樣...
第一次的學習心得,就依照慣例先來個 Hello World 吧!而且是免寫程式碼的版本!



Adobe Flex3 Builder 雖然是付費軟體,但對學生們有免費的序號授權,把資料填一填,掃描學生證上傳後,就可以得到序號。
序號申請連結:http://www.adobe.com/devnet-apps/flex/free/


安裝完軟體、打開Flex Development,準備開始實做第一個專案,
File -> New -> Flex Project 開始專案建置,
如下圖,依序設定 專案名稱,這裡隨便填入想要的名稱、專案資料夾的位置,選預設的就可以了、App 型態,這裡使用Web App、Server Technology目前還沒用到,選 none,後面的設定目前也還用不到,可以直接按 Finish 了。


完成之後,會發現 src 下面多了一個 *.mxml 的檔案,裡面有三行 MXML 標籤語言。


但如同開頭所說的,這次的目的是一行程式碼都不寫,所以在 test.mxml 的檔案上,換成 Design模式:

可以看到空空的,啥都沒有,這裡我們可以自己加一些元件進去,
選擇 Windows -> Components
有一些元件可以使用,找到 Label 後,將他拉入面板內,

Label 太小了~"~ ,可以從 Windows -> Flex properties 進行修改,
按下畫面中的 Label 後,在 Flex properties 進行設定,在 Text 的部份將 Label 換成 Hello World,其他例如將字體放大、調整位置、顏色等,都可以在這裡完成。
儲存檔案後(Ctrl+S) 會自動進行 Build,之後按下 Run (Ctrl+F11),就可以開始執行程式了!看到Hello World 出現囉!