Hi Alex,
Thanks for your reply. I did take a look, earlier (and also again
yesterday), at the articles you have mentioned. However, I do have some
more questions.
Before I ask my questions, let me explain a little bit more on what I am
trying to do.
I am trying to write some custom/new widgets. For example "outlook"
style accordion/drawer widget where I need to have a header, a content
area and one or more drawers. I want to define custom appearances,
fonts, colors etc for these widgets. I wanted to know how to add these
custom appearances, color etc to existing themes. I am not trying to
write new themes.
BTW: Does QooxDoo have an accordion/drawer widget. Are there any plans
for adding those. That would make my work a lot simpler. :-)
My questions.
1. As I understand, qooxdoo has a few pre-defined themes (Classic, Ext
etc). All the appearances, font and color names for all the widgets in
QooxDoo is defined for each of themes. Now I want to add my custom
appearance names/keys of my widgets into these themes. What is the right
way to do it. The article mentions ways to extend apprearance themes and
also additing to existing themes by doing
qx.Theme.define("MyNewAppearance", {
title: 'Menu',
extend:
qx.theme.manager.Appearance.getInstance().getAppearanceTheme(),
...
});
qx.theme.manager.Appearance.getInstance().setAppearanceTheme(MyNewAppear
ance);
I also saw some posting on this mailing list about using qx.Theme.patch.
So, which is the right/recommended way to add new appearance themes. I
tried using qx.Theme.patch and it seems to work.
qx.Theme.patch(qx.theme.manager.Appearance.getInstance().getAppearanceTh
eme(), myNewAppreanceTheme);
2. The code above will update the currently set theme, but if the user
decides to change the theme (like the feedreader example, if the theme
is changed at runtime to a new theme), do I need to handle theme change
event and do this for the changed theme?
3. Can I use the same mechanism (setAppreanceTheme or qx.Theme.patch) to
add additional color, font and border themes to existing themes?
3. If I define Appearance, Color, Fonts and Border themes and put them
together using a Meta theme and then use qx.Theme.patch to patch this
new meta theme, it apprears like existing font, color, border themes
will be overwritten because patch does not do a deep-merge. So apprears
like I need to do
qx.Theme.patch(qx.theme.manager.Appearance.getInstance().getAppearanceTh
eme(), MyNewAppreaanceTheme);
qx.Theme.patch(qx.theme.manager.Font.getInstance().getFontTheme(),
MyNewColorTheme);
...
Is this the right way to do it?
Thanks for all your help.
Anand
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
Alexander Back
Sent: Thursday, March 06, 2008 8:56 AM
To: qooxdoo Development
Subject: Re: [qooxdoo-devel] appearance for custom/new widgets
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
-------------------------------------------------------------------------
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
