兩天所了解的Adobe Air

自己給自己挖的坑...哎...

自己給自己挖的坑级乍,哭著也要填刺啦!那就開始吧放坏!


下面內(nèi)容是一個(gè)Flex小白,兩天下來(lái)的總結(jié)

這里要說(shuō)的亿傅,就是那些SWF .

SWF 大多數(shù)人的概念媒峡,應(yīng)該就是動(dòng)畫了吧。就像在幾年前葵擎,大學(xué)里面那時(shí)候adobe dreamweaver嵌在網(wǎng)頁(yè)里面用的flash谅阿。

其實(shí),不然

SWF還有一個(gè)分身酬滤,就是EXE程序签餐。

還有一個(gè)比較牛逼的名字:富英特爾應(yīng)用

今天的重點(diǎn)是: Flex


Adobe Air的由來(lái)和目的

這個(gè)Adobe Air發(fā)布的玩意兒,可以生成web版本和桌面EXE版本的SWF

我們來(lái)看看官方怎么宣傳的:
通過(guò)adobe air 運(yùn)行時(shí)盯串,開發(fā)員可以將同一份代碼打包到windows氯檐,macos,以及ios体捏,android設(shè)備的原生應(yīng)用程序和游戲中冠摄。覆蓋范圍:5億臺(tái)移動(dòng)設(shè)備,10億多桌面系統(tǒng)和移動(dòng)應(yīng)用商店译打。

前提是:依賴Adobe Flash player

但是耗拓,現(xiàn)在HTML5各種飛起,蘋果已經(jīng)準(zhǔn)備拋棄flash player奏司,這...就尷尬了...


SWF兩個(gè)生成物的區(qū)別

SWF有兩種

  • Flash

使用時(shí)間軸和動(dòng)畫幀的概念乔询,做成動(dòng)畫效果。

  • Flex

使用MXML標(biāo)簽設(shè)計(jì)用戶界面和組建韵洋,然后和連接數(shù)據(jù)源的方式來(lái)實(shí)現(xiàn)竿刁。

Flex 更多的是面向?qū)ο缶幊? Flash更像是視頻編輯

對(duì)于Flex如果你有javascript開發(fā)經(jīng)驗(yàn)的話黄锤,你會(huì)發(fā)現(xiàn),其實(shí)更像這就網(wǎng)頁(yè)開發(fā)食拜。MXML開發(fā)界面鸵熟,然后actionscript寫邏輯處理,并且做數(shù)據(jù)綁定负甸。
說(shuō)到這個(gè)數(shù)據(jù)綁定流强,actionscript 的數(shù)據(jù)綁定跟前幾天看的google家的angularJS的寫法一樣!?
而且呻待,數(shù)據(jù)定義和swift一樣打月?!(我還沒有看swift蚕捉,囧...)


別的不多說(shuō)奏篙,從程序開始:先看Flex程序的組成

Flex程序至少要包含兩個(gè)東西:

  • 一個(gè)MXML文件
  • 一個(gè)程序描述xml文件

就這么簡(jiǎn)單


MXML:界面實(shí)現(xiàn)代碼的玩意兒

下面說(shuō)說(shuō)MXML和HTML的差別

上面說(shuō)到MXML文件,用來(lái)寫界面迫淹,其實(shí)秘通,也就是和HTML差不多概念。

在HTML里面定義一個(gè)button可以是這樣:

<button></button>

在MXML里面敛熬,是這樣:

<mx:Button label=""/> 

就多了一個(gè)前綴而已肺稀,新版本的話,準(zhǔn)備拋棄mx前綴荸型,使用s前綴盹靴,具體詳情,大家可以看新的SDK瑞妇。

MXML的說(shuō)法是這樣的:

  • 從xml演變過(guò)來(lái)的稿静,同時(shí)也遵循W3C標(biāo)準(zhǔn),所以辕狰,就當(dāng)作一個(gè)XML來(lái)寫吧改备。xml支持的事件標(biāo)準(zhǔn)也可以在MXML里面來(lái)實(shí)現(xiàn)。
  • 支持超文本協(xié)議HTTP和簡(jiǎn)單對(duì)象訪問協(xié)議OAP
  • 在Flex里面蔓倍,提供了和服務(wù)器端JAVA對(duì)象交互標(biāo)簽:POJOs和EJBs悬钳。
  • CSS
  • 支持圖像標(biāo)準(zhǔn):JPEG GIF PNG SVG。

