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:
- Create a new Java Application project in NetBeans by following these steps:
- Choose File > New Project.
- Select the Java category and choose Java Application. Click Next.
- Name the project ColorPicker.
- Clear the Create Main Class checkbox.
- Click Finish
- Create a new JFrame by right-clicking the ColorPicker project node and choose New > JFrame Form. Call the form
examples.colorpickeras 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.
- Once the blank form opens in the editor area, drag three JSlider components to the form from the Palette window.
- To make it easier to keep track of which slider belongs to which color, rename the variables for the sliders to
You can rename a component's variable by right-clicking the component in the Design area and choosing Change Variable Name.
- In the Properties window, change the
maximumproperty for each the sliders to
255so 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.
- Using the Properties window, use the Other Properties |
propertyto designate a titled border for each slider and give each slider a
titlecorresponding to the color it represents.
- Download the
ColorPreviewBeanInfo.javaclasses to the folder on your system that contains the
ColorPreview is a visual bean based on a JPanel that has custom
- Right-click the
examples.colorpickernode and choose Compile Package.
Doing this makes the ColorPreview bean a component that you can drag on to your form.
- Drag the ColorPreview class from the Projects window to the Design area and drop it below the sliders. Resize it to taste.
- Bind the bean's
blueproperty to the value property of the blue slider. To do this:
- Select the ColorPreview panel in the Design area.
- In the Properties window, select the Binding tab.
- Click the ellipsis (...) button that is next to the
blueproperty to open the Bind dialog box.
- In the Binding Source combo box, select
- In the Binding Expression combo box, select
value intas shown below.
- Click OK to establish the binding.
- Repeat step 10 to bind the
redproperties 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.