Monday, March 29, 2010

Radio Button binding to XML

Based on the examples
here
and
here
I have a datagrid which uses an XML object as its dataprovider. The
xml goes like this:



%26lt;questions%26gt;

%26lt;question%26gt;

%26lt;prompt%26gt;What are your heroes?%26lt;/prompt%26gt;

%26lt;answers%26gt;

%26lt;answer%26gt;

%26lt;correct%26gt;true%26lt;/correct%26gt;

%26lt;text%26gt;Luther Higgs%26lt;/text%26gt;

%26lt;/answer%26gt;

%26lt;answer%26gt;

%26lt;correct%26gt;false%26lt;/correct%26gt;

%26lt;text%26gt;Barney Fife%26lt;/text%26gt;

%26lt;/answer%26gt;

%26lt;/answers%26gt;

%26lt;/question%26gt;

%26lt;/questions%26gt;



Well formed (if a bit confusing) xml. In my datagrid I have
two columns. The second column binds to
questions.question.answers.answer.text and works just fine. The
datagrid's editable property is set to true, and I'm able to click
on the second colum and type and it saves the answer back into the
xml object just fine. The problem lies in my first column. The mxml
looks like this:



%26lt;mx:DataGridColumn headerText=''Correct''%26gt;

%26lt;mx:itemRenderer%26gt;

%26lt;mx:Component%26gt;

%26lt;mx:VBox horizontalAlign=''center''%26gt;

%26lt;mx:RadioButton id=''myRadioButton''

buttonMode=''true'' useHandCursor=''true''

group=''{outerDocument.myRadioButtonGroup}''
selected=''{data.correct}''/%26gt;

%26lt;/mx:VBox%26gt;

%26lt;/mx:Component%26gt;

%26lt;/mx:itemRenderer%26gt;

%26lt;/mx:DataGridColumn%26gt;



The problem is that the radio buttons' selected properties
aren't bound to the xml, that is the one that is true doesn't
display as selected. If I set the datagridcolumn's editable
property to false, clicking on the radio button doesn't affect the
xml at all either. If I leave the editable property of the
datagridcolumn as the inherited default of true (based on the
parent datagrid's editable property) when I click on the radio
button the default itemEditor appears (a text input box) which
contains the following text:



%26lt;/answer%26gt;



and when I leave the editor (click outside or hit enter) the
xml then looks like this:



%26lt;answers%26gt;

%26lt;answer%26gt;

%26lt;correct%26gt;true%26lt;/correct%26gt;

%26lt;text%26gt;Luther Higgs%26lt;/text%26gt;

%26lt;/answer%26gt;

%26lt;answer%26gt;

%26lt;correct%26gt;false%26lt;/correct%26gt;

%26lt;text%26gt;Barney Fife%26lt;/text%26gt;

%26lt;null%26gt;%26amp;lt;answer%26amp;gt;

%26amp;lt;correct%26amp;gt;false%26amp;lt;/correct%26amp;gt;

%26amp;lt;text%26amp;gt;Barney Fife%26amp;lt;/text%26amp;gt;

%26amp;lt;/answer%26amp;gt;%26lt;/null%26gt;

%26lt;/answer%26gt;

%26lt;/answers%26gt;



I have seen controls that don't have the xml path written
correctly display the entire xml node rather than just the
contained data, but I can think of no reason anything should Ever
reference just the closing tag. To me this looks like a bug in the
data bindings between the radio button and the xml object.



Just to clear the air to avoid suggestions that will work but
not meet the design requirements, what I need is a datagrid that
has a radio button group (only one correct answer out of the group)
in the first column and strings in the second column which need to
be editable. I suppose I could write some hairy event listener code
and manually hack things together, but aside from avoiding that
headache, I'd love to use data bindings for what they were intended
for - I just need to know why it doesn't appear to be working
right. Much thanks in advance for any and all help.Radio Button binding to XML
First try this:

selected=''{XML(data.correct)}''



You will also need to set the selected property when the user
clicks the radio:

change=''{data.correct=myRadioButton.selected}''



See if that helps anything.

TracyRadio Button binding to XML
Searching the LiveDocs revealed the answer. Under the topic
''Using an E4X expression in an %26lt;mx:Binding%26gt; tag'' I found that
if instead of



%26lt;mx:RadioButton id=''myRadioButton''

buttonMode=''true'' useHandCursor=''true''

group=''{outerDocument.myRadioButtonGroup}''
selected=''{data.correct}''/%26gt;



I have



%26lt;mx:RadioButton id=''myRadioButton''

buttonMode=''true'' useHandCursor=''true''

group=''{outerDocument.myRadioButtonGroup}''/%26gt;

%26lt;mx:Binding source=''myRadioButton.selected''
destination=''data.correct'' /%26gt;



It works just perfectly.



Apparently binding between XML and the selected property of a
radio button (which is of type boolean) needs the %26lt;mx:Binding
/%26gt; rather than the in-tag curly brace notation.




P.S. The link on livedocs is here:


http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?co ntext=LiveDocs_Book_Parts%26amp;file=databinding_091_05.html#177459
I tried the code on the example on the livedocs link you
posted to see how it works, but I get errors:



Implicit coercion of a value of type mx.binding:Binding to an
unrelated type Binding. [Generated code (use -keep to save): Path:
Binding-generated.as, Line: 238, Column: 34] Binding April 5, 2007
5:11:42 PM 2783



Why is that?



Gilbert
Hmm... I'm not sure. I didn't actually try to run that code
myself - I just took the idea of using the Binding tag from that
page and it worked in my application.

No comments:

Post a Comment