nighty

      采用Spark進(jìn)行Flex的Web應(yīng)用開(kāi)發(fā)的時(shí)候，往往會(huì)用一個(gè)固定欄，比如說(shuō)類(lèi)似Windows的任務(wù)欄，我們想把它固定在頂部或是底部，用于某些場(chǎng)景存放一些控件。<s:Application>組件中有一個(gè)<s:controlBarContent>屬性和<s:controlBarLayout>，用于設(shè)置Application的一個(gè)組件區(qū)域（我猜官方起的這個(gè)名稱(chēng)大概用意在于此吧），下面這段話就是官方的中文注釋?zhuān)?br />

Title

包含在 Application 容器控件欄區(qū)域中的組件集。Application 容器控件欄區(qū)域的位置和外觀由 spark.skins.spark.ApplicationSkin 類(lèi)確定。默認(rèn)情況下，ApplicationSkin 類(lèi)定義以灰色背景顯示在 Application 容器內(nèi)容區(qū)域頂部的控件欄區(qū)域。創(chuàng)建自定義外觀以更改控件欄的默認(rèn)外觀。

      
      雙擊打開(kāi)ApplicationSkin，里面的代碼包含了各種SVG圖形學(xué)的實(shí)現(xiàn)api調(diào)用，flex管這些庫(kù)叫FVG，大意就是SVG的Flex實(shí)現(xiàn)版本，該庫(kù)實(shí)現(xiàn)得還算簡(jiǎn)潔！
      Application標(biāo)準(zhǔn)皮膚的就是先畫(huà)一個(gè)矩形，然后用一個(gè)Group來(lái)包含不同的形狀，最后一段<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />，代表Application的內(nèi)容區(qū)域，F(xiàn)lex從設(shè)計(jì)上區(qū)分了控件樹(shù)和布局樹(shù)，有些復(fù)雜，可以參考官方的文檔。因?yàn)锳pplication是屬于容器，所以必須在皮膚中包含這一句，不然程序運(yùn)行時(shí)就看不到它包含的子控件。
     而前面長(zhǎng)長(zhǎng)一串<s:Group id="topGroup">中是畫(huà)了頂欄的外觀，它用FVG庫(kù)畫(huà)了四層：
     <!-- layer 0: control bar highlight -->     底部高亮線（用畫(huà)筆填充一個(gè)矩形）
     <!-- layer 1: control bar fill -->              背景填充線性漸變顏色
     <!-- layer 2: control bar divider line -->  分割線
     <!-- layer 3: control bar -->                  controlBar的具體內(nèi)容容器
     當(dāng)然這個(gè)controlBar不是自己會(huì)出現(xiàn)的，只有當(dāng)你填充了內(nèi)容控件的時(shí)候它才顯示，所以有includeIn="normalWithControlBar, disabledWithControlBar"，表示在這二個(gè)State下才顯示，什么時(shí)候State才包含這二個(gè)呢？當(dāng)然，就得去看Application.as的實(shí)現(xiàn)原理，具體篇幅就不描述。
     那么回到最初的問(wèn)題：我想改變controlBar的位置在下方怎么處理？
     從上面的分析可知其實(shí)controlBar的擺放位置是在Skin中定義的，而它是什么布局，它顯示不顯示是通過(guò)Application.as本身的代碼控制的，那么我們就只要自定義Application.as的皮膚就可以，新建一個(gè)外觀mxml，直接復(fù)制官方的ApplicationSkin.mxml的代碼，然后，把<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />代碼移到<s:Group id="topGroup">代碼的上面，在你的Application中強(qiáng)制指定skinClass為你自定義的ApplicationSkin，或是通過(guò)css設(shè)定即可。
     再擴(kuò)展思維一下，其實(shí)我們完全可以把controlBar放到左邊或是右邊，甚至任何位置，都取決你在Skin的定義和Application.as的邏輯控制（你可以繼承Application擴(kuò)展）。
     那么controlBar有什么作用？其實(shí)spark的Panel從及它的子類(lèi)TitleWindow都有controlBar的概念，它能獨(dú)立于你容器外的區(qū)域，對(duì)于你容器本身包含的組件和布局不會(huì)產(chǎn)生干擾，以及你設(shè)置了width、height為100%時(shí)也不產(chǎn)生影響。如果你不要controlBar，直接在Application中用布局添加一個(gè)Group也是可以實(shí)現(xiàn)，但是它從根本上是屬于布局樹(shù)中contentGroup的內(nèi)容，會(huì)受限于布局。
     Spark Skin的設(shè)計(jì)的確有高明的地方，對(duì)比Flex3的外觀，它提供給設(shè)計(jì)人員的空間實(shí)在大得多，你可以組合圖片和FVG庫(kù)的功能自定義各種外觀，當(dāng)然，我就建議你多熟悉一下FVG庫(kù)的應(yīng)用，畢竟從外加載圖片對(duì)flex來(lái)說(shuō)是一個(gè)消耗，你的程序也會(huì)增肥。