MXML與ActionScript教學.ppt

1、1,MXML與ActionScript教學,簡報單位：asa客戶關(guān)係顧問服務(wù)部簡報時間：2008.09.26,2,Agenda,MXML教學 ActionScript教學,3,MXML教學,4,MXML教學,MXML簡介 MXML檔案類型 名稱空間(Namespace) MXML命名規(guī)則 元件(Component),5,MXML 簡介,官方?jīng)]有說明MXML是什麼字的縮寫 用來開發(fā)Flex使用者介面的語言 Design Mode 使用拖拉的方式設(shè)計畫面 Source Mode 編輯MXML原始碼的方式設(shè)計畫面 語法符合XML規(guī)範, 也就是用XML來寫使用者介面 一般是透過Flex Builder

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

3、型 自訂元件(Custom Component),根節(jié)點為現(xiàn)存元件, 該現(xiàn)存元件為自訂元件的父類別 檔名就是自訂元件的名稱 檔名: Button1.mxml ,10,自訂元件(Custom Component) 範例 1/3,11,自訂元件(Custom Component) 範例 2/3,12,自訂元件(Custom Component) 範例 3/3,13,名稱空間(Namespace),名稱空間的概念，它就像是一個管理容器，可以將您所定義的名稱區(qū)域在名稱空間之下，而不會有相互衝突的發(fā)生 與不會互相衝突 中的mx是Flex預設(shè)的名稱空間 檔名: Button.mxml ,14,MXML命名

4、規(guī)則,檔名以字母或底線(_)為始 其後只能為字母、數(shù)字或底線 不能與ActionScript Class同名 不能名為application 副檔名為小寫mxml 使用與ActionScript Class相同命名慣例 e.g.TextInput 字首大寫，文字區(qū)隔用大寫,15,元件 (Component),元件可以是ActionScript類別或MXML 視覺化 容器 (Container) 可包含其它元件 UI控制項 (UI Control) 可見介面元素, 如按鈕、文字輸入框 非視覺化 資料元件 (Data Component) 用於建立資料結(jié)構(gòu), 如陣列和集合 工具元件 (Utilit

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

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

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

8、t 相關(guān)性 ActionScript 語法,30,ActionScript API 種類,Flash Player APIs Flex Framework APIs Custom APIs,31,Flash Player APIs,Flash Player本身所有，能在run-time環(huán)境運作 核心類別 (Core Classes) String Number Date Flash Player 專有類別 (Specific Classes) URLLoader NetConnection,32,Flex Framework APIs,構(gòu)成Flex框架本身，F(xiàn)lex框架即是以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標籤內(nèi)層 (Nested within MXML tags) MXML Script標籤內(nèi)層 (In MXML scripts) ActionScript 類別,35

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

11、合用於建立複雜的資料模型及細緻的商務(wù)邏輯控制 在MXML script裡的變數(shù)宣告會被視為類別的內(nèi)容屬性，函式會視為類別的方法,39,MXML和ActionScript 相關(guān)性 範例,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語法,基礎(chǔ)知識 基本語法 關(guān)鍵字 變數(shù)與資料型態(tài) 資料型態(tài)轉(zhuǎn)型 陣列 (Array) 運算子 流程控制 方法 (Function) 類別 (Class) 繼承 介面 (Interface),修飾字 變數(shù) (Variable) 常數(shù) (Const) 特殊方法 運算式 (Expression) 敘述 (Statement) 事件處理 (Event Handling) 錯誤處理 (Error Handling) E4X,41,基礎(chǔ)知識,ActionScript類別的副檔名

13、為.as 一個.as中可以建立多個ActionScript類別, 但一般建議一個.as檔中只建立一個ActionScript類別 只有ActionScript類別(Class)與介面(Interface) 沒有抽象類別(Abstract Class) ActionScript類別為單一繼承 ActionScript類別可同時實現(xiàn)多介面 ActionScript中所有的東西都是物件(Object),42,基本語法 1/2,Case sensitivity Dot Operator 用.來操作物件屬性與呼叫方法 Semi-colons 敘述結(jié)尾加上分號 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,關(guān)鍵字(Language keyword),45,變數(shù)與資料型態(tài) 1/2,語法 修飾字 var 變數(shù)名稱: 資料型態(tài); 範例 var userName: String; 以var 關(guān)鍵字宣告 通常宣告於方法(method)內(nèi)，若是在方法外宣告就稱為內(nèi)容屬性，且範圍會遍及整個類別 名稱由字母、數(shù)字，錢字號及底線組成 開頭不能是數(shù)字 依慣例，

16、開頭為小寫字元 使用冒號替變數(shù)加上型態(tài)宣告 常見資料型態(tài) String,Number,int,uint,Boolean,Date,Array 指定運算 userName=“asabulu”;,46,變數(shù)與資料型態(tài) 2/2,基本型態(tài)與預設(shè)值 變數(shù)若是沒有賦值，則預設(shè)值如下表,複合型態(tài)與預設(shè)值,47,資料型態(tài)轉(zhuǎn)型 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進行編譯時，轉(zhuǎn)型需強制宣告 data type name as a conversion function,48,資料型態(tài)轉(zhuǎn)型 2/2,Casting to int, uint, and Number 轉(zhuǎn)型失敗int,uint回傳為零，number為NaN 轉(zhuǎn)型成功可能會有truncate的問題，e.g.float - int Casting to String 轉(zhuǎn)型為String時，會呼叫物件內(nèi)部的toString() method int, ui

18、nt, Number:回傳數(shù)值當成String Boolean:回傳String “true” or “false” Array:將Array的值以逗號分隔回傳 Date: returns current date info from the Flash Player Casting to Boolean int, uint, Number: 非零轉(zhuǎn)型為 true，零為false String: unintialized/empty 未初始化或空字串轉(zhuǎn)型為false，其餘為true Objects (any type): 未初始化轉(zhuǎn)型為false，其餘為true,49,陣列(Array) 1/

19、3,資料的集合，可用整數(shù)索引或是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個數(shù) 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，可加參數(shù)，arr.sort(Array.DESCENDING),51,陣列(Array) 3/3,關(guān)聯(lián)式陣列 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( 變數(shù)) 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 方法名稱(變數(shù)名稱: 資料型態(tài),args):回傳資料型態(tài) 方法主體 範例 function test(str: String,rest): void 以function 關(guān)鍵字宣告 把一些敘述集合起

23、來並給定一個名稱，當該名稱被呼叫時才執(zhí)行那些敘述 方法定義需置於類別主體內(nèi) 若方法有一個以上的參數(shù)用逗號隔開 若是沒有回傳參數(shù)，則回傳型別為void 方法不支援覆載(overloading)，但支援剩餘參數(shù)(rest parameter),宣告方式為在參數(shù)名稱前接三個點號 使用和內(nèi)容屬性相同的修飾字，若是省略預設(shè)會是internal,56,類別 (Class),語法 package 套件名稱 import 引用類別名稱; public class 類別名稱 屬性; 方法; 建構(gòu)子; ,範例 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的內(nèi)容屬性或方法 使用override關(guān)鍵字覆寫父類別的方法 覆寫時必須和父類別方法使用相同的參數(shù)，傳回型態(tài)以及存取修飾字,58,介面 (Interface),語法 package 套件名稱 public interface 介面名稱 function 方法名稱(參數(shù)名稱: 資料型態(tài)): 回傳資料型態(tài); ,範例 package com.example public interface Device function play(): void; ,59,修飾字,可置於類別, 變數(shù), 常