.. _tutor/pagina/datastore:
Il datastore
============
.. raw:: html
Come già accennato in precedenza, le pagine di Genropy utilizzano un datastore locale
che contiene tutti i dati necessari al funzionamento della pagina.
.. raw:: html
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.
.. raw:: html
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.
.. raw:: html
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:
.. image:: /_static/images/form-parameters.png
:width: 400px
:align: center
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.
.. image:: /_static/images/zzinspector.png
:width: 250px
:align: center