Custom Dialog via PopupManager and TitleWindow (2)

第二種方式，我認為比較適合我們這種大型程式架構。
將TitleWindow，也就是欲彈出的視窗獨立寫成一個MXML Component，
在Flex Builder中, New一個新的MXML Component時，可以在下方選擇"Base on"，選TitleWindow。
接著，所產生的mxml檔，會以<mx:TitleWindow>框起來，裡面的內容就跟一般寫mxml一樣囉!
而在mainFrame中只要將mxml檔案名稱當作參數設在PopUpManager.createPopUp()就可以了!
(有種朝我們的目標：只有一個url入口，又更接近的感覺 XD, 這是上禮拜有聊到的)
DEMO: http://140.112.31.185/flextest/popUpMain.swf

popUpMain.mxml
<br />import mx.containers.TitleWindow;<br />import mx.managers.PopUpManager;<br /><br />private var titleWindow:TitleWindow;<br /><br />private function popUp():void {<br /> titleWindow = PopUpManager.createPopUp(this, CustomTitleWindow, true) as TitleWindow;<br /> PopUpManager.centerPopUp(titleWindow);<br />}<br />CustomTitleWindow.mxml
<br /><?xml version="1.0" encoding="utf-8"?><br /><mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"<br /> title="A Popup Window for Additional Task" <br /> backgroundAlpha="1.0" <br /> borderColor="white" <br /> borderAlpha="1.0" <br /> cornerRadius="0" <br /> dropShadowEnabled="false" <br /> showCloseButton="true" <br /> close="titleWindow_close(event)"><br /><br /> <mx:Script><br /> <![CDATA[<br /> import mx.controls.Alert;<br /> import mx.events.CloseEvent;<br /> import mx.managers.PopUpManager;<br /><br /> private function titleWindow_close(evt:CloseEvent):void {<br /> PopUpManager.removePopUp(this)<br /> }<br /> private function titleWindow_continue():void {<br /> Alert.show("You got it!");<br /> PopUpManager.removePopUp(this);<br /> }<br /> ]]><br /> </mx:Script><br /><br /> <mx:Style><br /> .titleText {<br /> fontSize: 14px;<br /> }<br /> .headingText {<br /> paddingTop: 10px;<br /> paddingBottom: 10px;<br /> fontSize: 10px;<br /> }<br /> </mx:Style><br /><br /> <mx:Text text="You can add any components (children) here for your tasks." <br /> width="100%" <br /> styleName="headingText" /><br /> <mx:TextArea text="Like this textarea. Let your system more flexible." <br /> width="100%" <br /> height="100%" /><br /> <mx:HBox width="100%"><br /> <mx:CheckBox id="checkBox" <br /> label="Click here to make sure you got it." <br /> width="100%" /><br /> <mx:Button label="Continue" <br /> enabled="{checkBox.selected}"<br /> click="titleWindow_continue()" /><br /> </mx:HBox><br /></mx:TitleWindow><br />

Custom Dialog via PopupManager and TitleWindow (1)

客製化與使用者互動的彈出視窗的方法，有兩種。
第一種方式為直接在主框架下透過PopUpManager將設置好的children加入TitleWindow，
也就是被客製的彈出視窗。
DEMO: http://140.112.31.185/flextest/popUpFrame.swf

<br />import mx.controls.Label;<br />import mx.events.CloseEvent;<br />import mx.containers.TitleWindow;<br />import mx.managers.PopUpManager;<br /><br />private var titleWindow:TitleWindow;<br /><br />private function init():void {<br /> var label:Label = new Label();<br /> label.text = "Hello world";<br /><br /> titleWindow = new TitleWindow();<br /> titleWindow.title = "Custom title";<br /> titleWindow.showCloseButton = true;<br /> titleWindow.width = 240;<br /> titleWindow.height = 180;<br /> titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);<br /> titleWindow.addChild(label);<br /><br /> PopUpManager.addPopUp(titleWindow, this, true);<br /> PopUpManager.centerPopUp(titleWindow);<br />}<br /><br />private function titleWindow_close(evt:CloseEvent):void {<br /> PopUpManager.removePopUp(titleWindow);<br />}<br />

Embed asset class

