MXML与ActionScript教学.ppt

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 Builder

2、以拖拉的方式, 產生畫面, 如果有必要加入程式, 才透過MXML, ActionScript撰寫程式 編譯時, MXML會先編譯成ActionScript, 才編譯成二進位碼 Flex 3 Component Explorer 網址: ,5,6,MXML檔案類型 應用程式(Application),根節點為Application標籤，此為一應用程式 檔名就是應用程式的名稱 一個Flex應用程式, 只能有一個預設的Application 檔名: Sample.mxml ,7,應用程式(Application) 範例 1/2,8,應用程式(Application) 範例 2/2,9,MXML檔案類

3、型 自訂元件(Custom 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) 用於建立資料結構, 如陣列和集合 工具元件 (Utilit

5、y Component) 用於達成某些特別機能，如資料繋結(data binding),16,容器 (Container),可以包含其他元件 Application元素也是容器 ,17,容器 (Container) 範例 1/2,18,容器 (Container) 範例 2/2,19,UI控制項 (UI Control),可見介面元素 ,20,UI控制項 (UI Control) 範例,21,元件(Component)內容屬性,使用元件時, 通常必須設定內容屬性 例如按鈕的標籤叫做”確定”, “取消” 每個元件的內容屬性都不盡相同 利如按鈕有標籤屬性, 但輸入框就沒有標籤屬性 內容屬性的內容有

6、四種 一般屬性 特效屬性(Effect) 樣式屬性(Style) 事件屬性(Event) 設定元件內容屬性的三種方法 使用標籤屬性 (Tag Attributes) 使用內層標籤 (Nested Tags) 使用ActionScript,22,設定元件內容屬性 使用標籤屬性 (Tag Attributes) 1/2,一般設定 使用常數設定 ,23,設定元件內容屬性 使用標籤屬性 (Tag Attributes) 2/2,特殊字元的處理 跳脫字元(Escaping characters) 字串中加入換行符號 MXML: myHBox.horizontalScrollPolicy=ScrollPo

7、licy.OFF;,26,事件處理(Event Handling),Flex是一個事件驅動(Event-Driven)的框架 事件是一種溝通方式，用以通知應用程式的其它部分發生了何種動作 當元件傳出這種訊息時，術語上稱之”元件派遣了事件” ,27,資料繫結 (Data Binding),資料繫結是一種功能，把元件連結到另一種元件或是ActionScript物件 當一個元件的值改變時，自動更改另一個物件的值 語法為 ,28,ActionScript教學,29,ActionScript教學,ActionScript API 種類 使用 ActionScript MXML 和 ActionScrip

8、t 相關性 ActionScript 語法,30,ActionScript API 種類,Flash Player APIs Flex Framework APIs Custom 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框架即是以ActionScr

9、ipt寫成 包含所有 Flex 容器 (Application, VBox) UI控制項 (Button, TextInput), 管理器 (Manager) 及其他工具類別 (Utility),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

10、,使用 ActionScript MXML標籤行列,一般用法 資料繫結用法 ,36,使用 ActionScript MXML標籤內層,ActionScript必須放在CDATA區塊中 ,37,使用 ActionScript MXML Script標籤內層,ActionScript置於Script標籤內層 外部引入ActionScript ,38,MXML和ActionScript 相關性,MXML 編譯時會先轉換成ActionScript，才轉成二進位的Flex程式 本質上就是用MXML語法寫成的ActionScript類別 MXML可以簡化UI建立，適合做版面配置 ActionScript適

11、合用於建立複雜的資料模型及細緻的商務邏輯控制 在MXML script裡的變數宣告會被視為類別的內容屬性，函式會視為類別的方法,39,MXML和ActionScript 相關性 範例,MXML寫法 檔名: 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( ) sup

