Differences between revisions 9 and 10
Revision 9 as of 2006-12-26 20:32:07
Size: 4986
Comment: minor style changes and typo correction
Revision 10 as of 2009-09-20 23:00:49
Size: 4986
Editor: localhost
Comment: converted to 1.6 markup
No differences found!

Below are two examples of displaying radio buttons in columns. Both examples are similar in that they will display a total of nine buttons in three columns and result in setting the property button in the managed bean bean. The difference is the source of the buttons. In the static example the number of buttons is hard coded into the JSF, in the dynamic the number of buttons is not known only to the managed bean.

There is a related enhancement request to implement the layoutWidth attribute currently available in <t:selectManyCheckBox>. See http://issues.apache.org/jira/browse/TOMAHAWK-526

Static Example

The example below will display a list of 9 buttons in 3 columns.

Notice that <t:selectOneRadio> and it's associated <h:panelGrid> are inside a <h:panelGroup>. If this was not done, the <t:selectOneRadio> would be rendered as a column and the radio buttons in another column.

<h:form id="myForm">
  <h:panelGrid columns="2">
    <h:outputLabel for="buttons" value="Select one button"/>
    <h:panelGroup>
      <t:selectOneRadio id="buttons" layout="spread" value="#{bean.button}">
        <f:selectItem itemValue="Button 1" />
        <f:selectItem itemValue="Button 2" />
        <f:selectItem itemValue="Button 3" />
        <f:selectItem itemValue="Button 4" />
        <f:selectItem itemValue="Button 5" />
        <f:selectItem itemValue="Button 6" />
        <f:selectItem itemValue="Button 7" />
        <f:selectItem itemValue="Button 8" />
        <f:selectItem itemValue="Button 9" />
      </t:selectOneRadio>
      <h:panelGrid columns="3">
        <t:radio for="buttons" index="0" />
        <t:radio for="buttons" index="1" />
        <t:radio for="buttons" index="2" />
        <t:radio for="buttons" index="3" />
        <t:radio for="buttons" index="4" />
        <t:radio for="buttons" index="5" />
        <t:radio for="buttons" index="6" />
        <t:radio for="buttons" index="7" />
        <t:radio for="buttons" index="8" />
      </h:panelGrid>
    </h:panelGroup>
  </h:panelGrid>
</h:form>

Dynamic Example

The example below will display a list of 9 buttons in 3 columns inside a 2 column form. The SelectList is dynamic because it retrieved from an managed bean, buttonList.

Notice:

  • The use of <t:dataTable> inside <h:panelGroup>.

  • The forceId="true" forceIdIndex="false" in <t:selectOneRadio> is required to insure only one radio button is selected.

  • The use of the id attribute in <h:form>, <t:selectOneRadio>, and <t:radio>

<h:form id="myForm">
  <h:panelGrid columns="2">
    <h:outputLabel for="buttons" value="List of Buttons"/>
    <h:panelGroup>
      <t:selectOneRadio id="buttons" layout="spread" forceId="true" forceIdIndex="false" value="${bean.button}">
        <f:selectItems value="#{buttonList.selectList}" />
      </t:selectOneRadio>
      <t:dataTable newspaperColumns="3" var="row" value="#{buttonList.dataModel}" rowIndexVar="index">
        <h:column>
          <t:radio for=":myform:buttons" index="#{index}" />
        </h:column>
      </t:dataTable>
    <h:panelGroup>
  </h:panelGrid>
<h:form>

The class below creates a the list of 9 buttons and provides two views of the list. getSelectList() provides a list of SelectItems required by <t:selectOneRadio>. getDataModel() is the same list, but as a DataModel for <t:dataModel> to iterator over and provide an index to <t:radio>.

package com.foo.om;

import java.util.ArrayList;
import java.util.List;

import javax.faces.model.DataModel;
import javax.faces.model.ListDataModel;
import javax.faces.model.SelectItem;

public class RadioButtons
{
    private List selectList = new ArrayList();
    private DataModel dataModel;

    public RadioButtons()
    {
        selectList.add(new SelectItem("Button 1"));
        selectList.add(new SelectItem("Button 2"));
        selectList.add(new SelectItem("Button 3"));
        selectList.add(new SelectItem("Button 4"));
        selectList.add(new SelectItem("Button 5"));
        selectList.add(new SelectItem("Button 6"));
        selectList.add(new SelectItem("Button 7"));
        selectList.add(new SelectItem("Button 8"));
        selectList.add(new SelectItem("Button 9"));
        dataModel = new ListDataModel(selectList);
    }

    /** Used by <t:selectOneRadio> **/
    public List getSelectList()
    {
        return selectList;
    }

    /** Used by <t:dataTable> **/
    public DataModel getDataModel()
    {
        return dataModel;
    }
}

Declaration of the manage bean used above.

<managed-bean>
  <managed-bean-name>buttonList</managed-bean-name>
  <managed-bean-class>com.foo.om.RadioButtons</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Display_Radio_Buttons_In_Columns (last edited 2009-09-20 23:00:49 by localhost)