ajax開發工具bindows教程--創建一個主題

dplicn=ajax開發工具bindows教程--創建一個主題

每個主題包含了一個Javascript文件，在這個文件中創建了 BiTheme 對象，還有一個 CSS 文件用於定義外觀。默認情況下你要在 themes 目錄中創建一個文件夾，文件夾的名字就是你創建的主題的名字。在文件夾中添加一個 theme.css 文件，和一個 theme.js 文件. Javascript文件創建一個和文件夾同名的 BiTheme 對象.

html/
   themes/
      Default/
         Images/
         theme.css
         theme.js
      MyTheme
         Images/
         theme.css
         theme.js
然後你要往 ADF 中添加 Theme 標籤.

<Application autoNameMapping="true">
   <Theme name="MyTheme" default="true"/>
   <Window caption="Theme Test">
      ...
   </Window>
   ...
</Application>
BiTheme 類
theme.js 定義主題對象。最簡單的方法就是繼承 BiTheme 或者 BiDefaultTheme。a

function MyTheme( )
{
   BiDefaultTheme.call( this, "MyTheme" );
}
 
_p = MyTheme.prototype = new BiDefaultTheme;
_p._className = "MyTheme";
 
// instantiate
application.getThemeManager().addTheme( new MyTheme );
Appearance and CssClassName
大多數組件和 HTML 元素有一對一的關係。通常 CSS 的類名反映了 Bindows 的組件類名。舉個例子，BiComponents有個叫"bi-component" 的類名，BiComboBox 組件有個 CSS 類叫做 "bi-combo-box"。

任何組件都有一個 appearance 屬性。這個屬性描述了怎樣繪製組件，並映射到一個 CSS 類。舉個例子，如果你設置了 "button" 的外觀，那麼 "button" 將被應用與之同類名的 CSS 。

讓我們用一個例子來說明這是怎麼工作的。我們創建一個組件，並且設置它的 CSS 類名和外觀。

var c = new BiComponent;
c.setCssClassName( "foo" );
c.setAppearance( "bar" );
在 HTML 中產生的結果：

<div id="..." class="foo bar"></div>
這將匹配相應的 CSS 規則。要注意的是 Internet Explorer 不能完全支持多重 CSS 類名。

.foo {
   color: red;
}
 
.bar {
   color: blue;
}
不能這樣定義規則：

.foo.bar {
   color: green;
}
因爲Internet Explorer不能正確的區分。

Appearance States
爲了支持外觀的交互狀態，外觀狀態被使用。 一些狀態可以自動調用，但也可以手工處理。被支持的正確的狀態是：

active - 鼠標按下
hover - 鼠標懸停
focus
disabled
checked
一些組件添加了其它僞外觀狀態，比如 "selected" 和其它。

我們用上一個例子，添加一個僞外觀狀態。

var c = new BiComponent;
c.setCssClassName( "foo" );
c.setAppearance( "bar" );
appliation.getThemeManager().addState( c, "baz" );
HTML 中的運行結果是：

<div id="..." class="foo bar bar-baz"></div>
這將匹配下面的 CSS 規則。

.foo {
   color: red;
}
 
.bar {
   color: blue;
}
 
.bar-baz {
   background-color: lightblue;
}
這樣就可以在一致的風格下爲不同的狀態定製不同的外觀。

修改你的主題
CSS 文件和主題類決定了主題的外觀。通過已存在的 CSS 文件是最簡單的修改 CSS 的方法。如果BiTheme對象基於 BiDefaultTheme，那麼它就不需要任何修改，但是下面你可能要修改一些通用的東西。

addAppearance
如果你想要爲特定的外觀提供交互狀態，你可能需要修改或添加下面的代碼。

function MyTheme( )
{
   BiDefaultTheme.call( this, "MyTheme" );
 
   // the default theme does not have interactive button states
   this.addAppearance( "button", ["hover", "active", "disabled"] );
   this.addAppearance( "slider", ["hover", "active", "focus"] );
   ...
}
外觀屬性
不是每個大小和圖片可以定義在 CSS 中。因此主題有種方法定義這些屬性。

function MyTheme( )
{
   BiDefaultTheme.call( this, "MyTheme" );
 
   ...
   this.setAppearanceProperty( "split-pane-horizontal-divider", "preferredWidth", 7 );
   this.setAppearanceProperty( "split-pane-vertical-divider", "preferredHeight", 7 );
   ...
   this.setAppearanceProperty( "grid", "default-icon", imgBase + "file.gif" );
   ...
}
查看 BiDefaultTheme 當前使用的外觀屬性列表。