Rendering radio buttons/checkboxes

[antranig at caret.cam.ac.uk]

Yes, this is one of the correct ways (using a UISelect) - note that they
can also be rendered using a UIBoundBoolean (simply value/valuebinding
in a component) - the difference is in the intepretation of the bound
value. For a UISelect, you are specifying that the value you expect
to receive is a list, consisting of the selected values. For a UIBound,
you are expecting to receive all the separate values individually,
as an array/hash of true/false values.

The need for the div/span representing the overall control is something
we had inherited from the serverside, which I thought I had managed to
get rid of on the client. Certainly, there are several test cases
which manage to render the UISelect minus the span but I must obviously
have missed one case, I will look into it.

Bottom line - the div "shouldn't" be necessary but might somehow still
be through oversight...

Cheers,
Boz.


Quoting 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
>
>
>




----------------------------------------------------------------
This message was sent using IMP, the Internet Messaging Program.