Tutorial Step 3 Step 5

Creating a UI with nested layouts

Step 4: Adding toolbar buttons and labels

Now, let's add the buttons to the toolbar panels and label them.
  1. Using the JButton component on the Swing tab of the component palette, put four buttons into panel 9, which will form the File toolbar. (See the picture below.)

    Note: If your panels are too narrow to contain the buttons, make them wider. Click this in the component tree, and make it wider first, then jPanel1 next, working inward to enlarge the rest of the panels.

  2. Select each button in turn, and change its text property in the Inspector as follows:

    You may not be able to see the text on the buttons yet because the margins need to be adjusted. You'll do that to all the buttons at one time after you finish adding them.

  3. Now, add four buttons to panel 10 and change their text to the following:

  4. Put one button (jButton9) into panel 11 and change its text to Help.

  5. Select all the buttons in either the designer or the component tree. You can use either the Shift key or the Ctrl key to select multiple items.

  6. Change the font property value to "SansSerif", regular, 12.

  7. Change the margins property to 2,2,2,2.

  8. If you can't see all the text on each button, enlarge the size of the frame, panels, and buttons until you can. The buttons will probably be irregular sizes and shapes. Don't worry about getting it perfect at this point. The layout managers will fix this later.

    The important thing now is that the buttons are fully nested inside their panels. To be sure they are all embedded properly, check the component tree to see if each button is indented under the correct panel in the tree outline. If any buttons did not get nested inside their panels, you'll see them in the component tree at the same level of indentation as the panels. Move or resize those panels and buttons slightly with the mouse until the buttons nest properly inside the panels and you can see all their text.

  9. Save your work again.

Your design should now look something like this:

Run your application now. If the buttons don't look the same at runtime as they did in the designer, it is probably because the look and feel set in JBuilder is different from that on your system. Changing the look and feel in the IDE Options dialog box does not have an effect at runtime.

To force the look and feel you want at runtime, open Application1.java and change the following line from

UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());

to one of the following:

UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");

UIManager.setLookAndFeel("com.sun.java.swing.plaf.motif.MotifLookAndFeel");

UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");

We used Metal for both JBuilder and runtime.

Tutorial Step 3 Step 5