[Embed(source="assets/logo.png")]
上面這行標籤你一定不陌生..

他的用法很酷，功能也非常強大!!!
它常常搭配下面這行用法，
private var Image:Class;

型態是Class，API的定義如下:
Package： Top Level
Class： public dynamic class Class
Inheritance Class： Inheritance Object

A Class object is created for each class definition in a program. Every Class object is an instance of the Class class.

用來宣告了一個高抽象的class變數，很像是polymorphism的用法。但我不確定他明確的稱呼是?
所以Embed asset class 可以載入資源並bind到這個class上。
有趣的是下面這行，
//前面我們自行定義的class 可以拿來new object而且用Bitmap的變數去接它~~
var img:Bitmap = new Image();

我不知道為什麼Bitmap可以接受Image class的instance.
(在java裡, 需先做downcasting，如: MyObject a = (MyObject)c.clone();
clone時會回傳Object Reference，需先downcasting成MyObject, 才可assign給MyObject物件)

很特別，但在ActionScript裡是相當常用的做法.

<br />package<br />{<br />　import flash.display.Sprite;<br />　import flash.display.Bitmap;<br />　public class EmbedAsset extends Sprite<br />　{<br />　　[Embed(source="picture.jpg")]<br />　　private var Image:Class;<br />　　public function EmbedAsset()<br />　　{<br />　　　init();<br />　　}<br /><br />　　private function init():void<br />　　{<br />　　　var img:Bitmap = new Image();<br />　　　addChild(img);<br />　　}<br />　}<br />}<br />

之所以說Embed asset class強大，
是因為它可以load 圖, swf, 音樂, 字型，還可以套用CSS!!!

如果load一張圖，不需做額外的處理(如剪裁,scale等..)
用下面這種作法是最乾淨俐落的..
<br /><mx:image id="myLogo" source="@Embed('assets/logo.png')"><br />
你一定要看一下中文官方文件的例子,就會愛上Embed asset class這個用法
http://www.adobe.com/tw/devnet/flex/quickstart/embedding_assets/#EmbeddingImagesCSS

之前po過一篇Flex metadata tags
Embed asset class只是其中的一種，之前也介紹過bindable，威力也是相當強大..
我想Flex 4，metatdata flags應該會是重頭戲之一..
畢竟這是很多語言沒有的特色..

Flex Class Hierarchy

Add Sprite to Canvas (explanation)

在Flex的架構下, Canvas是無法加入Sprite等非UIComponent的DisplayObject的!
先看下面這種用法,

var widget:Sprite = new Sprite();
addChild(widget);

當執行到以上這段的時候, 會出現以下Runtime Error,

"Type Coercion failed: cannot convert Sprite to mx.core.IUIComponent"

原因在於addChild()的參數需要是IUIComponent, 假如我們直接將Sprite轉為IUIComponent, 就會出現Runtime Error. (如果硬用"as"來做casting, 很神奇的會回傳null, 還是會失敗)

來看看, Flex的視覺元件架構中, Sprite是FlexSprite和UIComponent的parent, 這正是強迫轉型產生錯誤的原因.

UIComponent -> FlexSprite -> Sprite -> DisplayObjectContainer -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

