Flex學(xué)習(xí)筆記 --- ActionScript & mxml

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

          先談?wù)凢lex的什么什么

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

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

          .as和.mxml

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

          .as文件里面寫的就是ActionScript代碼,ActionScript是一種比較強(qiáng)大的面向?qū)ο蟮哪_本語言,語法和JAVA和象。我們既可以在.as文件中定義我們需要用到的自定義的組件,也可以寫一些對數(shù)據(jù)對組件的邏輯操作。.as文件就相當(dāng)J2EE中的.class文 件,作為source被應(yīng)用,這里可以封裝對象也可以封裝事件,此時actionscript和java在j2ee中扮演的角色很相像。

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

          .as和.mxml給我的感覺就象是一種語言的兩種寫法。不同的寫法有不同的側(cè)重點(diǎn)。
          .mxml更側(cè)重于表現(xiàn)形式,而.as更側(cè)重于整體與邏輯。二者關(guān)系密切。
          比如說一個自定義組件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);
            }
          }

          事件機(jī)制

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

          綁定機(jī)制

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

          狀態(tài)

          Flex中用state來表示不同的狀態(tài)。比較經(jīng)典的例子還是官方的。
          <?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的項(xiàng)目開啟了,我的任務(wù)并不重,只有一個頁面幾個機(jī)能。更多的時間可能要用在設(shè)計(jì)和寫文檔上,沒辦法,這就是外包。所以我也經(jīng)常想,做外包的是不是不需要把技術(shù)研究得太深太透徹啊?呵呵,每個人都不一樣吧....



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

          Feedback

          # re: Flex學(xué)習(xí)筆記 --- ActionScript & mxml  回復(fù)  更多評論   

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

          # re: Flex學(xué)習(xí)筆記 --- ActionScript & mxml  回復(fù)  更多評論   

          2008-01-18 09:50 by 久城
          剛剛開始學(xué)習(xí)......和稱贊兄還差得遠(yuǎn)呢......

          # re: Flex學(xué)習(xí)筆記 --- ActionScript & mxml  回復(fù)  更多評論   

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

          # re: Flex學(xué)習(xí)筆記 --- ActionScript & mxml  回復(fù)  更多評論   

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

          上面的各種理解方式都只能說見仁見智,我只提2點(diǎn)作為交流:
          1、mxml文件的本質(zhì)規(guī)范是叫做XML的規(guī)范,簡單的說他就是XML文件;
          2、mxml和as,如果你自己理解他們的區(qū)別,就盡量不要說出來,因?yàn)楹茈y說得很到位很精妙很令人信服,因?yàn)樗麄兙拖駄sp vs. servlet等等各種視圖-控制分離技術(shù)框架一樣,到底該統(tǒng)一于何處、分層至多遠(yuǎn),永遠(yuǎn)是個有爭議同時也極富靈感空間的問題。

          # re: Flex學(xué)習(xí)筆記 --- ActionScript & mxml  回復(fù)  更多評論   

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

          # re: Flex學(xué)習(xí)筆記 --- ActionScript & mxml  回復(fù)  更多評論   

          2008-08-29 16:57 by 驚翎
          學(xué)習(xí)了,蠻好的!

          # re: Flex學(xué)習(xí)筆記 --- ActionScript & mxml  回復(fù)  更多評論   

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

          如果有機(jī)會希望多交流一下。
          我也開始學(xué)Flex不久。

          yibans(a)hotmail.com

          ^_^

          # re: Flex學(xué)習(xí)筆記 --- ActionScript & mxml  回復(fù)  更多評論   

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

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

          # re: Flex學(xué)習(xí)筆記 --- ActionScript & mxml  回復(fù)  更多評論   

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

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


          網(wǎng)站導(dǎo)航:
           

          Copyright © 久城

          主站蜘蛛池模板: 芷江| 敦煌市| 红安县| 贵溪市| 收藏| 安丘市| 鄂温| 丹寨县| 鹿泉市| 庐江县| 池州市| 合肥市| 锡林郭勒盟| 如东县| 兴安盟| 黄山市| 安国市| 巴林左旗| 和顺县| 深水埗区| 龙江县| 丽江市| 崇信县| 兴宁市| 乳山市| 鄂伦春自治旗| 林口县| 潞西市| 浦东新区| 建阳市| 黄梅县| 淅川县| 喀喇| 彰武县| 邵阳市| 东辽县| 榆社县| 建宁县| 溧阳市| 灵石县| 大厂|