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 當前使用的外觀屬性列表。
ajax開發工具bindows教程--創建一個主題
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Linux基本操作命令
wbzjacky
2019-02-24 13:12:38
真實的模擬***綜合實驗
wbzjacky
2019-02-24 13:12:37
三層交換機的HSRP、vlan、端口聚合
wbzjacky
2019-02-24 13:12:37
HSRP和二層交換機的端口聚合、vlan
wbzjacky
2019-02-24 13:12:37
如果同事暗中傷害你,應該怎麼辦?
這個饅頭有餡
2019-02-24 13:59:08
職場中,抱怨越多的員工,越被領導瞧不起!
這個饅頭有餡
2019-02-24 13:59:08
老程序員被裁,應屆生卻能月薪 1.3 萬?這你能忍?
前端高達
2019-02-24 13:48:04
遇到到處蹭吃卻從不請客吃飯的主怎麼辦?
樑軍年
2019-02-24 13:26:35
高標準機房綜合配線安裝
wbzjacky
2019-02-24 13:12:38
IPsec ***實驗
wbzjacky
2019-02-24 13:12:37
CISCO路由AAA的Easy ***
wbzjacky
2019-02-24 13:12:37
CISCO訪問控制列表 企業網絡管理的必殺技
wbzjacky
2019-02-24 13:12:37