Component Border

There are many times when you want a JTextField and a JButton to work together. That is you provide the user with a text field for entering data and you provide a button to display a popup component to make it easier to enter the data. An example might be a date field. Some users might choose to type the date directly into the text field, while others might choose the point and click approach. There are a couple of common appoaches for achieving this and one not so common approach that I will suggest.

The most common approach would probably be to simply create a panel and add the two components to the panel. The main draw back might be that the two components look like, well, two separate components. However, its easy to implement as the code below suggests:

JPanel panel = new JPanel();
panel.add( textField );
panel.add( button );

When you want the two components to look like a single component you can get a little fancier by having the panel use the Border and background Color of the text field. It only takes a few more lines of code:

JPanel panel = new JPanel();
//panel.setLayout( new FlowLayout(FlowLayout.CENTER, 0, 0) );
panel.add(textField);
panel.add(button);
panel.setBackground( textField.getBackground() );
panel.setBorder( textField.getBorder() );
textField.setBorder(null);

In both of the above solutions the two components are only related because they are contained in the same parent panel. When you write code for the ActionListener of the button to update the text field you must first find the text field on the panel. The obvious assumption would be that the text field is component 0, but this may not always be true.

The approach I will suggest here is to actually add the button to the text field so the button is contained within the text field and not a panel. How is this possible? Well, remember that all Swing components extend from Container. All you need to do is set the bounds of the button, before adding it to the text field. Only one problem, the button will paint over top of the text in the text field. So we somehow need to increase the size of the text field and reserve that space for the button to be painted. One way to do this is to add a Border to the text field.

The ComponentBorder is such a class. It provides two main features to allow the addition of a button to a text field:

• first, it calculates the size of the border insets needed to contain the button within the Border.
• secondly, it will set the location of the button within the Border insets area each time the Border is painted.

The ComponentBorder is easy to use as you will generally use the default settings:

ComponentBorder cb = new ComponentBorder( button );
cb.install( textField );
panel.add( textField );

Although there are a few properties to customize the behaviour:

• edge – controls which edge of the text field the button will be painted on. The Edge enumerated values are TOP, LEFT, BOTTOM, RIGHT (default)
• alignment – controls the alignment of the button within the specified edge of the text field. This value must be between 0.0 and 1.0 with the common values of LEADING, CENTER (default) and TRAILING.
• gap – specifies extra space to be added to the border insets in addiditon to the size of the button
• adjust insets – there may be times when the size of the button is greater than the size of the text field. In this case the size difference is added to the insets of the ComponentBorder so that the button can be fully painted with the bounds of the text field.

You can experiment with the Webstart demo to see how changing these properties affects the ComponentBorder.

Still not sure why you might use the ComponentBorder over the other two approaches? Well, here are a couple more points to consider:

• the ActionListener code for the button is easier to write. There is no need to search a panel for the related text field because the text field will always be the parent of the button. So once you get the source object from the ActionEvent you can just invoke the getParent() method.
• the text field can be used as an editor in a JTable. All you do is create a DefaultCellEditor using the text field as the parameter. You would also want to make sure the adjust insets is set to false, otherwise you may see truncated text.

A couple of considerations to be aware of when using the ComponentBorder class.

• unlike most Border implementations, this class cannot be shared between multiple components. The button is added to the text field and Swing components can only have a single parent.
• all the properties must be set before invoking the install() method. I know this is not a proper design and I may fix it in the future, but for now I just thought I’d throw the concept out there for you to play with.

Although, I have only tested this class using a text field and button, there should be no reason you can’t use this class on other components as well. Give it a try and see what happens. I’m sure you will let me know if it doesn’t work ;)

Get The Code

ComponentBorder.java
ComponentBorderDemo.java

Related Reading

Java Tutorials: How to Use Borders