Table of Contents Markup Tutorial Interfacing with Java™ Web Services

Calendar

Advanced Table Features

Note: For an explanation of how to implement a basic calendar using a table and spinners, see Advanced Object Composition.

A table is a standard presentation component. As such, its appearance can be easily manipulated through the usual assortment of presentation attributes such as foreground and background applied to a table element. In addition, the table element type supports a large number of table-specific attributes that can be used to radically alter the appearance of a table using markup alone.

Table Appearance

The following example shows some of the table attributes applied to the table element from the original calendar example.

<scrollPane preferredSize="300 100">
    <table model="#calendarModel" rowHeight="16"
        showGrid="false" background="orange"/>
</scrollPane>

See full listing for this example.

Table Cell Renderer

While the previous example changed the background of the whole table, the next example uses a table cell renderer to paint cells one at a time.

<scrollPane preferredSize="300 100">
    <reserve>
        <label id="hot" background="orange"
            horizontalAlignment="center"
            class="javax.swing.table.DefaultTableCellRenderer"/>
    </reserve>
    <table model="#calendarModel" rowHeight="16"
        renderer="#hot" gridColor="white"/>
</scrollPane>

See full listing for this example.

Multiple Renderers

It is quite easy to specify table cell renderers on a per-column basis, as shown by the following example.

<scrollPane preferredSize="300 100">
    <reserve>
        <label id="weekend" background="orange"
            horizontalAlignment="center"
            class="javax.swing.table.DefaultTableCellRenderer"/>
        <label id="weekday" background="#CCCCFF"
            horizontalAlignment="center"
            class="javax.swing.table.DefaultTableCellRenderer"/>
        <columnModel id="days">
            <column title="S" renderer="#weekend"
                    preferredWidth="30"/>
            <column title="M" renderer="#weekday"/>
            <column title="T" renderer="#weekday"/>
            <column title="W" renderer="#weekday"/>
            <column title="T" renderer="#weekday"/>
            <column title="F" renderer="#weekday"/>
            <column title="S" renderer="#weekend"
                    preferredWidth="30"/>
        </columnModel>
    </reserve>
    <table model="#calendarModel" rowHeight="16" gridColor="white"
        columnModel="#days" autoCreateColumns="false"/>
</scrollPane>

See full listing for this example.

Rendering with Icons

There is no reason why the labels used to render table cells should be restricted to text. The following example shows how to use icons in table cell renderers.

<scrollPane preferredSize="300 230">
    <reserve>
        <label id="weekend"
            horizontalAlignment="center"
            horizontalTextPosition="center"
            icon="images/orangeRoundButton.gif"
            class="javax.swing.table.DefaultTableCellRenderer"/>
        <label id="weekday" foreground="#3333FF"
            horizontalAlignment="center"
            horizontalTextPosition="center"
            icon="images/roundButton.gif"
            class="javax.swing.table.DefaultTableCellRenderer"/>
        <columnModel id="days">
            <column title="S" renderer="#weekend"/>
            <column title="M" renderer="#weekday"/>
            <column title="T" renderer="#weekday"/>
            <column title="W" renderer="#weekday"/>
            <column title="T" renderer="#weekday"/>
            <column title="F" renderer="#weekday"/>
            <column title="S" renderer="#weekend"/>
        </columnModel>
    </reserve>
    <table model="#calendarModel" rowHeight="42" showGrid="false"
        columnModel="#days" autoCreateColumns="false"
        rowSelectionAllowed="false"/>
</scrollPane>

See full listing for this example.

Transparency and Translucency

Striking effects can be achieved by using transparency and translucency in tables. For a primer on how to use images as backgrounds for presentation components, see Image Background.

<label icon="images/starfish.gif" preferredSize="300 100"/>
    <reserve>
        <label id="weekend"
            horizontalAlignment="center"
            horizontalTextPosition="center"
            icon="images/orangeRoundButton.gif"
            class="javax.swing.table.DefaultTableCellRenderer"/>
        <label id="weekday" foreground="#3333FF"
            horizontalAlignment="center"
            horizontalTextPosition="center"
            icon="images/roundButton.gif"
            class="javax.swing.table.DefaultTableCellRenderer"/>
        <columnModel id="days">
            <column title="S" renderer="#weekend"/>
            <column title="M" renderer="#weekday"/>
            <column title="T" renderer="#weekday"/>
            <column title="W" renderer="#weekday"/>
            <column title="T" renderer="#weekday"/>
            <column title="F" renderer="#weekday"/>
            <column title="S" renderer="#weekend"/>
        </columnModel>
    </reserve>
    <borderLayout/>
    <scrollPane opaque="false">
        <table model="#calendarModel" rowHeight="32"
            columnModel="#days" autoCreateColumns="false"
            rowSelectionAllowed="false" opaque="false"
            showGrid="false" intercellSpacing="8 8"/>
    </scrollPane>
</label>

See full listing for this example.

Pick a month and year such as December, 2001 so that the calendar has six rows of dates. Now observe the table cells as you scroll the table view — The image in the background maintains its position, while the translucent table cells srcoll in tandem with the scrollbar thumb.

Copyright © 2002 eNode, Inc. All Rights Reserved.