Creating a user interface

Database application development is a feature of JBuilder Professional and Enterprise. Distributed application development is a feature of JBuilder Enterprise.

Now you are ready to create a user interface for your database application. The fastest way to do this is to use the UI designer.

Note: Normally the first step in setting up a user interface is to determine the appropriate layout for your application (how the components are arranged visually, and which Java Layout Manager to use to control their placement.) However, learning how to use Java layout managers is a big task in itself. Therefore, to keep this tutorial focused on creating a database application, you'll use the default layout (BorderLayout), and control the placement of the components by setting their constraints property.

To learn about using layouts, see the online help topics "Laying out your UI", and "Using layout managers" in Building Applications with JBuilder.

The steps below add the following UI components to the application from the dbSwing tab on the component palette:

You will add these components to contentPane (BorderLayout), which is a JPanel, and the main UI container into which you are going to assemble the visual components.
  1. Click the Design tab on Frame1.java to open the UI designer, then click on contentPane (BorderLayout) in the component tree to select it. The UI designer displays black square sizing nibs around the selected component's outer edges in the UI designer.
  2. Click the dbSwing tab on the component palette, then click the JdbNavToolBar.

  3. Click the area close to the center, top edge of the panel in the UI designer. An instance of JdbNavToolBar, called jdbNavToolBar1, is added to the panel and is displayed in the component tree. jdbNavToolBar1 automatically attaches itself to whichever StorageDataSet has focus.

    jdbNavToolBar1 is now the currently selected component, and should extend across the top edge of the panel. Don't worry if it went somewhere different than you expected. The layout manager controls the placement, guessing the location by where you clicked. If you were too close to the left or right or middle of the panel, it may have guessed you wanted the component in a different place than you intended. You can fix that in the next step.

  4. Look at the constraints property for jdbNavToolBar1 in the Inspector. It should have a value of NORTH. If it doesn't, click once on the value to display a drop-down list, and select North from the list.

  5. Add a JdbStatusLabel component, using the same method. Drop it in the area near the center, bottom edge of the panel. jdbStatusLabel1 should have a constraints property value of SOUTH. If it doesn't, change it in the Inspector. jdbStatusLabel1 automatically attaches itself to whichever DataSet has focus.
  6. Add a TableScrollPane component to the center of the panel. Make sure its constraints property is CENTER. A table should fill the rest of the panel.

    Scrolling behavior is not available by default in any Swing component or dbSwing extension, so, to get scrolling behavior, you must add scrollable Swing or dbSwing components to a JScrollPane or a TableScrollPane. TableScrollPane provides special capabilities to JdbTable over JScrollPane. See the dbSwing documentation for more information.

  7. Finally, drop a JdbTable into the middle of the tableScrollPane1 component in the designer. This fills the tableScrollPane1 container with jdbTable1.

Your UI designer should look similar to this:

Note: The scroll bars on a TableScrollPane are not visible in the designer because the default property setting for vertical scroll bars and horizontal scroll bars is AS_NEEDED. To display them all the time, change the settings for those properties to ALWAYS.

JBuilder creates the corresponding source code immediately for the elements you've added or modified in your application. To see this code, click the Source tab.

Connecting the DataExpress component to a UI component

The next step is to connect the DataExpress components to the UI components.

To connect the DataExpress components with the JdbTable, you must specify a DataSet in the dataSet property of the component.

To set the dataSet property of the JdbTable component and connect the UI component to live data,

  1. Click the Design tab.
  2. Select jdbTable1 in the content pane.
  3. Click the edit area beside the dataSet property in the Inspector.
  4. Click the down arrow that appears.
  5. Select tableDataSet1 from the drop-down list. This list contains all instantiated DataSet components (of which there is only one in this example).

The column headers and live data appear in the table in the UI designer.


Adding DataExpress components to your application Compiling, running, and debugging the application