Skip to main content

Binding UI Elements

Posted by pkeegan on October 25, 2007 at 3:40 AM PDT

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 and 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.