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。

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 當前使用的外觀屬性列表。