Hi Anand,
On Mon, 2008-03-03 at 09:37 -0800, Anand Narasimhan (anandn) wrote:
> Hi,
> I am new to qooxdoo.
Welcome to the project!
> So far I have been looking at the examples and written small examples.
> Now I am trying to write a new widgets. I want to know how to define
> appearance for the new widget so it available for all the supported
> themes (classic, ext, etc).
> I have defined a widget like this
>
> qx.Class.define("my.new.widget, {
> extend: qx.ui.layout.VerticalBoxLayout,
> construct: function(){
> this.base(arguments);
> ...
> },
>
> properties: {
> appearance: {
> refine: true,
> init: "my-new-widget"
> }
> }
> ...
> });
Your approach is completely right. This way you are able to define the
appearance of your widget with the id "my-new-widget" within any
appearance class.
How to add your appearance to the existing appearance themes or extend
the existing appearance themes is described at the wiki article located
at http://qooxdoo.org/documentation/0.7/theme_support
> I want to define colors, fonts, borders etc for my new widget and use
> the new key I have defined for the appearance.
> How and where do I do it? How does this tie in with the theme?
To define colors, fonts and borders you can use the corresponding theme
classes. The different theme types are also described at the article
mentioned above and to give you a short overview about these themes just
take a look at the following examples.
--Color theme--
qx.Theme.define("name.space.MyColorTheme",
{
title : "My color theme",
colors :
{
"widgetBackground" : [ 212, 208, 200 ],
"widgetForeground" : [ 255, 255, 255 ],
"light-grey" : [ 240, 240, 240 ],
...
}
--Color theme--
Just define your colors as a map with RGB values. The key is the name of
the color which you can use in every other theme.
--Border theme--
qx.Theme.define("name.space.MyBorderTheme",
{
title : "My border theme",
borders :
{
"light-grey" :
{
width : 1,
color : "light-grey"
}
...
--Border theme--
As you can see, just setting the color to the previously defined color
"light-grey" will do the job.
--Font theme--
qx.Theme.define("name.space.MyFontTheme",
{
title : "My font theme",
fonts :
{
"bold" :
{
size : 11,
family : [ "Tahoma", "Verdana", "Liberation Sans" ],
bold : true
}
...
--Font theme--
For each font you can define the properties "size", "family", "bold" and
"italic" to customize your fonts.
--Appearance theme--
qx.Theme.define("name.space.MyAppearanceTheme",
{
title : "My appearance theme",
appearances :
{
"my-new-widget" :
{
font : "bold",
"textColor" : widgetForeground",
"backgroundColor" : "widgetBackground",
"border" : "light-grey"
}
}
--Appearance theme--
The appearance theme is the place where you put everything together.
Using the previously defined colors, borders and fonts is as simple as
it can get.
To tie your themes together you have to create a meta theme, which is
used to define the theme classes you wish to use. Defining meta themes
is also documented in the wiki article.
( http://qooxdoo.org/documentation/0.7/theme_support#defining_meta_themes )
I hope this short overview has answered all of your questions ;-)
cheers,
Alex
-------------------------------------------------------------------------
This SF.net email is sponsored by: Microsoft
Defy all challenges. Microsoft(R) Visual Studio 2008.
http://clk.atdmt.com/MRT/go/vse0120000070mrt/direct/01/
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
