Control API for Grid Layout (gridLayout)

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. 
  • 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".



  • 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 Req. Values Default Case sens. JSP Taglib Classlib
cellPadding no Numeric 0 - cellPadding="5" setCellPadding(5)
cellSpacing no Numeric 0 - cellSpacing="5" setCellSpacing(5)
columnSize no Numeric none - columnSize="3" setColumnSize(3)
debugMode no FALSE
TRUE 		FALSE yes debugMode="TRUE" setDebugMode(true)
id yes String none yes id="ZIPCode_grid" setId("ZIPCode_grid")
rowSize no Numeric none - rowSize="5" setRowSize(5)
width no Unit 100% no width="500" 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 e.g. 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.
  • 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 Req. Values Default Case sens. JSP Taglib Classlib
columnIndex yes Numeric none - columnIndex="2" setColumnIndex(2)
colSpan no Numeric 0 -   setColSpan(100)
content no String none no   Text: setContent("A celltext")
Component:setContent(ListBox)
heightPercentage no Numeric 0 -   setHeightPercentage(20)
horizontalAlignment no LEFT
RIGHT
CENTER
CHAR
JUSTIFY 		LEFT yes horizontalAlignment="LEFT" setHAlignment(CellHAlign.LEFT)
id no String none yes id="Cell01" setId("Cell01")
rowIndex yes Numeric none - rowIndex="1" setRowIndex(1)
style no String none no style="WildStyle" setStyle("WildStyle")
verticalAlignment no BASELINE
BOTTOM
MIDDLE
TOP 		MIDDLE yes verticalAlignment="TOP" setVAlignment(CellVAlign.TOP)
width no Unit - - width="20%" setWidth("20%")

 

Example using the taglib
<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>
Example using the classlib
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);

Result