Radio Button UI Tutorial

mammetlizardlickSoftware and s/w Development

Nov 3, 2013 (3 years and 9 months ago)

81 views

Radio Button UI Tutorial







































Raymond Saltrelli

October 4, 2004


Quantitative Methods of Usability

Prof. Stephanie Ludi

Rochester Institute of Technology

Introduction


A radio button is s
imilar 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
n
ot 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 rad
io 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 becau
se
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


-

JRadioButt
on( 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 grou
p and update the other accordingly
when it is clicked. This object model looks something like
Figure 2
; it is coupled,
cluttered and ugly.



Container
RadioButton1
RadioButton0
RadioButon2
ActionListener1
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
.



Container
<<colleague>>
RadioButton1
<<colleague>>
RadioButton0
<<colleague>>
RadioButton2
<<mediator>>
ActionListener

Figure3
: Mediator pattern solution



References


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
http://java.sun.com/j2se/1.5.0/docs/api/index.html



Accompanying Files


./radioButtonTutorial/


Main.java


RadioButtonMediator.java