1. Introduction to JToolBar
We know a toolbar houses icon buttons to invoke quick command like File Open, Save. Java swing has a JToolBar class to provide toolbar support for UI based application. In a top-level container like Frame and Dialogs, a toolbar can be housed by making use the BorderLayout manager. We can add JButton, ComboBox, textbox like components to a JToolBar.
2. About the Example
The example is below:
Our example has two toolbars in it. One is in the top part of the Frame window and other one is in the bottom part. Each of the toolbar contains three buttons on it and each button is assigned with one image icon. Very first button in the top toolbar shows a message when the user clicks it. When we proceed with the example, we will also learn how to use floating toolbar and study rollover behaviour.
3. Prepare Toolbar Icon Buttons
Preparing tool-bar buttons requires image files of size 24×24 in pixel. One can use paint brush to create these icon sized images. In the below code-snippet 02, we construct
ImageIcon instances by loading the images from the G:\Temp folder. Next, in code snippet 3, we create JButton by passing the ImageIcon instances. Now, we have all 6 buttons ready.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//Sample 02: Create ImageIcons for the Toolbar ImageIcon icoCut = new ImageIcon("G:\\Temp\\Cut.png"); ImageIcon icoCopy = new ImageIcon("G:\\Temp\\Copy.png"); ImageIcon icoPaste = new ImageIcon("G:\\Temp\\Paste.png"); ImageIcon icoRed = new ImageIcon("G:\\Temp\\Red.png"); ImageIcon icoBlue = new ImageIcon("G:\\Temp\\Blue.png"); ImageIcon icoGreen = new ImageIcon("G:\\Temp\\Green.png"); //Sample 03: Prepare Buttons for Toolbar JButton tbbCut = new JButton(icoCut); JButton tbbCopy = new JButton(icoCopy); JButton tbbPaste = new JButton(icoPaste); JButton tbbRed = new JButton(icoRed); JButton tbbGreen = new JButton(icoBlue); JButton tbbBlue = new JButton(icoGreen); |
4. Create Toolbars
The
JToolBar instance of the Java Swing will create the toolbar for us. In the below code snippet, we create two JToolBar objects and add the JButtons created in the previous step to it. For both the toolbar, we disable Rollover and Floating capabilities for now. After we show them in the JFrame, we will enable them. The
add method call adds the toolbars to the JFrame. We add the first toolbar to the top of the frame window by specifying the constant BorderLayout.NORTH and the second toolbar to the bottom via the constant Borderlayout.SOUTH.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//Sample 04: Prepare Two Toolbars //4.1 Clipboard Toolbar JToolBar tbClip = new JToolBar(); tbClip.add(tbbCut); tbClip.add(tbbCopy); tbClip.add(tbbPaste); tbClip.setFloatable(false); tbClip.setRollover(false); //4.2 Color Toolbar JToolBar tbColor = new JToolBar(); tbColor.add(tbbRed); tbColor.add(tbbBlue); tbColor.add(tbbGreen); tbColor.setFloatable(false); tbColor.setRollover(false); //Sample 05: Add Toolbar to Frame add(tbClip, BorderLayout.NORTH); add(tbColor, BorderLayout.SOUTH); |
5. Handle Toolbar Button Event
The toolbar buttons are JButtons. So, it will raise the
ActionEvent when the user clicks it. In the below code snippet, we handled this event for the ‘Cut’ Toolbar button. Note, this is the first toolbar button in the tbClip, which stays at the top of the JFrame window. The handler displays a message box stating that the user clicked the toolbar button.
|
1 2 3 4 5 6 7 8 9 10 11 |
//Sample 06: Handler for Cut Button tbbCut.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog( SwingToolbarExample.this, "Cut Button Clicked!"); } }); |
6. JToolBar Rollover
The Rollover property of the toolbar shows button focus animation when the cursor hovers over it. We can turn ON this property via the function call setRollover by passing a boolean true as a param. In our earlier code snippet, we change the first toolbar to enable this rollover mode.
|
1 |
tbClip.setRollover(true); |
Now, all the toolbar buttons show a highlight animation when the mouse cursor enters it. Below screen explains it:
7. Floating JToolBar
JToolBar provides a property Floatable, and this property allows moving the toolbar and docking it to any available edge of the BorderLayout. For example, one can move the toolbar from the top edge and dock it to the left edge. The Floatable property of the toolbar can be enabled via the function call setFloatable. Here in the below code, we enable the floating of the clipboard toolbar:
|
1 |
tbClip.setFloatable(false); |
The below picture shows how the user moves the toolbar, which is on the top side of the JFrame and drags it by its gripper. While the user is dragging it, Java Swing shows the outline of the toolbar and when the mouse cursor is near a valid edge, the orientation of the outline changes, showing that the toolbar can be dropped on this edge. As you see in the picture, the toolbar was dropped on the right edge of the container which is JFrame in our case.
8. Youtube Demo
9. Code Reference
9.1 MainEntry.java
|
1 2 3 4 5 6 7 8 9 |
package tube.coding.examples; public class MainEntry { public static void main(String[] args) { SwingToolbarExample frame = new SwingToolbarExample("Swing Toolbar Demo"); frame.setVisible(true); } } |
9.2 SwingToolbarExample.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
package tube.coding.examples; import java.awt.BorderLayout; import java.awt.Container; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.ImageIcon; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JOptionPane; import javax.swing.JPanel; import javax.swing.JToolBar; @SuppressWarnings("serial") public class SwingToolbarExample extends JFrame { public SwingToolbarExample(String title) { //Sample 01: Set Size and Position super(title); setBounds(100, 100, 450, 250); Container ControlHost = getContentPane(); ControlHost.setLayout(new BorderLayout()); //Sample 02: Create ImageIcons for the Toolbar ImageIcon icoCut = new ImageIcon("G:\\Temp\\Cut.png"); ImageIcon icoCopy = new ImageIcon("G:\\Temp\\Copy.png"); ImageIcon icoPaste = new ImageIcon("G:\\Temp\\Paste.png"); ImageIcon icoRed = new ImageIcon("G:\\Temp\\Red.png"); ImageIcon icoBlue = new ImageIcon("G:\\Temp\\Blue.png"); ImageIcon icoGreen = new ImageIcon("G:\\Temp\\Green.png"); //Sample 03: Prepare Buttons for Toolbar JButton tbbCut = new JButton(icoCut); JButton tbbCopy = new JButton(icoCopy); JButton tbbPaste = new JButton(icoPaste); JButton tbbRed = new JButton(icoRed); JButton tbbGreen = new JButton(icoBlue); JButton tbbBlue = new JButton(icoGreen); //Sample 04: Prepare Two Toolbars //4.1 Clipboard Toolbar JToolBar tbClip = new JToolBar(); tbClip.add(tbbCut); tbClip.add(tbbCopy); tbClip.add(tbbPaste); tbClip.setFloatable(false); tbClip.setRollover(false); //4.2 Color Toolbar JToolBar tbColor = new JToolBar(); tbColor.add(tbbRed); tbColor.add(tbbBlue); tbColor.add(tbbGreen); tbColor.setFloatable(false); tbColor.setRollover(false); //Sample 05: Add Toolbar to Frame add(tbClip, BorderLayout.NORTH); add(tbColor, BorderLayout.SOUTH); //Sample 06: Handler for Cut Button tbbCut.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog( SwingToolbarExample.this, "Cut Button Clicked!"); } }); } } |
Categories: Swing
Tags: ActionEvent, add(), ImageIcon, JToolBar, setFloatable, setRollOver
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.