Qooxdoo 3.5: How to remove border of a form textfield when it is in focus

Question

I am trying to have textfields that only show their border when the widget is in focus (or maybe hovered)

I am using Qooxdoo 3.5

I have the following for Appearance.js

qx.Theme.define("myapp.theme.Appearance",
{
  extend : qx.theme.modern.Appearance,

  appearances :
  {
    "dynamicborder-textfield" : {

        base : true,

        style : function(states)
        {

           var result = {};

           if (states.hovered) {

             result.decorator = "noborder";
           } else {

             result.decorator = "singleborder";
           }

           return result;
        }
    }
  }
});

and I have the following for my Decoration.js

qx.Theme.define("myapp.theme.Decoration",
{
  extend : qx.theme.modern.Decoration,

  decorations :
  {
      "noborder" : {

      },

      "singleborder" : {
          decorator : qx.ui.decoration.Decorator,

          style : {
              width : 2,
              color : red
          }    
      }
  }
});

I am setting the appearance of my textfield during runtime like so

var textfield = new qx.ui.form.TextField();
textfield.setAppearance("dynamicborder-textfield");

All I get is textfields with no border all the time. It doesn't matter whether they are hovered or any other state. What am I doing wrong? Please consider the focussed state as well.

Answer 1

please take a look at http://tinyurl.com/n4nksll

First of all the text field widget has no "hovered" state by default, only has "focused". I implemented a small mixin into the sample to enable this feature.

Furthermore you should get an error like "GlobalError: red is not defined". You have been using color:red instead of color:"red" in your decorator class.

I hope I could help.

regards Mustafa Sak