Tutorial Two : The Color Picker
Part Two - The Color Picker Form
- Right click on the ColorPicker package in the Explorer, and select New From Template |
Swing Forms | JFrame.
- Name your new JFrame ColorPicker, and click OK. The JFrame template will
open in the Editor window, and the Form Editor and Component Inspector windows
Adding Components :
Adding Borders :
- Next we will add a border to each of the sliders. Flip to the Borders
tab of the ComponentPalette, and select TitledBorder. Again, hold down
the Shift key to add multiple borders, and add one to each JSlider. Click
directly on each JSlider on the form surface, you should see the borders
appear around each.
- Now we will set the text of the slider borders.
- In the ComponentInspector, select the redSlider, and click on its
border property, and then the "..." icon to open the Border Properties dialog.
Change the Title property of this border to Red. Remember to hit return to set this
new property, and click OK.
- Repeat this procedure for both of the other sliders, title them Green and Blue
- We will also add a border to the colorPreviewPanel panel. Select Titled Border
from the Borders tab of the ComponentInspector, and place it on the
colorPreviewPanel JPanel - place it anywhere on the JPanel but the center panel,
where the ColorPreview bean is located.
- Select the ColorPreviewPanel in the component listing, and open its border
property dialog by clicking its border property, and then "...". Set its title to Color
Preview, hit return, and click OK.
The Connection Wizard :
Finally, we will use the Connection Wizard to connect the sliders to the bean.
Lastly, we will reposition the Sliders.
In the ComponentInspector, select the BoxLayout of the JPanel1 component.
Double click on the Axis property, to toggle to the Y Axis value. This is a more
convenient display of the JSliders in this example.
- Click the Connection Mode icon, which appers on the Main Window immediately to the
left of the Component Palette. The icon will appear "pushed", indicating Connection
Mode is active.
- Click first on the Red JSlider on the Form Editor Surface, and then the center panel of the Color
Preview panel, where the colorPreview1 bean is located. The Connection Wizard
dialog will open.
- Step 1 : Expand the "change" node, and select stateChanged. Click Next
- Step 2 : With the Set Property radio button checked, select
the red property, and click Next.
- Step 3 : In the final Connection Wizard dialog, click the Property radio button, and
select "..." to browse. Select "value" from the list, and click OK. Lastly click
Finish to dismiss the Connection Wizard.
- Repeat the above procedure for each of the other JSliders, selecting the green
and blue properties respectively in Step 2.
That's it ! Save your form via the File | Save menu item, or using the Save icon on the
Main Window, and compile from the Build | Compile menu item. Execute it via the Build | Execute
menu item, or by hitting CTRL-F9.
Netbeans will flip to the Running Workspace, and display the running Color Picker form. Adjust the
sliders and check the displayed color changes accordingly.
To close the Color Picker, use the Execution View, which is also displayed on the Running Workspace.
Right click on the ColorPicker item listed in the Execution View, and select Terminate process from the context
This concludes Tutorial Two.