Grid Layout

Control API

A grid is a two dimensional arrangement of data in rows and columns. To avoid unexpected results, the rows and columns should always be defined by gridLayoutCells instead of using the 'columnSize' and 'rowSize' attribute. With the gridLayoutCell you have control over the width of the gridLayoutCell while using the "columnSize" the renderer and web client take the control. Especially in combination with 'debugMode' attribute set to "FALSE", the layout of the grid is not displayed as expected. If no gridLayoutCells are defined no gridLayout is displayed.

Limitation:

Large gridLayouts (large amount of rows and columns) can cause problems like:

Compiler errors that are caused by a 64kB method length limit.
Slow processing of page because of huge HTML-Code generated by the JSP-Compiler

To avoid these problems you could use the gridLayout tag and combine it with <tr> & <td> tags.

cellPadding
Defines the padding of each cell in the grid layout. The value of the cell padding attribute represents the distance from the border of the cell to the content of each cell specified in pixels.

Note
The cellPadding is applied to the top, left, right and bottom of the cell.

End of the note.
cellSpacing
Specifies the space between the left side of the gridLayout and the left-hand side of the leftmost gridLayoutCell, the top of the gridLayout and the top side of the topmost row and so on for the right and bottom of the gridLayout. The attribute also specifies the amount of space to leave between the gridLayoutCells. Defines the spacing between cells and the outer boundary in the grid layout in pixels.
columnSize
Defines the number of columns for the gridLayout. The columns are defined with the gridLayoutCell control and 'ColumnSize' is overruled by the gridLayoutCell definition.
debugMode
A Boolean value. If set to "TRUE" the gridLayoutCell is rendered with a frame. The frame size is defined by gridLayoutCell 'width' and the 'cellpadding'. If a gridLayoutCell is not defined or empty no frame is displayed. If set to "FALSE" no frame is rendered. Please check the gridLayout description above for limitations.

By default the borders of the grid are invisible. To see the borders for layout and debug reasons set the debug attribute.

Note
Setting the debugMode attribute will add pixels to visualize borders. Therefore the sizes of the grid layout will change if you reset the attribute. The debugMode attribute, as indicated by the name, should only be used for debugging and not for "styling".

End of the note.
heightPercentage
Sets the height of the grid in percent.
id
Identification name of the gridLayout.
rowSize
Defines the number of rows for the gridLayout. The 'rowSize' is overruled when more rows are defined with the gridLayoutCell control then specified with the 'rowSize' attribute. If 'rowSize' is higher than the rows defined by the gridLayoutCell, the frame height of the gridLayout is extended.
width
Defines the width of the gridLayout. If the 'width' in gridLayoutCell is specified in percent, the percentage will be calculated from the width of the gridLayout and not from the width of the form. If the gridLayoutCell definition exceeds the 'width' of the gridLayout the gridLayoutCell content will be wrapped.

Attribute	M	Values	Usage
cellPadding		Numeric (0)	Taglib `cellPadding="5"` Classlib `setCellPadding(5)`
cellSpacing		Numeric (0)	Taglib `cellSpacing="5"` Classlib `setCellSpacing(5)`
columnSize		Numeric (0)	Taglib `columnSize="3"` Classlib `setColumnSize(3)`
debugMode		FALSE (d) TRUE	Taglib `debugMode="TRUE"` Classlib `setDebugMode(true)`
heightPercentage		Numeric (0)	Classlib `setHeightPercentage(20)`
id	*	String (cs)	Taglib `id="ZIPCode_grid"` Classlib `setId("ZIPCode_grid")`
rowSize		Numeric	Taglib `rowSize="5"` Classlib `setRowSize(5)`
width		Unit (100%)	Taglib `width="500"` Classlib `setWidth("500")`

gridLayoutCell

Defines the cells in the gridLayout.

columnIndex
Defines the horizontal position of the cell.
colSpan
Defines the horizontal expansion the cell in percent. If you specify for example, 100, the cell uses the whole gridLayout width. Cells right of this cell are omitted. A possible application for this attribute is to display headlines in the gridLayout.
content
Specifies the content for the cell.
heightPercentage
Sets the height of the gridLayout cell in percent.
horizontalAlignment
Defines the horizontal alignment of the cell content.
- LEFT
  Left justifies the content of the cell.
- RIGHT
  Right justifies the content of the cell.
- CENTER
  Centers the content of the cell.
- CHAR
  Aligns text around a specific character. Not supported by all web clients.
- JUSTIFY
  Sets text in the cell left and right aligned. Not supported by all web clients.
