Patrick Keegan's Blog

October 2007 Archives

Binding JComboBox and Getting a Reasonable Display Value

Just a few days after I published my first major foray into explaining Beans Binding in NetBeans, I received some feedback asking how to populate a JComboBox with reasonable display values from a data source. I had been wondering the same thing. With the help of Honza Stola (explanation plus code snippet) and the trusty Beans Binding Javadoc (available from NetBeans by choosing Help > Javadoc References > Beans Binding), here's my stab at it.

First some background. The Beans Binding library supplies special classes for binding JTables, JLists, and JComboBox components with data from another source (such as a database).

For JTable objects, you use the JTableBinding class to bind the table to a List object. The objects contained in the List object correspond with rows in the JTable. You can then use JTableBinding.ColumnBinding to map specific columns from the data source to the JTable columns. (The IDE helps you generate all of this code, whether you are using the Bind dialog box or you are using the New Java Desktop Application template in the New Project Wizard.)

For JList objects, you use the JListBinding class to bind a List of object to the JList component. Since each item in the JList corresponds with an object rather than a simple display value, you might need to use JListBinding.DetailBinding to map a property from the objects in the List to the display value of the JList. In the IDE, you have JListBinding.DetailBinding code generated by opening the Bind dialog box and filling in the Display Expression field with an EL expression to refer to a property of the bound List object. In the image below, the Expression Source is a List object that contains objects that represent all of the rows in the Customer database table. The Display Expression field is filled with an EL expression that causes the displayed values to be derived from the name property of the Customer entity class (which represents the NAME column in the CUSTOMER database table).

There is also a JComboBoxBinding class in the Beans Binding library, which enables you to bind a List object to a combo box. Unfortunately, as of Beans Binding 1.1.1, there is not yet a DetailBinding class that enables you to specify how to derive the values that are displayed in the JComboBox. If you were to bind a combo box to a database table and then run the application, you would get a combo box that looks something like the following image.

Probably not what you want! To fix this, you could override the toString() method of the bean you are binding. The disadvantage there is that the toString() method might need to be used by other things than just your JComboBox. A better way to handle this is to customize how the cell is rendered. Here's some boilerplate code for that approach:

jComboBox1.setRenderer(new DefaultListCellRenderer() {
           @Override
           public Component getListCellRendererComponent(
                   JList list, Object value, int index, boolean isSelected, boolean cellHasFocus) {
               super.getListCellRendererComponent(list, value, index, isSelected, cellHasFocus);
               if (value instanceof MyEntityClass) {
                   MyEntityClass mec = (MyEntityClass)value;
                   setText(mec.getPropertyFromMyEntityClass());
               }
               return this;
           }
       })

You can add that code in the IDE's GUI Builder by right-clicking the combo box, choosing Customize Code, and typing the code just below where the combo box is instantiated. The image below shows the Customize Code dialog with the code I have added and customized to work my Customer entity class.

When you run the application again, you should then get something that looks much more reasonable.

Binding UI Elements

Recently I've been working on help for NetBeans support for the new beans binding spec (JSR-295). Much of the excitement around beans binding is that it greatly simplifies data binding in Java desktop apps. No more writing of adapter classes by hand to enable the display of values from a database in JTable.

But there is also the question of how beans binding simplifies general UI programming. Much of Java GUI programming involves specifying event listeners for UI components and then writing code to specify what happens in response to the UI event. This makes sense for cases when some complex processing needs to occur. But at other times, the only thing that really needs to happen is the passing of values from one component to another. In such cases, specifying the event listeners and event handlers comprises more lines of code than actual does the application logic. Yes, the IDE's Connection Wizard is very helpful in such situations, but there is still a lot of code that needs to be created.

Take the ColorPicker example (shown below) that some of you NetBeans stalwarts may remember as a sample app from early NetBeans releases.

In that program, we had three sliders that represented the red, green, and blue color spectra. We also had a custom bean that showed a resulting color depending on the red, green, and blue values that were passed to it from the sliders.

In the past, to use this bean you had to generate event listeners and create handling code to keep the color preview panel in sync with the adjustments made to the sliders. Now it is much simpler. At design time, you just need to declare bindings between the slider value properties and the corresponding properties in the ColorPreview bean. You can establish these bindings at design time through the GUI Builder.

To see how this works, do the following:

1. Create a new Java Application project in NetBeans by following these steps:
   1. Choose File > New Project.
   2. Select the Java category and choose Java Application. Click Next.
   3. Name the project ColorPicker.
   4. Clear the Create Main Class checkbox.
   5. Click Finish
2. Create a new JFrame by right-clicking the ColorPicker project node and choose New > JFrame Form. Call the form ColorPickerFrame, specify examples.colorpicker as the package, and Click Finish.

   If the JFrame template does not appear in the contextual menu, select Other. Then select the Swing GUI Forms category and select the JFrame Form node.

3. Once the blank form opens in the editor area, drag three JSlider components to the form from the Palette window.
4. To make it easier to keep track of which slider belongs to which color, rename the variables for the sliders to redSlider, greenSlider, and blueSlider.

   You can rename a component's variable by right-clicking the component in the Design area and choosing Change Variable Name.

5. In the Properties window, change the maximum property for each the sliders to 255 so that the value range of each slider corresponds the value range for RGB colors. You can change this value simultaneously for all of the sliders by selecting all three sliders in the Inspector window before changing the value in the Properties window.
6. Using the Properties window, use the Other Properties | property to designate a titled border for each slider and give each slider a title corresponding to the color it represents.
7. Download the ColorPreview.java and ColorPreviewBeanInfo.java classes to the folder on your system that contains the ColorPickerFrame class.

   ColorPreview is a visual bean based on a JPanel that has custom red, green, and blue properties.

8. Right-click the examples.colorpicker node and choose Compile Package.

   Doing this makes the ColorPreview bean a component that you can drag on to your form.

9. Drag the ColorPreview class from the Projects window to the Design area and drop it below the sliders. Resize it to taste.
10. Bind the bean's blue property to the value property of the blue slider. To do this:
    1. Select the ColorPreview panel in the Design area.
    2. In the Properties window, select the Binding tab.
    3. Click the ellipsis (...) button that is next to the blue property to open the Bind dialog box.
    4. In the Binding Source combo box, select blueSlider.
    5. In the Binding Expression combo box, select value int as shown below.
    6. Click OK to establish the binding.

       

11. Repeat step 10 to bind the green and red properties to their corresponding sliders.

When you run the application, you should see something that works very much like the application in the first image in this blog entry, and all created without having to specify any event listening or handling.

Beans Binding in NetBeans 6.0 Beta 2

I have just finished a short guide to beans binding in NetBeans that is being published to coincide with the fresh Beta 2 release of NetBeans IDE 6.0. In this guide I tackle the basics and introduce the advanced features. This document will evolve with more details as I find time to fill them in. Please send me feedback on what you would like to see added and/or clarified.

In related news, Beta 2 also contains an update to the beans binding library (version 1.1) that greatly improves performance. Shannon Hickey writes about this in greater detail in his blog. Since code freeze for Beta 2, version 1.1.1 of Beans Binding has been released. This micro version contains one additional bug fix over the 1.1 version that is in NetBeans beta 2. This difference won't affect the code that you write based on the library. And naturally subsequent builds of NetBeans 6 will have the latest version.

This work is licensed under a Creative Commons License.