< Previous | Next >

Lesson 1.2: Add and lay out the employees table

In this lesson, you will use the Java visual editor to add a JScrollPane and a JTable to the application. In later exercises, you will program the JTable to get its data from a Web service that returns a list of all the employees in the company directory.

After you add the JTable, you will use the design view of the Java visual editor to customize the layout of the JTable to match the following specifications:

  • Span the JTable across three cells horizontally and two cells vertically
  • Add a left inset of 15 pixels
  • Rename the JTable to employeesTable.

Open the DirectoryApp.java file in the Java visual editor

To open the DirectoryApp.java file in the Java visual editor:
  1. In the Package Explorer view of the Java perspective, expand the MyDirectory project and the directory.client package.
  2. Right-click the DirectoryApp.java file, and select Open With > Visual Editor. The Java visual editor loads the Java class and displays the design on the graphical canvas area.
Tip:
  • To change the look and feel used by the Java visual editor, go to Window > Preferences > Java > Visual Editor and specify a Swing look and feel. The preference will take effect the next time you open the class. This tutorial uses the Windows look and feel.
  • To make the Visual Editor the default editor for all Java files, you can click Window > Preferences and go to the Workbench > File Associations page to define your preference.

Add a JTable on a JScrollPane

The main window of DirectoryApp.java uses a JFrame with a JPanel for its main content pane. The JPanel in our application is named jContentPane. The jContentPane was set to use a type of layout manager called GridBagLayout. The GridBagLayout is a powerful layout scheme based on a grid of cells that can be occupied by visual components. The Java visual editor makes it easy to work with GridBagLayout by showing the grid borders. It also shows placement markers when you drop new components onto the grid, and it shows handles on components that you are resizing or moving on the GridBagLayout.

To add the employees table (a javax.swing.JTable) to the DirectoryApp.java user interface:
  1. Right-click the jContentPane in the design view or Java Beans view, and select Show Grid. A red dotted line shows the grid border, and blue circles with numbers indicate the row and column numbers. For example, notice that the New button occupies the cell at row 1 (grid y) and column 3 (grid x).

    Grid on graphical canvas

  2. In the Java visual editor palette, select the JTable on JScrollPane JTable on JScrollPane icon Swing component, which is categorized under the Swing components drawer of the palette.
    Tip: By default, the palette is collapsed on the right side of the design area. You can resize and move the palette.
  3. Move your mouse pointer over the cell in the grid at column 0, row 1:

    Drop placement on grid

    • As you move your mouse pointer over the grid, the mouse pointer shows two numbered squares that tell you the x and y coordinates in the grid based on the location of your mouse pointer.
    • If you hover your mouse pointer directly on a grid border, new rows and columns can be created, and existing rows and columns will be renumbered. In this case, yellow squares on the mouse pointer, yellow bars between the grids, and yellow column and row labels indicate this behavior and point out the impact that the placement will have.
  4. Left-click to drop the JScrollPane and JTable into the cell at column 0 and row 1:

    Table dropped on grid

Span the JScrollPane and JTable across multiple columns and rows of the grid

Now you need to make your JScrollPane (and its child JTable) span three columns and two rows for better spacing and resizing behavior. To make the table span the columns and rows:
  1. Select the JScrollPane in the design area or Java Beans view (it should still be selected because you just added it). Notice the small green squares on the right and bottom of the JScrollPane. You will use these resize handles to drag the JScrollPane to span multiple columns and rows.
  2. Click and hold down your left mouse button on the green handle on the right side of the JScrollPane.
  3. Drag your mouse pointer to the right until the placement indicates column 2, row 1. A dark gray shadow will also indicate the cells that the component will occupy when you release the mouse button.

    Table dragged to span three columns

  4. Release the mouse button. The JScrollPane now spans the three columns.
  5. Repeat the similar process to drag the bottom handle of the JScrollPane until the JScrollPane spans into row 2:

    Table dragged to span two rows

Customize the spacing of the JScrollPane within the GridBag

Another feature of the GridBagLayout manager is that you can specify various constraints to further customize the layout. For example, you can specify the following constraints:
  • anchor: A component can be given an anchor orientation within its cell, which will affect how the component moves as the application is resized by a user. For example, a component could be anchored at top-left, middle-left, center, or bottom-right.
  • fill: A component can be told to occupy all available space within its cell or cells either horizontally, vertically, or both.
  • insets: A component can be given its own padding on the top, bottom, left, and right side to provide spacing between the component and the edge of the grid.

To customize the anchor, fill, and insets for the JScrollPane:

  1. Right-click the JScrollPane in the design view or Java Beans view, and select Customize Layout.

    Pop-up menu on jScrollPane

    Tip: The Customize Layout dialog box can remain open as you select and change the layout for different components. You can open the Customize Layout dialog box at any time by clicking the Customize Layout button in the menu bar:

    Customize Layout menu icon

  2. On the Component tab of the Customize Layout dialog box, make sure that the Anchor center button is pressed.
  3. Make sure that both the Fill horizontal and Fill vertical buttons are pressed.
  4. Add a left inset of 15 (pixels) to make the spacing on the left side of the JScrollPane similar to the other visual components on the application.

    Customize Layout dialog box

    The table now aligns with the Filter label, for example.

    Customize Layout dialog box

Rename the new JTable to a useful value and set it to select a single row

Because you will later work with the table, it will be useful for you to rename the JTable instance and its getter method. To rename the table:
  1. In the Java Beans view, right-click the jTable component and select Rename field from the pop-up menu.

    Pop-up menu on jTable

  2. Type employeesTable and click OK. The JTable is now named employeesTable, and the method for instantiating it is getEmployeesTable.
  3. Set the table to allow only a single row to be selected:
    1. Select the employeesTable in the design view.
    2. In the Properties view, select the selectionMode property and set it to SINGLE_SELECTION.

      Properties view showing SINGLE_SELECTION on JTable

    3. Save the DirectoryApp.java file.

Lesson checkpoint

In this lesson you learned how to use the visual editor to add a table to an existing user interface. Then you learned how to customize its layout, positioning, and spacing.

< Previous | Next >