5. formbuilder

5.1. definition and attributes

GnrDomSrc.formbuilder(cols=1, table=None, tblclass='formbuilder', lblclass='gnrfieldlabel', lblpos='L', _class='', fieldclass='gnrfield', lblalign=None, lblvalign='middle', fldalign=None, fldvalign='middle', disabled=False, rowdatapath=None, head_rows=None, **kwargs)

In formbuilder you can put dom and widget elements; its most classic usage is to create a form made by fields and layers, and that’s because formbuilder can manage automatically fields and their positioning

Parameters:
  • cols – set the number of columns
  • table – the database table name on which the query will be executed, in the form packageName.tableName (packageName is the name of the package to which the table belongs to)
  • tblclass – the standard class for the formbuilder. Default value is 'formbuilder', that actually it is the unique defined class
  • lblclass – set label style
  • lblpos – set label position: L: set label on the left side of text field T: set label on top of text field
  • _class – for CSS style
  • fieldclass – CSS class appended to every formbuilder’s child
  • lblalign – Set horizontal label alignment (It seems broken... TODO)
  • lblvalign – set vertical label alignment
  • fldalign – set field horizontal align
  • fldvalign – set field vertical align
  • disabled – If True, user can’t act on the object (write, drag...)
  • rowdatapath – TODO
  • head_rows – TODO
  • **kwargs – for the complete list of the **kwargs, check the kwargs list section

Example:

class GnrCustomWebPage(object):
    def main(self, root, kwargs):
        fb = root.formbuilder()
        fb.textbox(value='^.name',lbl='First Label')
        fb.textbox(value='^.surname',lbl='Second Label')

5.2. attributes

5.2.1. formbuilder attributes

We have explained the formbuilder attributes in the formbuilder definition and attributes section.

5.2.2. formbuilder’s fields attributes

The formbuilder supports many attributes for its fields, that are:

  • colspan: Set the number of columns occupied by a single child. Default value is 1

  • label: If possible, set a label for formbuilder right field_part (more details on this example). Default value is None

  • lbl: If possible, set a label for formbuilder left field_part (more details on this example). Default value is None

  • pos: Choose element position. The default value is the first free position. The syntax is pos(NUMBER,NUMBER), whereas the first value represents a row, the second value represents a column. Other feature: “pos” accepts as a number row two special characters:

    ``+`` to refer itself at the following row
    ``*`` to refer itself at the current row
  • value: Set a path for formbuilder’s values. For more details, see datapath. Default value is None

5.2.3. kwargs list

The formbulder accepts every CSS and CSS3 attribute. We list here some additional attributes and some css attributes that have a default value in the formbuilder:

  • border_spacing: define the space between form fields. Default value is 6px
  • datapath: set the root’s path of formbuilder’s fields. For more details, check the datapath documentation page.
  • width: define the formbuilder width. You can use a width in pixel, em, ex. You can use a percentage, too (e.g: width='60%'), if the formbuilder is a child of a ContentPane or a div with a defined width and height

5.2.4. CSS attributes

There also 5 prefixes that allow to define the dimensions of every formbuilder part. They can be used in combo with any CSS expression.

In order to understand the usage of the 5 prefixes, keep in mind the conversion of the formbuilder structure into the HTML (we saw it at the beginning of the page)

Let’s see now the 5 attributes:

  • fld_ + CSS attribute: set a CSS expression to every field. (e.g: fld_color=’red’, fld_width=‘100%’)
  • lbl_ + CSS attribute: set a CSS expression to every label. (e.g: lbl_width=‘10em’)
  • row_ + CSS attribute: set a CSS expression to every row.
  • tdf_ + CSS attribute: set a CSS expression to every <td></td> tag associated to a formuilder’s field.
  • tdl_ + CSS attribute: set a CSS expression to every <td></td> tag associated to a formuilder’s label.

5.3. label and lbl: an explanation

Every formbuilder column is splitted in two parts (left one and right one): in the left one lies the value of the “lbl” attribute, while in the right one lies the value of the “label” attribute

Note

the rule is: in the formbuilder you have to use the “lbl” attribute to specify the label, except for:

in which you have to use the “label” attribute.

Example:

class GnrCustomWebPage(object):
    def main(self,root,**kwargs):
        fb = pane.formbuilder(datapath='test2',cols=2)
        fb.textbox(value='^.name',lbl='Name')
        fb.textbox(value='^.surname',lbl='Surname')
        fb.textbox(value='^.job',lbl='Profession')
        fb.numberTextbox(value='^.age',lbl='Age')
        fb.div('Favorite sport:')
        fb.div('Favorite browser:')
        fb.checkbox(value='^.football',label='Football')
        fb.radiobutton(label='Internet explorer',value='^.radio1',group='genre1')
        fb.checkbox(value='^.basketball',label='Basketball')
        fb.radiobutton('Mozilla Firefox',value='^.radio2',group='genre1')
        fb.checkbox(value='^.tennis',label='Tennis')
        fb.radiobutton('Google Chrome',value='^.radio3',group='genre1')

5.4. examples

Let’s see a code example:

class GnrCustomWebPage(object):
    def main(self,root,**kwargs):
        bc = root.borderContainer(datapath='testForm')
        fb = bc.formbuilder(cols=2,fld_width='10em',hidden='^.hidden',visible='^.visible')
        fb.textbox(value='^.name', lbl='Name')
        fb.textbox(value='^.surname', lbl='Surname')
        fb.numberTextbox(value='^.age', lbl="Age", width='4em')
        fb.dateTextbox(value='^.birthdate', lbl='Birthdate')
        fb.filteringSelect(value='^.sex', values='M:Male,F:Female', lbl='Sex')
        fb.textbox(value='^.job.profession', lbl='Job')
        fb.textbox(value='^.job.company_name', lbl='Company name')