Ajax development tool bindows tutorial-create a topic

Each topic contains a Javascript file, which creates a bitheme object, and a CSS file to define the appearance. By default, you need to create a folder in the themes directory. The folder name is the name of the topic you created. Add a theme.css file to the folder and a theme. js file. Javascript file to create a bitheme object with the same name as the folder.

Html/
Themes/
Default/
Images/
Theme.css
Theme. js
Mytheme
Images/
Theme.css
Theme. js
Then you need to add the theme tag to the ADF.

<Application autonamemapping = "true">
<Theme name = "mytheme" default = "true"/>
<Window caption = "theme test">
...
</WINDOW>
...
</Application>
Bitheme class
Theme. js defines the theme object. The simplest method is to inherit bitheme or bidefaulttheme.

Function mytheme ()
{
Bidefaulttheme. Call (this, "mytheme ");
}

_ P = mytheme. Prototype = new bidefaulttheme;
_ P. _ classname = "mytheme ";

// Instantiate
Application. getthememanager (). addtheme (New mytheme );
Appearance and cssclassname
Most components have a one-to-one relationship with HTML elements. The Class Name of CSS usually reflects the component class name of bindows. For example, bicomponents has a class name called "bi-component". The bicombobox component has a CSS class called "Bi-combo-box ".

Any component has an appearance attribute. This attribute describes how to draw components and map them to a CSS class. For example, if you set the appearance of "button", "button" will be applied to CSS with the same name as it is.

Let's use an example to illustrate how this works. We create a component and set its CSS class name and appearance.

VaR c = new bicomponent;
C. setcssclassname ("foo ");
C. setappearance ("bar ");
Results generated in HTML:

<Div id = "..." class = "foo bar"> </div>
This will match the corresponding CSS rules. Note that Internet Explorer cannot fully support multiple CSS class names.

. Foo {
Color: red;
}

. Bar {
Color: blue;
}
Rules cannot be defined as follows:

. Foo. Bar {
Color: green;
}
Because Internet Explorer cannot be correctly differentiated.

Appearance states
To support the interaction status of the appearance, the appearance status is used. Some statuses can be called automatically, but can also be handled manually. The supported status is:

Active-Press the mouse
Hover-Hover
Focus
Disabled
Checked
Some components have added other pseudo-appearance statuses, such as "selected" and others.

We use the previous example to add a pseudo-appearance state.

VaR c = new bicomponent;
C. setcssclassname ("foo ");
C. setappearance ("bar ");
Appliation. getthememanager (). addstate (C, "Baz ");
The running result in HTML is:

<Div id = "..." class = "foo Bar-Baz"> </div>
This will match the following CSS rules.

. Foo {
Color: red;
}

. Bar {
Color: blue;
}

. Bar-Baz {
Background-color: lightblue;
}
In this way, you can customize different appearances for different states in a consistent style.

Modify your topic
CSS files and themes determine the appearance of a topic. Using an existing CSS file is the simplest way to modify CSS. If the bitheme object is based on bidefaulttheme, it does not need to be modified. However, you may need to modify some common theme.

Addappearance
If you want to provide interaction status for a specific appearance, you may need to modify or add the following code.

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"]);
...
}
Appearance Property
Not every size and image can be defined in CSS. Therefore, a topic can define these attributes.

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 ");
...
}
View the list of appearance attributes currently used by bidefaulttheme.