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

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

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

    nighty

    折騰的年華
    posts - 37, comments - 143, trackbacks - 0, articles - 0

    Flex4 spark中Application工具條自定義的原理

    Posted on 2011-10-13 18:14 寒武紀 閱讀(2480) 評論(0)  編輯  收藏 所屬分類: Flex
          采用Spark進行Flex的Web應用開發的時候,往往會用一個固定欄,比如說類似Windows的任務欄,我們想把它固定在頂部或是底部,用于某些場景存放一些控件。<s:Application>組件中有一個<s:controlBarContent>屬性和<s:controlBarLayout>,用于設置Application的一個組件區域(我猜官方起的這個名稱大概用意在于此吧),下面這段話就是官方的中文注釋:
    Title包含在 Application 容器控件欄區域中的組件集。Application 容器控件欄區域的位置和外觀由 spark.skins.spark.ApplicationSkin 類確定。默認情況下,ApplicationSkin 類定義以灰色背景顯示在 Application 容器內容區域頂部的控件欄區域。創建自定義外觀以更改控件欄的默認外觀。
          于是可以簡單的給<s:controlBarContent>區域添加各種控件,以及設置它內在的布局(controlBarLayout)。但是,發現它只能顯示在Application的頂部!
          這是怎么回事,根據上面的注釋,感覺應該原因在它的皮膚,得跟進代碼,看一下究竟。
          首先找到<s:Application>控件的標準Skin,可以在Flash Builder中直接查看。
          
          雙擊打開ApplicationSkin,里面的代碼包含了各種SVG圖形學的實現api調用,flex管這些庫叫FVG,大意就是SVG的Flex實現版本,該庫實現得還算簡潔!
          Application標準皮膚的就是先畫一個矩形,然后用一個Group來包含不同的形狀,最后一段<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />,代表Application的內容區域,Flex從設計上區分了控件樹和布局樹,有些復雜,可以參考官方的文檔。因為Application是屬于容器,所以必須在皮膚中包含這一句,不然程序運行時就看不到它包含的子控件。
         而前面長長一串<s:Group id="topGroup">中是畫了頂欄的外觀,它用FVG庫畫了四層:
         <!-- layer 0: control bar highlight -->     底部高亮線(用畫筆填充一個矩形)
         <!-- layer 1: control bar fill -->              背景填充線性漸變顏色
         <!-- layer 2: control bar divider line -->  分割線
         <!-- layer 3: control bar -->                  controlBar的具體內容容器
         當然這個controlBar不是自己會出現的,只有當你填充了內容控件的時候它才顯示,所以有includeIn="normalWithControlBar, disabledWithControlBar",表示在這二個State下才顯示,什么時候State才包含這二個呢?當然,就得去看Application.as的實現原理,具體篇幅就不描述。
         那么回到最初的問題:我想改變controlBar的位置在下方怎么處理?
         從上面的分析可知其實controlBar的擺放位置是在Skin中定義的,而它是什么布局,它顯示不顯示是通過Application.as本身的代碼控制的,那么我們就只要自定義Application.as的皮膚就可以,新建一個外觀mxml,直接復制官方的ApplicationSkin.mxml的代碼,然后,把<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />代碼移到<s:Group id="topGroup">代碼的上面,在你的Application中強制指定skinClass為你自定義的ApplicationSkin,或是通過css設定即可。
         再擴展思維一下,其實我們完全可以把controlBar放到左邊或是右邊,甚至任何位置,都取決你在Skin的定義和Application.as的邏輯控制(你可以繼承Application擴展)。
         那么controlBar有什么作用?其實spark的Panel從及它的子類TitleWindow都有controlBar的概念,它能獨立于你容器外的區域,對于你容器本身包含的組件和布局不會產生干擾,以及你設置了width、height為100%時也不產生影響。如果你不要controlBar,直接在Application中用布局添加一個Group也是可以實現,但是它從根本上是屬于布局樹中contentGroup的內容,會受限于布局。
         Spark Skin的設計的確有高明的地方,對比Flex3的外觀,它提供給設計人員的空間實在大得多,你可以組合圖片和FVG庫的功能自定義各種外觀,當然,我就建議你多熟悉一下FVG庫的應用,畢竟從外加載圖片對flex來說是一個消耗,你的程序也會增肥。


    剛進場的時候戲就落幕
    主站蜘蛛池模板: 免费观看男人吊女人视频| 亚洲中文无码mv| 国产一级a毛一级a看免费视频| 国产精品黄页在线播放免费| 久久无码av亚洲精品色午夜| 国产成人一区二区三区免费视频 | 成人无码视频97免费| 亚洲成a人片在线观看日本麻豆| 免费精品视频在线| 亚洲国产高清在线一区二区三区| 日韩大片免费观看视频播放 | 亚洲成A人片在线观看无码不卡 | 亚洲无码在线播放| 国产va在线观看免费| 久久青青草原亚洲av无码app | 成人人观看的免费毛片| 亚洲精品乱码久久久久久V| 在线免费观看视频你懂的| AV激情亚洲男人的天堂国语| 免费在线观看黄色毛片| a级片免费观看视频| 亚洲最新视频在线观看| 黄页免费的网站勿入免费直接进入| 亚洲中文字幕一二三四区苍井空| 免费看大黄高清网站视频在线| 麻豆一区二区三区蜜桃免费| 午夜国产羞羞视频免费网站| 国产人成网在线播放VA免费| 久久精品国产亚洲av日韩 | 亚洲Av无码乱码在线观看性色| 人妻免费一区二区三区最新| 91亚洲性爱在线视频| 四虎永久免费影院| 国产免费拔擦拔擦8X高清在线人| 亚洲午夜精品在线| 免费国产美女爽到喷出水来视频| 最近免费mv在线观看动漫| 亚洲国产精品成人精品小说 | 亚洲精品免费在线观看| 无码视频免费一区二三区| 国产免费一区二区三区免费视频 |