Form Layout (SAP Library - Running an Enterprise Portal)

Form Layout

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

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

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

Using the classlib

    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);

Result

This graphic is explained in the accompanying text