每个主题包含了一个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 aut>
  <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;
}这样就可以在一致的风格下为不同的状态定制不同的外观。

感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。

您可能对 [Ajax] 的这些文章也感兴趣： Ajax实现多任务指示器（附源码） 抢占AJAX制高点的战役白热化 AJAX技术开发Back按钮问题的应用程序 在ASP.NET 2.0 AJAX中调用Webservice Ajax / Javascript 框架简介及集合列表 ASP.NET的AJAX控件工具包已经更新 Ajax中文乱码问题解决办法 使用AJAX的十大理由 AJAX入门之深入理解JavaScript中的函数 Ajax在.NET中与Server控件的交互C#

修改你的主题
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" );
  ...
}