Table Widget: A Demo

Table Widget
Introduction
Model
<<Demo>>
Tutorial
Documentation
Download
Note: This demo requires a JDK1.1 compliant browser. Visit Browsers that Support Java for a list of browsers that support JDK1.1.

Welcome to the demo of the Table widget. Click on the "Start the Demo" button to start the demo. This creates a frame. The top half of the frame contains several controls (buttons etc.) that enable you to interact with the Table component in the bottom. Click on the "Stop the Demo" button to close the demo frame.

This demo expects that you have some exposure to the Java programming language.

Follow this link for source code.

Demo Guide

Here is your guide to the demo. Follow the links below.

Add/delete data Clear contets/table Selection and Action events Hilite mode
Separators Colors Fonts Resize


Add/delete data

This demo uses a preset array of strings as data. When the demo starts, an instance of the Table Widget is already created for you in the bottom area (just above the status line).

Add/delete rows and columns: To be able to create column titles, columns should be added first. Click on the "Add" buttons against "Column" and "Row" to create columns and rows of data respectively.

Similarly the two "Delete" buttons will delete columns and rows respectively.

To add (insert) or to delete a specific row/column, also specify the row and column numbers in the respective edit fields. Note that the row and column numbers start from 0.

Manual selection of rows and columns: Enter any row or column number in the "Column" or "Row" edit fields to programmatically select any row or column. Rows that are outside the display are brought into display if necessary.

[Back to the Demo Guide]

Clear table

At any time, to remove the contents of the table click on "Clear the contents" button. This will remove all the data but leaves the structure of the table. To clear the table (including  the header) click on "Clear the table" button. Data can again be added with the Add/delete buttons.

[Back to the Demo Guide]

Attributes: Selection and Action events

Data selection can be done in two modes: single-click, and double-click. In the double-click mode selection and action events occur upon single and double clicks respectively; while these events occur mouse focus and mouse click respectively in the single-click mode. See the model for more details. Toggle between the "Single-click" and "Double-click" checkboxes to see this in action. Try "Multiple selections" in "Double-click" mode.

Watch the status bar to find the details of selection/delection/action events. These are captured by the listener objects.

[Back to the Demo Guide]

Attributes: Hilite

Table widget selection of rows, columns or elements. In each of these modes, a row or a column or an element will be hilited. Multiple selection hilites all the selected data.

[Back to the Demo Guide]

Attributes: Separators

Add row and column separators by selecting the "Row" and "Column" checkboxes.

[Back to the Demo Guide]

Attributes: Colors

Set normal and reverse colors for the data area of the Table widget. Color setting for the header area is not included in this demo.

[Back to the Demo Guide]

Attributes: Fonts

Click on the "Change" buttons to open the FontChooser dialog.

[Back to the Demo Guide]

Resize

Resize the window to see automatic scaling of table. Also try to resize the columns by dragging the narrow active regions between the columns in the header. These areas are shown in red color when in mouse focus.

Table widget is a resizable component.

[Back to the Demo Guide]


Last modified: Fri Jun 18 11:48:47 India Standard Time 1999

© Subbu Allamaraju 1998, 1999. All rights reserved.

All copyrights and trademarks acknowledged.