.. _tutor/pagina/widget:

Widgets
=======




Fino a questo momento abbiamo considerato solo elementi Html propriamente detti e
il `formBuilder <https://www.genropy.org/docs/widgetpedia/gnrwidgets/formbuilder.html>`_ che di fatto è una tabella Html. In questa lezione vedremo in modo molto riassuntivo alcuni dei widget che potremo usare per costruire le pagine. Rimandiamo per una descrizione completa di ogni singolo widget alla pagina specifica nella sezione `Widgetpedia <https://www.genropy.org/docs/widgetpedia/index.html>`_.

Widget di imputazione semplici
------------------------------
Prendiamo innanzitutto a titolo di esempio una serie di widget di imputazione semplici:

.. 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/widget", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Widget di input semplici ", "example_name": "_base_"} );'>
                Widget di input semplici 
            </a>
            <div></div>
        </div> 
        

Esaminiamo il codice dell'esempio::

  def main(self,root,**kwargs):  
      weekdays='1:Monday,2:Tuesday,3:Wednesday,4:Thursday,5:Friday,6:Saturday,7:Sunday'
      colors='DeepSkyBlue,Fuchsia,Coral,Crimson,GoldenRod,Gray,Navy,Maroon,Teal'

Per prima cosa il main definisce due variabili (weekdays e color), che verranno poi 
usate da alcuni widget. Notiamo che la prima è una lista di giorni della settimana nel formato ``numero_giorno:nome_giorno``, mentre la seconda è una lista di colori.


Creiamo poi un contenitore e mettiamo un formbuilder::

          pane=root.div(datapath='widgets', border='1px solid silver',
                      rounded='^.rounded', margin='10px')

          fb = pane.formbuilder(cols=2,lbl_font_weight='bold', lbl_color='^.lblcolor',
                                                 fld_width='100%', colswidth='auto',
                                                 margin='10px')
                                                 

Nella defiizione del contenitore abbiamo voluto usare l'attributo ``rounded`` in modo dinamico. Abbiamo infatti scritto ``rounded='^.rounded'`` in modo che il valore dell'arrotondamento, invece di essere costante, sia letto nel datastore all'indirizzo '.rounded'. Ricordiamo che iniziamo col sibolo '.' perchè usiamo un path relativo. Per la precisione il parametro ``datapath='widgets'`` è stato definito proprio nello stesso elemento.

Nel formbuilder abbiamo poi usato  ``lbl_color='^.lblcolor'`` come ulteriore esempio di
attributo dinamico, questa volta per tutte le label del formbuilder.

Passiamo ora all'esame dei widgets. 

Il primo widget usato è un **textBox** ovvero un widget analogo all'input html ma con alcune aggiunte rispetto ad esso::

   fb.textBox('^.name',lbl='Name',placeholder='John', tooltip="This is a textBox")

Il primo parametro è il valore, e precisamente il path dove mettere il valore digitato.
La segnatura dei widget consente sia di scrivere ``value='^miopath'``, sia di mettere il path come primo parametro della chiamata. Notiamo l'uso dell'attributo *placeholder* e del *tooltip*. Di default i tooltip sono mostrati tenendo premuto il tasto maiuscolo mentre si passa sopra col cursore (mouseover).


Vediamo ora l'uso del widget **numberTextBox** in due esempi, ovvero per valore intero e decimale::

        fb.numberTextBox('^.age',lbl='Age', placeholder='33',
                     tooltip="This is a NumberTextBox")
        
        fb.numberTextBox('^.weight',lbl='Weight', format='#.00',
                     tooltip="Weight Kg.")
                     
Notiamo l'attributo ``format='#.00'``  per definire la modalità di formattazione del valore.

Passiamo al **dateTextBox**::

   fb.dateTextBox('^.birthday',lbl='Birthday',
                     tooltip="This is a DateTextBox and you can click on icon")
        
Poi al **checkBox**::
    
   fb.checkBox('^.specialstuff',label='Special',
                                   tooltip="This is a checkBox")
               
Per selezionare un valore da una lista prefissata di coppie codice/valore si utilizza il widget **filteringSelect**::

    fb.filteringSelect('^.dayofweek',lbl='Day of week', 
          tooltip="""FilteringSelect: you can select only an existing value.  <br/>
                     You see the description but in the store we will have the value.""",
          values=weekdays)
          
In alternativa si può usare un **radioButtonText**::
 
    fb.radioButtonText('^.dayofweek',values=weekdays,
                        lbl='One Day',colspan=2,cols=4,
                        tooltip="""radioButtonText.Select your preferred day.""")

Notiamo che l'attributo ``cols=4`` consente di disporre i giorni su 4 colonne.

Per selezionare più elementi si usa un **checkBoxText** (con o senza ``popup``)::

   fb.checkBoxText('^.preferred_days',values=weekdays,
                        lbl='Preferred days',colspan=2,
                        cols=4,
                    tooltip="""CheckBoxText.Select your preferred days.""")
                    
   fb.checkBoxText('^.preferred_days',values=weekdays,cols=4,
                        lbl='Preferred days',popup=True,colspan=2,
                        tooltip="""CheckBoxText.Select your preferred days in popup
                                   or type them.""")
                                   
Proseguendo con i widget della form vediamo il comboBox::

   fb.comboBox('^.lblcolor',lbl='Labels Color', default_value='Gray',
                    values=colors,
                    tooltip="""This is a comboBox. <br/>
                               Select a default color for labels or type a new one.""" )
                               
