MXML與ActionScript教學(xué).ppt

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

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

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

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

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

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

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

8、t 相關(guān)性 ActionScript 語(yǔ)法,30,ActionScript API 種類,Flash Player APIs Flex Framework APIs Custom APIs,31,Flash Player APIs,Flash Player本身所有，能在run-time環(huán)境運(yù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控制項(xiàng) (Button, TextInput), 管理器 (Manager) 及其他工具類別 (Utility),33,Custom APIs,客製化的類別 能使用Flash Player API及Flex framework API,34,使用 ActionScript,MXML標(biāo)籤行列 (Inline within MXML tags) MXML標(biāo)籤內(nèi)層 (Nested within MXML tags) MXML Script標(biāo)籤內(nèi)層 (In MXML scripts) ActionScript 類別,35

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

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

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

14、 */,43,基本語(yǔ)法 2/2,括號(hào)(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) . 大括號(hào)(Braces) Code Block e.g. If ( xx) yy ; Object literal e.g. name:”asa”,gender:”M”; Data Binding 中括號(hào)(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,語(yǔ)法 修飾字 var 變數(shù)名稱: 資料型態(tài); 範(fàn)例 var userName: String; 以var 關(guān)鍵字宣告 通常宣告於方法(method)內(nèi)，若是在方法外宣告就稱為內(nèi)容屬性，且範(fàn)圍會(huì)遍及整個(gè)類別 名稱由字母、數(shù)字，錢字號(hào)及底線組成 開頭不能是數(shù)字 依慣例，

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

18、nt, Number:回傳數(shù)值當(dāng)成String Boolean:回傳String “true” or “false” Array:將Array的值以逗號(hào)分隔回傳 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 可用實(shí)字表示法建立空陣列 可以當(dāng)HashMap用 範(fàn)例 var user:Array=new Array(); user0=“james”; user1=“asa”; var names:Array=“james”,”asa”; /實(shí)字表示法,50,陣列(Array) 2/3,length property 陣列長(zhǎng)度，陣列item個(gè)數(shù) push method 新增一個(gè)item，回傳新的length pop 從array最後移除一個(gè)item並回傳 shift 從array index 0 移除一個(gè)item並回傳，所有

20、剩下的item index均往前移 unshift 新增一個(gè)item至array index 0，原來(lái)的item index均往後移 slice 從陣列中複製出一個(gè)陣列，arr.slice(3,4)-不包含4 splice 從陣列中移出成一個(gè)陣列，arr.splice(3,4)-從3開始移除4個(gè)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,運(yùn)算子,+ - * / % + - = 判斷相等 else 敘述; switch( 變數(shù)) case (“a”): 敘述; break; default: 敘述; ,54,流程控制-迴圈,for (var i:int =0; i=10; i+) 敘述; while(布林運(yùn)算) 敘述; Do 敘述; while(布林運(yùn)算) 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),語(yǔ)法 修飾字 function 方法名稱(變數(shù)名稱: 資料型態(tài),args):回傳資料型態(tài) 方法主體 範(fàn)例 function test(str: String,rest): void 以function 關(guān)鍵字宣告 把一些敘述集合起

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