Show TOC

Object documentationForm Layout Locate this document in the navigation structure

 

Control API

A grid is a two dimensional arrangement of data in rows and columns. The control is similar to gridLayout but has more features in adjusting the cells of the grid. If no formLayoutCells are defined no formLayout is displayed.

Limitation:

Large formLayouts (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

  • debugMode

    A Boolean value. If set to "TRUE" the formLayoutCell is rendered with a frame. The frame size is defined by formLayoutCell 'width' and the padding. If a formLayoutCell is not defined or empty no frame is displayed. If set to "FALSE" no frame is rendered.

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

    Note 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.

  • id

    Identification name of the formLayout. You have to specify an id if you want to access the control.

  • marginBottom

    Specifies the distance from the bottom of the control to the next control.

  • marginLeft

    Specifies the distance from the "actual" position to the left side of the control.

  • marginRight

    Specifies distance from the right side of the control to the next control.

  • marginTop

    Specifies distance from the "actual" position to the top of the control.

  • width

    Defines the width of the formLayout. If the 'width' in formLayoutCell is specified in percent, the percentage will be calculated from the width of the formLayout. If the formLayoutCell definition exceeds the 'width' of the formLayout the formLayoutCell content will be wrapped.

Attribute

M

Values

Usage

debugMode

FALSE (d)

TRUE

Taglib

debugMode="TRUE"

Classlib

setDebugMode(true)

id

*

String

Taglib

id="ZIPCode_form"

Classlib

setId("ZIPCode_form")

marginBottom

Unit (0)

Taglib

marginBottom="5"

Classlib

setMarginBottom("5")

marginLeft

Unit (0)

Taglib

marginLeft="5"

Classlib

setMarginLeft("5")

marginRight

Unit (0)

Taglib

marginRight="5"

Classlib

setMarginRight("5")

marginTop

Unit (0)

Taglib

marginTop="5"

Classlib

setMarginTop("5")

width

Unit (100%)

Taglib

width="500"

Classlib

setWidth("500")
formLayoutRow

Defines the rows in the formLayout. The cells (formLayoutCell) have to be nested in form layout rows.

  • id

    Identification name of the formLayoutRow. You have to specify an id if you want to access the control.

  • paddingBottom

    Specifies the bottom padding of each row in the form layout. The value of the paddingBottom attribute represents the distance from the bottom border of the cell to the bottom of the content of each row specified in pixels.

  • paddingTop

    Specifies the top padding of each row in the form layout. The value of the paddingTop attribute represents the distance from the top border of the cell to the top of the content of each row specified in pixels.

Attribute

M

Values

Usage

Id

String (cs)

Taglib

id="ZIPCode_row01"

Classlib

setId("ZIPCode_row01")

padding

Numeric (0)

Classlib

setPadding(String top, String bottom)

for example:

setPadding("5", "3")

paddingBottom

Numeric (0)

Taglib

paddingBottom="3"

Classlib

setPaddingBottom("3")

paddingTop

Numeric (0)

Taglib

paddingTop="5"

Classlib

setPaddingTop("5")
formLayoutCell

Defines the cells in the formLayoutRow.

  • align

    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.

  • colspan

    Defines the horizontal expansion the cell in columns.

  • content

    Specifies the content for the cell.

  • id

    Identification name of the formLayoutCell.

  • paddingBottom

    Specifies the bottom padding of each cell in the form layout. The value of the paddingBottom attribute represents the distance from the bottom border of the cell to the bottom of the content of each cell specified in pixels.

  • paddingLeft

    Specifies the left padding of each cell in the form layout. The value of the paddingLeft attribute represents the distance from the left border of the cell to the left side of the content of each cell specified in pixels.

  • paddingRight

    Specifies the right padding of each cell in the form layout. The value of the paddingRight attribute represents the distance from the right border of the cell to the right side of the content of each cell specified in pixels.

  • paddingTop

    Specifies the top padding of each cell in the form layout. The value of the paddingTop attribute represents the distance from the top border of the cell to the top of the content of each cell specified in pixels.

  • valign

    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 formLayoutCell. 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

JSP Taglib

align

LEFT (d)

RIGHT

CENTER

CHAR

JUSTIFY

Taglib

align="LEFT"

Classlib

setHorizontalAlignment(CellHAlign.LEFT)

colspan

Numeric (1)

Taglib

colspan="2"

Classlib

setColspan(2)

content

String or Component

Classlib

Text: setContent("A celltext")

Component: setContent(ListBox)

id

String (cs)

Taglib

id="Cell01"

Classlib

setId("Cell01")

paddingBottom

Numeric (0)

Taglib

paddingBottom="1"

Classlib

setPaddingBottom("1")

paddingLeft

Numeric (0)

Taglib

paddingLeft="5"

Classlib

setPaddingLeft("5")

paddingRight

Numeric (0)

Taglib

paddingRight="3"

Classlib

setPaddingRight("3")

paddingTop

Numeric (0)

Taglib

paddingTop="2"

Classlib

setPaddingTop("2")

valign

BASELINE

BOTTOM

MIDDLE (d)

TOP

Taglib

valign="TOP"

Classlib

setVerticalAlignment(CellVAlign.TOP)

width

Unit

Taglib

width="20%"

Classlib

setWidth("20%")

Example

Using the taglib

Syntax Syntax

  1.     <hbj:formLayout 
        id="myForm"
        marginTop="15px"
        marginRight="30px"
        marginBottom="5px"
        marginLeft="15px"
        width="500px">
        <hbj:formLayoutRow 
                id="Row1"
                paddingTop="10px"
                paddingBottom="5px">
                <hbj:formLayoutCell 
                        id="Cell11"
                        align="RIGHT"
                        paddingLeft="3"
                        paddingTop="5"
                        paddingRight="10"
                        paddingBottom="5"
                        width="40%">
                        <hbj:button 
                                id="myButtonf11"
                                text="Button"
                                />
                </hbj:formLayoutCell>
                <hbj:formLayoutCell 
                        id="Cell12"
                        align="LEFT"
                        paddingLeft="3"
                        paddingTop="5"
                        paddingRight="10"
                        paddingBottom="5">
                        <hbj:textView 
                                text="Celltext aligned left"
                                />
                </hbj:formLayoutCell>
        </hbj:formLayoutRow>
        <hbj:formLayoutRow 
                id="Row2"
                paddingTop="10px"
                paddingBottom="5px">
                <hbj:formLayoutCell 
                        id="Cell21"
                        align="LEFT"
                        paddingLeft="3"
                        paddingTop="5"
                        paddingRight="10"
                        paddingBottom="5">
                        <hbj:button 
                                id="myButtonf21"
                                text="Button"
                                />
                </hbj:formLayoutCell>
                <hbj:formLayoutCell 
                        id="Cell22"
                        align="RIGHT"
                        paddingLeft="3"
                        paddingTop="5"
                        paddingRight="10"
                        paddingBottom="5">
                        <hbj:textView 
                                encode="false"
                                text="Celltext aligned right"
                                />
                </hbj:formLayoutCell>
        </hbj:formLayoutRow>
    </hbj:formLayout>
End of the code.
Using the classlib

Syntax Syntax

  1.     Form form = (Form)this.getForm();
    FormLayout fl = new FormLayout();
    fl.setId("myForm");

    fl.setMarginTop("15px");
    fl.setMarginRight("30px");
    fl.setMarginBottom("5px");
    fl.setMarginLeft("15px");
    fl.setWidth("500px");
    fl.setDebugMode(true);

    FormLayoutRow row1 = fl.addRow();
    row1.setPaddingTop("10px");
    row1.setPaddingBottom("5px");

    Button button = new Button("button", "button");
    FormLayoutCell cell11 = fl.addComponent(1,1, button);
    cell11.setHorizontalAlignment(CellHAlign.RIGHT);
    cell11.setPaddingLeft("3");
    cell11.setPaddingTop("5");
    cell11.setPaddingRight("10");
    cell11.setPaddingBottom("5");
    cell11.setWidth("40%");

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

    FormLayoutCell cell12 = fl.addComponent(1,2, tv1);
    cell12.setHorizontalAlignment(CellHAlign.LEFT);
    cell12.setPaddingLeft("3");
    cell12.setPaddingTop("5");
    cell12.setPaddingRight("10");
    cell12.setPaddingBottom("5");
    cell12.setWidth("40%");

    FormLayoutRow row2 = fl.addRow();
    row2.setPaddingTop("10px");
    row2.setPaddingBottom("5px");

    Button button2 = new Button("button2", "button");
    FormLayoutCell cell21 = fl.addComponent(2,1, button2);
    cell21.setHorizontalAlignment(CellHAlign.LEFT);
    cell21.setPaddingLeft("3");
    cell21.setPaddingTop("5");
    cell21.setPaddingRight("10");
    cell21.setPaddingBottom("5");
    cell21.setWidth("40%");

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

    FormLayoutCell cell22 = fl.addComponent(2,2, tv2);
    cell22.setHorizontalAlignment(CellHAlign.RIGHT);
    cell22.setPaddingLeft("3");
    cell22.setPaddingTop("5");
    cell22.setPaddingRight("10");
    cell22.setPaddingBottom("5");
    cell22.setWidth("40%");

    form.addComponent(fl);
End of the code.
Result

This graphic is explained in the accompanying text.