每个主题包含了一个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 当前使用的外观属性列表。