天天看點

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

這篇教程算是AIR的 Hello world,寫給那些知道一點AIR,想要開始AIR開發的人。讀這篇教程你可以沒有任何Flex的基礎,我會告訴你如何建立你的第一個項目,并且釋出一個HelloWorld程式。

下面我們開始講解以下的内容。

1. 準備工作。

2. 第一個 AIR程式(編寫、運作、調試)

3. 釋出AIR程式。

4. 安裝已釋出的AIR安裝包。

1.準備工作。

AIR 的開發環境非常簡單,你唯一需要的就是FlexBuilder3,下載下傳位址我就不提供了,隻需要在google中搜尋”Flex builder3 下載下傳”,你會得到一大把位址。 Flexbuilder的安裝也很簡單,直接運作安裝程式,然後一路按照導航菜單下去既可。

2. 第一個 AIR程式(編寫、運作、調試)(圖檔點選可以放大)

現在我們打開剛安裝好的FlexBuilder3,見下圖,選擇 打開File — New — Flex project.

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

接 下來是輸入程式名,我寫的是My first air app, 在Applicaiton Type那選擇Desktop application(runs in Adobe AIR),接這直接點Finish,項目将建立在安裝FlexBuilder時設定的work space裡,這個檔案夾沒什麼特别(你以後可以把你的項目放在任意的檔案夾中,使用File — Import — Flex project導入)

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

現 在你可以在左側的導航中看見你的項目My first air app。你可以看倒項目主程式main.mxml和配制檔案main-app.xml(在AIR迷你教程–使用自定義視窗…,中我們有用到這個文 件,現在不需要管他)。右邊的主視窗區域就是已經打開的main.mxml的内容。

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

按 照下圖的内容寫我們的第一個air程式,也可以算我們第一個flex程式(Flex和AIR開發完全一樣,隻是在 AIR中多了一些包的支援使我們的程式成為桌面程式)。程式中有一個按鈕,點選觸發click事件,接着trace(trace是flex中用來在控制面 版輸出資訊的指令,在Debug模式中我們經常會使用它來幫助我們調試程式)出 event 的内容,并且執行彈出視窗現在一段文字。

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

下面我們運作程式,按照下圖,右鍵點選main.mxml — Run As — Adobe AIR Application.

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

運作後我們點選按鈕,完成我們整個demo的内容。

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

好,現在我們已經結束從編寫到運作的過程。下面我們來調試(Debug)。如圖,我們在第9行代碼左邊藍色小點的位置,左鍵單擊,這樣你應該可以看倒和圖上一樣的藍色小點了,這就是我們設定的程式斷點,在調試模式中,程式會在這樣的位置停下來。

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

我們開始調試,右鍵點選main.mxml — Debug As — Adobe AIR Application.

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

然 後你可能會看倒這樣的提示,這是問你是否要将我們的主視窗切換到調試模式。你可以看見圖檔右上角有顯示“Flex” 旁邊有一個flex的圖示,你可以點開那個菜單看見裡面有三種視圖Debugging, Development和Profiling。 我們已經用了其中2個,Development就是我們上面寫程式的視圖,Debugging是我們即将要切換到的視圖,Profiling是用來幫助我 們檢查程式的性能的工具,可以幫助我們解決Memory leak等等的問題,這個不需要知道,以後有機會用到的時候再研究也不遲。 現在點Yes繼續。

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

程 序運作後,點選按鈕,你會發現程式停在了下面的位置,一個綠色的橫杠标示出程式現在停在了短點的位置,這個時候我們就可以檢視這一時刻目前對象的各種我們 感興趣的資訊了,你可以試着切換螢幕右上視窗的 Variables選像卡,會看到目前活動的對象,這裡我們也不多說,嘗試多調試下程式後你自然就明白Variables裡面的内容了,都是很直覺的信 息。 接下來如果我們點上面綠色的箭頭,程式會繼續執行直到遇到下一個斷點,如果按F6,會單步執行。

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

以上就是全部第2點的内容。

3. 釋出AIR程式。

既然 AIR是桌面應用程式,那它自然也需要按裝,現在我們就來看怎麼把我們寫好的程式釋出成按裝包。點選圖上紅色圓圈的按鈕,彈出如圖所示視窗。在Export file中填上你想要的按裝包的名字,點選Next

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

這裡我們釋出程式需要有一個Key,那是你程式的證書。因為第一次釋出,是以點Create。

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

打開如圖所示視窗,填上名字,密碼,點選Browser選擇儲存位置。我的是Mac擊是以界面有些不一樣,但是操作和windows是一樣的。我儲存了名叫MyKey的證書。

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作
在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作
在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

上圖點選OK後你可以看倒證書已經選擇完畢。填上你的密碼,點選Finish.

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

如下紅色圓圈所示,在你的項目檔案夾裡出現一個main.air的檔案,那就是我們釋出的AIR程式安裝包了。

在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

4. 安裝已釋出的AIR安裝包。

使 用AIR程式的人當然不需要flexbuilder這樣的東西,他們隻需要按裝已下air程式的運作環境。就像run java app需要java runtime, 運作 air需要 air runtime,這裡是下載下傳位址 http://labs.adobe.com/downloads/air.html. 下載下傳 windows版或者mac版。 下載下傳後安裝既可。

按裝完runtime之後,輕按兩下main.air就可以開始将air程式,安裝過程和普通應用程式無異。

好了,看完以上内容,相信你已經可以開始自己的AIR程式。至于更深入的内容大家可以繼續看以後的AIR教程。

This entry was posted in AIR 迷你教程 and tagged AIR, AIR 迷你教程. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.在Flex builder3 中建立、釋出AIR程式以及 AIR程式的安裝運作

繼續閱讀