The ZooKeeperPanel class
If you look at again at Figure 16.1 at the beginning of this section you will see that the two classes you have developed so far, ZooKeeperList and ZooKeeperEditor, are set as the left and right components inside a JSplitPane, underneath which is a panel containing two centred buttons. You will now use NetBeans to create a new class called ZooKeeperPanel to model this.
You have seen how when using the form builder, you can drag and drop components from the Palette window onto the form. You can even add your own components to the palette, and you will do this now by adding the ZooKeeperEditor panel you just created. Go into Design mode in ZooKeeperEditor so that the Palette window appears, and then right-click somewhere inside the Palette window and select Palette Manager... which should result in this dialog:
Click the New Category... button and enter Zoo Components in the New Category Name field. After you click OK, click Close on the Palette Manager dialog. You should see the new category appear at the top of the Palette window.
Now right-click the ZooKeeperEditor.java node in the Projects window and select Tools | Add to Palette..., select Zoo Components from the list and click OK. If you now expand the Palette window's Zoo Components category (by clicking the small "plus" icon) you will see your component available:
You should now also add the ZooKeeperList class you created earlier to the palette.
You are now ready to create the new panel, so right-click on the virtual.ui package node and select New JPanel Form..., enter ZooKeeperPanel as the Class Name, and click Finish.
Enlarge the size of the blank design area to make it easier to see the components which will be added. Right-click the form and select Set Layout | Border Layout. Now drag from the palette a Panel (from the Swing Containers category) and place it at the bottom of the form. As you are dragging, just above the form you will see some text which tells you where it will be placed, so you want it to say "Place the component into the Last area"[1].
Now right-click the panel you just placed at the bottom and select Set Layout | Flow Layout. Drag two Button objects from the palette onto the bottom panel, setting the first one's text to Add and variable name to addButton, and the second one's text to Remove and variable name to removeButton. To make the button panel stand out a bit more, click on it and inspect the Properties window:
Locate the border property, which is currently set to (No Border) and click the three-dotted icon to its right to open the customiser dialog. Select Soft Bevel Border and click OK.
From the Swing Containers section drag a Split Pane onto the centre area of the form. The form should now look as follows:
The sections named left button and right button are just temporary placeholders. Under Swing Containers drag a Scroll Pane over the top of left button (which will replace it) and then under Zoo Components drag a ZooKeeperList component on top of the scroll pane (which will nest inside it). Change its variable name to zooKeeperList.
From Zoo Components drag ZooKeeperEditor over the top of right button to replace that too. Change its variable name to zooKeeperEditor.
The form should now look like this:
Looking first at the list on the left, you will notice some dummy items listed (Item1 through Item5). You can delete these by clicking on the list to select it, and then ensuring the Properties button is selected in the Properties window:
You can click in the area to the right of model and blank it out, remembering to press Enter on your keyboard. (Alternatively, you can click the button with three small dots to bring up a text editor).
Comments