How to change the radio button or checkbox layout

We use h:selectManyCheckbox and h:selectOneRadio for rendering choices against a certain element. We would like the flexibility to layout the choices either horizontally, vertically or sorted in multiple columns.

e.g. 
1. Horizontally
one two three four five开发者_如何学C six

2. Vertically
one 
two
three
four
five
six

3. 2 columns
one two
three four
five six

4. 3 columns
one two three
four five six

How do we accomplish this either using the existing jsf tags or with suitable changes.

---

You can try to use from apache tomahawk library with layoutWidth property. Or create your own JSF component

---

1. First, be clear in what you want...
2. Take a look at: Developing a custom JSF tag
3. Know what attributes you can pass in your new custom tag, example (<h:customRadioButtons list="arraylist" style="table" name="rbuttons" columns="2" />)
4. Develope your future customTag...

---

using tomahawk ,we can try use layout="spread" like:

 <t:selectOneRadio id="test" value="one" layout="spread" border="1">
    <f:selectItem itemLabel="one" itemValue="one" />
    <f:selectItem itemLabel="two" itemValue="two" />
    <f:selectItem itemLabel="three" itemValue="three" />
    <f:selectItem itemLabel="four" itemValue="four" />
    <f:selectItem itemLabel="five" itemValue="five" />      
  </t:selectOneRadio>
  <t:panelGrid columns="2">
    <t:radio for="test" index="0"></t:radio>
    <t:radio for="test" index="1"></t:radio>
  </t:panelGrid>
  <t:panelGrid columns="3">
    <t:radio for="test" index="2"></t:radio>                
    <t:radio for="test" index="3"></t:radio>
    <t:radio for="test" index="4"></t:radio>
  </t:panelGrid>

then use ajax to rerender this t:selectOneRadio to change to other layout.

---

You can make facelate for this and customize your layout by using and bind with Mybean containing id, value, checked....