On Friday 07 March 2008 Anand Narasimhan (anandn) wrote:
> 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.
I'm just curious: do you write an application for your company or is this more
a part of an evualation of different javascript libraries?
>
> BTW: Does QooxDoo have an accordion/drawer widget. Are there any plans
> for adding those. That would make my work a lot simpler. :-)
No, unfortunately qooxdoo has currently no accordion/drawer widget and there
are currently no plans for adding this widget for the next release 0.8 .
However it might be added during the development of the minor releases of the
0.8 versions.
> 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);
Extending a theme class is the recommended / cleaner way to do it. Although
theme classes are no *real* classes they can be used as such. You can extend
them in the same way as you can extend normal qooxdoo classes.
The "patch" method is like using a mixin for normal classes. However
the "patch" method will overwrite existing appearances. If you only want to
add additional appearances you can use the more defensive "include" method.
Did you already check the online api documentation of qooxdoo? Just take a
short look at the api documentation located at http://api.qooxdoo.org
> 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?
If you want to offer your users different themes you do not have to handle any
special theme change event. All you have to do is to set the new theme at the
meta theme manager.
--snip--
qx.theme.manager.Meta.getInstance().setTheme(qx.theme.Ext);
--snip--
If you use e.g. the classic theme per default the above line would switch to
the Ext theme at runtime. Additionally the meta manager fires an
event "changeTheme" at every theme change at which you can add your listeners
to perform any custom tasks.
> 3. Can I use the same mechanism (setAppreanceTheme or qx.Theme.patch) to
> add additional color, font and border themes to existing themes?
Yes, every theme type (font, color, border, appearance, widget and meta) has
its own manager class and with each of these manager classes you can set a
your own theme class.
--snip--
qx.theme.manager.Color.getInstance().setColorTheme(your.ColorTheme);
--snip--
You can change the other themes accordingly using their manager classes.
>
> 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?
As I mentioned before the "patch" method is a mixin mechanism which overwrites
existing entries. However be careful to not mix up the different theme types.
You should only use the "patch" method on the same type of themes. Patching a
font theme with your own color theme won't give you the right/desired
results.
If you already have your own appearance, color, font and border theme you can
create a new meta theme and set this meta theme via the meta manager
(qx.theme.manager.Meta). So instead of extending a meta theme you can extend
the several theme classes and set them inside your meta theme.
--snip--
/**
* Default Meta theme
*/
qx.Theme.define("your.theme.Meta",
{
title : "Default theme",
meta :
{
color : your.theme.Color, // extends an existing color theme
border : your.theme.Border, // extends an existing border theme
font : qx.theme.classic.font.Default,
appearance : your.theme.Appearance, // extends an existing appearance
theme
widget : qx.theme.classic.Widget,
icon : qx.theme.icon.Nuvola
}
});
--snip--
I hope you get the idea :-)
If you have any further questions feel free to ask.
cheers,
Alex
>
> -----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
-------------------------------------------------------------------------
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
