◆ 開發環境介紹
1. Flex元件有 2 種開發使用方式
在設計檢視模式下視覺化拖拉元件
在程式碼視圖下使用 MXML 標籤進行描述開發
2. 工作空間(workspace) & 專案(project)
Flex Builder 可以建立多個工作空間，但一次只能使用一個。
一個工作空間可以允許有多個專案，這些專案可以共用一個工作空間的基本配置。
選擇功能表的「File＞Switch Workspace＞Other...」選項，設定好 workspace 後，Flex 會自動重新啟動。
3. 快速鍵
程式碼自動完成功能(Code Completion)
按下「Ctrl+spacebar」組合鍵
◆ Flex組件(components)介紹
在視覺化元件方面，包含下列5個類型：
► Custom：自行開發的元件。
► Control：控制組件。除了常見的Button、CheckBox、ComboBox、Radio、TextInput，還有下列的元件：
－ AdvancedDataGrid
－ ColorPicker：選取顏色。
－ DataGrid：顯示多筆資料，具有編輯資料的功能，欄位的型態可以是各種輸入欄位如：Text Input、CheckBox、ComboBox、Radio…。
－ DateField：日曆。
－ HorizontalList：顯示水平清單，清單的內容可以是文字或是圖檔。
－ HSlider、VSlider：使用拖拉的數字欄位。
－ LinkButton：超連結按鈕。
－ NumericStepper：使用上下箭頭微調的數字欄位。
－ PopupMenuButton：結合Button和Popup Menu的一種元件。
－ ProcessBar：進度百分比。
－ RichTextEditor：文字編輯器，可以設定裡面任何文字的各種屬性，像是大小、顏色、超連結、對齊…
－ TileList：像磁磚一樣排列的清單，清單的內容可以是文字或是圖檔。
－ Tree：樹狀元件。
－ VideoDisplay：播放影像檔。
► Layout：版面配置組件。
佈局劃分組件：劃分整體的頁面配置
－ Canvas：可用來設定元件在頁面上的相對位置
－ Panel：可用來劃分元件的功能區域
－ HDividedBox、VDividedBox：將畫面做水平或垂直切割，並且允許使用者在操作時調整大小。
表單元件
－ Form：表單容器元件
將某些元件加入 Form 容器內時，會自動生成一個FormItem隱形元件(作為原元件的父元件??)。
例如將 Button、Label、TextInput 等某些元件拖拉到 Form 容器內時，會在該元件左側自動加入
一個 label，這個 label 不是以元件的形式出現，而是以 FormItem 的 label 屬性形式出現。
－ FormHeading：顯示 Form 的標題
視窗元件：以對話方塊形式顯示內容或外部資源
－ ModuleLoader：載入外部模組
－ TitleWindow：用於對話方塊形式的互動。繼承Panel，多了一個showCloseButton屬性
線條元件：以線條形式對元件進行內容上的劃分
－ HRule、VRule：產生水平或垂直分割線
－ ApplicationControlBar：放在Application Container的一種控制項，在這個控制項裡面可以放置其他元件，像是Button、MenuBar…。
－ ControlBar：用在Panel或是TitleWindow的一種元件，在這個元件上面可以放置一些像按鈕的控制項，方便與Panel或TitleWindow的內容部分區隔。
－ Grid：類似Html table元件。
－ HBox、VBox：將子元件以某個間隔做水平或垂直排列。
－ Spacer：在元件之間產生間隔。
－ Tile：將元件以磁磚的方式排列。
► Navigator：導航組件。有些Navigator組件可以包含其它Container，像是Accordion、TabNavigator、ViewStack。
－ Accordion：手風琴。
－ ButtonBar：包含多個Button。
－ LinkBar：包含多個超連結。
－ MenuBar：功能表。
－ TabBar：包含多個tabpage，搭配ViewStack可以做出TabNavigator的效果。
－ TabNavigator：包含多個tabpage，每個tabpage是一個Container，其內容可以任何元件，或是載入另一個Application。
－ ToggleButtonBar：類似ButtonBar，但是會註記使用者按了那一個Button。
－ ViewStack：用來控制其所包含的Container的狀態為visible、active或其他。
► Chart：圖表組件。
◆ 建立第一個 Flex
1. 選擇功能表的「File＞New＞Flex Project」選項
2. 輸入「Project name(專案名稱):HelloFlex」，選擇「Application type(程式類型):Web application(runs in Flash Player)」，再選擇「Server technology(伺服端要使用的技術):None」，然後按下「Next」鈕
3. 輸入「Output folder(輸出資料夾): bin-debug」，按下「Finish」鈕，完成專案建立初步步驟
4. 完成專案建立後的畫面如下，按一下編輯區域上方的「Design」圖示切換到設計檢視模式
[.mxml檔案內容]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application>
5. 設計檢視模式
6. 拖動 "Components視窗" 內的 Control 目錄下的 "Button" 和 "TextInput" 元件到設計撿視模式的編輯區域內
設定 Button 元件的 ID : hello_btn，Label : Hello
設定 TextInput 元件的 ID : hello_txt
7. 切換到程式碼編輯視圖，輸入如下程式碼後執行程式
[程式碼]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button y="233" label="Hello" id="hello_btn" horizontalCenter="0"
click="SayHelloHello()"/>
<mx:TextInput y="169" id="hello_txt" horizontalCenter="0"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
function SayHello():void {
Alert.show("Hello:"+hello_txt.text, "My First Flex!");
}
]]>
</mx:Script>
</mx:Application>
一周學會 Flex
http://www.adobe.com/devnet/flex/videotraining/
中文 http://www.riavideo.net/ODT/list.html
沒有留言:
張貼留言