How do I set states for decoration?

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

How do I set states for decoration?

voger
I have a widget that I want to decorate. But I can't find how to switch
between states. Here is the code of the widget

qx.Class.define("qssite.ui.popup.DesktopMessage", {
     extend: qx.ui.popup.Popup,

     properties: {
         appearance: {
             refine: true,
             init: "desktop-notification-popup"
         }

     },

     construct: function(layout) {
         this.base(arguments, layout);

     }
});

and here is the entry in my Decoration.js

             "desktop-notification-popup": {
                 style: {
                     radius: 3,
                     backgroundColor: "#272822"
                 }
             }


and here is the entry in my Appearance.js

             "desktop-notification-popup": {
                 //alias:"popup",
                 style: function(states) {
                     console.log(states);
                     var decorator = null;
                     if (states.hovered) {
                         decorator = "desktop-notification-popup";
                     } else {
                         decorator = undefined;
                     }
                     return {decorator:decorator};
                 }

This just displays the popup without any decoration and
console.log(states); returns just an empty map. If I set the decorator
without checking states then the widget is displayed decorated.

How are the state set? In the docs I couldn't find anything useful. Just
this

States
A state is used for every visual state a widget may have. Every state
has flag character. It could only be enabled or
disabled via the API addState or removeState.




------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How do I set states for decoration?

N. Schröder
Hi,

I have never done that before, but you could try and listen for
"mouseover"/"mouseout" events and use addState("hovered") and
removeState("hovered"), respectively, in order to toggle your widget's
appearance.

Cheers,

   Norbert


Am 26.09.2015 um 16:05 schrieb voger:

> I have a widget that I want to decorate. But I can't find how to switch
> between states. Here is the code of the widget
>
> qx.Class.define("qssite.ui.popup.DesktopMessage", {
>       extend: qx.ui.popup.Popup,
>
>       properties: {
>           appearance: {
>               refine: true,
>               init: "desktop-notification-popup"
>           }
>
>       },
>
>       construct: function(layout) {
>           this.base(arguments, layout);
>
>       }
> });
>
> and here is the entry in my Decoration.js
>
>               "desktop-notification-popup": {
>                   style: {
>                       radius: 3,
>                       backgroundColor: "#272822"
>                   }
>               }
>
>
> and here is the entry in my Appearance.js
>
>               "desktop-notification-popup": {
>                   //alias:"popup",
>                   style: function(states) {
>                       console.log(states);
>                       var decorator = null;
>                       if (states.hovered) {
>                           decorator = "desktop-notification-popup";
>                       } else {
>                           decorator = undefined;
>                       }
>                       return {decorator:decorator};
>                   }
>
> This just displays the popup without any decoration and
> console.log(states); returns just an empty map. If I set the decorator
> without checking states then the widget is displayed decorated.
>
> How are the state set? In the docs I couldn't find anything useful. Just
> this
>
> States
> A state is used for every visual state a widget may have. Every state
> has flag character. It could only be enabled or
> disabled via the API addState or removeState.
>
>
>
>
> ------------------------------------------------------------------------------
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How do I set states for decoration?

voger
On 26/09/2015 05:18 μμ, Norbert Schröder wrote:

> Hi,
>
> I have never done that before, but you could try and listen for
> "mouseover"/"mouseout" events and use addState("hovered") and
> removeState("hovered"), respectively, in order to toggle your widget's
> appearance.
>
> Cheers,
>
>     Norbert
>
>

Thanks. I just tried that and it works. Maybe it was a misconception
from my part but I thought that states were set automatically by the
framework somehow. Also I found the source for qx.ui.form.Button and
this exactly how it does it.

------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How do I set states for decoration?

John Spackman-3
The widget’s code has to provide that state information - a widget can define any states it likes so long as they are boolean, and the theme layer will use that to calculate styling; it also caches the styling info so if you try debugging the appearance you will only see the appearance method being called once per unique set of states.  

Many of the widgets use a common set of states (EG hovered, selected, focused, etc) but in many cases the similarity in name is by convention rather than a core piece of the framework providing all of those states automatically to all widgets.

John




On 26/09/2015 16:07, "voger" <[hidden email]> wrote:

>On 26/09/2015 05:18 μμ, Norbert Schröder wrote:
>> Hi,
>>
>> I have never done that before, but you could try and listen for
>> "mouseover"/"mouseout" events and use addState("hovered") and
>> removeState("hovered"), respectively, in order to toggle your widget's
>> appearance.
>>
>> Cheers,
>>
>>     Norbert
>>
>>
>
>Thanks. I just tried that and it works. Maybe it was a misconception
>from my part but I thought that states were set automatically by the
>framework somehow. Also I found the source for qx.ui.form.Button and
>this exactly how it does it.
>
>------------------------------------------------------------------------------
>_______________________________________________
>qooxdoo-devel mailing list
>[hidden email]
>https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel