.. _tutor/pagina/page: Introduzione ============ Cosa è una pagina ? -------------------- .. raw:: html
La **pagina** di Genropy rappresenta un'applicazione web specifica (SPA ovvero Single Page Application) che viene creata per consentire all'utente di svolgere un certo compito. Tipicamente una pagina gestisce l'interazione con l'utente e fornisce l'interfaccia necessaria per effettuare in modo controllato delle operazioni sul server. Tali operazioni possono essere di qualunque natura, come ad esempio lettura e scrittura su database, lettura e scrittura di files nel filesystem o in cloud, esecuzione di processi esterni. Immaginate il lato client di Genropy come una pura interfaccia grafica molto facilmente configurabile ed in grado sia di svolgere comandi sul client, sia di lanciare comandi sul server e presentare i risultati. Le comunicazioni col server possono avvenire sia tramite tradizionali RPC che tramite **websocket** che sono già direttamente utilizzabili in Genropy in modo trasparente. Funzionamento di una pagina --------------------------- Quando un utente, utilizzando il browser, accede ad un URL di un'applicazione Genropy, riceve un documento HTML molto ridotto che contiene solo la definizione dei moduli Javascript da caricare e dei CSS. Al caricamento viene eseguito uno script che provvede ad istanziare un oggetto ``genro`` che si occuperà di gestire tutta la logica lato client della pagina fino a quando questa resterà attiva. Alla sua creazione, l'oggetto ``genro`` esegue una chiamata ``main`` al server che restituisce un XML che rappresenta una sorta di *ricetta* della pagina stessa, ovvero la definizione degli elementi di interfaccia (DOM e Widgets), e della logica di validazione e di funzionamento della pagina stessa. Normalmente una pagina, una volta caricata, gestisce poi con successive richieste il caricamento sul client di dati, l'elaborazione degli stessi e il successivo salvataggio. Gli **Store** di pagina ------------------------ L'oggetto ``genro`` definisce al suo interno due contenitori (store), gerarchici che si occupano di mantenere lo stato del sistema sul client. La caratteristica di questi store (che sono di fatto delle `Bag `_), è quella di vigilare per ogni cambiamento che avviene e lanciare opportuni comandi al variare dei dati (``triggers``). Rimandiamo al capitolo sulle `Bag `_ per tutti i dettagli necessari. Vediamo nel dettaglio i due store. Source ------ Lo store ``Source`` viene caricato all'arrivo della chiamata ``main`` e conserva la descrizione della pagina stessa. I ``triggers`` si occuperanno di attivare un **builder**, cioè il codice client che costruisce a partire dal **source** il DOM, i Widget e i Controller sia al caricamento iniziale dello store stesso, sia ad ogni modifica effettuata successivamente. Data ---- Lo store ``Data`` viene caricato con i dati eventualmente restituiti dalla chiamata ``main`` e costituisce una memoria a struttura gerarchica per tutti i dati della pagina. Ogni volta che l'utente interagisce con un widget (ad esempio scrivendo in un campo), lo store dei dati viene modificato ad un determinato indirizzo. Viceversa, ogni volta che viene modificato lo store dei dati, gli elementi che utilizzano quei dati vengono aggiornati in modo da dare l'esatta rappresentazione dello store stesso. Rimandiamo alla lezione :ref:`Source e Data` per avere una migliore descrizione di quanto qui accennato.