adobe的flex2給我們帶來了非常幫的用戶體驗,使用flash我們可以將我們的user interface做的非常的花哨,拋棄那些客戶的web頁面.
flex開發前的準備工作:
下載flex2的開發套件,我們可以從adobe的官方網站上下載最新的開發套件,不過需要一個adobe賬號,而且這個開發套件不是免費的,不過現在已經破解了,大家可以從以下論壇上找到破解的方法http://www.anyflex.cn/bbs/這是一個非常不錯的flex學習交流論壇.如果說你找不到的話就給我留言,我發給你,呵呵.
flex其實是利用了flash技術來達到非常好的用戶體驗,由於是使用flash我們可以在我們的應用中家裏流媒體等應用來豐富我們的用戶體驗,下面我們看以下flex給我們展示的效果吧
怎麼樣是不是有點像桌面程序,這個就是flex所爲的richclien概念,讓我們的web應用向桌面程序一樣,是不是很幫啊?
flex的開發其實很簡單,我們只需要編輯MXML文件就可以了,然後通過sdk把他編譯成swf文件和相應的html文件,當用戶瀏覽html文件是其實是請求了一個swf文件,這樣用戶使用web就像是在玩flash遊戲一樣,很有意思.
下面我們看一下上面這個效果的所有原代碼:
Dashboard.mxml
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:ApplicationControlBar dock="true"> <mx:LinkButton label="All" click="this.currentState=''"/> <mx:LinkButton label="Sales" click="this.currentState='fullSales'"/> <mx:LinkButton label="Categories" click="this.currentState='fullType'"/> <mx:LinkButton label="Comparison" click="this.currentState='fullComp'"/> </mx:ApplicationControlBar> <mx:states> <mx:State name="fullSales"> <mx:SetProperty target="{rightCharts}" name="width" value="0"/> <mx:SetProperty target="{rightCharts}" name="height" value="0"/> </mx:State> <mx:State name="fullType"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{comp}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{comp}" name="height" value="0"/> </mx:State> <mx:State name="fullComp"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{type}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{type}" name="height" value="0"/> </mx:State> </mx:states> <mx:HBox id="body" width="100%" height="100%"> <mx:Panel id="sales" width="100%" height="100%" title="Sale Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> <mx:VBox id="rightCharts" width="100%" height="100%"> <mx:Panel id="type" width="100%" height="100%" title="Category Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> <mx:Panel id="comp" width="100%" height="100%" title="Comparison Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> </mx:VBox> </mx:HBox></mx:Application>它的源代碼都是是一個已.mxml爲結尾的標準xml文件,sdk會將這個文件編譯成swf文件,使用flexbuilder2我們能非常直觀的編輯我們的應用,flex提供了豐富的組件來簡化我們的開發,下面是flexbuider2的開發界面
他是一個基於eclipse的開發工具,非常方便,一切都一目瞭然.我們在desgin模式下設計玩UI,然後點擊run就可以運行了.
flex的佈局管理概念非常像swing,所以熟悉swing開發的朋友一定能夠非常容易上手,同時基於xml的編輯我們能非常快的改變我們的佈局,我們要做的只是將佈局屬性修改然後重新編譯而已,不同於java我們要改一堆的swing代碼(java在UI方面的應用真讓人泄氣).
flex還有一個非常幫的State的概念,我們經常會碰到一些頁面他們有一些公用的部分但是在不同的條件下有不一樣,我們過去的做法是將公用的部分抽取出來,然後在寫若干個不同的頁面,或者通過javascript來實現頁面的動態變化,但這些工作都是非常麻煩的,而flex提供的state概念讓我們可以從這些無聊的工作中解放出來.State的意思是隻同一個UI界面他可以用戶不同的狀態,而這些不同的狀態可以運行UI有不同的表現,但用戶做了某些操作後我們只要改變UI的狀態就能獲得不同的效果,這點很吸引人.上面的這個例子就使用了State的概念,但用戶點擊不同的菜單,則可以現實不同的UI效果.
以下代碼中我們爲這個UI界面定義了3中狀態,加上默認狀態,我們的UI界面一共可以有4種顯示風格,當用戶點擊不同的菜單可以獨立顯示用戶所關心的那些內容.
<mx:states> <mx:State name="fullSales"> <mx:SetProperty target="{rightCharts}" name="width" value="0"/> <mx:SetProperty target="{rightCharts}" name="height" value="0"/> </mx:State> <mx:State name="fullType"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{comp}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{comp}" name="height" value="0"/> </mx:State> <mx:State name="fullComp"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{type}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{type}" name="height" value="0"/> </mx:State> </mx:states>
參考資料:
Adobe.Press.Adobe.Flex.2.Training.from.the.Source.Oct.2006_[Flex2.org].chm
下載地址:http://www.anyflex.cn/bbs/viewthread.php?tid=1841&extra=page%3D1
flex應用示例:http://demo.quietlyscheming.com/displayShelf/index.html
http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/
官方提供的示例:http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
