Il datastore¶
Come già accennato in precedenza, le pagine di Genropy utilizzano un datastore locale che contiene tutti i dati necessari al funzionamento della pagina.
Riprendiamo l’esempio di Hello World e modifichiamolo per usare il datastore.
Invece di mettere il testo “Hello world” direttamente nel div,
usiamo la funzione data per inserirlo nello store al path string_to_show:
def main(self,root,**kwargs):
root.data('string_to_show','Hello World')
Nel div mettiamo invece, al posto di un valore fisso, una stringa prefissata dal simbolo '^':
root.div('^string_to_show',font_size='16px',margin='20px')
Questa sintassi (analoga all” uso di un puntatore), dice al gestore della pagina di mettere come
innerHTML del div il valore che si trova nel datastore al path string_to_show.
Il fatto che si usi come prefisso il simbolo '^' segnala che al variare del contenuto del path string_to_show,
verrà automaticamente aggiornato l’inner HTML del div.
Modifichiamo l’esempio visto prima e dopo aver assegnato con data il valore «Hello World»
al path string_to_show, creiamo un box con al suo interno una label ed un campo di input
il cui value e collegato allo store sempre al path string_to_show:
box=root.div(margin='20px')
box.span('String To Show:')
box.input(value='^string_to_show')
Inoltre invece di un solo div ne mettiamo 3 con differenti attributi HTML:
root.div('^string_to_show',font_size='16px',margin='20px')
root.div('^string_to_show',font_size='32px',margin='20px', color='red')
root.div('^string_to_show',font_size='58px',margin='20px', color='green')
Notiamo che sia i div sia il campo di input mostrano «Hello World».
Se ora al posto di «Hello World» digitiamo ad esempio «Hi Genropy», all’uscita dal campo il contenuto di input sarà scritto in memoria al path string_to_show e lo store, grazie ad un trigger che vigila i cambiamenti, provvederà a cambiare il contenuto di tutti i div al nuovo valore.
Vogliamo ora non solo cambiare il contenuto del div ma cambiare anche alcuni attributi.
Per ragioni di comodità definiamo un metodo inputWithLabel che useremo per creare delle coppie etichetta/input da usare per chiedere gli attributi:
def inputWithLabel(self,pane,path,label=''):
box=pane.div(margin='4px')
box.div(label,display='inline-block',width='10em',text_align='right')
box.input(path,margin_left='4px',padding='1px', padding_left='2px')
Il metodo riceve un pane (nome generico che usiamo solitamente per indicare
un qualsiasi elemento che possa avere dei figli), e per prima cosa crea un box
ovvero un div nel quale metteremo l’etichetta e il campo di input.
La funzione riceve sia il testo della label che il path che deve
essere usato per l’input.
Nel main per prima cosa assegnamo i valori iniziali e per farlo prepariamo una Bag
(classe che abbiamo importato alla linea 3), passando ad essa un dict con i valori voluti.
Usando la funzione data mettiamo quindi la bag al path parameters.
Mettiamo ora tutti i campi che vogliamo richiedere all’utente usando il metodo inputWithLabel visto poco sopra:
self.inputWithLabel(root,'^parameters.string_to_show','String To Show')
self.inputWithLabel(root,'^parameters.color','Color')
self.inputWithLabel(root,'^parameters.border','Border')
self.inputWithLabel(root,'^parameters.background','Background')
self.inputWithLabel(root,'^parameters.padding','Padding')
self.inputWithLabel(root,'^parameters.text_align','Text Align')
self.inputWithLabel(root,'^parameters.rounded','Rounded')
Notiamo che in questo caso stiamo usando dei path a 2 livelli, come ad esempio parameters.color.
Creiamo a questo punto il nostro div mettendo gli attributi collegati al datastore al path opportuno.
Se ora variamo i dati dei campi possiamo ad esempio ottenere:
Inspector¶
Nella barra sopra il codice python potrete notare a destra una piccola icona:
con un click si apre una palette che vi dà la visione del datastore. In realtà questo inspector, che troverete poi anche nelle altre pagine del tutorial, mostra la memoria solo della parte di pagina che viene gestita nell’esempio.
La pagina infatti contiene moltissimi altri elementi ma per focalizzare l’attenzione mostriamo solo un ramo dello store che è quello che usiamo nell’esempio stesso.
Con una freccia sono indicati alcuni degli atributi che stanno nello store e che vengono usati nel widget.
Nella parte inferiore dell’inspector possiamo editare i valori dello store e notiamo che l’effetto è immediato ed i cambiamenti avvengono al variare del valore immesso.
