Adobe Flex 調整基本外觀範例

  1. 在Adobe Flex 中調整外觀的方式有很多, 在這裡Show出了幾種方法:
  2. 使用CSS (記得並不是所有的CSS都能夠使用)
  3. 直接在TAG裡面指定屬性(但這樣維護會很麻煩, 因為以後若要改就要大動工程)
  4. 用ActionScript的SetStyle method. (缺點是一次只能指定一個屬性)

注意事項:

  • 使用setSyle雖然一次只能指定一個, 但是某些效果卻只有他能做到.
  • 使用CSS時, 不用body, 要用Global來調整全部的網頁的屬性(比如說統一字型, 統一顏色等)
  • 使用CSS class時, 在<mx: > 中記得屬性是 styleName=”css class name”

若style之間有衝突, STYLE的先後順序:

  1. 在MXML裡面的一定先取
  2. class style
  3. type style
  4. 程式內的parent container
  5. 程式內的parent container 的 class
  6. 程式內的parent container 的 type selector
  7. Global Style

 

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”init()”>

<mx:Style>
Button {
 
 font-style: italic;
 fontFamily: “Comic Sans Ms”;
 
}
global{
 
 font-size:20px;
 
}

.thisisclass{

 font-weight:bold; 

}
</mx:Style>

 <mx:Script>
  <![CDATA[
   //one time on one property, not suggest
   private function init() {
    myButton.setStyle(“fontSize”, 15); 
   }
   
  ]]>
 </mx:Script>
 <mx:Text text=”haha” />
 <mx:Button id=”myButton” label=”click me”  alpha=”10″ width=”282″ height=”149″/>
 <mx:Text text=”UsingClass”   styleName=”thisisclass” />
 
</mx:Application>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *