Thank-you everything is working correctly now.
Simon
On 22/01/2012 8:45 AM, Norbert Schröder wrote:
> 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
------------------------------------------------------------------------------
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
