Tutorial Two: Part Two
The Color Picker Form
Startup:
- Right-click on the
colorpicker
package in the Explorer, and select New From Template | Swing Forms | JFrame.- Give your new JFrame the name ColorPicker, and click Finish. The JFrame template will open in the Editor window, and the Form Editor and Component Inspector windows will open.
Adding Components:
- We will now add some components to the JFrame. On the Component Palette, flip to the Swing Tab, and select JPanel. Click on the Center panel of the Form Editor surface to add the JPanel to the form. You will see the new JPanel (named
JPanel1
) appear in the Component Inspector.- Rename this JPanel colorPreviewPanel, either by changing the
variable name
in the properties listed, or by in-place renaming of the item in the component listing at the top of the Component Inspector- We will not use the default layout for this JPanel. Right-click on the
colorPreviewPanel
node and choose Set Layout | BorderLayout from the context menu.- Now we will add the JavaBeans component created in Part One. Flip to the Beans tab of the Component Palette, select the ColorPreview bean, and click once on the center panel of the
colorPreviewPanel
JPanel to position the bean there.- Next we will add the three sliders which will be used to set the color.
Add a new JPanel to the North panel of the Form Editor surface: flip to the Swing tab of the Component Palette, select JPanel, and click on the north panel of the form surface.
- Flip to the Layouts tab of the Component Palette, select the BoxLayout icon, and place it on the new (north) JPanel.
- Flip to the Swing (Other) tab of the Component Palette, and select JSlider. Place a JSlider on the new JPanel.
- We will need a slider for each color property (red, green and blue). Select JSlider again: this time hold down the SHIFT key as you click on the form surface (on the same north JPanel where the first JSlider is). This will allow you to add multiple components without needing to reselect them from the Component Palette. Add two more JSliders, so that you have a total of three.
- Name each of your new sliders - set the
variable name
property in the Component Inspector to redSlider, greenSlider, and blueSlider, for the first, second, and third sliders in the component listing, respectively.- Now we must set the maximum allowed value of each slider. Select the red slider on the form surface by clicking on it, and then by holding down CTRL, select both of the other sliders. You should see the anchor marks indicating the component is selected appear around each slider on the form. In addition, the components will be highlighted in the Component Inspector listing. Change the
Maximum
property in the property listing to 255, and press ENTER. This changes that property for all three sliders.Adding Borders:
- Next we will add a border to each of the sliders. Flip to the Borders tab of the Component Palette, 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 Component Inspector, select the red slider 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 press ENTER to set this new property, and click OK.- Repeat this procedure for both of the other sliders and title them Green and Blue, respectively.
- We will also add a border to the
colorPreviewPanel
panel. Select Titled Border from the Borders tab of the Component Palette, and place it anywhere on thecolorPreviewPanel
JPanel, except for the center panel, where the ColorPreview bean is located.- Select
ColorPreviewPanel
in the component listing, and open its Border Property dialog by clicking itsborder
property and then "...". Set its title to Color Preview, press ENTER, and click OK.
Finally, we will use the Connection Wizard to connect the sliders to the bean.
The Connection Wizard:
- Click the Connection Mode icon, which appears on the Main Window immediately to the left of the Component Palette. The icon will appear "clicked", 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.- Expand the "change" node, and select
stateChanged
. Click Next to continue.- With the Set Property radio button checked, select the
red
property, and click Next.- 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 previous three steps for each of the other JSliders, selecting the green and blue properties respectively in step 2.
Repositioning the sliders
- Lastly, we will reposition the Sliders. In the Component Inspector, select the BoxLayout of the JPanel1 component. Double-click on the
Axis
property to toggle to theY Axis
value. This is a more convenient display of the JSliders in this example.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 pressing CTRL+F9.
Forte For Java will switch 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 menu.
Beginning | Prev | Next |