1. AWT Scrollbar Component

Java AWT Scrollbar Component allows the user to pick a value which will fall under specific range. Many of us already seen Scrollbar UI and below screenshot shows its parts:

A Scrollbar can set up with minimum and maximum values and these sets the range. The user can pick a value from this range by adjusting the Scrollbar Thumb. One can adjust this component value by using any of the below method:

• Increment value by clicking Scroll Arrow in the bottom.
• Decrement value by clicking Scroll Arrow in the Top.
• Block increment or decrement by clicking area as shown in the picture. These Block can be configurable, which we will see soon.
• Hold and Drag the Scroll Thumb.

2. About AWT Scrollbar Example

The screenshot of the example we are going to create is below:

In our example, we will have three panels and the AWT Frame hosts them via BorderLayout manger. The top panel hosts three AWT Scrollbar controls to denote red, blue, green color values. Middle panel will live in the centre part of the Frame Window. Gray Scale check box will sit in the South part of the Frame window’s border layout.

All three AWT Scrollbar together represent an RGB color value. So, each Scroll can produce a range of values which falls between 0 to 255. When the user adjusts the Scrollbar, we will create RGB Color and apply that to the panel in the middle of the Frame. When Gray Scale is in checked state, we produce the grey-scaled color and apply that to the middle panel. This example helps you to learn how to use AWT Scrollbar and how to handle the AdjustmentEvent raised by it.

3. AdjustmentListener & AdjustmentEvent

We will create a class called FrameWindow, which will derive from AWT Frame. The AWT Scrollbar triggers AdjustmentEvent when the user changes the scroll value via the methods described in Section 1. The AdjustmentListener will provide interface methods to respond to this event. So, we implement this interface for our Frame class:

4. Class Members

We declare three Scrollbar as class members, and we refer these in the handler function of the AdjustmentListener. The Panel reference MidPanel is to change the background color based on the RGB Scrollbar values. The Checkbox instance will supply to show whether or not we need grey-scale colour value.

5. Create AWT Scrollbar Component

We construct the AWT Scrollbar after creating the Panels for top and middle portion of the Frame. Have a look at the below picture:

The above picture shows constructor parameters of the AWT Scrollbar component. The first param tells the orientation of the Scrollbar. In our case, we need all scroll bars laid out horizontally and hence we pass Scrollbar.HORIZONTAL. The second param decides where we want to set the initial position of Scroll thumb. Say, for example, if the Scrollbar is for specifying the sound volume which is ranging from 1 to 50, the value 10 passed here will set the initial sound volume to 10.

Third param is to set the Thumb Size part of the scroll bar. In the above screenshot, we set the thumb size with 55 value-part which is bigger than the standard size. The last two params sets the range of value. In our case, we want to use the Scrollbar for denoting the RGB component values and these color intensities takes value from 0 to 255. The initial value which we pass as second param should fall within this range.

We use the above constructor to create our three AWT Scrollbar components. Since our scroll bars are to pick RGB color component value, while we code, we will set matching background color for the scroll bars via setBackground method call. Also, we call the method setBlockIncrement for all three scroll controls to set a block increment/decrement of 5. How to perform Block Increment or Decrement was shown in the very first picture.

6. Add Three Scrollbars

Now all three AWT Scrollbars are ready. We create a panel with 3 rows, 1 column grid, and add all our three scroll controls to it. Later, we will add this panel to the North part of our frame window. Code snippet is below:

7. Add Components to Frame

Have a look at the example UI in picture in section 2. We have all the UI components except the checkbox. Now we will finish the user interface by adding all the components to the AWT Frame Window. Note, we add the check box towards the south which performs Gray-Scale coloring.

8. Register AWT Scrollbar For AdjustmentEvent

We make call to addAdjustmentListener method of the Scrollbar to sign up with the Listener.  Our AWT Frame derived class implements AdjustmentListener and hence we pass ‘this’ reference to deal with the AdjustmentEvent in our Frame class itself.

9. Greyscale Color Value

The Grey-Scale intensity will range from 0 to 255. The value 0 denotes Black and 255 denotes pure white. And the value between this range tells the grey-scale intensity. The below picture shows it:

For a grey-scale value, the RGB (Red-Green-Blue) component should have same values and it will fit inside the range 0-255. The function setGrayScale custom function accepts an integer param and sets that to all three Scrollbar controls by calling the setValue method. Below is the custom function:

10. Read AWT Scrollbar Values

In the adjustmentValueChanged handler function, we retrieve the value from all three AWT Scrollbars by calling the getValue function. The function will return a value between 0-255 as this is what the range we fixed while constructing the Scrollbars. For example, to get the red component value, we call red = RedBar.getValue(); The same way, we get other color component values from other two Scroll bars.

The handler function receives an AdjustmentEvent and we can get the owner of the event by calling the getAdjustable method. Once we know the event source, we make call to the specific Scrollbar component. In the below code, after line 33, we will have red, green, blue component values in the integer variables. We use these values to construct the AWT Color object (Line 35) and assign it as a background color for the Middle panel (Line 36).

At line 8, we ensure Gray-scale is not turned ON and then read all three Red, Green, Blue component values. Remember, JAVA AWT calls the adjustmentValueChanged for all three Scrollbars as all are registered with the Frame Window. Say, for example, let us say user dragged the Red Scrollbar; here we read the value from all three RGB Scrollbars not just the Red one. This way, we will not disturb the existing position of other two Scrollbar and construct correct AWT Color object.

Line 16-31 is for setting the Grey-Scale value. It does not matter what AWT Scrollbar user drags; we maintain all three Scrollbar at the same level by calling the custom function setGrayScale. This function takes an integer values and keeps thumb position of all three RGB Scrollbars at the same level. Below is the code:

11. Code Reference

11.1 MainEntryAWT.java

11.2 AWTScrollbarExample.java

12. AWT Scrollbar Component – Youtube Demo

Note: The you tube video contains older version of this example which has bug. The above sample code has the fix.

• AWT MULTI-SELECT LIST Control
• AWT MouseListener & MouseMotionListener

Categories: AWT

Tags: AdjustmentEvent, AdjustmentListener, Scrollbar.HORIZONTAL, Scrollbar::getValue, Scrollbar::setValue, setBackground, setBlockIncrement

This site uses Akismet to reduce spam. Learn how your comment data is processed.