Radio Button UI Tutorial

Document Sample
Radio Button UI Tutorial Powered By Docstoc
					Radio Button UI Tutorial

Raymond Saltrelli
October 4, 2004

Quantitative Methods of Usability
Prof. Stephanie Ludi
Rochester Institute of Technology

A radio button is similar to a check box in its functionality. It is a small hollow circle,
typically with a label or icon to the right of it that becomes filled in upon being selected.
The main difference between radio buttons and check boxes (other than their shape) is
not in how they work but in how they are typically arranged and used. For instance, a
check box may be used in isolation; it can simply exist to determine whether the user
would like to invoke a certain action or option. Radio buttons, by convention, are usually
arranged in a list as illustrated in Figure 1 and set up in a way such that the user may only
have exactly one radio button selected at a given time.

Figure1: Example of standard radio button arrangement.

Radio Buttons in Java

To utilize radio buttons in your next Java application, refer to javax.swing.JRadioButton
in the Java API. At a glance, JRadioButton does not seem to offer any methods of
particular use. That is because JRadioButton does not have many methods of its own; it
primarily overrides and refines methods from its parent class javax.swing.AbstractButton.
Some methods we may be utilizing in this tutorial are as follows:

- javax.swing.JRadioButton
        - JRadioButton( String text )
        - JRadioButton( String text, boolean isSelected )
- javax.swing.AbstractButton
        - void addActionListener( ActionListener listener )
        - boolean isSelected()
        - void setEnable( boolean isEnabled )
        - void setSelected( boolean isSelected )
The Mediator Design Pattern

Typically when one radio button is selected all the rest in the group are deselected
automatically. One way to do this is to have each radio button’s action listener maintain
a reference to every other radio button in the group and update the other accordingly
when it is clicked. This object model looks something like Figure 2; it is coupled,
cluttered and ugly.



   RadioButton0                     ActionListener1                      RadioButon2

 ActionListener0                                                       ActionListener2

Figure2: Highly coupled solution

A better approach is to use the mediator design pattern (Gamma, Helm, Johnson,
Vlissides pp. 273-282). In the mediator design pattern, all of the radio buttons in a
grouping share a common action listener that coordinates the interactions between them
as shown in Figure 3. The action listener acts as a mediator among the multiple radio
buttons, which are referred to as colleagues. With this configuration, when one of the
radio buttons is selected the action listener can not only perform the appropriate system
response but also coordinate the deselection of the other radio buttons.


   <<colleague>>                                                     <<colleague>>
   RadioButton0                                                      RadioButton2

Figure3: Mediator pattern solution


Gamma, Helm, Johnson, Vlissides. “Design Patterns: Elements of Reusable Object-
     Oriented Software.” Addison Wesley. Upper Saddle River, NJ. 1995.

Sun Microsystems. “Java 2 Platform Standard Edition 5.0 API Specification”. 2004

Accompanying Files


Shared By:
Jun Wang Jun Wang Dr
About Some of Those documents come from internet for research purpose,if you have the copyrights of one of them,tell me by mail you!