Costruzione del layout in gino cms

Transcript

1 Costruzione del layout in gino cms Autore: Marco Guidotti - marco.guidotti(at)otto.to.it Versione: 1.0 Data:

2 Layout Nell area amministrativa di gino l applicazione Layout permette di gestire i layout da interfaccia grafica, e in particolare i componenti css, template e skin che identificano i diversi layout. Nella sezione css si caricano in gino i file css da associare alle skin; i file vengono salvati nella directory css e, se associati a una skin, vengono accodati ai file css di default di gino. In questo modo è possibile definire nuovi stili o sovrascrivere quelli già presenti. Nella sezione template si gestiscono i template, ovvero come devono essere composte le pagine html. Nella sezione skin si gestiscono le skin, ovvero le associazioni dei template (e dei file css) a indirizzi o classi di indirizzi. La procedura sintetica da seguire per creare un nuovo layout è la seguente: 1. Creare un nuovo template 2. Definire sulla carta il numero di blocchi e per ogni blocco numero di righe e di colonne avere più blocchi permette un maggior margine di manovra, come anche definire i numeri di colonne all'interno del blocco; al contempo diventa più complicata la gestione del css; per ogni riga è possibile definire da interfaccia le proprietà flottanti; se si lascia una riga vuota, quella riga non viene considerata. 3. Creare o modificare la skin da associare al nuovo template selezionare nella voce Template il template appena creato (o un altro) eventualmente selezionare un nuovo css o deselezionare il css associato (tipicamente si potrebbe trattare del Css gino base ). Come esempio supponiamo di dover creare un layout personalizzato per la pagina con valore ID 4. In pratica bisognerà creare un template da associare ad una skin.

3

4 [css] In questa sezione è possibile creare, editare o eliminare un file css

5 [template] Operazioni sui template: - eliminazione: elimina il template - creazione: crea un nuovo template - duplicazione: crea una copia speculare del template, utile per creare un template a partire da uno esistente - modifica: permette di modificare i blocchi che lo compongono e le loro caratteristiche - modifica dello schema: permette di modificare soltanto lo schema, ovvero la disposizione degli elementi nei blocchi

6 [template] > nuovo template Creando un template ex novo occorrerà definire il numero di blocchi e la loro suddivisione in righe e colonne. La struttura del template è formata da blocchi che contengono navate, ciascuna delle quali può contenere un numero qualsiasi di moduli. I moduli lasciati 'vuoti' non occuperanno spazio all'interno del layout finale, mentre le navate 'vuote' occuperanno lo spazio in larghezza esattamente come definito nel template. Nella maschera di modifica e inserimento è presente il campo css nel quale si può specificare un foglio di stile che viene caricato nella maschera di creazione del template. Selezionando un file css, il foglio di stile non viene automaticamente associato al template, cosa che deve essere fatta al momento di creazione della skin, ma viene utilizzato per creare un template adatto se si prevede di utilizzarlo all'interno di una skin con un css che modifichi le dimensioni degli elementi strutturali.

7 [template] > duplica template In questo caso il template viene creato identico a quello selezionato

8 [template] > modifica lo schema A questo punto si può procedere con la modifica del template o semplicemente dello schema

9 [template] > modifica lo schema Nello schema è possibile inserire, modificare ed eliminare gli elementi che lo compongono. Inoltre si possono modificare le larghezze delle navate. Quando si clicca sull elemento attivo (colore giallo) o su un rettangolo grigio si apre una finestra con l elenco degli elementi che possono essere inseriti. E possibile selezionare un elemento alla volta. Il Modulo da url è il modulo segnaposto, ovvero indica l area nella quale mostrare i contenuti della pagina che viene chiamata.

10 [template] > modifica lo schema modifica larghezze elimina l elemento preview cambia l ordinamento

11 [skin] Le skin comprendono un file css ed un template e possono essere associate a un url una serie di url una classe di url Questi metodi possono essere abbinati o meno ad una variabile di sessione.

12 Le classi di url, definite nel formato PCRE, permettono di fare il matching con tutti gli url che soddisfano l'espressione regolare inserita. valore di una variabile di sessione nel formato "nome_variabile=valore", per il quale verranno applicate le regole di matching di url e classi. espressione regolare completa Nel campo Urls si può inserire un indirizzo o più indirizzi separati da virgola ai quali associare la skin. Tali indirizzi hanno la priorità rispetto alle classi di url nel momento in cui viene cercata la skin da associare al documento richiesto. template che è stato creato

13 [skin] La ricerca di una corrispondenza pagina richiesta/skin avviene in base a dei principi di priorità definiti dall'ordine in cui le skin compaiono nell'elenco, ragion per cui una volta creata la skin occorrerà spostarla come posizione prima della chiamata standard (ad esempio in questo caso prima di Pagine pubbliche) per far sì che la pagina richiesta possa venire associata correttamente al template abbinato alla skin. Lo spostamento viene effettuato per trascinamento, ovvero agganciando e spostando col mouse l elemento all interno della lista.

14 [skin] Ordine di priorità La ricerca di una corrispondenza pagina richiesta/skin avviene in base a dei principi di priorità secondo i quali vengono controllati in sequenza: Ordine nel quale le skin compaiono nell elenco (dall alto verso il basso) Gli url o classi di url appartenenti a skin che hanno un valore di variabile di sessione Gli url o classi di url appartenenti a skin che non hanno un valore di variabile di sessione Se ancora non viene trovata una corrispondenza tra la pagina richiesta e gli indirizzi associati alle skin, la ricerca continua utilizzando le espressioni regolari Nei campi Espressione regolare e Urls possono essere inseriti valori nel formato permalink o in quello nativo di gino.