id
Identification name of the gridLayoutCell.
rowIndex
Defines the vertical position of the cell.
style
Defines the stylesheet to be used to display the cell.
verticalAlignment
Defines the vertical alignment of the cell content.
- BASELINE
  The content of the cell is aligned on the baseline line of the cell (or bottom when no baseline exits).
- BOTTOM
  The content of the cell is aligned to the bottom line of the cell.
- MIDDLE
  The content of the cell is aligned to the middle of the cell height.
- TOP
  The content of the cell is aligned to the top line of the cell.
width
Defines the width of the gridLayoutCell. One column can have only one width - when you specify different widths for the same column the width defined last is taken.

Attribute	M	Values	Usage
columnIndex	*	Numeric	Taglib `columnIndex="2"` Classlib `setColumnIndex(2)`
colSpan		Numeric (0)	setColSpan(100)
content		String	Classlib Text: `setContent("Celltext")` Component: `setContent(ListBox)`
heightPercentage		Numeric (0)	Classlib `setHeightPercentage(20)`
horizontalAlignment		LEFT (d) RIGHT CENTER CHAR JUSTIFY	Taglib `horizontalAlignment="LEFT"` Classlib `setHAlignment(CellHAlign.LEFT)`
id		String (cs)	Taglib `id="Cell01"` Classlib `setId("Cell01")`
rowIndex	*	Numeric	Taglib `rowIndex="1"` Classlib `setRowIndex(1)`
style		String	Taglib `style="WildStyle"` Classlib `setStyle("WildStyle")`
verticalAlignment		BASELINE BOTTOM MIDDLE (d) TOP	Taglib `verticalAlignment="TOP"` Classlib `setVAlignment(CellVAlign.TOP)`
width		Unit	Taglib `width="20%"` Classlib `setWidth("20%")`

Example

Using the taglib

Syntax Syntax

    <hbj:gridLayout 
        id="myGridLayout1"
        debugMode="True"
        width="40%"
        cellSpacing="5">
        <hbj:gridLayoutCell 
                rowIndex="1"
                columnIndex="1"
                width="10%"
                horizontalAlignment="RIGHT">
                <hbj:button 
                        id="myButton1"
                        text="Button"
                        tooltip="Button in the 1st row"
                        />
        </hbj:gridLayoutCell>
        <hbj:gridLayoutCell 
                id="myGridLayoutCell2"
                rowIndex="1"
                columnIndex="2"
                width="40%"
                horizontalAlignment="LEFT"
                verticalAlignment="BOTTOM">
                Celltext aligned left
        </hbj:gridLayoutCell>
        <hbj:gridLayoutCell 
                rowIndex="2"
                columnIndex="1"
                width="20%">
                <hbj:button 
                        id="myButton2"
                        text="Button"
                        tooltip="Button in the 2nd row"
                        />
        </hbj:gridLayoutCell>
        <hbj:gridLayoutCell 
                rowIndex="2"
                columnIndex="2"
                horizontalAlignment="RIGHT">
                Celltext aligned right
        </hbj:gridLayoutCell>
    </hbj:gridLayout>

End of the code.

Using the classlib

Syntax Syntax

    Form form = (Form)this.getForm();
    GridLayout gl = new GridLayout();
    gl.setId("myGrid");

    gl.setCellSpacing(5);
    gl.setWidth("40%");
    gl.setDebugMode(true);

    Button button = new Button("button", "button");
    GridLayoutCell cell11 = new GridLayoutCell("cell11");
    cell11.setHAlignment(CellHAlign.RIGHT);
    cell11.setWidth("10%");
    cell11.setContent(button);
    gl.addCell(1, 1, cell11);

    TextView tv1 = new TextView("tv1");
    tv1.setText("Celltext aligned left");

    GridLayoutCell cell12 = new GridLayoutCell("cell12");
    cell12.setHAlignment(CellHAlign.LEFT);
    cell12.setWidth("40%");
    cell12.setContent(tv1);
    gl.addCell(1, 2, cell12);

    Button button2 = new Button("button2", "button");
    GridLayoutCell cell21 = new GridLayoutCell("cell21");
    cell21.setHAlignment(CellHAlign.LEFT);
    cell21.setWidth("10%");
    cell21.setContent(button2);
    gl.addCell(2, 1, cell21);

    TextView tv2 = new TextView("tv2");
    tv2.setText("Celltext aligned right");

    GridLayoutCell cell22 = new GridLayoutCell("cell22");
    cell22.setHAlignment(CellHAlign.RIGHT);
    cell22.setWidth("40%");
    cell22.setContent(tv2);
    gl.addCell(2, 2, cell22);

    form.addComponent(gl);

End of the code.

Result

This graphic is explained in the accompanying text.