Hi Simon,
as you will probably know from [1] the appearance theme contains and
controls the styling information of a widget. Basically, it is
responsible for applying fonts, colors and decorators depending on the
widget's actual state. For example, if you look at the appearance theme
for buttons as defined in
..\framework\source\class\qx\theme\modern\Appearance.js you'll find the
following entry:
"button" :
{
alias : "button-frame",
include : "button-frame",
style : function(states)
{
return {
center : true
};
}
}
The "alias" and the "include" keys tell us that "button" inherits its
styling information from "button-frame" which contains the core
definitions for all button appearances:
"button-frame" :
{
alias : "atom",
style : function(states)
{
var decorator, textColor;
var padding = [3, 9]; // default padding css-case
if (states.checked && states.focused && !states.inner)
{
decorator = "button-checked-focused";
textColor = undefined;
padding = [1, 7];
}
else if (states.disabled)
{
decorator = "button-disabled";
textColor = undefined;
}
else if (states.pressed)
{
[...]
}
return {
decorator : decorator,
textColor : textColor,
shadow : shadow,
padding : padding,
margin : [1, 0]
};
}
}
As you can see from this code fragment, "button-frame" controls - among
other things - the selection of decorators: If the button is checked and
focused, the "button-checked-focused" decorator is applied; if the
button's state is "disabled", the decorator called "button-disabled" is
selected, and so on. Each of these decorators is defined in
..\framework\source\class\qx\theme\modern\Decoration.js.
So, if you want to modify the looks of buttons in your application you
need to not only define appropriate decorators for the different states
a button can be in. You also have to define a corresponding custom
appearance which is responsible for choosing a state-specifc decorator.
In order to create this custom appearance you extend Appearance.js in
the "theme" folder of your application:
qx.Theme.define("kardpoll.theme.Appearance",
{
extend : qx.theme.modern.Appearance,
appearances :
{
"rolloverButton" :
{
alias : "atom",
style : function(states)
{
var decorator;
if (states.checked && states.focused && !states.inner)
{
decorator = "rolloverButton-checked-focused";
[...]
}
else if (states.disabled)
{
decorator = "rolloverButton-disabled";
[...]
}
else if (states.pressed)
{
[...]
}
return {
decorator : decorator,
[...]
}
}
}
}
And in your Decoration.js:
qx.Theme.define("kardpoll.theme.Decoration",
{
extend : qx.theme.modern.Decoration,
decorations :
{
"rolloverButton-checked-focused" :
{
[...]
},
"rolloverButton-disabled" :
{
[...]
},
[...]
}
}
To actually apply your custom appearance-decorator combination you
simply call myCustomButton.setAppearance("rolloverButton").
I hope this gives you an idea of how decorators depend on an appearance
theme and how you go about modifying the looks of a particular widget
class. You'll find more in-depth information in the "Theming" chapter of
the manual ([2]), and you might also want to have look at the twitter
app tutorial which covers "Basic Theming" in section 4.2.1 ([3]).
HTH,
Norbert
[1] http://manual.qooxdoo.org/1.6.x/pages/gui_toolkit/ui_appearance.html
[2] http://manual.qooxdoo.org/1.6.x/pages/gui_toolkit/ui_theming.html
[3] http://manual.qooxdoo.org/1.6.x/pages/tutorials/tutorial-part-4-2-1.html
Am 21.01.2012 19:32, schrieb Simon White:
> Hi
>
> I did try what you suggested an it partly worked. The problem is that I
> do not get any effect when I mouse over the buttons. So it seems to me
> I have to assign several decorators but I am not sure how. I assumed
> that if I used "rolloverButton" QooxDoo would add "-css" or
> "-hovered-css" but apparently not.
>
> I am not sure I understand the defining of a custom appearance.
>
> Simon
>
>
>
> On 21/01/2012 7:40 AM, Norbert Schroeder wrote:
>> Hi Simon,
>>
>> all I can see in your example is a naming conflict: "rolloverButton-css" (in
>> Decoration.js) vs. "rolloverButton" (in your setDecorator call).
>> Apart from that you are on the right track, but don't forget to also define
>> a custom appearance for your button.
>>
>> Cheers,
>>
>> Norbert
>>
>> ----- Original Message -----
>> From: simonwh...@dciphercomputing.com
>> To: qooxdoo-devel@lists.sourceforge.net
>> Date: 21.01.2012 00:37:04
>> Subject: [qooxdoo-devel] Decorator Questions
>>
>>
>>> Hi
>>>
>>> I would like to create a rollover decorator for buttons. To test it I
>>> modified the Decoration.js as follows and it works just fine but now all
>>> my buttons are roll-over buttons. I would like to refine this so that I
>>> when the widget is being constructed I can choose to use the default
>>> button decorator or the rollover button decorator. So I tried renaming
>>> the "button-css" to "rolloverButton-css" and
>>> "button-hovered-css" to ""rolloverButton-hovered-css" in the
>>> Decoration.js and then used setDecorator("rolloverButton") but I get an
>>> error saying that "rolloverButton" is invalid.
>>>
>>> How should this be done?
>>>
>>> Thanks,
>>> Simon
>>>
>>>
>>>
>>> qx.Theme.define("kardpoll.theme.Decoration",
>>> {
>>> extend : qx.theme.modern.Decoration,
>>>
>>> decorations :
>>> {
>>> /*
>>>
>>> ---------------------------------------------------------------------------
>>> PLAIN CSS BUTTON
>>>
>>> ---------------------------------------------------------------------------
>>> */
>>> "button-css" :
>>> {
>>> decorator : [
>>> qx.ui.decoration.MSingleBorder,
>>> qx.ui.decoration.MLinearBackgroundGradient,
>>> qx.ui.decoration.MBorderRadius
>>> ],
>>>
>>> style :
>>> {
>>> radius: 3,
>>> width: 0,
>>> color: "border-button",
>>> startColorPosition: 35,
>>> endColorPosition: 100
>>> }
>>> },
>>>
>>> "button-hovered-css" :
>>> {
>>> include : "button-css",
>>> style : {
>>> width: 1,
>>> startColor : "button-hovered-start",
>>> endColor : "button-hovered-end"
>>> }
>>> }
>>>
>>>
>>> }
>>> });
>>>
>>>
>>>
------------------------------------------------------------------------------
Try before you buy = See our experts in action!
The most comprehensive online learning library for Microsoft developers
is just $99.99! Visual Studio, SharePoint, SQL - plus HTML5, CSS3, MVC3,
Metro Style Apps, more. Free future releases when you subscribe now!
http://p.sf.net/sfu/learndevnow-dev2
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