A differenza della filteringSelect il comboBox consente non solo di selezionare valori 
da una lista, ma di mettere valori al di fuori di essa. Nel caso particolare il widget
è collegato al path ``'^.lblcolor'`` e quindi selezionando un colore tutte le label del formbuilder assumeranno quel colore. Possiamo anche digitare un valore non previsto come ad esempio #339f56.

Usiamo infine un horizontalSlider per definire il valore di arrotondamento del pane che ci contiene::

  fb.horizontalSlider('^.rounded',lbl='Border Rounded',minimum=0,maximum=59,
                        discreteValues=60,width='160px',
                        intermediateChanges=True,
                        tooltip="""HorizontaSlider.Change the box rounded border radius.""")
        
Si noti come muovendo lo slider cambi l'arrotondamento del contenitore della form perchè 
l'attributo rounded invece di essere una costante è rappresentato dal path '^.rounded'
che è anche sottoscritto dallo slider.

Vediamo infine il button 'Submit' che genera un ``alert`` con il valore dei dati come Xml. 

Widget di imputazione avanzati
------------------------------
In tutti i widget finora esaminati non abbiamo utilizzato dati provenienti da un database, anche se in realtà una delle funzioni più frequentemente usata in un sistema gestionale è quella di **chiedere all'utente di selezionare un record di una tabella**. In Genropy esistono tutta una serie di widget atti proprio a questo scopo:

.. 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/widget", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Widget che interagiscono con un database ", "example_name": "_condb_"} );'>
                Widget che interagiscono con un database 
            </a>
            <div></div>
        </div> 
        

Lo strumento principale è il widget ``dbselect`` ::

  fb.dbselect(value='^.state',table='glbl.regione',
              lbl='Regione',hasDownArrow=True, rowcaption='$sigla,$nome')
        
Vediamo che possiamo indicare su quale tabella effettuare la selezione ( ``table='glbl.regione'`` ), specifichiamo che vogliamo il bottone con freccia ( ``hasDownArrow=True`` ) e che desideriamo vedere sia la sigla che il nome ( ``rowcaption='$sigla,$nome'``). 

L'utente può iniziare a digitare oppure usare il bottone con freccia per scegliere la regione. La presenza della tendina è resa possibile dal parametro ``hasDownArrow=True``, di default impostato invece a False, e limita la visualizzazione ai primi 20 valori. La seconda *dbselect* sulle province, invece, è condizionata alla prima, nel senso che verranno visualizzate le province della regione selezionata al campo precedente. Questo è reso possibile dal parametro ``condition``::

        fb.dbselect(value='^.provincia', table='glbl.provincia',
                   lbl='City',columns='$sigla,$nome,$regione,$codice_istat',
                   auxColumns='$codice_istat,$regione',
                   condition=":reg is NULL OR :reg = ''  OR $regione=:reg",
                   condition_reg='^.regione',
                   selected_codice_istat='.codice_istat')
      
Nell'esempio, utilizzando il puntatore ``^``, facciamo sì che alla modifica della regione venga rieseguita automaticamente anche la query di questa *dbselect*, aggiornandone i valori. Si tenga presente che se il valore precedentemente selezionato per la provincia non appartiene alla nuova regione selezionata verrà presentato un messaggio di errore.

Nel caso in cui l'utente abbia specificato uno stato nel campo **regione** la dbComboBox selezionerà solo città di quello stato. Si noti ``columns='$sigla,$nome,$regione,$codice_istat'``, che offre la possibilità di digitare sia parti del nome della città, che del *codice_istat* e della regione.

Posso quindi scrivere anche solo '10' oppure '10 C' per restringere la scelta.

Si noti poi ``selected_codice_istat='.codice_istat'``, che fa sì che il valore del codice ISTAT selezionato dall'utente vada a finire nel path ``'.codice_istat'`` dello store e sia poi visualizzato nel div seguente.

Notiamo infine ``auxColumns='$codice_istat,$regione'`` per specificare le colonne che desideriamo vedere nel menu.

Vediamo ora un'esempio che fa uso di un altro widget, la ``dbComboBox``::

  fb.dbComboBox(value='^.localita', table='glbl.localita', lbl='Localita',
                         condition=":prov is NULL OR :prov = '' OR $provincia=:prov",
                         condition_prov='^.provincia')

Esattamente come nella ``comboBox`` è possibile scegliere anche dei valori che non sono in realtà tra quelli "suggeriti", differentemente da quanto avviene nella ``filteringSelect``, analogamente nella ``dbComboBox`` è possibile individuare dei valori che non sono presenti nella tabella di origine, contrariamente a quanto avviene nella ``dbSelect``.

.. hint::
  Si noti che anche alcuni dei widget precedenti (es: *checkboxtext*, *radiobuttontext*) possono essere utilizzati per accedere al database e presentare dei valori di una tabella. In quel caso sarà sufficiente indicare la *table* e le *columns* come indicato nella `Widgetpedia <https://www.genropy.org/docs/widgetpedia/index.html>`_
  
Vediamo infine una serie di altri esempi di widget complessi che coinvolgono delle `API <https://www.genropy.org/docs/service/index.html>`_ esterne.

.. 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/widget", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Widget che mostrano delle mappe ", "example_name": "altri"} );'>
                Widget che mostrano delle mappe 
            </a>
            <div></div>
        </div> 
        

.. 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/widget", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Widget che mostrano dati di API esterne ", "example_name": "movie"} );'>
                Widget che mostrano dati di API esterne 
            </a>
            <div></div>
        </div>