JSlider

JSliders enable the user to select from a range of integer values. Class JSlider inherits from JComponent. Figure 22.1 shows a horizontal JSlider with tick marks and the thumb that allows the user to select a value. JSliders can be customized to display major tick marks, minor tick marks and labels for the tick marks. They also support snap-to ticks, which cause the thumb to snap to the closest tick mark when it is positioned between two tick marks.

Figure 22.1. JSlider component with horizontal orientation.

Most Swing GUI components support user interactions through the mouse and the keyboard. For example, if a JSlider has the focus (i.e., it is the currently selected GUI component in the user interface), the left arrow key and right arrow key cause the thumb of the JSlider to decrease or increase by 1, respectively. The down arrow key and up arrow key also cause the thumb of the JSlider to decrease or increase by 1 tick, respectively. The PgDn (page down) key and PgUp (page up) key cause the thumb of the JSlider to decrease or increase by block increments of one-tenth of the range of values, respectively. The Home key moves the thumb to the minimum value of the JSlider, and the End key moves the thumb to the maximum value of the JSlider.

JSliders have either a horizontal orientation or a vertical orientation. For a horizontal JSlider, the minimum value is at the left end of the JSlider and the maximum is at the right end. For a vertical JSlider, the minimum value is at the bottom and the maximum is at the top. The minimum and maximum value positions on a JSlider can be reversed by invoking JSlider method setInverted with boolean argument true. The relative position of the thumb indicates the current value of the JSlider.

The program in Fig. 22.2, Fig. 22.3 and Fig. 22.4 allows the user to size a circle drawn on a subclass of JPanel called OvalPanel (Fig. 22.2). The user specifies the diameter of the circle with a horizontal JSlider. Class OvalPanel is a subclass of JPanel that knows how to draw a circle on itself, using its own instance variable diameter to determine the diameter of the circlethe diameter is used as the width and height of the bounding box in which the circle is displayed. The diameter value is set when the user interacts with the JSlider. The event handler calls method setDiameter in class OvalPanel to set the diameter and calls repaint to draw the new circle. The repaint call results in a call to OvalPanel's paintComponent method.

Figure 22.2. JPanel subclass for drawing circles of a specified diameter.

(This item is displayed on page 1008 in the print version)

 1 // Fig. 22.2: OvalPanel.java
 2 // A customized JPanel class.
 3 import java.awt.Graphics;
 4 import java.awt.Dimension;
 5 import javax.swing.JPanel;
 6
 7 public class OvalPanel extends JPanel
 8 {
 9 private int diameter = 10 ; // default diameter of 10
10
11 // draw an oval of the specified diameter
12 public void paintComponent( Graphics g )
13 {
14 super .paintComponent( g );
15
16 g.fillOval( 10, 10, diameter, diameter ); // draw circle
17 } // end method paintComponent
18
19 // validate and set diameter, then repaint
20 public void setDiameter( int newDiameter )
21 {
22 // if diameter invalid, default to 10
23 diameter = ( newDiameter >= 0 ? newDiameter : 10 );
24 repaint(); // repaint panel
25 } // end method setDiameter
26
27 // used by layout manager to determine preferred size
28 public Dimension getPreferredSize()
29 {
30 return new Dimension( 200, 200 );
31 } // end method getPreferredSize
32
33 // used by layout manager to determine minimum size
34 public Dimension getMinimumSize() 
35 { 
36  return getPreferredSize(); 
37 } // end method getMinimumSize 
38 } // end class OvalPanel

Figure 22.3. JSlider value used to determine the diameter of a circle.

(This item is displayed on page 1009 in the print version)

 1 // Fig. 22.3: SliderFrame.java
 2 // Using JSliders to size an oval.
 3 import java.awt.BorderLayout;
 4 import java.awt.Color;
 5 import javax.swing.JFrame;
 6 import javax.swing.JSlider;
 7 import javax.swing.SwingConstants;
 8 import javax.swing.event.ChangeListener;
 9 import javax.swing.event.ChangeEvent; 