那么偶翅,就這樣OK了默勾,這個(gè)寫MXML,其實(shí)就當(dāng)作寫HTML界面吧聚谁。而且也可以用CSS的方式做layout和屏幕適配母剥。

那,說(shuō)到適配,既然adobe說(shuō)环疼,adobe air一套代碼可以在多個(gè)平臺(tái)上發(fā)布习霹,那么適配總歸是一個(gè)問題。
那炫隶,怎么適配呢淋叶?

它用nested layout container來(lái)實(shí)現(xiàn)!

做過(guò)ios開發(fā)的人伪阶,是不是有印象煞檩,NSLayoutConstraint!
爽不爽望门!

而且形娇,和xcode一樣,一樣可以用代碼或者使用storyboard來(lái)實(shí)現(xiàn)筹误!不過(guò)呢,這是Flex Builder4.7以前的版本的事情了癣缅,4.6以前還有視圖開發(fā)功能的厨剪,4.7以后的版本就木有啦,各位友存,請(qǐng)純代碼開發(fā)吧祷膳。
就是這么任性!
對(duì)于碼農(nóng)來(lái)說(shuō)屡立,這都不算事兒直晨。

剩下的,就權(quán)當(dāng)是寫HTML了吧膨俐。


那個(gè)放程序邏輯的地方

Actionscript實(shí)現(xiàn)程序邏輯

Actionscript完全實(shí)現(xiàn)了E4x勇皇,就是ECMAScript For XML。
ECMAscript For XML 是什么玩意兒呢焚刺?其實(shí)我也不知道...我理解就是啊敛摘,Actionscript很牛逼!就這樣乳愉。

HTML代碼添加自己的腳本:

<script> </script>

MXML代碼添加自己的腳本:

<mx:script> 

因?yàn)锳ctionscript基本上就是script

  • 所以我理解成:Actionscript可以做javascript能做的事情:自定義class兄淫,package,擴(kuò)展新的組建蔓姚,使用內(nèi)建組建捕虽。

讀 Actionscript 代碼的正確姿勢(shì)

面向?qū)ο缶幊?/strong> Actionscript

Actionscript 完全基于OOP的概念做的,還有package的概念坡脐,所以泄私,有點(diǎn)像是c#混javascript(本人沒有好好學(xué)過(guò)java,所以不清楚java的東西。)所以挖滤,也和HTML開發(fā)里面的崩溪,HTML寫界面,然后斩松,新建js文件來(lái)實(shí)現(xiàn)各種邏輯伶唯。

舉個(gè)栗子:

自定義一個(gè)button,并使用這個(gè)button

自定義一個(gè)button
package myCustomControls{
    
    public class greatButton extends Button(){

        ...my code.
    }
    ...
}

那惧盹,怎么用呢H樾摇?

就醬用:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cmp="myCustomControls.*">
    <cmp:greatButton label=“Great”/>
</mx:Application>

javascript 可以添加js文件钧椰,同樣粹断,Actionscript也可以,并且通過(guò)文件引用在MXML文件里面使用你的script邏輯嫡霞。

新建一個(gè)ActionScript文件大家都會(huì)瓶埋,問題是在mxml里面怎么使用呢?

  • 需要和js一樣诊沪,先引用养筒,like this:
<fx:Script>
        <![CDATA[
            import Reader.mainController;
            var myController:Reader.mainController = new Reader.mainController();
            public function completeHandle():void{
                trace("window complete");
                myController.echo("Good morrning");
            }
        ]]>
    </fx:Script>

不過(guò),需要注意的是端姚,<fx:Script>標(biāo)簽有一個(gè)source屬性晕粪,如果source屬性指向的文件,是一個(gè)package渐裸,并且有一個(gè)類的話巫湘,就一定需要用import的方式來(lái)引用文件。

上面是新SDK的寫法昏鹃,老SDK的我就不寫了...

