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.