Tutorial Two: The Color Picker
In this tutorial we will first use the Bean Patterns feature to build a JavaBeans component with three properties - red, green, and blue - which are used to set the background color. In Part Two, we will create a form incorporating this bean, which uses sliders to set these RGB values and display the resulting color.
Part One - Building a JavaBeans component
If you have not already done so, switch back to the GUI Editing Workspace. If you have just completed Tutorial One, you probably still have the Clock Form and Editor open - close these windows.
We will now create a new class from template and a package for that class at the same time.
Creating the class from template:
- If you don't have one open, open an Explorer window from the Explorer icon on the Main Window.
- Right-click on the
Examples
directory, and select New From Template | Classes | Class from the context menu. Call your new package colorpicker.- The Target Location dialog box will appear with
ClassName
as the default name for the class andexamples
as the default package. Type ColorPreview as the class name. For the Package name, place the cursor afterexamples
and add .colorpicker so that the package name readsexamples.colorpicker
.- Click Finish to create the class.
We will use Bean Patterns to create a JavaBeans component. The bean will have three properties - red, green and blue - and display these values as a background.
The Bean Patterns:
- Expand the ColorPreview class node under the
ColorPreview
node. (The Bean Patterns node will appear.)- Since ColorPreview extends JPanel, you need to open the property sheet of the
class ColorPreview
node by choosing Properties from its popup menu and changing theExtends
property fromjava.lang.Object
tojavax.swing.JPanel
.
- Right-click on the Bean Patterns node and select New | Property from the popup menu. The New Property Pattern dialog will appear.
- Now you will generate the property
red
. Enter red in the Name field and selectint
as the Type andRead/Write
as the Mode of the property. Also check the Bound, Generate Field, Generate Return Statement, Generate Set Statement, and Generate Property Change Support options. Finally, click OK to confirm your selections.We will now need to manually add some code to the set methods of the color properties.
Adding code:
- In the Editor window, find the
setRed
method. Immediately under the line reading:propertyChangeSupport.firePropertyChange("red", new Integer(oldRed), new Integer(red)); setBackground (new java.awt.Color(red,green,blue)); repaint();- Copy and paste this same code to each of the other methods - both
setGreen
andsetBlue
.We would like to assign an icon to the ColorPreview bean. So we will need to generate its BeanInfo and in it specify the location of the icon.
The icon is already in the
tutorial/colorpicker
package, so we will copy it from there. Expandtutorial/colorpicker
, right-click on the third node in the hierarchy (like the node above it, it is namedColorPreview
), and choose Copy from its context menu. Then right-click on theexamples/colorpicker
node and choose Paste | Copy to put a copy of the icon into the package.Generating BeanInfo
- Right-click on the
Bean Patterns
node of the ColorPreview bean and select Generate BeanInfo from the popup menu. The Generate BeanInfo Dialog will appear.- Select the
Bean Info
node on the left tab and its properties will appear on the right tab- Set the
Icon 16x16 Color
property toColorPreview.gif
. Please note that theColorPreview.gif
must be presented in thecolorpicker
folder. So you should copy thetutorial/colorpicker/ColorPreview.gif
to yourExamples/colorpicker
folder.- The
ColorPreviewBeanInfo
node will appear in the Explorer under theExamples/colorpicker
folder.
- Save and compile the ColorPreviewBeanInfo
Compiling your bean:
- Right-click on the
colorpicker
package in the Explorer, and select Compile from the context menu to compile all out-of-date classes in this package. Assuming there are no errors, you can close the Editor window.- Once you have seen the bean in action click Cancel on the Customize dialog to close it.
We will now add our new bean to the Component Palette, where it will be available for use just like any standard component.
Add the new bean to the Component Palette:
- Right-click on ColorPreview in the Explorer window, and select Tools | Add To Component Palette from the context menu.The Palette Category dialog will appear.
- Select the Beans item from the Palette Category and confirm the selection.
Flip to the Beans tab of the Component Palette on the Main Window, and you will see your new bean installed and ready for use.
This concludes Part One of the Color Picker tutorial. In Tutorial Two: Part Two, we will build a Form which uses this bean and allows background color to be set via sliders.
Beginning | Prev | Next |