Radio Button Group Component

See Also | Tutorials

You can drag the Radio Button Group component  from the Palette's Basic category to the Visual Designer to create a table initially containing three radio buttons in a column.

The radio buttons are rendered in rows and columns in an HTML <table> element. The number of rows is defined by the number of radio buttons. The number of columns is defined by the columns property. The default layout is a single vertical column. For example, if you want the radio buttons laid out in a single row, set columns property to the number of radio buttons.

A group of radio buttons can be used to represent various types of data, such as:

• a group of boolean controls where only one control is selected at a time.
• string values that are related to the radio button selection
• object values defined by the application
   
  

The items property associates the component with an array, a collection, or a list of com.sun.rave.web.ui.model.Option objects that populate the list. Right-click the component and choose Bind to Data to set this property, as described below.

In the Outline window, you can see the default object that populates the list, which has a name similar to radioButtonGroup1DefaultOptions. A quick way to change the default list items is to edit this object by right-clicking the component and choosing Configure Default Options, as described below.

You set the selected property to associate the component with an object that picks up the item selected by the user. The first time the component is rendered, the option that corresponds to the value of the selected property, if any, is marked as selected. When the user selects a radio button, the component's selected property contains the selected value. Right-click the component and choose Property Bindings to set this property, as described below.

After dragging the component to the Visual Designer, you can do a number of things with it:

• Select the Radio Button Group component on the page in the Visual Designer and edit its properties in the Radio Button Group Properties window. These properties affect the overall style and behavior of the list. Some typical properties you might set are:
  • id. The name of the Radio Button Group component. In the JSP file, this name is the value of the component's id attribute. In the page bean, this property's value is the name of the RadioButtonGroup object.
     
    
  • columns. Indicates the number of columns to use to lay out the radio buttons.
     
    
  • label. A label for the radio button group that appears to the left of the first radio button. The label's for property is set to the first radio button in the group.
     
    
  • labelLevel. Sets the style level for the label specified in the label property. Values are 1 (largest), 2, and 3 (smallest). The default value is 2.
     
    
  
   
  
• Right-click the component and choose one of the following pop-up menu items:
  • Edit Event Handler. Write code for one of the following event handlers.
    • validate. Opens the Java Editor with the cursor positioned in the component's validate method so you can insert code to validate the value of the component.
       
      
    • processValueChange. Opens the Java Editor with the cursor positioned in the component's processValueChange method so you can insert code that executes when the value of this component changes (for example, the user changes the value of another component that is controlling the value of this component).
       
      
    
     
    
  • Set Initial Focus. Gives this component focus when the user opens the page.
     
    
  • Auto-submit on Change. Causes the form to be automatically submitted if the value of the component changes. Sets the component's JavaScript onclick property to common_timeoutSubmitForm(this.form, 'component-id');. At runtime, this code causes the form to be automatically submitted if the user changes the component value. Once the form is submitted, conversion and validation occur on the server and any value change listener methods execute, and then the page is redisplayed.
     
    A component configured to Auto-submit on Change can use virtual forms to limit the input fields that are processed when the form is submitted. If the auto-submit component is defined to submit a virtual form, only the participants in that virtual form will be processed when the auto-submit occurs.
     
    
  • Bind to Data. Bind the component's items property to an object or to a data provider for a database table or JavaBeans object.
    • To bind the items property to an object, select the Bind to Object tab and then select a bean property that will be used to populate the list. The bean property must be an Object array, map, or collection whose members are all subclasses of com.sun.rave.web.ui.model.Option. For a tutorial showing how to associate a listbox with an array, which is similar to associating a checkbox group with an array, see the following web page:
      Using Listbox Components
       
      
    • To bind the items property to a data provider for a database table or JavaBeans object that will be used to populate the list, select the Bind to Data Provider tab and choose a data provider. If there are none, you must add the database table or JavaBeans object to the page. For more information, see Binding a List Component to a Database. For a tutorial showing how to associate a listbox with an array, which is similar to associating a radio button group with an array, see the following web page:
      Using Listbox Components
       
      
    
     
    
  • Property Bindings. Bind the component's properties to an object or data provider. A typical property to bind is the selected property, which you can bind to an Object array, array of primitives, or ArrayList. You must have added the array to a managed bean, such as the session bean, as a property. You can use this bean property to evaluate what the user chose after the page is submitted.
     
    
  • Configure Default Options. Enables you to edit the default radioButtonGroup#defaultOptions object and change the displayed radio buttons. It is more likely that you will want to bind the items property to a database or object to use to set radio button group items, as described above under Bind to Data.
     
    
  • Configure Virtual Forms. Enables you to add the component to a virtual form.
     
    
  
   
  

See Also

Binding Component Properties

Working With Components

Component Tasks: Quick Reference

Component Web Tutorials

Data Source Web Tutorials

About the Palette

Tutorials

Delving Into Components Tutorial

Using Listbox Components

Using Virtual Forms