| Author: | Darin Kadrioski | 06/19/2002 |
| Modified: | Darin Kadrioski | 06/21/2002 |
History
Working with Themes
What are themes?
In version 2.0, DomAPI introduced the concept of "themes". Themes can be thought of as style sheets for components. They contain
all the colors and display properties to use for a given component or page.
When you create a component, the second parameter you pass is the theme it is to use. If you pass
null,
a default theme is used. This default theme matches the default Microsoft Windows look and feel.
The default theme is located in src/theme.js and is reproduced here for illustration.
function Theme(){
this.name = "system";
//-----
this.font = ''8pt "MS Sans Serif",Geneva,sans-serif''''; // normal font (think listbox)
this.bgColor = "window"; // normal background
this.fgColor = "windowtext"; // normal text
//-----
this.ctrlFont = this.font; // control font (think buttons)
this.ctrlBgColor = "buttonface"; // control base
this.ctrlFgColor = "buttontext"; // control text
//-----
this.hlFont = this.font; // mouse-over font
this.hlBgColor = "infobackground"; // mouse-over background
this.hlFgColor = "infotext"; // mouse-over text
//-----
this.selFont = this.font; // selected font
this.selBgColor = "highlight"; // selected background
this.selFgColor = "highlighttext"; // selected text
//-----
this.appFont = this.font; // appworkspace font
this.appBgColor = "appworkspace"; // appworkspace background
this.appFgColor = "buttontext"; // appworkspace text
//-----
this.captionFont = ''''bold 8pt "MS Sans Serif",Geneva,sans-serif''''; // caption font
this.captionBgColor1 = "activecaption"; // caption background primary
this.captionBgColor2 = "background"; // caption background secondary
this.captionFgColor = "captiontext"; // caption text
//-----
this.bdrLight = "threedhighlight"; // border color
this.bdrDark = "threedshadow"; // border color
this.getOutset = function(){return this.bdrLight+" "+this.bdrDark +" "+this.bdrDark +" "+this.bdrLight};
this.getInset = function(){return this.bdrDark +" "+this.bdrLight+" "+this.bdrLight+" "+this.bdrDark };
this.bdrColor = this.getOutset(); // border color
this.bdrWidth = 1; // border width
this.bdrOutset = "outset"; // what to use for outset
this.bdrInset = "inset"; // what to use for inset
this.bdrSolid = "solid"; // what to use for solid borders
//-----
this.colorFadeInc = 10; // for components that support color fading
this.colorFadeSpeed = 10; // for components that support color fading
};
These values tell the component how to draw itself on screen during startup, or in response to a reDraw() event. The component''''s author is responsible for implementing theme support.
Additional themes can be located in more_themes.js or, if you''''d like, you can also create your own.
How do I change a theme after the page has loaded?
Each component has a reDraw() method which re-applies it''''s theme. You can simply set it''''s new theme
value and call reDraw().
For example:
button1.theme = themePumpkin; button1.reDraw();
This would cause button1 to immediately appear in the "pumpkin" theme
How do I create my own themes?
Creating themes is easy.
Here is some code which creates a theme named myTheme:
var myTheme = new Theme();
This creates a brand new theme. By default, this theme is identical to the defaultTheme. You then modify whichever values you want. For instance, if we wanted our new theme to have a blue border with red text, we would do something like:
with(myTheme){ name = "myTheme"; bdrColor = "blue"; ctrlFgColor = "red"; fgColor = "red"; }Notice that we set two properties to red, ctrlFgColor and fgColor. These are used by components in different ways depending on their context. For instance, a button component would use ctrlFgColor for it's font color, while an edit component would use fgColor. In the Windows world, think of anything that normally has a gray background color as using ctrlFgColor and ctrlBgColor, while anything that is white uses fgColor and bgColor.
Since each new theme defaults to the contents of defaultTheme, you need only change the properties that are unique to your theme, not every single one.
You should place your custom themes in a separate file. Do not place them in more_themes.js as that file is subject to change with the next release. If you have a theme that you think the community could benefit from and would like to add it to more_themes.js permanently, please submit it.
I''''m a component writer. How do I include theme support? Each component should have at a minimum a theme property and a reDraw() method to keep it from throwing errors should the user try to interact with it. The standard constructor for components should include a theme parameter, which if not provided, should default to defaultTheme which is defined in core.js .
Listed here is a complete example of a basic component template that supports themes. Items to notice are the way in which the
defaultTheme is assigned if none was specified and the way reDraw()
is responsible for all style assignments.
Also note how reDraw() is called near the end of the template, ensuring that the component is displayed
correctly after creation.
Standard component constructor and template:
function ComponentName(parent,theme,x,y,w,h);
var elm = createElm(parent,x,y,w,h);
elm.theme = rTheme(theme);
//------
elm.reDraw=function(){
with (this.style) {
borderStyle = this.theme.bdrOutset;
borderWidth = this.theme.bdrWidth;
backgroundColor = this.theme.ctrlBgColor;
color = this.theme.ctrlFgColor;
borderColor = this.theme.getOutset();
}
if(typeof this.onredraw=="function")this.onredraw();
};
//------
elm.reDraw();
//------
elm.domAPIObjType="COMPONENTNAME";
return elm;
}
To get more of a feel for what themes are and what they can do for you, play with the component examples. Nearly every example allows you to change themes on the fly.