不過也不是沒辦法達到將Sprite加入至Canvas的目的的. UIComponent下的Containers有一個read only的屬性欄位rawChildren, 它繼承IChildList!! 因此, Containers等於直接可以有自己的小孩!!
(The IChildList interface defines the properties and methods for accessing and manipulating child lists, which are subsets of a DisplayObjectContainer's children.)

當然, 我們無法直接將Sprite加入至Containers, 因為Sprite並屬於UIComponent(並沒有實作IUIComponent介面..), 但是, 別忘記Containers下面有繼承IChildList的rawChildren, rawChildren竟然也有addChild(), 於是就可以達到將Sprite加到Canvas的目的囉!

var widget:Sprite = new Sprite();
this.rawChildren.addChild(widget);

可以看看以下的Flex視覺元件架構~~
DisplayObjectContainer: DisplayObjectContainer extends InteractiveObject class and it is a base shell for all containers which adds display objects in the container shell. . DisplayObjectContainer provides some common properties like… numChildren, tabChildren etc… and methods like addChild(), removeChilld() method related to the child display object management.

FlexSprite: FlexSprite is a subclass of the Player’s Sprite class and the superclass of UIComponent. It overrides the toString() method to return a string indicating the location of the object within the hierarchy of DisplayObjects in the application. The Sprite class is a basic display list building block: a display list node that can display graphics and can also contain children.

UIComponent: UIComponent extends Sprite and it is a base class for all Interactive and non Interactive component. The UIComponent class is not used as an MXML tag, but is used as a base class for other classes.

All Visual Components like VBox, HBox, Canvas, Button etc… extends UIComponent.

Add Sprite into Canvas

[方法一] 先將Sprite加到UIComponent, 再把UIComponent加到Canvas中
<br />var mySprite:Sprite = new Sprite();<br />mySprite.graphics.beginFill(0xFFCC00);<br />mySprite.graphics.drawCircle(40,40,40);<br />var UIRef:UIComponent = new UIComponent();<br />myUI.addChild(UIRef);<br />UIRef.addChild(mySprite);<br />
[方法二] 使用Canvas.rawChildren
<br />var mySprite:Sprite = new Sprite();<br />mySprite.graphics.beginFill(0xFFCC00);<br />mySprite.graphics.drawCircle(40,40,40);<br />myUI.rawChildren.addChild(mySprite);<br />

Validator驗證輸入

驗證使用的輸入的class多在mx.validators中, 如驗證信用卡號碼格式的mx.validators.CreditCardValidator, 貨幣格式檢查mx.validators.CurrencyValidator, Email格式檢查mx.validators.EmailValidator等等, 這些都是Validator的子類別. 就先來講比較常用到的StringValidator, NumberValidator, 和EmailValidator吧! 通常繼承自Validator的類別都擁有一個叫做requiredFieldError的屬性, 它用來定義當input為空白時的錯誤訊息, 而這三個類別因為較常見, 所以擁有其它較多種類的錯誤訊息, 要檢查的越詳細, 就得定義越多錯誤訊息, 如果我們不自己來定義, flex預設會用英文秀出來. 對了, NumberValidator可以透過domain屬性來指定要檢測的數字是整數還是實數, 而且還可以指定千分位用逗號區隔.

注意其中必須指定source="{yourTextInput}" trigger="{btn}" triggerEvent="click" property="text"

Flex的三種Binding方式

在我們編譯Flex的application後, 背後會自己產生一些Watcher來監控在程式中各個被binding的地方, 執行的時候, 當這些Watchers發現binding相關的地方被做了任何修改, Watcher會立即觸發change的events同步update執行與binding相關的工作. 在Flex中, 有三種binding的方式:

1. 利用大括弧 {}
2. MXML 的 tag
3. ActionScript 中的 mx.binding.utils.BindingUtils

1. 利用大括弧 {}
用metatag [Bindable]來bind屬性已經很熟悉了, 但如果想bind的是一般的actionscript的function呢? 通常必須伴隨[Bindable]一個屬性作為該function的參數.


當inString發生改變, 則立即觸發getNewText(), 但若把inString直接寫在getNewText()的參數, 那麼它只會在初始化的時候做一次而已, 無法達到binding的效果.

2. MXML 的 tag
用的效果和{}是一樣的, 差別在於得指定source和destination兩個屬性. 也可以在source中用{}, 達到的效果是一樣的. 下面的三個例子的效果是一樣的.

3. ActionScript中的 mx.binding.utils.BindingUtils

a. 直接bind兩個文字輸入框的text屬性:

BindingUtils.bindProperty(textarea, "text", textinput, "text");

b. 透過bindSetter來bind一個變數和set函式

public function mySetterBinding(event:FlexEvent):void {
var watcherSetter:ChangeWatcher = BindingUtils.bindSetter(setMyString, textInput2, "text");
}

將testinput2的text屬性與setMyString()給bind起來,
當textinput2的text被修改時, 則會立即觸發setMyString函式.

利用FileReference達到檔案下載

private const FILE_URL:String = "http://yoururltobedownload.zip";
private var fileRef:FileReference;
private var urlReq:URLRequest;

private function init():void {
    urlReq = new URLRequest(FILE_URL);
    fileRef = new FileReference();
    fileRef.addEventListener(Event.CANCEL, doEvent);
    fileRef.addEventListener(Event.COMPLETE, doEvent);
    fileRef.addEventListener(Event.OPEN, doEvent);
    fileRef.addEventListener(Event.SELECT, doEvent);
    fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
    fileRef.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
    fileRef.addEventListener(ProgressEvent.PROGRESS, doEvent);
    fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);
}

