Widgets¶
Fino a questo momento abbiamo considerato solo elementi Html propriamente detti e il formBuilder 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.
Widget di imputazione semplici¶
Prendiamo innanzitutto a titolo di esempio una serie di widget di imputazione semplici:
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:
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.
Suggerimento
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
Vediamo infine una serie di altri esempi di widget complessi che coinvolgono delle API esterne.