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 当前使用的外观属性列表。
每个主题包含了一个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 当前使用的外观属性列表。
转载于:https://blog.51cto.com/ganggang/51048