Exercise 3: Adding Components

In this exercise, you will learn how to select a component in the GUI builder palette and place it in the desired location in your application. Specifically, you will add a label and labeled bar in the first two rows of the grid. You will also edit their attributes.

When you add components to the grid, you are laying them out in relation to one another. You will see the actual spacing of how the components will look in your application when you preview the application in Exercise 5.

Adding a Text Label

  1. Click the Text Label component in the GUI builder's AWT tab.
    As you move your pointer over a component in the palette, the name of the component appears in the lower-left corner of the browser's footer.
  2. In the layout window, click the first cell in the first column.
    A label appears in the cell. Eight small squares, or handles, appear on the sides and corners of the label. These handles indicate the label is selected.

    If you place a component in the wrong cell, delete it as follows: Select the component; then choose GUI -> Cut Component.

  3. Click a handle on the right side of the component and drag it across the three cells to the right.
    The component now spans all four cells in the first row.
  4. Make the label the length of the grid by dragging the cell width control on the bottom of the layout window.
    The cell width control is a black line between two small boxes. When you click on the control, arrowheads appear on the ends of the black line and the component's size is automatically increased to fill the containing cell.
  5. Click to open the attribute editor.
  6. In the name box, type display.
  7. In the text box, type 0. and click Apply.
    The text 0. now appears in center of the label.
  8. Select right in the alignment list, and type white in the background box.
  9. Click OK.
    In the layout window, the label background changes to white and the text is right-aligned.

Adding a Labeled Bar

  1. Click the Labeled Bar component on the GUI builder's Additional tab.
  2. Click the first cell in the second row.
    A bar appears in the cell.
  3. Click a handle on the right side of the component and drag it across the three cells to the right.
  4. Choose GUI -> Save Generate.
    Your GUI layout should look like this:

Next lesson:

Exercise 4: Adding Multiple Components