flex2 学习笔记1

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