Flex精華摘要 5：使用樣式和字型

javaprogramers發表於2006-05-25
Flex

Flex所支援的樣式比Flash要豐富，樣式定義的方法也很多。這也是Flex比Flash要強大、適合網頁開發的地方之一。
樣式定義型別
1. 外部樣式表

<mx:Style source='/css/myStyle.css'/>

 

1.


Flex會呼叫全域性樣式表global.css，該全域性樣式表由flex-config.xml定義，如：

<global-css-url>/WEB-INF/flex/global.css</global-css-url>

 

1.


系統預設的樣式表檔案global.css檔案其實沒有任何樣式定義，我們可以手動新增全域性樣式，也可以更改預設的全域性樣式檔案路徑。如，把全域性樣式檔案該為：

<global-css-url>/css/styles.css</global-css-url>

 

1.


在這裡順便提一點，定義外部css檔案的時候，顏色樣式有四種定義方式：

: .myclass { fillColor: #6666CC } // 16進位制顏色格式
2 : .myclass { borderColor: rgb(77%,22%,0%) } // RGB 顏色格式
3 : .myclass { errorColor: rgb(0,255,0) } // 10進位制RGB顏色格式
4 : .myclass { color: Blue } // VGA 顏色名稱格式

 

1



2.本地樣式定義
使用<mx:Style>來定義當前檔案的樣式
下面的例子定義了myFontStyle子類樣式，要使用對應的樣式可以在元件中使用styleName屬性來應用樣式。

<mx:Style>

 

2. .myFontStyle {  fontSize: 15  }

3. </mx:Style>

4. <mx:Button id='myButton' styleName='myFontStyle' label='Click Here' >

1.


下面的樣式則定義了所有Button元件的樣式，使用該方式定義的樣式在使用的時候不需要指定樣式名。

<mx:Style>

 

2. Button {  fontSize: 15  }

3. </mx:Style>

4. <mx:Button id='myButton' label='Click Here' >

1.



3. 內嵌樣式定義
對個別需要特殊處理的元件，可以使用下面的方式進行內嵌樣式定義

<mx:Button id='myButton' fontSize='15' color='0x9966CC' label='My Button'/>

 

1.



4. 使用指令碼樣式定義
這種方法使用了Flash傳統的AS指令碼方式來定義樣式，具有更強大的靈活性，並且可以使用StyleManager類以及getStyle() 和 setStyle() 方法，如下所示：

 

1. <mx:Script>
 

2. <![CDATA[
 

3. //使用styleManger類
 

4. mx.styles.StyleManager.styles.ToolTip.fontWeight = 'bold';
 

5. //獲取元件樣式
 

6. lb1.text=ip1.getStyle('fontSize');
 

7. //設定元件樣式
 

8. lb1.text=ip1.setStyle('fontSize',newSize);
 

9. ]]>

10.  </mx:Script>

 



如果三種樣式定義方式同時使用的話，優先順序別從高到低依次為：
內嵌式樣式>本地樣式定義(指令碼樣式定義)>外部樣式定義

特殊樣式定義
在進行樣式定義的時候，我們需要注意幾種Flex特殊的樣式定義
1. 全域性樣式定義
對所有未被定義的控制元件應用global樣式

global { 

 

2. fontSize:22;

3. textDecoration: underline;

4.  }

1.


2. 應用程式樣式定義
Application標記是Flex的根標記，Application樣式用來定義未被定義的容器以及子容器的樣式

Application { 

 

2. marginLeft: 0px;

3. marginRight: 0px;

4. marginTop: 0px;

5. marginBottom: 0px;

6. horizontalAlign: 'left';

7.  }

1.



關於字型的樣式定義
1. 使用裝置字型

.myClass { 

 

2. fontFamily: Arial, Helvetica, '_sans';

3. color: Red;

4. fontSize: 22;

5. fontWeight: bold;

6.  }

1.


2. 使用移植字型

 

1. <mx:Style>
 

2. @font-face { 
 

3. src:url('akbar.ttf');
 

4. fontFamily: myfont;
 

5.  }
 

6. @font-face { 
 

7. src:url('akbar.ttf');
 

8. fontWeight: bold;
 

9. fontFamily: myfontBold;

10.   }

11.  </mx:Style>

 


在定義了該字型樣式後，就可以通過fontFamily來應用該字型樣式，如：

Accordion { 

 

2. fontFamily: myfont

3.  }

1.

 

相關文章