10
11 public class SliderFrame extends JFrame
12 {
13 private JSlider diameterJSlider; // slider to select diameter
14 private OvalPanel myPanel; // panel to draw circle
15
16 // no-argument constructor
17 public SliderFrame()
18 {
19 super ( "Slider Demo" );
20
21 myPanel = new OvalPanel(); // create panel to draw circle
22 myPanel.setBackground( Color.YELLOW ); // set background to yellow
23
24 // set up JSlider to control diameter value 
25 diameterJSlider = 
26  new JSlider( SwingConstants.HORIZONTAL, 0, 200, 10 ); 
27 diameterJSlider.setMajorTickSpacing( 10 ); // create tick every 10
28 diameterJSlider.setPaintTicks( true ); // paint ticks on slider 
29
30 // register JSlider event listener 
31 diameterJSlider.addChangeListener( 
32 
33  new ChangeListener() // anonymous inner class 
34  { 
35  // handle change in slider value 
36  public void stateChanged( ChangeEvent e ) 
37  { 
38  myPanel.setDiameter( diameterJSlider.getValue() );
39  } // end method stateChanged 
40  } // end anonymous inner class 
41 ); // end call to addChangeListener 
42
43 add( diameterJSlider, BorderLayout.SOUTH ); // add slider to frame
44 add( myPanel, BorderLayout.CENTER ); // add panel to frame
45 } // end SliderFrame constructor
46 } // end class SliderFrame

Figure 22.4. Test class for SliderFrame.

(This item is displayed on page 1010 in the print version)

 1 // Fig. 22.4: SliderDemo.java
 2 // Testing SliderFrame.
 3 import javax.swing.JFrame;
 4
 5 public class SliderDemo
 6 {
 7 public static void main( String args[] )
 8 {
 9 SliderFrame sliderFrame = new SliderFrame();
10 sliderFrame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
11 sliderFrame.setSize( 220, 270 ); // set frame size
12 sliderFrame.setVisible( true ); // display frame
13 } // end main
14 } // end class SliderDemo

 

Class OvalPanel (Fig. 22.2) contains a paintComponent method (lines 1217) that draws a filled oval (a circle in this example), a setDiameter method (lines 2025) that changes the circle's diameter and repaints the OvalPanel, a getPreferredSize method (lines 2831) that returns the preferred width and height of an OvalPanel and a getMinimumSize method (lines 3437) that returns an OvalPanel's minimum width and height.

Look-and-Feel Observation 22.1

If a new GUI component has a minimum width and height (i.e., smaller dimensions would render the component ineffective on the display), override method getMinimumSize to return the minimum width and height as an instance of class Dimension.

Software Engineering Observation 22.1

For many GUI components, method getMinimumSize is implemented to return the result of a call to the component's getPreferredSize method.

Class SliderFrame (Fig. 22.3) creates the JSlider that controls the diameter of the circle. Class SliderFrame's constructor (lines 1745) creates OvalPanel object myPanel (line 21) and sets its background color (line 22). Lines 2526 create JSlider object diameter-Slider to control the diameter of the circle drawn on the OvalPanel. The JSlider constructor takes four arguments. The first argument specifies the orientation of diameterSlider, which is HORIZONTAL (a constant in interface SwingConstants). The second and third arguments indicate the minimum and maximum integer values in the range of values for this JSlider. The last argument indicates that the initial value of the JSlider (i.e., where the thumb is displayed) should be 10.

Lines 2728 customize the appearance of the JSlider. Method setMajorTick-Spacing indicates that each major-tick mark represents 10 values in the range of values supported by the JSlider. Method setPaintTicks with a true argument indicates that the tick marks should be displayed (they are not displayed by default). For other methods that are used to customize a JSlider's appearance, see the JSlider on-line documentation (java.sun.com/j2se/5.0/docs/api/javax/swing/JSlider.html).

JSliders generate ChangeEvents (package javax.swing.event) in response to user interactions. An object of a class that implements interface ChangeListener (package javax.swing.event) and declares method stateChanged can respond to ChangeEvents. Lines 3141 register a ChangeListener to handle diameterSlider's events. When method stateChanged (lines 3639) is called in response to a user interaction, line 38 calls myPanel's setDiameter method and passes the current value of the JSlider as an argument. JSlider method getValue returns the current thumb position.