private function doEvent(evt:Event):void {
    var fr:FileReference = evt.currentTarget as FileReference;   
}   

private function download():void {
    fileRef.download(urlReq);
}   

<mx:Button id="downloadBtn" label="Download" click="download()" toolTip="{FILE_URL}" />

RichTextEditor 格式化文章

很常見的Rich Text Editor, 在flex裡面早就幫我們內建好了, 用來輔助user寫文章~

順便加了統計字數的DEMO: http://140.112.31.185/flextest/richtext.swf

ActionScript---------------------------------------

import mx.events.FlexEvent;
import mx.controls.TextArea;
import mx.controls.RichTextEditor;

private const MAX_CHARS:uint = 100;

private function richTextEditor_creationComplete(evt:FlexEvent):void {
   RichTextEditor(evt.currentTarget).textArea.maxChars = MAX_CHARS;
}

private function richTextEditor_change(evt:Event):void {
   var rte:RichTextEditor = evt.currentTarget as RichTextEditor;
   var rteTA:TextArea = rte.textArea as TextArea;
   rte.status = rteTA.length + "/" + rteTA.maxChars;
}

MXML-----------------------------------------------

<mx:RichTextEditor id="richTextEditor"
   title="Rich Text Editor"
   height="100%"
   width="100%"
   showToolTips="true"
   change="richTextEditor_change(event);"
   creationComplete="richTextEditor_creationComplete(event);" />

Get URL query-string Variables within Flex Application

在瀏覽器輸入一個swf的url, 如http://yourserver/yourapp.swf?name=Odd&uid=32 ,如何讓flex取得這個url的query-string呢? 主要是透過mx.core.Application.application.parameters這個object, 它利用hash map記錄了在url中的name-value pairs. 因此更方便, 不需要透過HTML使用JavaScript code來達成了.

DEMO: http://140.112.31.185/flextest/urltest.swf?uid=123&account=odd@nccu.edu.tw

<br />[Bindable]<br />public var pass1:Object;<br />[Bindable]<br />public var pass2:Object;<br /><br />private function init():void {<br /> pass1 = mx.core.Application.application.parameters.uid;<br /> pass2 = mx.core.Application.application.parameters.account;<br />}<br />

<br /><mx:form><br /> <mx:formitem label="uid"><br /> <mx:textinput text="{pass1.toString()}"><br /> </mx:FormItem><br /> <mx:formitem label="account"><br /> <mx:textinput text="{pass2.toString()}"><br /> </mx:FormItem><br /></mx:Form><br />

Flex Component Libraries

超多已經寫好的mxml介面，是opensource，而且一直有在新增維護。
Flex Interface Component Library

Yahoo!發表的一個Flash/Flex component library，也是opensource，也挺酷的。
ASTRA: ActionScript Toolkit for Rich Applications
Yahoo!的Flash計畫以及相關library。
Yahoo! Flash Developer Center

只要輸入一個swf的url，就可以判斷這個flash檔是不是flex寫出來的。
Is it flex?

SharedObject簡單用法

ShareObject允許我們將小量資料儲存在client端，類似瀏覽器的Cookie。應用程式只能存取屬於自己的資料，且應用程式必須和資料同屬於同一個domain，但資料並不能傳送到伺服器端。
ShareObject 提供下面的方法

clear(): 從ShareObject中清空所有的資料，並從檔案磁碟刪除ShareObject檔案。
flush(): 將ShareObject直接寫入client的檔案。
getLocal(): 回傳ShareObject所在的domain。如果不存在，則會在client建立一個新的ShareObject。
getSize(): Gets the size of the SharedObject file, in bytes. The default size limit is 100 KB, although it can be larger if the client allows it.

[簡單範例]
A.mxml (把資料寫入SharedObject存在client端) ------------------

