自己給自己挖的坑...哎...
自己給自己挖的坑级乍,哭著也要填刺啦!那就開始吧放坏!
下面內(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)翁狐。