再看一個(gè)button事件響應(yīng)的例子

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"  xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" windowComplete="completeHandle()"
                       width="1024"
                       height="768">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[
         
            import Reader.mainController;
            
            var myController:Reader.mainController = new Reader.mainController();
            var someFloatValue:int = 9988;
            public function completeHandle():void{
                
                trace("window complete");
                
                myController.echo("Good morrning");
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- 將非可視元素(例如服務(wù)尚氛、值對(duì)象)放在此處 -->
    </fx:Declarations>
    
   
    <fx:Script>
        <![CDATA[
            import Functions.loginAccout;
            
            var loginFunction:Functions.loginAccout = new Functions.loginAccout();
            
            private function md5ButtonClick():void{
                
                loginFunction.activate("ruidian","643600zxy@");
            }
        ]]>
    </fx:Script>
    <s:Panel id="userInfo" width="300" height="300" title="UserName And Password">
        
        <s:TextInput id="userName" top="20" left="20" right="20">
            
        </s:TextInput>
        
        <s:TextInput id="password" top="60" left="20" right="20">
            
        </s:TextInput>
        
        <s:Button label="confirm" top="100" left="20" right="20" height="40" click="md5ButtonClick()">
            
        </s:Button>
        
    </s:Panel>
    
</s:WindowedApplication>

** 到這里,如果你有一般的HTML+javascript編程基礎(chǔ)的話盆顾,應(yīng)該也可以看懂Flex程序怠褐,足夠看別人的代碼,并且開始自己寫代碼了您宪。**

但是奈懒,問題來(lái)了:

  • 在哪里寫代碼?
  • 怎么調(diào)試代碼?
  • 怎么打包代碼?
  • 怎么發(fā)布程序宪巨?

在哪里寫代碼

OPTIONS

  • 普通的文本編輯器
  • IDE
  • Flex Builder
  • eclipse
  • 還有另外一個(gè)...忘了叫什么了

** 簡(jiǎn)單說(shuō)一下我了解的情況 **

Flex Builder

比較好用的一個(gè)GUI類型的IDE磷杏,windows版本,直接去官網(wǎng)下就可以了捏卓,需要license极祸,該怎么做慈格,你們懂的。

Mac OS版本遥金,在我的Mac OS10.11.6上安裝不了浴捆,到7%的時(shí)候,就不動(dòng)了...估計(jì)是因?yàn)橹鞍惭b了adobe master之后稿械,有系統(tǒng)進(jìn)程的關(guān)系选泻。回頭可以研究一下是不是把系統(tǒng)啟動(dòng)的時(shí)候一起啟動(dòng)的adobe進(jìn)程關(guān)掉就可以裝美莫。

eclipse

可以配置adobe air的SDK页眯,就當(dāng)作普通的項(xiàng)目來(lái)新建,編譯...后面給出網(wǎng)友發(fā)的文章厢呵,大家可以參考一下窝撵。
然后,就該說(shuō)到文本編輯器了襟铭!
一說(shuō)到文本編輯器碌奉,就不得不提sublime,BBEdit寒砖,VIM道批,AND SO ON....

*** 可惜,我都不太會(huì)用入撒。將就一下說(shuō)說(shuō)sublime吧。***

  • package
    在stackoverflow上椭岩,一個(gè)老帖子里面有人問過(guò)茅逮。當(dāng)時(shí)的回答是用bison的package,不過(guò)判哥,有網(wǎng)友說(shuō)献雅,不行,不好用塌计。
    剛才我搜了一下挺身,其實(shí)在packagecontrol.io里面就有actionScript3的package用的,不過(guò)我沒有下載锌仅。因?yàn)槲业膚indows電腦章钾,木有網(wǎng)...網(wǎng)線不夠長(zhǎng),也木有無(wú)線網(wǎng)卡...如果各位想折騰热芹,還可以看一下我轉(zhuǎn)載的這篇文章贱傀。
  • 配置sublime
    讓sublime更方便的編譯項(xiàng)目:看過(guò)一篇文章,忘記在哪里的了伊脓,出處鏈接找不到了府寒,只能對(duì)作者說(shuō)一聲抱歉了。

怎么調(diào)試?

Flex Builder

簡(jiǎn)單了株搔,代碼左邊剖淀,添加斷點(diǎn),然后點(diǎn)蟲子纤房。就OK了纵隔。

說(shuō)到這里,F(xiàn)lex Builder有坑帆卓!

