Hello Jean-Noel,
first of all sorry for the late answer. I was due to health problems
not at work so i could not reply.
I have to admit I thought of something different of your problem. But
with your current code sample i saw what you try to achieve.
But your current solution does not use the data binding at all so in
the context of data binding its not elegant. ;)
But i do have a solution for your problem, which you can give a try in
the playground.
// create the radio buttons
var left = new qx.ui.toolbar.RadioButton("Left");
var right = new qx.ui.toolbar.RadioButton("Right");
var centered = new qx.ui.toolbar.RadioButton("Centered");
var justified = new qx.ui.toolbar.RadioButton("Justified");
// add the radio buttons
this.getRoot().add(left, {left: 10, top: 10});
this.getRoot().add(right, {left: 50, top: 10});
this.getRoot().add(centered, {left: 90, top: 10});
this.getRoot().add(justified, {left: 150, top: 10});
// create the radio group and add the buttons
var group = new qx.ui.form.RadioGroup();
group.add(left, right, centered, justified);
// create a dummy class
qx.Class.define("qx.testClass", {
extend : qx.core.Object,
properties : {
textAlign : {
event : "changeTextAlign",
init : "Left"
}
}
});
// create a instance of the test class
var test = new qx.testClass();
// create a converter for the binding
var options = {
converter : function(data) {
return data[0].getLabel();
}
};
// bind the selection of the radio group to the dummy class
group.bind("changeSelection", test, "textAlign", options);
As you can see, the magic in this case is in the converter. You use
the selection and bind this event to the target property. In the
converter, you can access the selection object, which is an array of
radio buttons containing the one selected radio button, and return the
value which should be stored in the property. I just used the label of
the buttons. But if you want some different data, you can use qooxdoo
user data (setUserData and getUserData). Using the value of the form
elements is not a good idea because the will be deprecated in the next
release (already are in trunk).
Is that such a solution you were seeking?
Best,
Martin
Am 22.05.2009 um 18:06 schrieb Jean-Noël Rivasseau:
Hi Martin,
I think you misunderstood my problem, because the code you suggested
*does not make sense at all to me* (or maybe I really did not get
what you wrote). Why binding a list???!
Thanks for letting me know that binding a radio group is not
officially supported. However, if you are dealing with a non
nullable property and qx.ui.form.RadioButton, it actually *Just
Works*. Look at the following code:
textAlignment: {"init": "LEFT", "event": "changeTextAlignment",
"check": ["LEFT", "RIGHT", "CENTERED", "JUSTIFIED"], "apply":
"_applyTextAlignment"},
var left = new qx.ui.form.RadioButton("Left");
var right = new qx.ui.form.RadioButton("Right");
var centered = new qx.ui.form.RadioButton("Centered");
var justified = new qx.ui.form.RadioButton("Justified");
left.setValue("LEFT");
right.setValue("RIGHT");
centered.setValue("CENTERED");
justified.setValue("JUSTIFIED");
this.textAlignmentRadioGroup = new qx.ui.form.RadioGroup();
this.textAlignmentRadioGroup.add(left, right, centered,
justified);
var controller = new qx.data.controller.Object(this);
controller.addTarget(this.textAlignmentRadioGroup, "value",
"textAlignment", true);
This works perfectly. However the problem comes when you want to
have a nullable property. Let's change the code to:
textAlignment: {"nullable": true,"init": null, "event":
"changeTextAlignment", "check": ["LEFT", "RIGHT", "CENTERED",
"JUSTIFIED"], "apply": "_applyTextAlignment"},
var left = new qx.ui.toolbar.RadioButton("Left");
var right = new qx.ui.toolbar.RadioButton("Right");
var centered = new qx.ui.toolbar.RadioButton("Centered");
var justified = new qx.ui.toolbar.RadioButton("Justified");
// Note how we changed all the qx.ui.form.RadioButton to
qx.ui.toolbar.RadioButton
left.setValue("LEFT");
right.setValue("RIGHT");
centered.setValue("CENTERED");
justified.setValue("JUSTIFIED");
this.textAlignmentRadioGroup = new qx.ui.form.RadioGroup();
this.textAlignmentRadioGroup.add(left, right, centered,
justified);
var controller = new qx.data.controller.Object(this);
controller.addTarget(this.textAlignmentRadioGroup, "value",
"textAlignment", true);
Then this wont work because value can not be resetted, for a
qx.ui.form.RadioGroup. I basically had to code the following to do
what I wanted (I removed the
controller.addTarget(this.textAlignmentRadioGroup, "value",
"textAlignment", true) code too):
textPage.textAlignmentRadioGroup.addListener("changeSelected",
this.processTextAlignmentDataBinding, this);
processTextAlignmentDataBinding: function()
{
var selection =
this.textAlignmentRadioGroup.getSelected();
if (selection)
{
this.setTextAlignment(selection.getValue());
}
else
{
this.resetTextAlignment();
}
},
_applyTextAlignment: function()
{
var selection = this.getTextAlignment();
if (selection)
{
this.textAlignmentRadioGroup.setValue(selection);
}
else
{
this.textAlignmentRadioGroup.resetSelected();
}
},
So I got it working (what do you think, is it an elegant way to
solve the problem ?). But it would be nice if such stuff was
integrated and documented.
Thanks
Jean-Noel
On Mon, May 18, 2009 at 9:48 AM, Martin Wittemann <[email protected]
> wrote:
Hello Jean-Noel,
thanks or the flowers for my last suggestion. I'll do my best. :)
Looks like you are one step ahead of me with your current problem. I
have thought about binding radio buttons and a radio group but havent
testet it yet. So officially it is not supported by the current data
binding layer.
I guess what you are looking for is something like a binding of a
form. We are currently working towards such a dynamic form widget
including the whole data binding. The first step was to get the form
API right. So if you want to be informed of the status of the form
controller, you can add yourself as cc in the bug report here:
http://bugzilla.qooxdoo.org/show_bug.cgi?id=2295
But you dont have a big problem i guess. ;) I have found a workaround
which might be not really an elegant way but its working. You can use
the list controller and a list widget as a container for the
RadioButtons from the form namespace.
Just test the following code in the playground and see how it could
work:
var list = new qx.ui.form.List();
list.setAppearance("");
this.getRoot().add(list);
var data = new qx.data.Array("a", "b", "c", "d", "e");
var radioGroup = new qx.ui.form.RadioGroup();
var controller = new qx.data.controller.List(data, list);
var delegate = {
createItem : function() {
var item = new qx.ui.form.RadioButton();
radioGroup.add(item);
return item;
},
bindItem : function(controller, item, id) {
controller.bindProperty(null, "label", null, item, id);
}
};
controller.setDelegate(delegate);
You have to handle the selection of the group with the RadioGroup
object itself because the selection of the controller does not work.
I hope that will work for you?
Best,
Martin
Am 15.05.2009 um 20:29 schrieb Jean-Noël Rivasseau:
> Hi,
>
> I am sure Martin will come up with a clever solution to my
> problem ;) - his last suggestions worked perfectly.
>
> I have not been able to make data binding work with a RadioGroup
> containing radio buttons. My problem is the following:
>
> I have a value, that is nullable, that can take a set of predefined
> values. I want it to be bound to the GUI in the form of a radio
> group. My first problem is that the default qx.ui.form.RadioButton
> does not allows for null values from an interface point of view (you
> cannot click on a button to toggle it off).
> qx.ui.toolbar.RadioButton allows that though.
>
> So I have set up 4 qx.ui.toolbar.RadioButton that are linked to a
> qx.ui.form.RadioGroup. Now I dont know how to setup the data
> binding; what value should I bind to in the widget? I tried binding
> to "changeSelection" and it does not work. I get:
>
> target["set" + qx.lang.String.firstUp(lastProperty)] is not a
function
>
> I tried binding to value and it works better (although I should not
> use value; it is marked deprecated in the qx.ui.form.RadioGroup
> API). But it's still not perfect because it does not allow nulls
> (when I unselect a toggle button, I get:
>
> target["reset" + qx.lang.String.firstUp(lastProperty)]
>
> The reset function indeed is not defined for the value property in
> the current qx.ui.form.RadioGroup API.
>
> I also tried to use qx.ui.form.RadioButton instead of
> qx.ui.toolbar.RadioButton. It does not work either, eg, I dont know
> to which property / event I should bind on the RadioGroup.
>
> So what's the proper, current, non deprecated way of doing what I
> need? Or is the RadioGroup widget not yet suitable to data binding,
> which would be a real problem ;)
>
> Thanks
>
> Jean-Noel
>
------------------------------------------------------------------------------
> Crystal Reports - New Free Runtime and 30 Day Trial
> Check out the new simplified licensing option that enables
> unlimited royalty-free distribution of the report engine
> for externally facing server and web deployment.
>
http://p.sf.net/sfu/businessobjects_______________________________________________
> qooxdoo-devel mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Crystal Reports - New Free Runtime and 30 Day Trial
Check out the new simplified licensing option that enables
unlimited royalty-free distribution of the report engine
for externally facing server and web deployment.
http://p.sf.net/sfu/businessobjects
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
--
Jean-Noël Rivasseau
Shoopz - Lead Developer / Responsable Développement
http://www.shoopz.com/
------------------------------------------------------------------------------
Register Now for Creativity and Technology (CaT), June 3rd, NYC. CaT
is a gathering of tech-side developers & brand creativity
professionals. Meet
the minds behind Google Creative Lab, Visual Complexity, Processing, &
iPhoneDevCamp asthey present alongside digital heavyweights like
Barbarian
Group, R/GA, & Big Spaceship. http://www.creativitycat.com
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Crystal Reports - New Free Runtime and 30 Day Trial
Check out the new simplified licensing option that enables unlimited
royalty-free distribution of the report engine for externally facing
server and web deployment.
http://p.sf.net/sfu/businessobjects
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
