JClass LiveTable

PreviousNextIndex

9

JClass LiveTable Beans and IDEs

An Introduction to JavaBeans  JClass LiveTable and JavaBeans

Setting Properties for the LiveTable Bean  Tutorial: Building a Table in an IDE

Data Binding with IDEs  Interacting with Data Bound Tables

Property Differences Between the JClass LiveTable Beans

JClass LiveTable complies with the JavaBeans specification and includes several Beans that make it easy to create JClass LiveTable applications in an Integrated Development Environment (IDE). The following sections outline some principles of JavaBeans, and provide information about using JClass LiveTable in an IDE. All illustrations display the BeanBox, JavaSoft's test container for Beans included in the Beans Development Kit (BDK).


9.1 An Introduction to JavaBeans

Introduced in JDK 1.1, JavaBeans is a specification for reusable, pre-built Java software components. It is designed to be a fully platform-independent component model written for the Java programming language. The JavaBeans specification (available at http://java.sun.com/beans/index.html) enables developers to write components that can be combined in applications, reducing the total time needed to write entire applications.

The three main features of a Bean are:

9.1.1 Properties

Under the JavaBeans model, properties are public attributes that affect a Bean's appearance or behavior. Properties can be read only, read/write, or write only. Properties that are readable have a get method which enables you to retrieve the property's value, and those properties which are writable have a set method which allows you to change their values.

For example, JClass LiveTable has a property called FrameBorderType. This property specifies the kind of border displayed around the table. To set the property value, use the setFrameBorderType() method. To obtain the property value, use the getFrameBorderType() method.

The main advantage of following the JavaBeans specification is that it makes it easy for a Java IDE to "discover" the set of properties belonging to an object. Developers can then manipulate the properties of the object easily through the graphical interface of the IDE when constructing a program.

There are two ways to set (and retrieve) JClass LiveTable Bean properties; use the method that applies best to your application:

Each method changes the same table property. This manual, therefore, uses properties to discuss how features work, rather than using the method, Property Editor, or HTML parameter you might use to set that property.

9.1.2 Setting Properties in a Java IDE at Design-Time

JClass LiveTable can be used with a Java Integrated Development Environment (IDE), and its properties can be manipulated at design time. If you install your IDE after you have installed JClass LiveTable, you will have to manually add LiveTable to the IDE's component manager. Refer to the JClass and Your IDE section in the Installation Guide for more information. Also, consult your IDE documentation for information on working with third-party components.

Please see Section 9.7, Property Differences Between the JClass LiveTable Beans, for information on the differences between the LiveTable Bean, and the data binding Beans.

9.1.3 Setting Properties using Methods in the API

With the exception of read-only properties (which only have a get method), every property in JClass LiveTable has a set and get method associated with it. For example, to retrieve the value of the FrameBorderType property of a given cell and label area:

  getFrameBorderType();

To set the FrameBorderType property in the same object:

  setFrameBorderType(JCTbleEnum.BORDER_IN);

9.2 JClass LiveTable and JavaBeans

The JavaBeans included with JClass LiveTable make it easy to create applications and applets in an Integrated Development Environment. JClass LiveTable provides the following Beans:


9.3 Setting Properties for the LiveTable Bean

At design-time, most LiveTable properties are set using simple menu choices or text entry boxes on the property sheet. Some properties that are set for individual cells or labels, or ranges of cells or labels, are set using a property editor. The LiveTable property editors provide a visual interface for setting the properties using a model of the table you are creating, and a number of ways for selecting the cell(s) or ranges that you want to set the property for.

To make it easier to use, the LiveTable Bean combines some properties into special property groups that are set using a single editor. For example, the Style property combines the Foreground, Background, and Font properties and presents them in a single editor.

9.3.1 JClass LiveTable Property Editors

The following is a typical property editor with elements common to other LiveTable property editors:

Each property editor has the same interface for selecting the cells to which a specific property is applied. On the left is a view of the table (the data reflects the properties you are setting). On the right are two groups of controls: Selected region provides an alternate control of part of the table selected; Table Size controls the size of the table view in the editor. Both of these interact with the table on the left.

It is important to note that the table view is provided only as a visual guide for setting properties. Its size and contents may not necessarily reflect those of the actual table you are building.

Selecting a Cell or Cell Range

The purpose of the property editors is to apply a given property to a single cell or label, or to a range of cells or labels. You can select cells interactively using the mouse or by using the Selected region controls.

To select cells using the mouse:

Note that when you make selections with the mouse, the ranges you select are displayed in the Selected region controls, as shown in the following diagram:

To select cells using the Selected region controls:

To select a single cell, choose Range from both the row and column pull-down menus, then type the row index and column index for the cell. For example, the cell that intersects the fourth row and the third column would be selected by typing 3 for the Row range and 2 for the Column range (remember, the rows and columns start at 0).

To select a range of cells, you must specify the row and column index for the top-left and bottom-right cells in the range (typically specifying a range is easier to do with the mouse). Choose Range from both the row and column pull-down menus, then type the numbers of the top and bottom rows of the range separated by a comma; then type the left and right columns of the range separated by a comma. This has specified a bounding box for the range.

Selecting Labels

To select labels using the mouse:

It may seem odd to be choosing in the Column box for row labels and in the Row box for column labels, but it is easier to understand if you consider that you are really specifying the row of column labels or the column of row labels.

To select labels using the Selected region controls:

To select all row labels, choose all in the Row pull down menu, and choose label in the Column pull down menu.

To select a row label, choose label from the Column pull-down menu. Then choose range in the Row pull down menu, and type the desired row number in the text field.

To select all column labels, choose all in the Column pull down menu, and choose label in the Row pull down menu.

To select a column label, choose label from the Row pull down menu. Then choose range in the Column pull down menu, and type the desired row number in the text field.

Changing the Property Editor Table Size

The Table size controls set the working size of the table view in the editor. By default, the property editors display a 10 row, 5 column table, which is sufficient for most selection. If you need to edit properties for a specific row or column beyond this limit, use the Table size controls to enlarge the working area in the property editor. To change table size, enter a new value in the Row or Column text field and press Enter (or traverse out of the field); the table view will update to the new dimensions.

Note: To change the actual size of the table you're building, use the Table size controls on the DataEditor. The DataEditor is the only editor that uses the Table size controls this way.

You can undo any of your changes and reset the properties to the values they had when you opened the editors by clicking the Reset All button.

9.3.2 LiveTable Properties

The LiveTable Bean exists because the current generation of Java IDEs do not support properties in contained objects. While current Java IDEs allow properties in contained objects to be modified, they cannot yet properly generate code for the property change. LiveTable works around this problem by exposing many JClass LiveTable properties in one object. While not all properties are provided, the most common properties are available.

The following sections list the properties exposed in the LiveTable Bean. Many of the properties can be set for individual cells/labels or ranges; these properties are set using visual property editors (see Section 9.3.1, JClass LiveTable Property Editors, for a description of a typical editor and how to select cells). Note that the illustrations are from Sun's BeanBox in the Beans Development Kit (BDK). The properties and editors are listed in alphabetical order; the BeanBox unfortunately does not list properties in alphabetical order.

about

about displays the component version and points to other sources of JClass information

allowCellResize

Setting allowCellResize determines which part of a cell users can click and drag to resize cells. The default setting, RESIZE_ALL, allows resizing by clicking and dragging both row and column cell borders.

allowResizeBy

Setting allowResizeBy determines which part of the table can be used to resize rows and columns: cells, labels or both. This property works in conjunction with allowCellResize.

autoScroll

The autoScroll property determines if the table automatically scrolls when the user drags the mouse or traverses past the borders of the table.

cellBorderWidth

Entering a number into the cellBorderWidth field specifies the thickness of the border around each cell and label.

cellSize

The cellSize editor lets you set row height and column width values as either fixed pixel values or variable values. Changes made to cell dimensions are only applied to selected cells, and cells found in the same rows and columns as the selection.

data

The data property, exclusive to the LiveTable Bean and not available in the data binding Beans, enables you to add and customize table data and row/column labels. There are two ways to get data in a table - by entering data directly using the DataEditor, or by specifying a data file (which can contain label information).


The data file format is a space-delimited text file that can contain Strings, doubles, or integers. This example file contains 4 rows and 4 columns with no labels:

TABLE 4 4 NOLABEL
'0,0' '0,1' '0,2' '0,3'
'1,0' '1,1' '1,2' '1,3'
'2,0' `2,1' '2,2' '2,3'
'3,0' '3,1' '3,2' '3,3'

To include reserved characters (like spaces), enclose the data item in single quotation marks, for example 'The Cuppa'. This example shows how to specify labels:

TABLE 4 3
'Col 0' 'Col 1' 'Col 2'
'Row 0' '0,0' '0,1' '0,2'
'Row 1' '1,0' '1,1' '1,2'
'Row 2' '2,0' '2,1' '2,2'
'Row 3' '3,0' '3,1' '3,2'

editHeightPolicy

The table can control the height of a cell editing component using the editHeightPolicy property. This property can take one of three values:

  • EDIT_SIZE_TO_CELL resizes the component to fit the table's cell size.
  • EDIT_ENSURE_MINIMUM_SIZE resizes the component to its minimum size.
  • EDIT_ENSURE_PREFERRED_SIZE resizes the cell to the editing component's preferred size.
  • editWidthPolicy

    The table can control the width of a cell editing component using the editWidthPolicy property. The valid values this property takes are the same as those associated with editHeightPolicy.

    focusColor

    Choosing a color for the focusColor property determines the color of the focus rectangle. The focus rectangle is the line drawn around the inside of the cell that currently has focus.

    focusIndicator

    The focusIndicator property determines how cell focus is shown to the user. This indicator appears inside the cell that currently has focus. The default is FOCUS_RECTANGLE.

    frameBorderType

    Setting the frameBorderType property determines what type of border is used for the frame enclosing the cell and label areas. Choose a border type from the pull-down menu. Note that the FrameBorderWidth property must be set to greater than 5 in order for the etched border types to be visible.

    frameBorderWidth

    Enter a value in the frameBorderWidth property field to determine the thickness of the frame around the cell and label areas of the table in pixels.

    frozenCellLayout

    Working with the frozenCellLayout property editor sets whether there are any frozen rows or columns, and specifies their position in the table. Frozen rows can be placed at the top or bottom of the table, and frozen columns can be placed on the left or right side of the table.

    labelLayout

    Working with the labelLayout property editor offers full control over label attributes. You determine if row or column labels exist, then specify offsets and label placement. Label offset is the distance in pixels between the edge of the table and the labels. You can place row labels at the top or bottom of the table, and column labels at the right or left side of the table.

    leftColumn

    Enter the column number in this field to specify which is the left-most column when displaying the table.

    marginHeight

    Enter a value in the marginHeight field to determine the height of the top and bottom margins of each cell.

    marginWidth

    Enter a value in the marginWidth field to determine the width of the left and right margins of each cell.

    minCellVisibility

    By default, when a user traverses to a cell that is not currently visible, LiveTable scrolls the table to display the entire cell. Enter a percentage value in the minCellVisibility field to set the percentage of the cell that is scrolled into view when it is the target of a traversal.

    When MinCellVisibility is set to 100, the entire cell is made visible. When MinCellVisibility is set to 10, only 10% of the cell is made visible. If MinCellVisibility is set to 0, the table will not scroll to reveal the cell.

    sBLayout

    Working with the sBLayout property editor offers full control over visual and behavioral scrollbar attributes:

    The Scrollbar Display settings determine if horizontal or vertical scrollbars exist. If so, you can also determine if the scrollbars are displayed at all times, or only when the table's contents exceed the table's size.

    The Scrollbar Position settings determine whether scrollbars are positioned by cells or at sides. The former option places the scrollbar beside the cell/label viewport, while the latter places the scrollbar beside the edge of the table area. Note that there is no visual difference between the two options unless the cell/label area is smaller than the table area.

    The Scrollbar Attachment settings determine how far along the side of the table the scrollbars extend. To cells (default) places the scrollbar along the edge of all visible, non-frozen cells, while To table places the scrollbar along the edge of the entire table.

    Scrollbar Offset sets the amount of space, in pixels, between the scrollbar and the table.

    Scrollbar Tracking determines the type of feedback a user receives when they click and drag a scrollbar. Live tracking refreshes the table as the user scrolls. The Column number/Row number and Row/Column options do not redraw the table until the user stops scrolling by releasing the mouse button.

    However, to offer the user feedback, the Column number/Row number option displays a box with the current cell number, while the Row/Column option displays the actual contents of the current cell. The row or column from which the displayed contents are taken is determined by the number entered in the Row or Column fields.

    selectedBackground

    Selecting a color for the selectedBackground property determines the background (highlight) color for cells that have been selected. The default is the foreground color for the cells.

    selectedForeground

    Selecting a color for the selectedForeground property determines the foreground (highlight) color for cells that have been selected. The default is the background color for the cells.

    selectIncludeLabels

    By default, when a user clicks a label, the entire row or column, including the label, is highlighted. To change it so that the label is not highlighted with the rest of the cells, set this property to false.

    selectionPolicy

    The SelectionPolicy property controls the amount of selection allowed on the table, both by end-users and by the application.

    spannedCells

    The spannedCells property editor lets you visually implement cell spanning with your table. Use the displayed table to select which cells are to be combined. The cell found at the top left corner of the spanned range becomes the new cell.

    styles

    The styles property editor gives you control over cell style options, including: cell colors, font attributes, editable and traversable states, and alignment in cells.


    You can also use the styles property editor to work with and set all border properties for cells in the selected area. By using the pull-down menus, you can set which cell sides have borders, what type of border is used, whether clip hints are displayed (should the cell's contents exceed its size) and what the selected cells border color is.

    When choosing border or cell background/foreground colors, the color selection options offer precise control. You can select a color by using the Hue/Saturation/Brightness (HSB) panel, the Red/Green/Blue (RGB) Panel, or the color swatch. All three methods offer color previews for both text and objects.

    topRow

    Enter the row number in this field to specify which is the topmost row when displaying the table.


    9.4 Tutorial: Building a Table in an IDE

    The following exercise will guide you through the steps to produce a JClass LiveTable program in an IDE. The exercise is the same as the one in `Hello Table' - JClass LiveTable Tutorial, in Chapter 1, which explains how to build a table using the API. The example uses JavaSoft's BeanBox IDE in the Java BDK. This tutorial assumes that you have some experience working with a Java IDE. If you are unsure how to get the LiveTable Bean into your IDE, please consult the IDE documentation.

    This program displays information about orders for `The Musical Fruit'1, a fictional wholesale coffee distributor, based on the following data:

    Customer Name

    Order Date

    Item

    Quantity (lbs.)

    Price/lb.

    The Cuppa

    11/11/97

    French Mocha

    60

    $7.01

    The Underground Cafe

    11/14/97

    Brazilian Medium

    112

    $6.80

    RocketFuel and Cake Cafe

    10/30/97

    Espresso Dark

    300

    $8.02

    WideEyes Coffee House

    11/12/97

    Colombian/Irish Cream Flavored

    120

    $5.30

    Jitters Caffeine Cavern

    10/01/97

    Ethiopian Medium

    80

    $7.50

    Twitchies on the Mall

    12/06/97

    French Roast Kona

    160

    $14.50

    Quest Software

    12/12/97

    Colombian

    22,000

    $5.28

    9.4.1 The Basic Table

    The first step is to create a default table. In the BeanBox, click the LiveTable component displayed in the ToolBox, then to insert the table component, click in the BeanBox window. The BeanBox displays a default-sized (10 rows by 5 columns) table with visible row and column labels:

    Supplying the Data

    The data for the table is contained in the data source. You can provide the data by entering it into the table using the DataEditor, or by specifying that a file is the data source. Start the DataEditor by clicking the data property on the property sheet. Notice that the editor defaults to using the table as the data source.

    The data we want to display is stored in a file. To use this file as the data source:

    1. Click Browse.
    2. Navigate to the examples/table/datasource directory of your JClass LiveTable distribution.
    3. Choose the tutorialdat.txt file.

      When you choose the file, the table display in the editor populates with the data from the data source. Also, the Table size fields should be disabled, as shown in the following illustration:



    4. To close the editor, click Done. The table displayed in the BeanBox now shows the values from the data source:



    9.4.2 Improving the Table's Appearance

    Using some of the properties for modifying a table's appearance, you can easily move from the basic table to a more interesting table that's easier to understand, and easier to use. The following sections explain how to set these properties using an IDE.

    Adding Column Labels

    The table currently displayed in the BeanBox is not very useful to an end-user. Not only is it not interesting to look at, but you cannot tell what kinds of information the various cells contain because there are no column labels. In the original data outline for the table, we indicated that we wanted the following column labels:

    Labels are cells that can never be edited and can contain any Object (Strings, images, Integers, and so on). Notice that since our data source contained no data for the labels, the LiveTable Bean does not display any labels in the BeanBox.

    If you had entered the table data directly into the Bean, you could add the labels using the DataEditor. But since the file is the data source, adding the labels must be done by editing the file. For convenience we have included the labels in another data file. Load this data file using the DataEditor as before. The new file is called tutorialdat-labels.txt, located in the examples/table/datasource directory of your JClass LiveTable distribution.

    By default, the table displays row and column labels that have values. This is controlled by the labelLayout property. Now that you have column labels, the table in the IDE should update to look something like the following illustration:

    Notice that if you click a label in your table, you do not get the focus rectangle the way you do if you click a cell: labels cannot be edited and cannot be the target of a traversal. In certain circumstances, clicking a label performs an action (see Section 9.4.3, Adding Interactivity), but in this case the labels do not perform any interactive function.

    The labels have a default border and color set to make them stand out from the table. In this exercise, we will take it one step further by changing the colors and fonts of the labels using the StyleEditor, accessed by clicking the styles property on the property sheet:

    To begin, select the column labels. In the Selected region box:

    1. Choose label from the Row pull-down menu.
    2. Choose all cells from the Column pull-down menu.

      This applies any settings you choose to the column labels. Next, choose the font and size of the label text. In the Font box:

    3. Choose Times New Roman from the font pull-down menu.
    4. Choose 14 from the point size pull-down menu.

      Note: The type of font displayed on a user's system depends entirely on the fonts that are local to that user's computer. If a font name specified in a Java program is not found on a user's system, the closest possible match is used (as determined by the Java AWT).

      Finally, change the color of the label text. In the Color box:

    5. Choose Foreground, then select a white color from the Swatches tab.
    6. Choose Background, then select a blue color from the Swatches tab.
    7. You should be able to see these changes in the sample table in the StyleEditor. Click Done to commit the changes and return to the BeanBox.

    Your changes are now visible in the BeanBox. You now have a basic table with labels colored and text formatted to differentiate them from the rest of the table cells.

    Label Layout

    You can change the position of the labels relative to the table, and control their distance from the table to help make the labels even more distinctive. By default, labels are displayed right against the table border. You can make it stand off by using the LabelLayout editor, accessed by clicking the labelLayout property on the property sheet:

    For this exercise, you are going to add some space between the column labels and the top of the table and take out the row labels. In the LabelLayout editor:

    1. In the Label Display box, both row and column labels are selected by default. Clear the Row label display check box.
    2. In the Labels Offset box, change the value in the Column field from 0 to 2 pixels.

      The changes are immediately reflected in the editor and the BeanBox.

    3. Click Done to commit the changes and return to the BeanBox.

    Having changed the alignment and font, your table should now look something like the following illustration:

    Changing the Cell Borders and Thickness

    JClass LiveTable has properties that you can use to change the way the cell borders and cell spacing appears.

    There are a number of choices for cell borders, outlined earlier in the description of the style property. For the example program, you're going to thicken the cell borders and change the border style. This involves working with the cellBorderWidth and styles properties on the property sheet.

    1. First, to change the cell border width value, simply edit the value in the text box for the cellBorderWidth property. Set the value to 2 instead of the default (1).

      To change the cell border type for the table cells and labels, you need to call the StyleEditor (again, click styles in the property sheet).

    2. To begin, select all non-label cells. In the Selected region box, choose all cells from the Row pull-down menu and choose all cells from the Column pull-down menu.

      Now that you have selected all cells, change their border:

    3. Click the Types drop-down list in the Borders box and select border in.

      To change the border type for the column labels, you now need to select all column labels. In the Selected Region box:

    4. Choose label from the Row pull-down menu and choose all cells from the Column pull-down menu.

      This applies any settings you choose to the column labels. Now, change their border:

    5. Click the Types drop-down list in the Borders box and select border out.

    The table should now resemble the following in the BeanBox:

    9.4.3 Adding Interactivity

    In a real-world situation, our example table would likely be used to track orders and accounts with a large number of customers. Your users will likely want to update the data, sort the information displayed in the table, and select sections of the table to perform operations on them.

    We'll add some basic user-interactivity to our example table to give you a sense of some of the things JClass LiveTable can do. You can explore user-interactivity further in Programming User Interactivity, in Chapter 6.

    Controlling Cell Editability

    Using the LiveTable Bean, the data source is editable by default. You can change the editability of cells using the EditState property. Note that in the data source, Quest Software has ordered 22,000 pounds of coffee. This is obviously a typographical error, but we're going to make sure Quest Software gets all 22,000 pounds of coffee by not allowing that cell to be edited.

    Invoke the style editor by clicking styles on the property sheet.

    In our original data, the cell containing the value 22,000 was located at row 6, column 3. (Recall that arrays in Java are zero-based - thus, the row and column indexes begin at zero.) You can either select this cell with the mouse, or type these values in Row and Column fields in the Selected region box.

    Note that each cell in the editor's table reflects its current traversable and editable state. A cell that is editable must also be traversable, but a cell that is traversable does not necessarily have to be editable. For this particular cell, leave traversability on, and simply unset its editability:

    1. In the Interaction box, clear the Editable checkbox. This makes the cell traversable but not editable, as is displayed in the editor's table.
    2. Click Done.

    Now we can be sure that nobody will change Quest Software's coffee order!

    Enabling Cell Selection

    JClass LiveTable provides methods that set how users can select cells, ranges of cells, and entire rows and columns. Selection is enabled by setting the SelectionPolicy property. By default, cell selection reverses the foreground and background colors of the cells to highlight the selection. You can enable selection by choosing a value from the SelectionPolicy pull-down menu in the LiveTable property sheet.

    1. Choose SELECT_MULTIRANGE. This allows users to select one or more cells in rows or columns by clicking and dragging the mouse, or using keyboard combinations.

    By default, setting the SelectionPolicy property enables selection of entire rows or columns by clicking on the row or column label. When the user clicks on the column label, the column display, including the label, is reversed to highlight the selection. You can configure the table not to highlight the label by setting the SelectIncludeLabels property to false.

    Resizing using Labels Only

    By default, users can resize rows, columns, and labels by clicking on their borders and dragging to resize. You can change this functionality to have the resize capability available only from the label; to resize a column, the user resizes its label rather than its cells. LiveTable provides the allowResizeBy property to enable this feature. In the property sheet, change the allowResizeBy property to RESIZE_BY_LABELS.

    Changing the Focus Rectangle Color

    Finally, some of your users have complained that it's hard for them to see what cell currently has focus because the focus rectangle is plain black. You can change the color of the focus rectangle easily by setting the focusColor property:

    When you click on the FocusRectColor property, the default color chooser appears.

    Choose red from the color chooser. Now your users should be able to see the focus rectangle clearly.

    9.4.4 The Final Program

    Your simple table program has evolved into an interactive, easy-to-understand utility. Although it's far from being a real order-tracking system, using a few more JClass LiveTable features, it soon could be. The following illustration shows all of the visual changes that you've accomplished. From here you can try out other properties and see how they affect the table's appearance and behavior.


    9.5 Data Binding with IDEs

    If you are using an IDE to develop Java applets and applications, the LiveTable data binding Beans allow you to bind a table with a JDBC-compliant data source, an ODBC data source (by using the JDBC-ODBC bridge), or an IDE-specific data source. The data binding Beans are loosely based on a Model-View-Controller (MVC) data mechanism. The direct link between the table component and the IDE's data source offers an easy and efficient way of representing and modifying data in your tables.

    As outlined earlier in Section 9.2, JClass LiveTable and JavaBeans, LiveTable includes data binding Beans: JBdbTable is used with JBuilder's DataSet and DSdbTable is used with any JDBC data source (and JClass DataSource) in any IDE.

    The principles of data binding and connecting to a database in any environment are similar. The following sections assume that you are:

    Note: The examples used in the following sections use a sample JClassDemo database (demo.mdb) that can be found in the JCLASS_HOME/demos/common/databases directory. As such, these examples are primarily meant to illustrate data binding with IDEs, as you will not be able to duplicate them if you do not have the sample database.

    9.5.1 Data Binding LiveTable with a JBuilder Data Source

    To data bind to a JBuilder's DataSet using JBdbTable, you require:

    Creating a Java application that contains a data bound table in JBuilder requires an understanding of database connectivity in a JBuilder project. Binding your table with a database in this IDE involves:

    There are different methods and components with which a JBuilder project with database connectivity can be created. The following provides a general overview of data binding, as it is assumed that you are familiar with working with your IDE. For specific information, please refer to your JBuilder documentation, where comprehensive tutorial and reference information can be found about setting up an application project, adding the Database and QueryDataSet components to manage the JDBC connection, and communicating with the database.

    Let's begin with a basic project in JBuilder, where the UI components are set up, readying the project for the addition of the database and data binding components.

    Figure 19 :  Example project work space with defined UI components, ready for database components.

    Adding the Database Component to the Project

    In the Data Express tab of the Component Palette, click the borland.sql.dataset.Database object, designating it as the component to be added. Next, click an empty area of the Component Tree. The database object is added to your project.

    Figure 20 :  Selecting the Database component on the Component Palette.

    Setting the Connection Property for the Database Component

    Now that the database object has been inserted into your project, you need to define the JDBC Connection information for this object. This is done by setting the connection property in the Inspector, when the database object is selected.

    It is here that you select the data source that you want bound to your table component. All available data sources and DataGateway sources recognized by JBuilder are listed and available to be set as the main data source. These data sources are defined with Windows' ODBC Administrator. In this example, the demo.mdb database (JClassDemo) is selected.

    Adding the Database component and setting the connection properties adds the following lines of code to your project:

    import borland.sql.dataset.*;
    ...
    Database database1 = new Database();
    ...
    database1.setConnection(new com.borland.dx.sql.dataset.
          ConnectionDescriptor  ("jdbc:odbc:JClassDemo", "", "", false,
          "sun.jdbc.odbc.JdbcOdbcDriver"));

    This code introduces the database component (in this example, it is named database1) and points it to the data source that you define (in this example, the sample demo.mdb database, JClassDemo is used).

    Adding the QueryDataSet Component to the Project

    Now that you have set up the link between your project and the desired database, you need to interact with that database. In the Data Express tab of the Component Palette, click the borland.sql.dataset.QueryDataSet object, designating it as the component to be added. Next, click an empty area in the Component Tree. The database query component is added to your project.

    Figure 21 :  Selecting the QueryDataSet component on the Component Palette.

    Setting the Query Property for the QueryDataSet Component

    Now that the QueryDataSet component has been added, you need to define which parts of which database will be used. To do this, you need to query the database with an SQL statement. This is done by setting the query property in the Inspector, when the QueryDataSet object is selected.

    In the query property area, select the database you just added, and browse the tables if you have to get the proper information for your table. Enter the SQL statement that represents your needs. Test it to be sure that such a query will be successful.

    Figure 22 :  Entering the query statement to the selected database.

    Adding the QueryDataSet component and setting the query property adds the following lines of code to your project:

    QueryDataSet queryDataSet1 = new QueryDataSet();
    ...
    queryDataSet1.setQuery(new com.borland.dx.sql.dataset.QueryDescriptor  
    (database1, "select * from customer", null,true,Load.ALL));

    This code defines a new QueryDataSet component (in this example, named queryDataSet1), which lets you read and write to and from the database by way of SQL statements. It also defines which part of the database is extracted, and bound to your table component. In this example, the Customer table is selected with the query statement.

    Once the project's database and database connectivity components are in place and properly defined, the table component can be added, and the data binding can occur.

    Figure 23 :  The project is ready for the table data binding component.

    Adding the LiveTable Data Binding Bean to the Table

    When you installed JClass LiveTable, its JBuilder components, including the LiveTable data binding Bean, were installed on JBuilder's Component Palette. If they are not there, please refer to the JClass and Your IDE section in the Installation Guide for information about manually adding JClass LiveTable components to JBuilder's Palette.

    Click the table data binding Bean on the Component Palette, designating it to be added. Next, insert the data binding table component by clicking anywhere in the component tree (the table will be its default size), or by dragging and defining its size in the UI Designer.

    Figure 24 :  Selecting the data binding LiveTable component on the Component Palette.

    Setting the Dataset Property for the LiveTable Data Binding Component

    Now that the data binding table component is part of the project, you need to define its DataSet. This is done by setting the dataSet property in the Inspector, when the table component is selected in the Component Tree.

    It is here that you set the property to the QueryDataSet component name that is part of your project. In this example, the name of the component is queryDataSet1. This action adds these lines of code to your .java file:

    import com.klg.jclass.table.db.jbuilder.*;
    ...
    JBdbTable jBdbTable1 = new JCdbTable();
    ...
    jBdbTable1.setDataSet(queryDataSet1);
    ...
    this.getContentPane().add(jBdbTable1, BorderLayout.NORTH);

    This code introduces the LiveTable data binding Bean, and connects it to JBuilder's DataSet.

    Figure 25 :  The project now contains a data bound table.

    Now that the table component has been linked to the QueryDataSet component, the data bound table is part of the project. The project can now be compiled and run, or continued to be developed.

    9.5.2 Data Binding Using JClass DataSource

    Using the DataSource data binding Bean (DSdbTable), you can bind a table component with any JDBC-compliant data source. The DSdbTable Bean works in any IDE2 but can also be used if you are developing an applet or application without one. Data binding with the DSdbTable Bean requires:

    JClass DataSource is available as part of the JClass DesktopViews suite. Visit http://www.quest.com for information and downloads.

    When data binding your table component with a database, JClass DataSource manages the connection and queries to the database in your development project. Using the DSdbTable Bean creates a table component that connects with JClass DataSource, thus completing the data binding link.

    JClass DataSource uses two data binding Beans: the JCData Bean and the JCTreeData Bean. JCData allows data binding to flat data models, while JCTreeData allows data binding to hierarchical data models. The following example provides a general overview of data binding a LiveTable component to a database in Sun's Bean Development Kit.

    It is assumed that you already are familiar with setting up a database connection with JClass DataSource. For specific information, please refer to your JClass DataSource documentation. Binding your table with a database involves:

    Establish a database connection with JCData

    Insert JCData into the design area. Doing this will allow you to begin working with the NodePropertiesEditor in the BDK Properties window.

    If desired, enter names in the Description and Model Name fields. In this example, we will leave the BDK's default names (Node1 and JCData1). On the Serialization tab, click Save As to save your serialization file. Next, click the Data Model tab to specify which database you want to connect to.

    You need to specify the Server Name and Driver on the Data Model / JDBC / Connection tab. For the purposes of this example, we are using the demo.mdb (JClass Demo) database. In the Server Name field, enter or select jdbc:odbc:JClassDemo, and in the Driver field, enter or select sun.jdbc.odbc.JdbcOdbcDriver. Ensure that the Prompt User For Login checkbox is note selected, and test the connection. When you receive confirmation that the database connection is successful, you can begin to set up the query statements.

    Figure 26 :  Connecting to the demo.mdb database in Sun's Beans Development Kit.

    Inputting database query statements with the DataBean

    In order to properly query the database you have connected to, you need to input your query statement in the fields found on the Data Model / JDBC / SQL Statement tab. For this example, the demo.mdb database contains various tables, one of which is Customers. Enter select * from Customers in the SQL Statement window to take all of the fields from the demo.mdb's customers table, then click Set.

    Now that you've successfully connected to, and queried the database, click Done.

    Adding DSdbTable

    The last step in creating a data bound table in your development project is adding the actual table component. In the BDK's Toolbox, click the DataSource data binding Bean (DSdbTable) and drop it into the BeanBox design area. Doing this will allow you to begin working with the DSdbTable properties in the Properties window. In the list of properties, click the dataBinding property, and set the connection to the appropriate data source. The data source is determined by what you entered in the Description and Model Name fields in the DataBeanComponentEditor (if you used the defaults in this example, they will be Node1 and JCData1). The table object will update to reflect the successful binding to the data source.

    At this point, you have a table component in your design area, that is bound to the designated data source. You can now continue developing the rest of your application.


    9.6 Interacting with Data Bound Tables

    When a data bound table component has been successfully placed into your applet or application, you can interact with the table that takes advantage of the binding between the component and the data source.

    Figure 27 :  Interacting with the data bound table component.

    These actions are accessible through the table component's pop-up menu. By right-clicking a record, or multiple selected records, a list of possible actions is presented to the user.

    Pop-up Menu Item

    Function

    Insert Record

    Adds a new record to the current table and bound data source.

    Delete Record(s)

    Removes the selected row(s) from the current table and bound data source.

    Cancel Record(s)

    Cancels changes made to selected records.

    Cancel All

    Cancels all changes made to all records.

    Requery Record and Details

    Requeries the selected record(s) and any of its children from the database.

    Requery All

    Requeries all records in the table from the database.

    Save Record(s)

    Commits changes to selected records in the table, and updates the bound data source.

    Save All

    Commits all changes made in the table to the database


    9.7 Property Differences Between the JClass LiveTable Beans

    Most of the common properties of the data binding Beans (JBdbTable and DSdbTable), are the same as the LiveTable Bean. By retaining most of the LiveTable Bean properties (outlined in Section 9.3.2, LiveTable Properties), the new Beans provide feature-rich data binding table components.

    The following data binding Bean properties are either unavailable, or have a new editors.

    Data binding Bean

    Property difference from LiveTable Bean

    CellSize

    Unavailable in the data binding Beans.

    Data

    Unavailable: replaced by specific data binding properties.

    FrozenRow

    Unavailable in the data binding Beans.

    LeftColumn

    Unavailable: data bound table always starts at column 0.

    RowLabelDisplay

    Unavailable in the data binding Beans.

    SpanningCells

    Unavailable in the data binding Beans.

    Style

    Same property; new editor.

    TopRow

    Unavailable: data bound table always starts at row 0.

    TraverseCycle

    Unavailable: always on in the data binding Beans.

    1We apologize for the addition of yet another coffee reference in an already crowded pantheon.

    2If you are developing an application with JBuilder, you can use the specific data binding Bean, JBdbTable, that was designed for use with it.


    PreviousNextIndex