<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Flex學習筆記 --- ActionScript & mxml

    Posted on 2008-01-17 20:26 久城 閱讀(6905) 評論(9)  編輯  收藏 所屬分類: Flex&ActionScript
    剛剛接觸Flex。

    先談談Flex的什么什么

    動手寫過的只有兩種文件: .mxml文件和.as文件。
    接觸到的代碼也只有兩種: 帶<>的標簽,和ActionScript代碼。

    Flex應用中最終將會生成一個個.swf文件。我們通過瀏覽器瀏覽到的某個.html頁面,其實真正運行的是那個.swf文件。而這個.swf文件是用ActionScript腳本寫出來的,中間怎么編譯或者解析的,不去理它。ActionScript大概是Flash設計者比較熟悉的一種腳本語言,我以前是沒有接觸過。畢竟flash設計和web之開發之間還是有很多不同的。為了讓web開發人員更容易應用ActionScript做開發,于是.mxml產生了。
    .mxml文件到底是什么文件我也不清楚,只知道.mxml文件中使用<>標簽,應用大量的<>標簽封裝了很多組件。這些組件完全是用ActionScript寫出來的,只不過做了一層封裝,我們可以直接拿來主義。這很象jsp標簽,最終還是將被解析成java代碼,同樣,.mxml中的標簽最終也將會被解析成ActionScript代碼。所以我想,一個ActionScript高手,完全可以不用寫.mxml文件就能完成Flex項目,當然,一個web開發人員絕不會這樣去做,當然是選擇使用封裝好的組件,這樣代碼工整,結構清晰,書寫方便。

    .as和.mxml

    如果理解到這里,對于Flex中的以下一些寫法也就會明白了。
    可以寫一個.as文件創建一個自定義的組件。(然后可以拿到.mxml中象應用其他組件一樣去應用)
    可以在.mxml文件中嵌套ActionScript代碼。(<mx:Script>組件已經封裝好了)

    .as文件里面寫的就是ActionScript代碼,ActionScript是一種比較強大的面向對象的腳本語言,語法和JAVA和象。我們既可以在.as文件中定義我們需要用到的自定義的組件,也可以寫一些對數據對組件的邏輯操作。.as文件就相當J2EE中的.class文 件,作為source被應用,這里可以封裝對象也可以封裝事件,此時actionscript和java在j2ee中扮演的角色很相像。

    .mxml 定義了“頁面”的布局,也就是各個組件怎么擺放,以及組件的一些邏輯。那.mxml文件就相當于表現層的實現。而在.mxml中也會用<mx: scirpt>標簽引入一些邏輯操作,此時的actioncript又跟javascript所扮演的角色很相象。

    .as和.mxml給我的感覺就象是一種語言的兩種寫法。不同的寫法有不同的側重點。
    .mxml更側重于表現形式,而.as更側重于整體與邏輯。二者關系密切。
    比如說一個自定義組件MyCanvas
    <mx:Canvas >
    <mx:Lable id="lab"></mx:Label>
    </mx:Canvas >
    編繹時可能就變成了
    public class MyCanvas extends Canvas{
      public var lab: Label;
      puiblic function MyCanvas(){
          lab = new Label();
          this.addChild(lab);
      }
    }

    事件機制

    個人感覺Flex中的事件機制是Flex框架中比較重要的地方,雖然在我的項目中幾乎用不到。
    比如我有一個自定義的組件MyComponent,在.mxml中應用如下:
    <cmn:MyComponent click="myFunction()"></cmn:MyComponent>
    cmn相當于是一個名域,不用管它。如上寫法,很象javascript中的onclick(也許就是一樣,沒研究過)。上面這段代碼相當于實例化了一個MyComponent組件。click是事件的一個實例,其實它是MouseEvent的一個實例。當組件被創建之后,它就相當于又開辟了一個線程時刻捕獲MouseEvent,(Flex中沒有線程的概念,這里只是比喻。)當MyComponent中拋出MouseEvent事件時,這里的“拋出”實際上是一個分發的動作,代碼如同dispathEvent(new MouseEvent())click就會被觸發,myFunction()就會被執行。
    換一種想法,click="myFunction()"就相當于是添加了一個監聽器,而實際上Flex中確實是有監聽器的,所以,上面那段代碼也可以用監聽器的方式來實現,比如:
    <cmn:MyComponent id="mc" creationComplete="init()"></cmn:MyComponent>
    <mx:Script>
      <![CDATA[
        private function init():void{
          mc.addEventListener("click",myFuntion);
        }
      ]]>
    </mx:Script>

    綁定機制

    綁定機制也是Flex的一大重點。它其實就是事件機制的應用。
    綁定的作用在于,將Flex中的變量,類或者方法等與組件的值進行綁定,例如,一個變量被綁定之后,那么引用該變量的組件的相關屬性頁會發生改變。綁定后的變量就相當于指向同一個變量的兩個引用,又好比是在java的類中定義一個static變量,在一個類中改變它的值,在所有類中的該值都會變化,因為都是同一個對象嘛。
    綁定的形式我現在接觸過的如:
    [Bindable]
    public var blogName : String = "realsmy";
    在.mxml中用<mx:Label text="{blogName}"></mx:Label>表現。
    或者
    <mx:Binding source="mylabel.text" destination="blogName" />

    狀態

    Flex中用state來表示不同的狀態。比較經典的例子還是官方的。
    <?xml version="1.0" ?>
    <!-- Simple example to demonstrate the States class. -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

        
    <!-- Define one view state, in addition to the base state.-->
        
    <mx:states>
            
    <mx:State name="Register">
                
    <mx:AddChild relativeTo="{loginForm}" position="lastChild">
                    
    <mx:target>
                        
    <mx:FormItem id="confirm" label="Confirm:">
                            
    <mx:TextInput/>
                        
    </mx:FormItem>
                    
    </mx:target>
                
    </mx:AddChild>
                
    <mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
                
    <mx:SetProperty target="{loginButton}" name="label" value="Register"/>
                
    <mx:SetStyle target="{loginButton}" 
                    name
    ="color" value="blue"/>
                
    <mx:RemoveChild target="{registerLink}"/>
                
    <mx:AddChild relativeTo="{spacer1}" position="before">
                    
    <mx:target>
                        
    <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
                    
    </mx:target>
                
    </mx:AddChild>
            
    </mx:State>
        
    </mx:states>

        
    <!-- Define a Panel container that defines the login form.-->
        
    <mx:Panel title="Login" id="loginPanel" 
            horizontalScrollPolicy
    ="off" verticalScrollPolicy="off"
            paddingTop
    ="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

            
    <mx:Text width="100%" color="blue"
                text
    ="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

            
    <mx:Form id="loginForm" >
                
    <mx:FormItem label="Username:">
                    
    <mx:TextInput/>
                
    </mx:FormItem>
                
    <mx:FormItem label="Password:">
                    
    <mx:TextInput/>
                
    </mx:FormItem>
            
    </mx:Form>
            
    <mx:ControlBar>
                
    <mx:LinkButton id="registerLink"  label="Need to Register?"
                    click
    ="currentState='Register'"/>
                
    <mx:Spacer width="100%" id="spacer1"/>
                
    <mx:Button label="Login" id="loginButton"/>
            
    </mx:ControlBar>
        
    </mx:Panel>
    </mx:Application>

    下周Flex的項目開啟了,我的任務并不重,只有一個頁面幾個機能。更多的時間可能要用在設計和寫文檔上,沒辦法,這就是外包。所以我也經常想,做外包的是不是不需要把技術研究得太深太透徹啊?呵呵,每個人都不一樣吧....



    歡迎來訪!^.^!
    本BLOG僅用于個人學習交流!
    目的在于記錄個人成長.
    所有文字均屬于個人理解.
    如有錯誤,望多多指教!不勝感激!

    Feedback

    # re: Flex學習筆記 --- ActionScript & mxml  回復  更多評論   

    2008-01-18 09:45 by 交口稱贊
    又看到一個搞flex
    難得啊

    # re: Flex學習筆記 --- ActionScript & mxml  回復  更多評論   

    2008-01-18 09:50 by 久城
    剛剛開始學習......和稱贊兄還差得遠呢......

    # re: Flex學習筆記 --- ActionScript & mxml  回復  更多評論   

    2008-01-21 15:31 by 自在大羽
    小家伙好好學 不懂的可以去問ZHR 那斯這東西玩兒的明白

    # re: Flex學習筆記 --- ActionScript & mxml  回復  更多評論   

    2008-01-31 11:22 by bNog
    偶然訪問到久城的博,覺得是個很有心的好孩子。只是有一個小建議,并沒有絕對的適用性,謹慎提出:技術這東西,沒必要作那么多比喻打那么多比方,過度的“懶惰理解”會嚴重影響技術水平提高。

    上面的各種理解方式都只能說見仁見智,我只提2點作為交流:
    1、mxml文件的本質規范是叫做XML的規范,簡單的說他就是XML文件;
    2、mxml和as,如果你自己理解他們的區別,就盡量不要說出來,因為很難說得很到位很精妙很令人信服,因為他們就像jsp vs. servlet等等各種視圖-控制分離技術框架一樣,到底該統一于何處、分層至多遠,永遠是個有爭議同時也極富靈感空間的問題。

    # re: Flex學習筆記 --- ActionScript & mxml  回復  更多評論   

    2008-01-31 12:08 by 久城
    @bNog
    “很有心的好孩子”,哈哈,這個我喜歡!謝謝你的建議!~:)
    學技術,我確實喜歡打很多比喻,因為面對一個陌生的東西,我總是習慣找一個參照物作為學習的入口,然后一點一點的體會它們的相同與不同。這樣的方法不是完美的,但是比較適合我自己。不過,你說的“懶惰理解”提醒了我,這也許就是我這種學習方法的弊端吧...
    關于把個人的理解寫出來,一方面是為了記錄自己,一方面是為了交流,從未打算要用來教導他人。寫這篇BLOG的時候,剛剛接觸Flex不久。現在看來對Flex的理解就已經不局限在這里,但是,對于那時的我,就是這樣理解的,因為我需要一個入口去學習它。人嘛,總是在不斷完善自己的過程中成長的。

    # re: Flex學習筆記 --- ActionScript & mxml  回復  更多評論   

    2008-08-29 16:57 by 驚翎
    學習了,蠻好的!

    # re: Flex學習筆記 --- ActionScript & mxml  回復  更多評論   

    2008-09-22 07:11 by Can
    Good!

    如果有機會希望多交流一下。
    我也開始學Flex不久。

    yibans(a)hotmail.com

    ^_^

    # re: Flex學習筆記 --- ActionScript & mxml  回復  更多評論   

    2008-10-21 23:09 by lifetags
    以前接觸過 openlaszlo, 跟 flex的mxml標記很象,非常象。不過那個有bug,很多奇怪的問題。再后來就沒有用了,我們也是做項目,不過,不是外包,自己內部的東西。 呵呵,羨慕你們這些做外包的,拿的同樣的薪水,可是你們卻輕松很多,我們要做的太多了,公司投入很摳門的,哎~~

    有時間聊聊,我在北京。
    qq 1189 8620

    # re: Flex學習筆記 --- ActionScript & mxml  回復  更多評論   

    2009-02-06 21:00 by dk.1@163.com
    第一次聽說,,, 研發的羨慕外包。。。

    只有注冊用戶登錄后才能發表評論。


    網站導航:
     

    Copyright © 久城

    主站蜘蛛池模板: 成全高清在线观看免费| 久久99精品免费一区二区| 99re免费在线视频| 老司机亚洲精品影院| 精品一区二区三区免费毛片爱 | 香蕉大伊亚洲人在线观看| 黄页网站免费观看| 亚洲中文字幕无码中文字| 日韩电影免费在线观看视频| 国产精品亚洲专区无码牛牛| 亚洲成片观看四虎永久| a一级毛片免费高清在线| 亚洲国产成人一区二区三区| 91人人区免费区人人| 亚洲六月丁香婷婷综合| 日本免费一区二区三区最新vr| 老子影院午夜伦不卡亚洲| 久久综合亚洲色HEZYO国产| 日本免费污片中国特一级| 亚洲人成网站日本片| 国产精品另类激情久久久免费| 日本一区二区三区在线视频观看免费 | 99在线视频免费观看视频 | 成人毛片免费播放| 色偷偷亚洲第一综合网| 亚洲乱码国产乱码精品精| 777爽死你无码免费看一二区| 亚洲人成人无码.www石榴| 亚洲婷婷国产精品电影人久久| 国产免费拔擦拔擦8X高清在线人| 亚洲美女人黄网成人女| 国产高清在线精品免费软件| 成年免费a级毛片免费看无码| 亚洲视频在线观看视频| 又大又粗又爽a级毛片免费看| 中文无码成人免费视频在线观看| 亚洲成_人网站图片| 久久久久亚洲AV成人网| 成年人视频免费在线观看| 4hu四虎免费影院www| 亚洲AV无码久久久久网站蜜桃|