On 5/26/10 1:57 AM, MartinWittemann wrote:
> Hi Greg,
>
>
> Greg Beaver wrote:
>
>> All in all, a very frustrating experience. I've been working on this
>> for 3 days now with absolutely no luck getting it to display a stupid
>> selectbox or list properly :).
>>
>>
> I can imagine that this is frustrating. What kind of documentation could we
> add to get that time down?
>
I think the best way would be to add a super-minimal example custom
widget that adds a few standard child controls, and the appearance theme
that controls its appearance. For instance, here is a stripped down
version of my control (all events removed etc.):
qx.Class.define("example.widgets.ProgramInfo", {
extend: qx.ui.core.Widget,
properties :
{
appearance :
{
refine : true,
init : "programinfo"
}
},
construct: function()
{
this.base(arguments);
this._createChildControl("composerpiece");
this._createChildControl("movements");
this._createChildControl("erasebutton");
this._setLayout(new qx.ui.layout.HBox(5));
},
members: {
_createChildControlImpl: function(id)
{
var control;
if (id == "composer") {
control = new qx.ui.form.SelectBox();
} else if (id == "composerpiece") {
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
control.add(this._createChildControl("composer"));
control.add(this._createChildControl("piece"));
control.setAppearance("programinfo/composerpiece");
this._add(control, {flex: 2});
} else if (id == "erasebutton") {
control = new qx.ui.form.Button;
this._add(control);
control.setAppearance("programinfo/erasebutton");
} else if (id == "piece") {
control = new qx.ui.form.SelectBox();
} else if (id == "movements") {
control = new qx.ui.form.List();
control.setAppearance("programinfo/movements");
this._add(control, {flex:2});
}
return control || this.base(arguments, id);
}
}
});
/* ************************************************************************
Copyright:
License:
Authors:
#asset (example/Oxygen/16/actions/edit-delete.png)
************************************************************************ */
qx.Theme.define("example.theme.Appearance",
{
extend : qx.theme.modern.Appearance,
appearances :
{
"programinfo" : "widget",
"programinfo/composerpiece" : "widget",
"programinfo/piece" : "selectbox",
"programinfo/composer" : "selectbox",
"programinfo/movements" : "list",
"programinfo/erasebutton" :
{
alias : "button",
include : "button",
style : function(states)
{
return {
icon : "example/Oxygen/16/actions/edit-delete.png",
padding : 2,
marginLeft : 1
};
}
}
}
});
One other note: I couldn't figure out how to make it grab the built-in
qx standard icon, so I just copied it over to my app, but if there is a
way to show this, that would also clarify the example.
> Greg Beaver wrote:
>
>> This sentence: " For every child control a selector is generated which
>> starts with the first widget which is not a child control itself"
>> doesn't make any sense. Is the first widget the custom widget? Is it
>> the top-level child control?
>>
>>
> I'm quite sure that it is your custom widget in your case. It depends on the
> structure of your composed widget but usually the custom widget uses child
> controls which makes the custom widget the first non child control widget.
>
I may edit the docs to make this clearer, I've been tweaking grammar
occasionally in the docs here and there.
Thanks,
Greg
------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
