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"

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 />

Module簡單介紹

Flex中, Modules是在一個application可用來load或unload外部swf的東西, Modules不可以被單獨執行, 要執行Modules的內容必定得在特定application中, 也就是多個applications可share某一個module. 使用Modules的主要好處是在需要的時候才動態的把不同module load進來, 並在不需要的時候unload來free memory, 以達到減小main application檔案大小的目的. 來看個例子吧~

http://140.112.31.185/flextest/moduleExample/moduleExample.swf

moduleExample.mxml (main application)
仔細注意可以看到是使用mx:ModuleLoader喔!
<br /> <mx:tabnavigator id="tn" width="100%" height="100%" creationpolicy="auto"><br /> 　　<mx:vbox id="vb1" label="Column Chart Module"><br /> 　　　　<mx:label id="l1" text="ColumnChartModule.swf"><br /> 　　　　<mx:moduleloader url="ColumnChartModule.swf"><br /> 　　</mx:VBox><br /> <br /> 　　<mx:vbox id="vb2" label="Pie Chart Module"><br /> 　　　　<mx:label id="l2" text="piehchartmodule.swf"><br /> 　　　　<mx:moduleloader url="piechartmodule.swf"><br /> 　　</mx:VBox><br /> <br /> 　　<mx:vbox id="vb3" label="Line Chart Module"><br /> 　　　　<mx:label id="l3" text="linehchartmodule.swf"><br /> 　　　　<mx:moduleloader url="linechartmodule.swf"><br /> 　　</mx:VBox><br /> </mx:TabNavigator><br />
LineChartModule.mxml (其它module依此類推)
注意開頭不再是mx:Application, 而是mx:Module喔!
<br /> <?xml version="1.0" encoding="utf-8"?><br /> <mx:module mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"><br /> <mx:script><br /> 　　　<![CDATA[ 　　　　　　import mx.collections.ArrayCollection; 　　　　　　[Bindable] 　　　　　　public var expenses:ArrayCollection = 　　　　　　　　　new ArrayCollection([ 　　　　　　　　　　　　{Month:"Jan", Profit:2000, Expenses:1500, Amount:450}, 　　　　　　　　　　　　{Month:"Feb", Profit:1000, Expenses:200, Amount:600}, 　　　　　　　　　　　　{Month:"Mar", Profit:1500, Expenses:500, Amount:300} 　　　　　　]); 　　　]]><br /> </mx:Script><br /> <mx:linechart id="myChart" dataprovider="{expenses}" showdatatips="true"><br /> <mx:horizontalaxis><br /> <mx:categoryaxis dataprovider="{expenses}" categoryfield="Month"><br /> </mx:horizontalAxis><br /> <mx:series><br /> <mx:lineseries yfield="Profit" displayname="Profit"><br /> <mx:lineseries yfield="Expenses" displayname="Expenses"><br /> </mx:series><br /> </mx:LineChart><br /> <mx:legend dataprovider="{myChart}"> <br /> </mx:Module><br /> <br /> <br />

在mxml中呼叫javascript function

早安~ 晨型人, 昨天寫了prefuse和jung的converter太高興, 所以12:30才睡 orz, 睡到快8點 ~"~

在mxml中呼叫javascript的函式主要透過ExternalInterface class, 直接看run例子吧~

main.mxml --------------------------

private function callJavaScript():void {
   if(ExternalInterface.available) {
       ExternalInterface.call("sayHelloWorld");
   } else {
       Alert.show("ExternalInterface is not available");
   }
}
<mx:Button label="Say 'Hello World'" click="callJavaScript();" />

HTML document ------------------------

<script language="JavaScript" type="text/javascript">
function sayHelloWorld() {
   alert("Hello World, from JavaScript");
}
</script>

先用ExternalInterface.available確認你的flex是否支援外部介面.
這邊所指的html通常是編輯/html-template/下面的index.template.html
我想這樣就應該可以讓user點擊認證信中html的url, 將id和mail透過javascript傳給swf了~

Load external SWF

