Subpages: 1. JMenus, Toolbars, and Actions overview
2. Basic text editor: part I - menus
3. Basic text editor: part II - Toolbars and Actions
4. Basic text editor: part III - Custom toolbar components
5. Basic text editor: part IV- Custom menu components
12.4 Basic text editor: part III - custom toolbar components
Using Actions to create toolbar buttons is easy, but not always desirable if we wish to have complete control over our toolbar components. In this section we build off of BasicTextEditor and place a JComboBox in the toolbar allowing Font selection. We also use instances of our own custom buttons, SmallButton and SmallToggleButton, in the toolbar. Both of these button classes use different borders to signify different states. SmallButton uses a raised border when the mouse passes over it, no border when the mouse is not within its bounds, and a lowered border when a mouse press occurs. SmallToggleButton uses a raised border when unselected and a lowered border when selected.

Figure 12.5 JToolBar with custom buttons and a JComboBox.
<<file figure12-5.gif>>
The Code: BasicTextEditor.java
see \Chapter12\3
import java.awt.*;
import java.awt.event.*;
import java.io.*;
import java.util.*;
import javax.swing.*;
import javax.swing.event.*;
public class BasicTextEditor extends JFrame
{
// Unchanged code from section 12.3
protected JComboBox m_cbFonts;
protected SmallToggleButton m_bBold;
protected SmallToggleButton m_bItalic;
// Unchanged code from section 12.3
protected JMenuBar createMenuBar()
{
// Unchanged code from section 12.3
m_toolBar = new JToolBar();
JButton bNew = new SmallButton(actionNew,
"New text");
m_toolBar.add(bNew);
JButton bOpen = new SmallButton(actionOpen,
"Open text file");
m_toolBar.add(bOpen);
JButton bSave = new SmallButton(actionSave,
"Save text file");
m_toolBar.add(bSave);
JMenu mFont = new JMenu("Font");
mFont.setMnemonic('o');
// Unchanged code from section 12.3
mFont.addSeparator();
m_toolBar.addSeparator();
m_cbFonts = new JComboBox(FONTS);
m_cbFonts.setMaximumSize(m_cbFonts.getPreferredSize());
m_cbFonts.setToolTipText("Available fonts");
ActionListener lst = new ActionListener() {
public void actionPerformed(ActionEvent e) {
int index = m_cbFonts.getSelectedIndex();
if (index < 0)
return;
m_fontMenus[index].setSelected(true);
updateMonitor();
}
};
m_cbFonts.addActionListener(lst);
m_toolBar.add(m_cbFonts);
m_bold = new JCheckBoxMenuItem("Bold");
m_bold.setMnemonic('b');
Font fn = m_fonts[1].deriveFont(Font.BOLD);
m_bold.setFont(fn);
m_bold.setSelected(false);
m_bold.addActionListener(fontListener);
mFont.add(m_bold);
m_italic = new JCheckBoxMenuItem("Italic");
m_italic.setMnemonic('i');
fn = m_fonts[1].deriveFont(Font.ITALIC);
m_italic.setFont(fn);
m_italic.setSelected(false);
m_italic.addActionListener(fontListener);
mFont.add(m_italic);
menuBar.add(mFont);
m_toolBar.addSeparator();
ImageIcon img1 = new ImageIcon("font_bold1.gif");
ImageIcon img2 = new ImageIcon("font_bold2.gif");
m_bBold = new SmallToggleButton(false, img1, img2,
"Bold font");
lst = new ActionListener() {
public void actionPerformed(ActionEvent e) {
m_bold.setSelected(m_bBold.isSelected());
updateMonitor();
}
};
m_bBold.addActionListener(lst);
m_toolBar.add(m_bBold);
img1 = new ImageIcon("font_italic1.gif");
img2 = new ImageIcon("font_italic2.gif");
m_bItalic = new SmallToggleButton(false, img1, img2,
"Italic font");
lst = new ActionListener() {
public void actionPerformed(ActionEvent e) {
m_italic.setSelected(m_bItalic.isSelected());
updateMonitor();
}
};
m_bItalic.addActionListener(lst);
m_toolBar.add(m_bItalic);
getContentPane().add(m_toolBar, BorderLayout.NORTH);
return menuBar;
}
protected void updateMonitor() {
int index = -1;
for (int k=0; k<m_fontMenus.length; k++) {
if (m_fontMenus[k].isSelected()) {
index = k;
break;
}
}
if (index == -1)
return;
boolean isBold = m_bold.isSelected();
boolean isItalic = m_italic.isSelected();
m_cbFonts.setSelectedIndex(index);
if (index==2) { //Courier
m_bold.setSelected(false);
m_bold.setEnabled(false);
m_italic.setSelected(false);
m_italic.setEnabled(false);
m_bBold.setSelected(false);
m_bBold.setEnabled(false);
m_bItalic.setSelected(false);
m_bItalic.setEnabled(false);
}
else {
m_bold.setEnabled(true);
m_italic.setEnabled(true);
m_bBold.setEnabled(true);
m_bItalic.setEnabled(true);
}
if (m_bBold.isSelected() != isBold)
m_bBold.setSelected(isBold);
if (m_bItalic.isSelected() != isItalic)
m_bItalic.setSelected(isItalic);
int style = Font.PLAIN;
if (isBold)
style |= Font.BOLD;
if (isItalic)
style |= Font.ITALIC;
Font fn = m_fonts[index].deriveFont(style);
m_monitor.setFont(fn);
m_monitor.repaint();
}
public static void main(String argv[]) {
new BasicTextEditor();
}
}
class SmallButton extends JButton implements MouseListener
{
protected Border m_raised;
protected Border m_lowered;
protected Border m_inactive;
public SmallButton(Action act, String tip) {
super((Icon)act.getValue(Action.SMALL_ICON));
m_raised = new BevelBorder(BevelBorder.RAISED);
m_lowered = new BevelBorder(BevelBorder.LOWERED);
m_inactive = new EmptyBorder(2, 2, 2, 2);
setBorder(m_inactive);
setMargin(new Insets(1,1,1,1));
setToolTipText(tip);
addActionListener(act);
addMouseListener(this);
setRequestFocusEnabled(false);
}
public float getAlignmentY() { return 0.5f; }
public void mousePressed(MouseEvent e) {
setBorder(m_lowered);
}
public void mouseReleased(MouseEvent e) {
setBorder(m_inactive);
}
public void mouseClicked(MouseEvent e) {}
public void mouseEntered(MouseEvent e) {
setBorder(m_raised);
}
public void mouseExited(MouseEvent e) {
setBorder(m_inactive);
}
}
class SmallToggleButton extends JToggleButton
implements ItemListener
{
protected Border m_raised;
protected Border m_lowered;
public SmallToggleButton(boolean selected,
ImageIcon imgUnselected, ImageIcon imgSelected, String tip) {
super(imgUnselected, selected);
setHorizontalAlignment(CENTER);
setBorderPainted(true);
m_raised = new BevelBorder(BevelBorder.RAISED);
m_lowered = new BevelBorder(BevelBorder.LOWERED);
setBorder(selected ? m_lowered : m_raised);
setMargin(new Insets(1,1,1,1));
setToolTipText(tip);
setRequestFocusEnabled(false);
setSelectedIcon(imgSelected);
addItemListener(this);
}
public float getAlignmentY() { return 0.5f; }
public void itemStateChanged(ItemEvent e) {
setBorder(isSelected() ? m_lowered : m_raised);
}
}
Understanding the Code
Class BasicTextEditor
BasicTextEditor now declares three new instance variables:
JComboBox m_cbFonts: combo box containing available font names.
SmallToggleButton m_bBold: custom toggle button representing the bold font style.
SmallToggleButton m_bItalic: custom toggle button representing the italic font style.
The createMenuBar() method now creates three instances of the SmallButton class (see below) corresponding to our pre-existing "New," "Open," and "Save" toolbar buttons. These are constructed by passing the appropriate Action (which we built in part II) as well as a tooltip String to the SmallButton constructor. Then we create a combo box with all available font names and add it to the toolbar. The setMaximumSize() method is called on the combo box to reduce its size to a necessary maximum (otherwise it will fill all unoccupied space in our toolbar). An ActionListener is then added to monitor combo box selection. This listener selects the corresponding font menu item because the combo box and font radio button menu items must always be in synch. It then calls our updateMonitor() method.
Two SmallToggleButtons are created and added to our toolbar to manage the bold and italic font properties. Each button receives an ActionListener which selects/deselects the corresponding menu item (because both the menu items and toolbar buttons must remain in synch) and calls our updateMonitor() method.
Our updateMonitor() method receives some additional code to provide consistency between our menu items and toolbar controls. This method relies on the state of the menu items, which is why the toolbar components first set the corresponding menu items when selected. The code added here is self-explanatory and just involves enabling/disabling and selecting/deselecting components to preserve consistency.
Class SmallButton
SmallButton represents a small push button to be used in a toolbar. It implements the MouseListener interface to process mouse input. Three instance variables are declared:
Border m_raised: border to be used when the mouse cursor is located over the button.
Border m_lowered: border to be used when the button is pressed.
Border m_inactive: border to be used when the mouse cursor is located outside the button.
The SmallButton constructor takes an Action parameter, which is added as an ActionListener and performs an appropriate action when the button is pressed, and a String representing the tooltip text. Several familiar properties are assigned and the icon encapsulated within the Action is used for this buttons icon. SmallButton also adds itself as a MouseListener and sets its tooltip text to the given String passed to the constructor. Note that the requestFocusEnabled property is set to false so that when this button is clicked focus will not be transferred out of our JTextArea editor component.
The getAlignmentY() method is overriden to return a constant value of 0.5f, indicating that this button should always be placed in the middle of the toolbar in the vertical direction. The remainder of SmallButton represents an implementation of the MouseListener interface which sets the border based on mouse events. The border is set to m_inactive when the is mouse located outside its bounds, m_active when the mouse is located inside its bounds, and m_lowered when the button is pressed.
Class SmallToggleButton
SmallToggleButton extends JToggleButton and implements the ItemListener interface to process changes in the button's selection state. Two instance variables are declared:
Border m_raised: border to be used when the button is unselected (unchecked).
Border m_lowered: border to be used when the button is selected (checked).
The SmallToggleButton constructor takes four arguments:
boolean selected: initial selection state.
ImageIcon imgUnselected: icon for use when unselected.
ImageIcon imgSelected: icon for use when selected.
String tip: tooltip message.
In the constructor, several familiar button properties are set, and a raised or lowered border is assigned depending on the initial selection state. Each instance is added to itself as an ItemListener to receive notification about changes in its selection. Thus the itemStateChanged() method is implemented which simply sets the button's border accordingly corresponding to the new selected state.
Running the Code
Verify that the toolbar components (combobox and toggle buttons) change the editor's font as expected. Check which menu and toolbar components work consistently (menu item selections result in changes in the toolbar controls, and vice versa).
UI Guideline : Tooltip Help Tooltip Help on mouse-over is a "must have" technical addition for small toolbar buttons. The relatively recent innovation of tooltips has greatly improved the usability of toolbars. Don't get caught delivering a toolbar without one, but make sure that your tooltip text is meaningful to the user!



RSS feed Java FAQ News