public var mySO:SharedObject;
mySO = SharedObject.getLocal("sharedname");
mySO.flush();
//在client端執行，Flash Player會產生sharedname.sol到下面路徑
//C:/Documents and Settings/username/Application Data/Macromedia/Flash Player/#SharedObjects/一串數字/localhost/sharedname.sol
//這種寫法只能在同一個swf檔中共同使用SharedObject, 可用getLocal的第二個參數達到跨swf存取

public var mySO2:SharedObject;
mySO2 = SharedObject.getLocal("shared2", "/");
//C:/Documents and Settings/username/Application Data/Macromedia/Flash Player/#SharedObjects/一串數字/domain name/sharedname.sol
//也就是說, 利用getLocal的第二個參數來指定儲存位置，即目前網域的子目錄

//存取 ShareObject 資料的方法很簡單，只要透過 data 屬性，後面接需要儲存的變數名稱，如下：
mySO2.data.username = "odd";
mySO2.data.blog = "oddlee.blogspot.com";
mySO2.flush();
//記得要做flush();才會把資料寫入檔案

B.mxml (B.swf將剛才存在同一處client端的SharedObject取出) -----------------
[Bindable]
public var username:String;

public var myData:SharedObject;
myData = SharedObject.getLocal("shared2", "/");
username = myData.data.account;
...
<mx:textinput id="user" text="{username}">

Flex Examples

超多flex的範例教學程式碼
http://blog.flexexamples.com/
collected-links-to-actionscript-30-examples

Flex Auto-Complete

http://kuwamoto.org/2006/05/11/example-code-updated-for-beta-3/

Upload File in Flex

Demo: http://140.112.31.185/flex/DBtest/bin/fileupload.html
upload.php
<br /><?php<br /> // you send messages back to the client<br /> // and then move the file from php's temporary upload directory to your local directory<br /> // Filedata is the default name used in uploading<br /> echo "\nReceiving upload...\n";<br /> echo "temporary file name = " . $_FILES['Filedata']['tmp_name']."\n";<br /> echo "file name = " . $_FILES['Filedata']['name']."\n";<br /> echo "file size = " . $_FILES['Filedata']['size']."\n";<br /> echo "attempting to move file...\n";<br /> move_uploaded_file($_FILES['Filedata']['tmp_name'], "./".$_FILES['Filedata']['name']);<br /> echo "file moved\n";<br />?><br />

fileupload.mxml
<br /><?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#f6f6f6" backgroundGradientColors="[#f6f6f6, #bbbbbb]"><br /><br /> <mx:Label x="10" y="10" text="File Upload" fontSize="20" fontWeight="bold"/><br /> <mx:HRule x="10" y="49" width="80%"/><br /> <br /> <mx:Button x="10" y="59" label="Upload" click="{upload()}"/><br /> <br /> <mx:Script><br /> <![CDATA[<br /> import flash.events.DataEvent;<br /> <br /> public var fileRef:FileReference = new FileReference();<br /> <br /> public function upload():void {<br /><br /> fileRef.addEventListener(Event.SELECT, selectHandler);<br /> fileRef.addEventListener(Event.COMPLETE, completeHandler);<br /> fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA , uploadCompleteHandler);<br /> <br /> try {<br /> var success:Boolean = fileRef.browse();<br /> }<br /> catch (error:Error) {<br /> trace("Unable to browse for files.");<br /> }<br /> }<br /> <br /> public function selectHandler(event:Event):void {<br /> var request:URLRequest = new URLRequest("http://140.112.31.185/flex/php/upload.php");<br /> try {<br /> fileRef.upload(request);<br /> textarea1.text = "uploading " + fileRef.name + "...";<br /> }<br /> catch (error:Error) {<br /> trace("Unable to upload file.");<br /> }<br /> }<br /> <br /> public function completeHandler(event:Event):void {<br /> trace("file uploaded complete");<br /> }<br /> <br /> public function uploadCompleteHandler(event:DataEvent):void {<br /> trace("uploaded... response from server: \n" + String(event.data));<br /> textarea1.text += event.data as String;<br /> }<br /> <br /> ]]><br /> </mx:Script><br /> <br /> <mx:TextArea x="10" y="89" width="327" height="134" id="textarea1"/><br /><br /></mx:Application><br />