晨型人,早安~ 今天我睡到8:00 orz
不換頁的動態載入外部swf..
little demo => http://140.112.31.185/flextest/dynamicswf.html
不過這種方式並不適合用來寫大程式, 比較正式的寫法好像要用mxml module, 明天我再看看 XD

actionscript:

private function loadExternal(event:Event, n:Number):void {
  if(n == 1) {
     bechanged.source = "b.swf";
  } else {
     bechanged.source = "a.swf";
  }
}

panel:

<mx:SWFLoader id="bechanged" source="a.swf" showBusyCursor="true" />
<mx:Button id="change1" label="i'm lovin' it" click="loadExternal(event,1);" />
<mx:Button id="change2" label="udn.com" click="loadExternal(event,2);" />

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

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 />

MXML Connect to MySQL via PHP

Demo在這裡: http://140.112.31.185/flex/DBtest/bin/DBtest.html

先在資料庫建好一個叫做"sample"的資料表，其中欄位有userid, username, emailaddress
接著寫一個PHP程式，如下:

<br /><?php<br />define( "DATABASE_SERVER", "localhost" );<br />define( "DATABASE_USERNAME", "root" );<br />define( "DATABASE_PASSWORD", "root" );<br />define( "DATABASE_NAME", "sample" );<br /><br />//connect to the database<br />$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);<br />static $number = 0;<br /><br />mysql_select_db( DATABASE_NAME );<br /><br />// Quote variable to make safe<br />function quote_smart($value)<br />{<br /> // Stripslashes<br /> if (get_magic_quotes_gpc()) {<br /> $value = stripslashes($value);<br /> }<br /> // Quote if not integer<br /> if (!is_numeric($value)) {<br /> $value = "'" . mysql_real_escape_string($value) . "'";<br /> }<br /> return $value;<br />}<br /><br />if( $_POST["emailaddress"] AND $_POST["username"])<br />{<br /> //add the user<br /> $Query = sprintf("INSERT INTO users VALUES ('%d', %s, %s)", $number, quote_smart($_POST['username']), quote_smart($_POST['emailaddress']));<br /> $number = $number + 1;<br /> $Result = mysql_query( $Query );<br />}<br /><br />//return a list of all the users<br />$Query = "SELECT * from users";<br />$Result = mysql_query( $Query );<br /><br />$Return = "<users>";<br /><br />while ( $User = mysql_fetch_object( $Result ) )<br />{<br /> $Return .= "<user><userid>".$User->userid."</userid><username>".$User->username."</username><emailaddress>".$User->emailaddress."</emailaddress></user>"; <br />}<br />$Return .= "</users>";<br />mysql_free_result( $Result );<br />print ($Return)<br />?><br />

在Flex上新增一個Flex Project，編寫一個mxml程式:

<br /><?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="userRequest.send()"><br /> <mx:HTTPService id="userRequest" url="http://localhost/flex/php/request.php" useProxy="false" method="POST"><br /> <mx:request xmlns=""><br /> <username>{username.text}</username><emailaddress>{emailaddress.text}</emailaddress><br /> </mx:request><br /> </mx:HTTPService><br /> <mx:Form x="22" y="10" width="493"><br /> <mx:HBox><br /> <mx:Label text="Username"/><br /> <mx:TextInput id="username"/><br /> </mx:HBox><br /> <mx:HBox><br /> <mx:Label text="Email Address"/><br /> <mx:TextInput id="emailaddress"/><br /> </mx:HBox><br /> <mx:Button label="Submit" click="userRequest.send()"/><br /> </mx:Form><br /> <mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.users.user}"><br /> <mx:columns><br /> <mx:DataGridColumn headerText="User ID" dataField="userid"/><br /> <mx:DataGridColumn headerText="User Name" dataField="username"/><br /> </mx:columns><br /> </mx:DataGrid><br /> <mx:TextInput x="22" y="292" id="selectedemailaddress" text="{dgUserRequest.selectedItem.emailaddress}"/><br /></mx:Application><br />