.. _tutor/pagina/formbuilder:

Formbuilder
===========




Uno dei compiti più fastidiosi nella creazione di una form è il piazzamento di coppie etichetta/valore in un modo semplice e con un risultato estetico gradevole.
In Genropy si utilizza molto spesso uno strumento per posizionare i campi chiamato **formbuilder**. Il formbuilder crea una tabella html opportunamente costruita
e molto pratica per impaginare i campi.

.. raw:: html

    <iframe src="https://player.vimeo.com/video/546418963" width="100%" height="315" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe><hr>
    

Prendiamo l'esempio visto nella lezione sul  :ref:`datastore<tutor/pagina/datastore>`  e facciamone una versione che utilizza il formbuilder.

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 250, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "tutor/pagina/formbuilder", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Esempio con formbuilder ", "example_name": "_base_"} );'>
                Esempio con formbuilder 
            </a>
            <div></div>
        </div> 
        

.. hint::  
  Per un dettaglio sul funzionamento del formbuilder e sui parametri utilizzabili si rimanda alla lezione dedicata nella `Widgetpedia <https://docs.genropy.org/widgetpedia/gnrwidgets/formbuilder/formbuilder.html>`_

Esaminando il codice vediamo che viene creato un formbuilder::

       fb=root.formbuilder(cols=2)
   
   
Con questa istruzione ci viene restituito un formbuilder impaginato su 2 colonne al quale 
andiamo ad aggiungere man mano gli elementi voluti::

        fb.input('^parameters.string_to_show',lbl='String To Show',width='100%',colspan=2)
        fb.input('^parameters.color',lbl='Color')
       

Notiamo che all'elemento **input** passiamo un parametro **lbl** che non rientrerebbe
nei parametri dell'input stesso. Infatti viene *rubato* dal formbuilder e usato per fare 
definire l'etichetta da assegnare all'elemento inserito nel formbuilder.

Il formbuilder è in realtà una tabella HTML e quindi possiamo ad esempio usare gli attributi
``colspan`` e ``rowspan``.

Avendo usato un formbuilder a 2 colonne otteniamo una disposizione dei campi che rispetta tale scelta.

Vediamo ora lo stesso esempio con un formbuilder a 3 colonne.

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 250, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "tutor/pagina/formbuilder", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Esempio formbuilder a 3 colonne ", "example_name": "three_columns"} );'>
                Esempio formbuilder a 3 colonne 
            </a>
            <div></div>
        </div> 
        

Rispetto all'esempio precedente notiamo che al formbuilder passiamo più parametri::

    fb=root.formbuilder(cols=3, border_spacing='2px',colswidth='auto',
                             lbl_color='darkgreen',width='500px',fld_width='100%')
                             
- cambiamo il numero delle colonne,
- assegniamo una larghezza al formbuilder con l'attributo colswidth='auto',
- chiediamo di autocalcolare le larghezze,
- inoltre con il prefisso ``lbl_`` assegniamo l'attributo colore a TUTTE le label.

Vediamo che però possiamo ridefinire tale attributo per i campi voluti::

  fb.input('^parameters.rounded',lbl='Rounded',lbl_color='darkblue')

.. hint ::
   
   Come regola generale ricorda che spessissimo in Genropy si usa la tecnica
   di parametri prefissati per indirizzare il valore ad una parte specifica. 
   In questo caso ``lbl_`` significa che parliamo della label. Se volessimo
   assegnare la larghezza della label potremmo fare lbl_width e via dicendo.
   
   Nel caso del formbuilder possiamo assegnare attributi globali a livello di formbuilder
   anche al campo con ``fld_`` alla cella del campo con ``tdf_``,
   alla cella della label con ``tdl_``.