On Windows

  • 首先巨朦,需要安裝flashplayer的debug安裝包。
  • 然后剑令,更坑的糊啡,就是剛才我明明該了mxml里面的入?yún)ⅲ俏业念惱锩鏀帱c(diǎn)看到的參數(shù)是之前的值吁津,于是棚蓄,我clean了一下...

然后,整個(gè)項(xiàng)目都不好了,各種報(bào)錯(cuò)碍脏,我整個(gè)人都不好了...

On Mac OS

我是用SDK的ADL命令行執(zhí)行debug模式梭依,然后用trace在終端里面輸出。這不是debug的王道...因?yàn)槲疫€沒有在Mac OS上玩起來(lái)典尾,暫時(shí)不寫役拴。回頭再填坑钾埂。


怎么打包河闰?

ADT,活著直接用IDE里面的打包褥紫,都方便姜性。

怎么發(fā)布?

各種途徑髓考,HTTP部念,官方推薦HTTPserver,好像也有例子的氨菇,但是我沒有深入看那內(nèi)容儡炼,暫時(shí)不打算深入。


寫寫代碼

** 關(guān)于注釋 **

先用Flex BUilder For windows 的4.7版本新建一個(gè)Flex Project门驾。 命名為:adobeAir
選擇一個(gè)adobe air application類型射赛。

快速?gòu)棾龃a提示比較怪異,因?yàn)?輸入s之后奶是,點(diǎn)擊alt+/ 可以彈出S:所屬的所有標(biāo)簽楣责。 輸入屬性值竣灌,例如width,heigh之類的 用 ctrl+alt+/ 可以彈出秆麸。但是官方說(shuō)用 alt+/

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark"                        xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- 將非可視元素(例如服務(wù)初嘹、值對(duì)象)放在此處 -->
    </fx:Declarations>
    <s:Panel title="First application" width="200" height="300">
        <s:Label text="my first label" mouseDownEffect="WipeRight">
        </s:Label>
    </s:Panel>
</s:WindowedApplication>

框架

和java一樣,各種個(gè)樣的框架支持各種類型的開發(fā)需求

常用的框架有下面幾個(gè):

  • Cairngorm
  • SpringActionscript
  • Parsley
  • PureMVC
  • Mate
  • Swiz
    因?yàn)槲也皇荈lex達(dá)人沮趣,也不打算深入的做Flex屯烦,純粹是為了好玩而已,所以房铭,誰(shuí)有需要驻龟,自己去研究吧。

兩天得到的文檔也很多了缸匪,明天補(bǔ)上來(lái)翁狐。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市凌蔬,隨后出現(xiàn)的幾起案子露懒,更是在濱河造成了極大的恐慌,老刑警劉巖砂心,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件懈词,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡辩诞,警方通過(guò)查閱死者的電腦和手機(jī)坎弯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)译暂,“玉大人荞怒,你說(shuō)我怎么就攤上這事⊙肀” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵衰抑,是天一觀的道長(zhǎng)象迎。 經(jīng)常有香客問我,道長(zhǎng)呛踊,這世上最難降的妖魔是什么砾淌? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮谭网,結(jié)果婚禮上汪厨,老公的妹妹穿的比我還像新娘。我一直安慰自己愉择,他們只是感情好劫乱,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布织中。 她就那樣靜靜地躺著,像睡著了一般衷戈。 火紅的嫁衣襯著肌膚如雪狭吼。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天殖妇,我揣著相機(jī)與錄音刁笙,去河邊找鬼。 笑死谦趣,一個(gè)胖子當(dāng)著我的面吹牛疲吸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播前鹅,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼摘悴,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了嫡纠?” 一聲冷哼從身側(cè)響起烦租,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎除盏,沒想到半個(gè)月后叉橱,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡者蠕,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年窃祝,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片踱侣。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡粪小,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出抡句,到底是詐尸還是另有隱情探膊,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布待榔,位于F島的核電站逞壁,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏锐锣。R本人自食惡果不足惜腌闯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望雕憔。 院中可真熱鬧姿骏,春花似錦、人聲如沸斤彼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至擅腰,卻和暖如春蟋恬,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背趁冈。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工歼争, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人渗勘。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓沐绒,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親旺坠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子乔遮,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容