Rendering radio buttons/checkboxes

[a.cheetham at utoronto.ca]

Hi, Antranig,

Michelle and I are not sure we're rendering radio buttons properly,  
and we're hoping you can clarify.

You can see an example of the way we're doing it in my component-types  
test file, in .../test/manual/renderer/component-types.*, in the Radio  
Buttons section (the id on the div is "selection-test2"):

<div id="selection-test2">
     <div rsf:id="select-test2">
     </div>
     <div rsf:id="select-test-row:">
         <input rsf:id="select-test-option" name="group1"  
id="select-test-radio" type="radio"/>
         <label rsf:id="select-test-label" for="select-test-radio">
             foofer
         </label>
     </div>
</div>


There's a component tree hard-coded in the js file (we're avoiding the  
question of programmatically generating a tree right now, just to help  
in our understanding):

     var selectionTree2 = {
         children: [
             {ID: "select-test2",
              selection: {value: "bar"},
              optionlist: {value: ["foo", "bar", "foo-bar"]},
              optionnames: {value: ["Foo", "Bar", "Foo-Bar"]}
             },
             {ID: "select-test-row:",
              children: [
                 {ID: "select-test-option",
                  choiceindex:0,
                  parentRelativeID: "..::select-test2"
                 },
                 {ID: "select-test-label",
                  choiceindex:0,
                  parentRelativeID: "..::select-test2"
                 }
              ]
             },
             {ID: "select-test-row:",
              children: [
                 {ID: "select-test-option",
                  choiceindex:1,
                  parentRelativeID: "..::select-test2"
                 },
                 {ID: "select-test-label",
                  choiceindex:1,
                  parentRelativeID: "..::select-test2"
                 }
              ]
             },
             {ID: "select-test-row:",
              children: [
                 {ID: "select-test-option",
                  choiceindex:2,
                  parentRelativeID: "..::select-test2"
                 },
                 {ID: "select-test-label",
                  choiceindex:2,
                  parentRelativeID: "..::select-test2"
                 }
              ]
             }
         ]
     };

The call to the renderer is:

var selectTemplate2 = fluid.selfRender($("#selection-test2"),  
selectionTree2, {debugMode: true});


The question is about the need for the div with rsf:id="select-test2"

Are we correct that this div needs to be there? It seems odd, since it  
doesn't result in any rendered output, but it doesn't work without it.  
Is there something wrong with our tree?

-- 
Anastasia Cheetham                   a.cheetham at utoronto.ca
Software Designer, Fluid Project
Adaptive Technology Resource Centre / University of Toronto