三秒鐘彈出視窗程式

本人討厭拿Hello World來練習,所以第一個自己實做的Flex程式(嚴格來講應該只是mXML的練習程式)就是在Javascript當中時常用來除錯的Alert()效果,想當年,我還老是用Alert()來跟Javascript對罵shit呢!

廢話不多說,先來看看要怎麼開始這支練習程式。

為了快速上手,我使用FlexBuilder來操作,因為它就是為Flex量身訂做的軟體,對於不擅長製作UI或是懶得用AS寫UI的人,是個可以輕鬆打造品質保證UI的方便軟體;不過如果你連AS都不懂,建議你還事先乖乖回家打基礎,不要一開始就使用懶人工具包,起碼得先搞懂這些東西是怎麼來的先。如果你對AS已經很熟了,除非個人嗜好,不然就快點用FlexBuilder幹掉討厭的UI問題吧!(開玩笑,我連弄個漂亮的漸層矩形都要半天哩)不用它你難道要用筆記本一個字一個字打嗎?別鬧了,雖然說程式要親手寫才有樂趣,但是那是給還不會寫的人的要求,你如果會了,不覺得快速寫出你要的程式功能才覺得帥嗎?

建立一個mxml Application的檔案,預設應該是進到Source的介面,不過你也可以隨時切換到Design的介面來處理視覺效果,但此時請先看到程式碼的部份,因為直接解釋程式碼會快一點,新檔案一開始,你應該會看到以下的預設程式碼。


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application>

第一行的部份,宣告了xml的版本以及檔案的編碼方式,基本上,都建議各位使用utf-8,不要使用big5惹人討厭碼。

第二行開始,才是整個網頁主體內容的宣告,正確來說, <mx:Application>所宣告的範圍其實就是整個應用程式元件執行並且呈現的內容,你可以把它當成網頁檔案當中的HTML來看待(因為它裡面還包括了script以及style,所以不能夠單純的視為body)。在這裡,我加入了一些style的控制項,如果你熟悉CSS,那麼寫這些Style的控制項一定是相當簡單容易,只要把原本font-size的格式改成fontSize,就可以輕易設定了,基本上這也是JS對於CSS的設定方式。於是第二行就變成了這樣:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="224" height="172" backgroundColor="#666666" color="#FFFFFF" fontSize="11">

要注意的是,fontSize只能夠用數字型態,不能夠加上px等單位。

接著,我就要寫Alert()的function了!

首先,請使用 <mx:Script> 來宣告script的程式範圍,就像是Javascript一樣,你要先宣告<script type="text/javascript">才能夠開始撰寫是一樣的道理,只不過在這裡所有的標籤你都必須使用<mx:>開頭而已。(嘿!都跟你說這是mXML了啊!)FlexBuilder很自動的會幫你加上<![CDATA[ ]]> 的標記(註:這個東西改天專文解釋),而我們所要做的就是在裡面寫下要執行的function。


import mx.controls.Alert;
private function alertTest():void{
Alert.show('這是彈出視窗測試','視窗名稱在這裡');
}

function的內容很簡單,一開始你需要的是正確引入關於Alert()功能需要的內定元件,因此使用 import mx.controls.Alert; ,接著你必須要宣告function的生存空間以及型別,在ActionScript2之後,變數以及函式的宣告比起PHP來講是嚴謹許多,這樣的嚴謹,在程式運行以及除錯上都比較容易,因此請務必要遵守好的程式撰寫習慣。

當執行這支程式的時候,就會執行 Alert.show('這是彈出視窗測試','視窗名稱在這裡');的動作,基本上,這就是這支簡單程式的結構。Alert.show是內定的函式,所以你只要按照Flex提醒你的參數結構把所需要的參數填進去即可。

到這裡為止,script的部分已經完全結束囉!再來就是我們頁面呈現的部份。

頁面的部份很簡單,請切換到Design模式,隨便拉一個按鈕進來,並且對按鈕命名(這是好習慣),並且在右邊設定的部份找到onclick的設定,把剛剛的function名稱填進去,就是alertTest();弄好以後,切到程式模式,確認沒有警告訊息後,就編譯程式,這時候你就會看到非常漂亮的彈出視窗效果囉!

三秒鐘彈出視窗程式1
執行畫面1

三秒鐘彈出視窗程式2
執行畫面2

三秒鐘彈出視窗程式3
執行畫面3

Advertisements

2 thoughts on “三秒鐘彈出視窗程式

  1. 哈,我想了好久,到底是don’t agree about what,我想應該是"為了快速上手,我使用FlexBuilder來操作,因為它就是為Flex量身訂做的軟體,不用它你難道要用筆記本一個字一個字打嗎?別鬧了,雖然說程式要親手寫才有樂趣,但是那是給還不會寫的人的要求,你如果會了,不覺得快速寫出你要的程式功能才覺得帥嗎?"這一段吧!

    不好意思,這個讓我補充說明一下吧!

    基本上,我很不喜歡拉拉隊的寫程式風格,就是介面拉一拉,模組拉一拉,寫程式不用大腦的那種,連我自己到現在也還是喜歡徒手打程式。不過Flash的視覺效果實在連我自己都不愛寫,更不用說話那個漸層矩形了。

    Flex棒的是省去了程式開發人員最傷腦筋的介面問題,不用花太多功夫處理UI,這的確是相當值得推崇的部份,所謂的快速方便,還是針對Flex UI的部份,並不是我鼓勵大家變成拉柆隊工程師ㄛ!

    Anyway,感謝Idetrorce的提醒,為了避免誤導更多人,我還是乖乖把整段話改寫得更清楚啦~哈哈!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s