Creating a user interface using dbSwing components

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

The dbSwing package allows you to build database applications that take advantage of the Java Swing component architecture. In addition to pre-built, data-aware subclasses of most Swing components, dbSwing also includes several utility components designed specifically for use in developing DataExpress and JDataStore-based applications.

To create a database application, you first need to connect to a database and provide data to a DataSet. "Retrieving data for the tutorials" sets up a query that can be used as a starting point for creating a database application and a basic user interface.

To use the data-aware dbSwing components,

  1. Select the Frame file. Click the Design tab.
  2. Select the component on the component palette.
  3. Click in the UI designer to place the component in the application.
  4. Select the component in the component tree or the UI designer (The designer displays black sizing nibs on the edges of a selected component.)
  5. Some of the component's (JdbNavToolBar and JdbStatusLabel) automatically bind to whichever data set has focus. For others (like JdbTable), set the component's dataSet and/or columnName properties in the Inspector to bind the component to an instantiated DataSet.

The following list provides a few of the dbSwing components available from the dbSwing tab of the component palette:

dbSwing offers significant advantages over Swing with increased functionality and data-aware capabilities. If you are considering building new applications, especially those that access databases, dbSwing is probably your best choice.

dbSwing is entirely lightweight, provides look-and-feel support for multiple platforms, and has strong conformance to Swing standards. Using dbSwing components, you can be sure all your components are lightweight.

Tutorial: Using dbSwing components to create a database application UI

Before you create a UI, you need to create an application, connect to a database and retrieve data from a data source.

See "Connecting to a database" and "Retrieving data from a data source" for more information on how to do this, or follow the "Retrieving data for the tutorials" topic in this book for an example.

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, and is covered in the chapter "Creating a user interface" in Building applications with JBuilder.

You have two choices on how to proceed to create user interface with the JBuilder UI designer:

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 a BorderLayout panel 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. In the Inspector, set the dataSet property for jdbTable1 to whichever data set you want to view, for example, queryDataSet1.

    You'll notice that the designer displays a table that displays live data and column headers. JdbTable allows multi-line column headers. Enter a column caption like "line1<NL>line2" in the Inspector or "line1\nline2" in code to see both lines in the table's header. Also, you can sort data by clicking on a table header in the running application.

  8. Select Run|Run Project to run the application and browse and edit the data set.

    The running application will look something like this:

    Query tutorial as a running application

To save changes back to the data source, you can use the Save button on the toolbar tool or, for more control on how changes will be saved, create a custom data resolver. See "Saving changes back to your data source" for information on using other data resolving mechanisms.

The DataExpress samples (the dx subdirectory of samples) use dbSwing components. Other samples are located in the dbswing samples directory of your JBuilder installation.


Blocking editing in JdbTable

JdbTable's editable property blocks cell editing as well as insertion and deletion of rows through its popup menu. However, it does not block a JdbNavToolBar from inserting or deleting rows. This is because JdbNavToolBar does not insert and delete rows in a JdbTable; it inserts and deletes rows into a data set. The JdbTable is updated to reflect those actions. To prevent these changes, hide or disable the toolbar's Insert and Delete buttons or set the data set's enableInsert and enableDelete properties to false.