Tutorial Two : The Color Picker Part Two - The Color Picker Form Startup : 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 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 FormEditor surface to add the JPanel to the form. You will see the new JPanel appear in the Component Inspector, named JPanel1. 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. Expand the new JPanel listed in the Component Inspector by clicking its "+" icon, and right click on the FlowLayout item listed below it. Select Set Layout from the context menu, and select BorderLayout. Now we will add the JavaBean created in Step 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 FormEditor 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, select BoxLayout, and place it on the new (north) JPanel. Flip to the Swing2 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 ComponentPalette. Add two more JSliders, so there are a total of three. Name each of your new sliders - set the variable name property in the ComponentInspector 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 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, and the components will be highlighted in the Component Inspector listing. Change the "maximum" property in the property listing to 255, and hit return. 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 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 respectively. 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. 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 to continue. 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. 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. 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 menu. This concludes Tutorial Two.