Displaying Data in Grids

It is a very common task to display data in a table-like grid. For this, you can use the grid tag. The grid tag is used to create a Grid object. The Grid class is a subclass of BaseGrid, which itself is derived form BaseComponent.

Table 8.2 shows the attributes defined in the BaseGrid class and Table 8.3 presents the attribute defined in the Grid class.

Table 8.2. The attributes defined in the BaseGrid class
NameUsageTypeDefaultAccessibility
bgcolor0Tag and JScolor code read-write
 Description. The background color for even-numbered rows.
bgcolor1Tag and JScolor code read-write
 Description. The background color for odd-numbered rows.
columnsTag and JSobject read-write
 Description. An array containing the basegridcolumns used by this grid.
contentdatapathTag onlystring*read-write
 Description. The datapath to use for the contents of the grid.
hiliteTag and JSLzView read-write
 Description. The view which is currently highlighted.
multiselectTag and JSBooleantrueread-write
 Description. Indicates whether or not multi selection is allowed.
rowheightTag and JSnumber read-write
 Description. The height of the rows in pixels.
selectableTag and JSbooleantrueread-write
 Description. Indicates whether or not the rows are selectable.
showhlinesTag and JSbooleanfalseread-write
 Description. Indicates whether or not the lines between two columns are displayed.
shownitemsTag and JSnumber-1read-write
 Description. The number of rows visible at a time.
showvlinesTag and JSbooleanfalseread-write
 Description. Indicates whether or not the lines between two rows are displayed.
sizetoheaderTag and JSboolean read-write
 Description. Indicates if the grid will keep its width set to the size of the header.
spacingTag and JSnumber0read-only
 Description. The spacing between the rows.

Table 8.3. The attribute added to the Grid class
NameUsageTypeDefaultAccessibility
showhscrollTag and JSbooleantrueread-write
 Description. Indicates whether or not to display a horizontal scrollbar.

The code in Listing 8.6 shows how to display data in a grid.

Listing 8.6. Using grid
<canvas height="300" width="500">
    <dataset name="myData" src="library.xml"/>
    <grid datapath="myData:/library" contentdatapath="book">
        <gridcolumn width="100">
            ISBN
            <text datapath="isbn/text()"/>
        </gridcolumn>
        <gridcolumn width="200">
            Title
            <text datapath="title/text()"/>
        </gridcolumn>
        <gridcolumn width="100">
            Price
            <text datapath="price/text()"/>
        </gridcolumn>
        <gridcolumn width="100">
            Available
            <view >
                <checkbox align="center"
                        value="$path{'@available'}"/>
            </view>
        </gridcolumn>
    </grid>
</canvas>

Note that the check box is placed in a view so that it can be centered.

<view >
    <checkbox align="center"
        value="$path{'@available'}"/>
</view>

To test the application in Listing 8.6, direct your browser to this URL:

http://localhost:8080/lps-4.0.x/app08/gridTest1.lzx

Figure 8.2 shows the result.

Figure 8.2. Displaying data in a grid

[View full size image]

In addition, you can also use the gridtext tag, which is an extension of gridcolumn. The gridtext tag adds the editable attribute. A column whose editable attribute is true (the default) will be editable.

The application in Listing 8.7 shows how to use gridtext.

Listing 8.7. Using gridtext
<canvas height="300" width="500">
    <dataset name="myData" src="library.xml"/>
    <grid datapath="myData:/library" contentdatapath="book">
        <gridtext width="100" editable="false"
                datapath="isbn/text()">
            ISBN
        </gridtext>
        <gridtext width="200" datapath="title/text()">
            Title
        </gridtext>
        <gridtext width="100" datapath="price/text()">
            Price
        </gridtext>
        <gridcolumn width="100">
            Available
            <view >
                <checkbox align="center"
                        value="$path{'@available'}"/>
            </view>
        </gridcolumn>
    </grid>
</canvas>

Note that when using gridtext, you don’t need to use the text tag. Instead, you can use the datapath attribute of the gridtext tag.

You can run the LZX application in Listing 8.7 by using this URL:

http://localhost:8080/lps-4.0.x/app08/gridTextTest1.lzx

The generated application is displayed in Figure 8.3. Note that the Title and Price columns are editable.

Figure 8.3. Using gridtext

[View full size image]

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset