1、1,MXML與ActionScript教學,簡報單位：asa客戶關係顧問服務部 簡報時間：2008.09.26,2,Agenda,MXML教學 ActionScript教學,3,MXML教學,4,MXML教學,MXML簡介 MXML檔案類型 名稱空間(Namespace) MXML命名規則 元件(Component),5,MXML 簡介,官方沒有說明MXML是什麼字的縮寫 用來開發Flex使用者介面的語言 Design Mode 使用拖拉的方式設計畫面 Source Mode 編輯MXML原始碼的方式設計畫面 語法符合XML規範, 也就是用XML來寫使用者介面 一般是透過Flex Builde
2、r以拖拉的方式, 產生畫面, 如果有必要加入程式, 才透過MXML, ActionScript撰寫程式 編譯時, MXML會先編譯成ActionScript, 才編譯成二進位碼 Flex 3 Component Explorer 網址: http:/ 應用程式(Application),根節點為Application標籤，此為一應用程式 檔名就是應用程式的名稱 一個Flex應用程式, 只能有一個預設的Application檔名: Sample.mxml,7,應用程式(Application) 範例 1/2,8,應用程式(Application) 範例 2/2,9,MXML檔案類型 自訂元件(C
3、ustom Component),根節點為現存元件, 該現存元件為自訂元件的父類別 檔名就是自訂元件的名稱檔名: Button1.mxml,10,自訂元件(Custom Component) 範例 1/3,11,自訂元件(Custom Component) 範例 2/3,12,自訂元件(Custom Component) 範例 3/3,13,名稱空間(Namespace),名稱空間的概念，它就像是一個管理容器，可以將您所定義的名稱區域在名稱空間之下，而不會有相互衝突的發生 與不會互相衝突 中的mx是Flex預設的名稱空間檔名: Button.mxml,14,MXML命名規則,檔名以字母或底線(
4、_)為始 其後只能為字母、數字或底線 不能與ActionScript Class同名 不能名為application 副檔名為小寫mxml 使用與ActionScript Class相同命名慣例 e.g.TextInput 字首大寫，文字區隔用大寫,15,元件 (Component),元件可以是ActionScript類別或MXML 視覺化 容器 (Container) 可包含其它元件 UI控制項 (UI Control) 可見介面元素, 如按鈕、文字輸入框 非視覺化 資料元件 (Data Component) 用於建立資料結構, 如陣列和集合 工具元件 (Utility Component)
5、 用於達成某些特別機能，如資料繋結(data binding),16,容器 (Container),可以包含其他元件 Application元素也是容器,17,容器 (Container) 範例 1/2,18,容器 (Container) 範例 2/2,19,UI控制項 (UI Control),可見介面元素,20,UI控制項 (UI Control) 範例,21,元件(Component)內容屬性,使用元件時, 通常必須設定內容屬性 例如按鈕的標籤叫做”確定”, “取消” 每個元件的內容屬性都不盡相同 利如按鈕有標籤屬性, 但輸入框就沒有標籤屬性 內容屬性的內容有四種 一般屬性 特效屬性(E
6、ffect) 樣式屬性(Style) 事件屬性(Event) 設定元件內容屬性的三種方法 使用標籤屬性 (Tag Attributes) 使用內層標籤 (Nested Tags) 使用ActionScript,22,設定元件內容屬性 使用標籤屬性 (Tag Attributes) 1/2,一般設定使用常數設定,23,設定元件內容屬性 使用標籤屬性 (Tag Attributes) 2/2,特殊字元的處理 跳脫字元(Escaping characters)字串中加入換行符號 MXML: ActionScript:n,24,設定元件內容屬性 使用內層標籤 (Nested Tags),內容屬
7、性複雜, 無法以字串設定時AKALAR,有些元件有預設屬性(default property), 可以省略AKALAR,25,設定元件內容屬性 使用ActionScript,若元件有設定id屬性，即能用ActionScript予以引用 大部分元件內容屬性都和ActionScript相同var myHBox:HBox = new HBox(); myHBox.horizontalScrollPolicy=ScrollPolicy.OFF;,26,事件處理(Event Handling),Flex是一個事件驅動(Event-Driven)的框架 事件是一種溝通方式，用以通知應用程式的其它部分發生了
8、何種動作 當元件傳出這種訊息時，術語上稱之”元件派遣了事件”,27,資料繫結 (Data Binding),資料繫結是一種功能，把元件連結到另一種元件或是ActionScript物件 當一個元件的值改變時，自動更改另一個物件的值 語法為 ,28,ActionScript教學,29,ActionScript教學,ActionScript API 種類 使用 ActionScript MXML 和 ActionScript 相關性 ActionScript 語法,30,ActionScript API 種類,Flash Player APIs Flex Framework APIs Custom
9、APIs,31,Flash Player APIs,Flash Player本身所有，能在run-time環境運作 核心類別 (Core Classes) String Number Date Flash Player 專有類別 (Specific Classes) URLLoader NetConnection,32,Flex Framework APIs,構成Flex框架本身，Flex框架即是以ActionScript寫成 包含所有 Flex 容器 (Application, VBox) UI控制項 (Button, TextInput), 管理器 (Manager) 及其他工具類別 (U
10、tility),33,Custom APIs,客製化的類別 能使用Flash Player API及Flex framework API,34,使用 ActionScript,MXML標籤行列 (Inline within MXML tags) MXML標籤內層 (Nested within MXML tags) MXML Script標籤內層 (In MXML scripts) ActionScript 類別,35,使用 ActionScript MXML標籤行列,一般用法資料繫結用法,36,使用 ActionScript MXML標籤內層,ActionScript必須放在CDATA區塊中,
11、37,使用 ActionScript MXML Script標籤內層,ActionScript置於Script標籤內層外部引入ActionScript ,38,MXML和ActionScript 相關性,MXML 編譯時會先轉換成ActionScript，才轉成二進位的Flex程式 本質上就是用MXML語法寫成的ActionScript類別 MXML可以簡化UI建立，適合做版面配置 ActionScript適合用於建立複雜的資料模型及細緻的商務邏輯控制 在MXML script裡的變數宣告會被視為類別的內容屬性，函式會視為類別的方法,39,MXML和ActionScript 相關性 範例,MX
12、ML寫法檔名: Example.mxml,ActionScript寫法檔名: Example.as package import mx.core.Application;import mx.controls.Button;public class Example extends Application internal var button:Button;public Example( ) super( );button = new Button( );addChild(button); ,40,ActionScript語法,基礎知識 基本語法 關鍵字 變數與資料型態 資料型態轉型 陣列 (A
13、rray) 運算子 流程控制 方法 (Function) 類別 (Class) 繼承 介面 (Interface),修飾字 變數 (Variable) 常數 (Const) 特殊方法 運算式 (Expression) 敘述 (Statement) 事件處理 (Event Handling) 錯誤處理 (Error Handling) E4X,41,基礎知識,ActionScript類別的副檔名為.as 一個.as中可以建立多個ActionScript類別, 但一般建議一個.as檔中只建立一個ActionScript類別 只有ActionScript類別(Class)與介面(Interface)
14、 沒有抽象類別(Abstract Class) ActionScript類別為單一繼承 ActionScript類別可同時實現多介面 ActionScript中所有的東西都是物件(Object),42,基本語法 1/2,Case sensitivity Dot Operator 用.來操作物件屬性與呼叫方法 Semi-colons 敘述結尾加上分號 Comments 單行註解 / 多行註解/* */,43,基本語法 2/2,括號(Parentheses) group parameters e.g. for(var i:int = 0; i 10; i+) . change the defaul
15、t order of operations in an expression e.g. if(a=1 and (b=2 or c=3) . 大括號(Braces) Code Block e.g. If ( xx) yy ; Object literal e.g. name:”asa”,gender:”M”; Data Binding 中括號(Brackets) array literal e.g. “james”,”asa”,”robin” refer to a specific value within an array or refer to the property of an obje
16、ct e.g. user0 , username,44,關鍵字(Language keyword),45,變數與資料型態 1/2,語法 修飾字 var 變數名稱: 資料型態; 範例 var userName: String;以var 關鍵字宣告 通常宣告於方法(method)內，若是在方法外宣告就稱為內容屬性，且範圍會遍及整個類別 名稱由字母、數字，錢字號及底線組成 開頭不能是數字 依慣例，開頭為小寫字元 使用冒號替變數加上型態宣告 常見資料型態 String,Number,int,uint,Boolean,Date,Array 指定運算 userName=“asabulu”;,46,變數與資
17、料型態 2/2,基本型態與預設值 變數若是沒有賦值，則預設值如下表,複合型態與預設值,47,資料型態轉型 1/2,Implicit in assignment statements when values are passed as function parameters when values are returned from functions when using the concatenation operator ( + ) when using the as operator Explicit 使用strict mode進行編譯時，轉型需強制宣告 data type name a
18、s a conversion function,48,資料型態轉型 2/2,Casting to int, uint, and Number 轉型失敗int,uint回傳為零，number為NaN 轉型成功可能會有truncate的問題，e.g.float - int Casting to String 轉型為String時，會呼叫物件內部的toString() method int, uint, Number:回傳數值當成String Boolean:回傳String “true” or “false” Array:將Array的值以逗號分隔回傳 Date: returns current
19、date info from the Flash Player Casting to Boolean int, uint, Number: 非零轉型為 true，零為false String: unintialized/empty 未初始化或空字串轉型為false，其餘為true Objects (any type): 未初始化轉型為false，其餘為true,49,陣列(Array) 1/3,資料的集合，可用整數索引或是key的方式組成 陣列索引為Zero base 可用實字表示法建立空陣列 可以當HashMap用範例 var user:Array=new Array();user0=“ja
20、mes”;user1=“asa”; var names:Array=“james”,”asa”; /實字表示法,50,陣列(Array) 2/3,length property 陣列長度，陣列item個數 push method 新增一個item，回傳新的length pop 從array最後移除一個item並回傳 shift 從array index 0 移除一個item並回傳，所有剩下的item index均往前移 unshift 新增一個item至array index 0，原來的item index均往後移 slice 從陣列中複製出一個陣列，arr.slice(3,4)-不包含4 s
21、plice 從陣列中移出成一個陣列，arr.splice(3,4)-從3開始移除4個item sort 排序，case sensitive，可加參數，arr.sort(Array.DESCENDING),51,陣列(Array) 3/3,關聯式陣列 var user:Object = new Object();user.firstName = “Fred“;user.lastName = “Astaire“; Literal var user:Object = firstName:“Fred“, lastName:“Astaire“; Username=user“firstName”,52,運
22、算子,+ - * / % + - = 判斷相等 &,|,+ concatenation = 賦值,53,流程控制-判斷式,If (布林運算) 敘述; else敘述; switch( 變數)case (“a”):敘述;break;default:敘述;,54,流程控制-迴圈,for (var i:int =0; i=10; i+) 敘述; while(布林運算) 敘述; Do 敘述; while(布林運算) for in loop through the names of the properties for(var prop:String in user) trace(prop); for e
23、ach in loop through the values of the each property of an Object for each(var prop:String in user)trace(prop);,55,方法 (Function),語法 修飾字 function 方法名稱(變數名稱: 資料型態,args):回傳資料型態 方法主體 範例 function test(str: String,rest): void以function 關鍵字宣告 把一些敘述集合起來並給定一個名稱，當該名稱被呼叫時才執行那些敘述 方法定義需置於類別主體內 若方法有一個以上的參數用逗號隔開 若是沒
24、有回傳參數，則回傳型別為void 方法不支援覆載(overloading)，但支援剩餘參數(rest parameter),宣告方式為在參數名稱前接三個點號 使用和內容屬性相同的修飾字，若是省略預設會是internal,56,類別 (Class),語法package 套件名稱 import 引用類別名稱;public class 類別名稱 屬性;方法;建構子; ,範例package com.example import .URLLoader;import .URLRequest;public class FlexExample private var name:String;public fu
25、nction getUserName():Stringreturn “asa”;function FlexExample(); ,57,繼承,只能繼承單一類別 只能存取宣告成public 或 protected的內容屬性或方法 使用override關鍵字覆寫父類別的方法 覆寫時必須和父類別方法使用相同的參數，傳回型態以及存取修飾字,58,介面 (Interface),語法package 套件名稱 public interface 介面名稱 function 方法名稱(參數名稱: 資料型態): 回傳資料型態; ,範例package com.example public interface Dev
26、ice function play(): void; ,59,修飾字,可置於類別, 變數, 常數, 函式之前 修飾字 public 可供類別以外存取 private 僅供類別內部存取 protected 類別及子類別存取 internal 可在套件內存取 static 該內容屬性透過類別存取而非經由實體,60,常數 (Const),語法 修飾字 const 常數名稱: 資料型態; 範例 public static const IDE: String = “Flex Builder”;以 const 關鍵字宣告 一旦給值就無法更改 大部分皆宣告為static 且為public 依慣例常數名稱皆為
27、大寫,61,特殊方法,建構子(Constructor) 為類別建立實體時首先執行的方法 名稱和類別名稱相同 必須宣告為public (ActionScript不支援private建構子) 不能宣告傳回型態或傳回值 getter/setter方法 存取時像是public 的內容屬性，宣告同正常方法 取出方法使用get 關鍵字 設定方法使用set 關鍵字 取出方法不能有參數，且必須回傳一個值 設定方法不能有回傳值，但必須傳入一個參數,62,運算式 (Expression),可以求算的ActionScript範例 unitPrice * quantity,63,敘述 (Statement),定義程式流程 由變數宣告，指定運算，函式呼叫，迴圈和各種條件判斷組成 敘述結尾都要加上分號範例 var total: Number; total = unitPrice * quantity;,64,事件處理 (Event Handling),當事件發生時用於通知或接收通知訊息 註冊監聽器 監聽的事件名稱 監聽事件的函式 事件名稱通常儲存在對應的事件類別的常數內,65,錯誤處理 (Error Handling),同歩錯誤 try/catch/finally 非同步錯誤 採用事件處理的型式,66,Thank You!,
