Control API for Form Layout (formLayout)

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 Req. Values Default Case sens. JSP Taglib Classlib
debugMode no FALSE
TRUE 		FALSE yes debugMode="TRUE" setDebugMode(true)
id no String none yes id="ZIPCode_form" setId("ZIPCode_form")
marginBottom no Unit 0 no marginBottom="5" setMarginBottom("5")
marginLeft no Unit 0 no marginLeft="5" setMarginLeft("5")
marginRight no Unit 0 no marginRight="5" setMarginRight("5")
marginTop no Unit 0 no marginTop="5" setMarginTop("5")
width no Unit 100% no width="500" 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 Req. Values Default Case sens. JSP Taglib Classlib
id no String none yes id="ZIPCode_row01" setId("ZIPCode_row01")
padding no Numeric 0 -   setPadding(top, bottom)
e.g. setPadding("5", "3")
paddingBottom no Numeric 0 - paddingBottom="3" setPaddingBottom("3")
paddingTop no Numeric 0 - paddingTop="5" 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 Req. Values Default Case sens. JSP Taglib Classlib
align no LEFT
RIGHT
CENTER
CHAR
JUSTIFY 		LEFT yes align="LEFT" setHorizontalAlignment(CellHAlign.LEFT)
colSpan no Numeric 1 -   setColSpan(2)
content no String none no   Text: setContent("A celltext")
Component:setContent(ListBox)
id no String none yes id="Cell01" setId("Cell01")
paddingBottom no Numeric 0 - paddingBottom="1" setPaddingBottom("1")
paddingLeft no Numeric 0 - paddingLeft="5" setPaddingLeft("5")
paddingRight no Numeric 0 - paddingRight="3" setPaddingRight("3")
paddingTop no Numeric 0 - paddingTop="2" setPaddingTop("2")
valign no BASELINE
BOTTOM
MIDDLE
TOP 		MIDDLE yes valign="TOP" setVerticalAlignment(CellVAlign.TOP)
width no Unit - - width="20%" 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>
Example 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