12、er( ); button = new Button( ); addChild(button); ,40,ActionScript語法,基礎知識 基本語法 關鍵字 變數與資料型態 資料型態轉型 陣列 (Array) 運算子 流程控制 方法 (Function) 類別 (Class) 繼承 介面 (Interface),修飾字 變數 (Variable) 常數 (Const) 特殊方法 運算式 (Expression) 敘述 (Statement) 事件處理 (Event Handling) 錯誤處理 (Error Handling) E4X,41,基礎知識,ActionScript類別的副檔名

13、為.as 一個.as中可以建立多個ActionScript類別, 但一般建議一個.as檔中只建立一個ActionScript類別 只有ActionScript類別(Class)與介面(Interface) 沒有抽象類別(Abstract Class) ActionScript類別為單一繼承 ActionScript類別可同時實現多介面 ActionScript中所有的東西都是物件(Object),42,基本語法 1/2,Case sensitivity Dot Operator 用.來操作物件屬性與呼叫方法 Semi-colons 敘述結尾加上分號 Comments 單行註解 / 多行註解/*

14、 */,43,基本語法 2/2,括號(Parentheses) group parameters e.g. for(var i:int = 0; i 10; i+) . change the default 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.

15、g. “james”,”asa”,”robin” refer to a specific value within an array or refer to the property of an object e.g. user0 , username,44,關鍵字(Language keyword),45,變數與資料型態 1/2,語法 修飾字 var 變數名稱: 資料型態; 範例 var userName: String; 以var 關鍵字宣告 通常宣告於方法(method)內，若是在方法外宣告就稱為內容屬性，且範圍會遍及整個類別 名稱由字母、數字，錢字號及底線組成 開頭不能是數字 依慣例，

16、開頭為小寫字元 使用冒號替變數加上型態宣告 常見資料型態 String,Number,int,uint,Boolean,Date,Array 指定運算 userName=“asabulu”;,46,變數與資料型態 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 conca

17、tenation operator ( + ) when using the as operator Explicit 使用strict mode進行編譯時，轉型需強制宣告 data type name as 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, ui

18、nt, Number:回傳數值當成String Boolean:回傳String “true” or “false” Array:將Array的值以逗號分隔回傳 Date: returns current 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/

19、3,資料的集合，可用整數索引或是key的方式組成 陣列索引為Zero base 可用實字表示法建立空陣列 可以當HashMap用 範例 var user:Array=new Array(); user0=“james”; 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並回傳，所有

20、剩下的item index均往前移 unshift 新增一個item至array index 0，原來的item index均往後移 slice 從陣列中複製出一個陣列，arr.slice(3,4)-不包含4 splice 從陣列中移出成一個陣列，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

21、= Astaire; Literal var user:Object = firstName:Fred, lastName:Astaire; Username=user“firstName”,52,運算子,+ - * / % + - = 判斷相等 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 pr

22、operties for(var prop:String in user) trace(prop); for each 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 關鍵字宣告 把一些敘述集合起

23、來並給定一個名稱，當該名稱被呼叫時才執行那些敘述 方法定義需置於類別主體內 若方法有一個以上的參數用逗號隔開 若是沒有回傳參數，則回傳型別為void 方法不支援覆載(overloading)，但支援剩餘參數(rest parameter),宣告方式為在參數名稱前接三個點號 使用和內容屬性相同的修飾字，若是省略預設會是internal,56,類別 (Class),語法 package 套件名稱 import 引用類別名稱; public class 類別名稱 屬性; 方法; 建構子; ,範例 package com.example import .URLLoader; import .URLRe

24、quest; public class FlexExample private var name:String; public function getUserName():String return “asa”; function FlexExample(); ,57,繼承,只能繼承單一類別 只能存取宣告成public 或 protected的內容屬性或方法 使用override關鍵字覆寫父類別的方法 覆寫時必須和父類別方法使用相同的參數，傳回型態以及存取修飾字,58,介面 (Interface),語法 package 套件名稱 public interface 介面名稱 function 方法名稱(參數名稱: 資料型態): 回傳資料型態; ,範例 package com.example public interface Device function play(): void; ,59,修飾字,可置於類別, 變數, 常