Exercise 2: Starting the Layout

When you start a new layout, a 4-by-3 grid appears in the layout window. This grid represents your application. You add components to the application by clicking on a component in the palette and then clicking in the desired cell. Before adding a component, however, you must set up the grid to meet the needs of your application. In this exercise you will learn how to add cells to the grid and set its basic characteristics, such as color, border relief, and border width.

Adding Cells to the Grid
  1. Click the cell in upper-left corner of the layout window.
    A grid is displayed across the first row and first column.

  2. On the keyboard, press the Down arrow key four times.
    The Java WorkShop adds four rows of cells to the grid. You now have a 4-by-7 grid in which you can place GUI components.

  3. Enlarge the layout window by placing the pointer on the window border or corner and dragging the corner.
    Make the window large enough so you can see the entire grid.

Setting Attributes

  1. Select the word PANEL in the large white pane in Visual Java.
    A panel, which you are creating in this tutorial, is a GUI that is contained within a browser or another GUI object. When you select the word PANEL, you indicate to Visual Java you want to edit the attributes that relate to the entire grid, not an individual component. The background of the layout window turns dark to indicate you are editing the panel.

  2. Click the Attribute Editor control on the Visual Java tool bar.
    The Attribute Editor opens for the panel. In this editor, you can change the attributes of the panel, including the background color, border relief, and border width.

  3. In the Attribute Editor, type lightsteelblue in the background field.
    To choose your own background color, click the ellipsis button on the right of the background field. A color chooser opens. Move the color sliders to select a color, and click Ok. Clicking the ellipsis button in the color chooser opens a dialog box with a list of valid colors.

  4. Set the borderRelief field to raised by choosing raised from the list box.

  5. Type 3 in the borderWidth field.

  6. Click OK.
    The grid color changes to light steel blue. The grid border is raised and becomes three pixels wide. The Attributes Editor closes.

  7. Click the Save GUI File control on the Visual Java tool bar.
    The Java WorkShop creates the file Calculator.gui. The path name of the saved file appears in the Visual Java footer.

Next lesson:

Exercise 3: Adding Components