SVILUPPARE TEMPLATE CON ARIADNE WCM. Linguaggi e tecnologie per sviluppare siti web

Transcript

1 SVILUPPARE TEMPLATE CON ARIADNE WCM Linguaggi e tecnologie per sviluppare siti web 1

2 Le componenti da considerare XML XSL + XPATH TEMPLATE REPOSITORY ACM 2

3 Sviluppare Template con Ariadne WCM 1. INTRODUZIONE A XML

4 XML: extensible Markup Language» Linguaggio di marcatura (mark-up)» Enstensibile: definisce una sintassi che consente di estendere altri linguaggi di marcatura, creando tag a seconda delle esigenze» Svincolato dalla presentazione (diversamente da HTML) 4

5 XML ben formato e valido» I tag non possono iniziare con numeri o caratteri speciali» I tag non possono contenere spazi» L annidamento deve essere corretto» Il documento deve aprirsi con un prologo tipo XML ben formato <?xml version="1.0" encoding="iso "?>» Deve esserci un unico elemento radice (root) che contiene tutti i nodi» Un documento XML si dice valido se, oltre ad essere ben formato rispetta i vincoli strutturali definiti nella DTD (Document Type Definition) XML valido 5

6 Sintassi e entità» La prima riga indica la versione di XML in uso e specifica la codifica UTF-8 per la corretta interpretazione dei dati.» I caratteri speciali che renderebbero il documento mal formato vanno sostituiti con le rispettive entità XML.» L' xml è case-sensitive.» E' possibile definire tag vuoti. <?xml version="1.0" encoding="utf-8"?> & & < > < > " ' " &apos; <tag> è diverso da <TAG> <tag></tag> oppure <tag/> 6

7 XML: definizioni Nodo radice Attributo Valore dell attributo <catalogo> <libro genere= tragedia > <autore> Nodo </catalogo> <nome>william</nome> <cognome>shakespeare</cognome> </autore> <lingua>english</lingua> <titolo> <titolo-originale>true Chronicle History of the Life and Death of King Lear anf His Three Daughters(Quarto) - The Tragedy of King Lear (First Folio) </titolo-originale> <titolo-italiano>re Lear</titolo-italiano> </titolo> <anno>1605</anno> </libro> Valore del nodo Titolo 7

8 XML e XHTML XHTML è l HTML basato su XML (stessa struttura e stesse regole) e prevede un uso più restrittivo dei tag:» I tag vuoti vanno chiusi con slash finale (/)» I tag vanno annidati correttamente» I caratteri speciali vanno gestiti Una pagina XHTML scritta in modo errata viene comunque interpretata ma non gode dei vantaggi dello standard XML, primo tra i quali la portabilità su browser e client differenti. 8

9 Sviluppare Template con Ariadne WCM 2. L XML DI ARIADNE WCM

10 Ariadne WCM come XML Engine Ariadne WCM espone in XML valido e ben formato i dati relativi alla struttura del sito (Navigazione, Categorie, ecc.) e ai contenuti di pagina: Albero delle Categorie Contenuto di un Articolo 10

11 Modello generale di funzionamento Database XML XHTML JSP SERVLET XSL Lato applicativo Lato template 11

12 Funzionamento in dettaglio XML XML XML XHTML Database JSP Trasformata.xsl Pagina.xsl Struttura.xsl SERVLET 12

13 XML e debug?xml=3?xml=1?xml=2» XML generato direttamente dall applicazione.» Se non è visibile indica un (grave) malfunzionamento.» XML generato da trasformata.xsl.» Se restituisce errore indica errori nel file trasformata.» XML generato dal template interno (di pagina, di articolo o di scheda).» Se restituisce errore indica errori nel template interno. 13

14 Integrazione di XML esterno Ariadne WCM permette di importare dati XML provenienti da fonti esterne, e di esportare i propri contenuti. XML integrato nel componente feed 14

15 Sviluppare Template con Ariadne WCM 3. XSL E XPATH

16 XSL e XPATH XSL XSL definisce le regole di trasformazione di un documento XML in un documento in altro formato (es. XML, XHTML, ecc.). XPATH XPath localizza gli elementi ai quali applicare le regole di trasformazione. 16

17 Trasformare un documento XML: XSL e XPath Le espressioni XSL e XPath servono per trasformare l xml: <catalogo> <libro> <autore>william Shakespeare</autore> <titolo>re Lear</titolo> <anno>1605</anno> </libro> </catalogo> Documento Sorgente <xsl:value-of select= /catalogo/libro/autore /> Trasformazione William Shakespeare Risultato 17

18 XPath» XPath è un linguaggio parte della famiglia XML che permette di individuare i nodi all'interno di un documento XML.» Il tipo più comune di espressione XPath (e quella che ha dato origine al suo nome) è la path expression: una sequenza di passi per raggiungere un nodo XML, partendo dal nodo corrente (percorso "relativo"). In alternativa è possibile utilizzare dei percorsi "assoluti" utilizzando come riferimento la radice del documento.» Il nodo in cui mi trovo si chiama contesto. 18

19 XPath: axis disponibili» attribute (legge l'attributo del tag)» descendant-or-self = // (richiamiamo tutti i nodi indipendentemente dalla loro posizione)» Parent =.. (usato per riferirsi al nodo padre)» self =. (usato per riferirsi al nodo attualmente selezionato) 19

20 XPath: operatori e funzioni» Operatori booleani "and" e "or" e la funzione "not()". Le espressioni booleane possono essere unite con le parentesi () e combinate con operatori booleani and, or e not()» Operatori aritmetici +, -, *, div e mod.» Operatori di confronto: =,!=, <, >, <=, >=.» Position() = restituisce un numero che rappresenta la posizione di questo nodo rispetto ai relativi fratelli dal XPath a questo punto.» count(node-set) = restituisce il numero di nodi che corrispondono alla relativa richiesta» concat(string, string, string*) = concatena tutte le stringhe.» contains(s1, s2) = restituisce true se s1 contiene s2. 20

21 XPath: esempi pratici <catalogo> <libro genere= tragedia > <autore>william Shakespeare</autore> <titolo>re Lear</titolo> <anno tipo= composizione >1605</anno> <anno tipo= rappresentazione >1610</anno> </libro> <libro genere= commedia > <autore>jean Racine</autore> <titolo>i litiganti</titolo> <anno tipo= composizione >1667</anno> <anno tipo= rappresentazione >1668</anno> </libro> </catalogo> /catalogo/libro/autore William Shakespeare tragedia /catalogo/libro[2]/anno[1] 1677 commedia +/autore Jean Racine /catalogo/libro*position() = 1+/anno*@tipo= composizione //anno /catalogo//libro//autore William Shakespeare Jean Racine /catalogo/libro*@genere= tragedia +/anno*@tipo= rappresentazione //anno*@tipo= rappresentazione /anno*@tipo= rappresentazione

22 Costrutti XSL 1 Copiare <xsl:value-of select= XPATH /> <xsl:copy-of select= XPATH /> Fare cicli <xsl:for-each select= XPATH >... </xsl:for-each> Fare controlli <xsl:if test= XPATH >... </xsl:if> <xsl:choose> <xsl:when test= XPATH >... </xsl:when> <xsl:when test= XPATH >... </xsl:when> <xsl:otherwise>... </xsl:otherwise> </xsl:choose> 22

23 Costrutti XSL 2 Definire macro <xsl:template name= STRING >... </xsl:template> <xsl:template match= PATTERN >... </xsl:template> Richiamare macro <xsl:call-template name= STRING /> <xsl:apply-templates /> Definire variabili <xsl:variable name= STRING >... </xsl:variable> Aggiungere attributi ai nodi <xsl:attribute name= STRING >... </xsl:variable> 23

24 Uso delle graffe Quando si vuole assegnare un valore ad un attributo di un tag HTML, è preferibile specificare il percorso xpath all interno dell ATTRIBUTO mediante le graffe { }. <root> <sito label= Google link= /> </root> Documento Sorgente <a href= >Google</a> Risultato desiderato <a href= {/root/sito/@link} > <xsl:value-of select= /root/sito/@label /> </a> Soluzione <a> <xsl:attribute name= href > <xsl:value-of select= /root/sito/@label /> </a> 24

25 XSL: errori comuni PAGINA IN ERRORE:» Mancanza di una chiusura di un tag <a><b>..<a>, <a><b></b> etc.» Anche per tag particolari: <br> <hr>. vanno scritti in questo modo: <br/> <hr/>» Ordine chiusura tag: <a><b></a></b>» Assenza totale o parziale di virgolette/apici: <img src=immagine.jpg/>, <img src=immagine.jpg"/> ERRORI DI VISUALIZZAZIONE: Tag aperti/chiusi in modo esplicito senza un contenuto:» <div></div> diventa <div> </div>» <script></script> diventa <script> </script> 25

26 Namespace è, nella terminologia relativa all'informatica, una collezione di nomi di entità, definite dal programmatore, omogeneamente usate in uno o più file sorgente. Lo scopo dei namespace è quello di evitare confusione ed equivoci nel caso siano necessarie molte entità con nomi simili, fornendo il modo di raggruppare i nomi per categorie. <xsl:stylesheet xmlns:xsl=" 26

27 DTD è uno strumento utilizzato dai programmatori il cui scopo è quello di definire le componenti ammesse nella costruzione di un documento XML.» Definisce gli elementi leciti all'interno del documento. Una specie di "vocabolario" per i file che lo useranno.» Definisce la struttura di ogni elemento. La struttura indica cosa può contenere ciascun elemento, l'ordine, la quantità di elementi che possono comparire e se sono opzionali o obbligatori. Una specie di "grammatica".» Dichiara una serie di attributi per ogni elemento e che valori possono o devono assumere questi attributi.» Fornisce infine alcuni meccanismi per semplificare la gestione del documento, come la possibilità di dichiarare entity e la possibilità di importare parti di altri DTD. <xsl:output doctype-system= /> 27

28 Sviluppare Template con Ariadne WCM 4. ASPETTI TECNICI AVANZATI

29 INT, EXT, OUT: forrzare template e output E possibile"forzare" dei template, sia di pagina che di struttura, a una determinata pagina. TEMPLATE DI PAGINA - INT: int = parametro per modificare il template di pagina» feed = percorso directory dove sarà presente il template da utilizzare a partire dalla cartella "xsl" (ved. repository)» filenamexsl = nome dei file.xsl da utilizziare senza estensione. TEMPLATE DI STRUTTURA - EXT: ext = parametro per modificare il template di struttura INT e EXT possono essere combinati: /site/home.html?int=feed/filenamexsl&ext=feed/filenamexsl PARAMETRO PER MODIFICARE LA RESPONSE - OUT: out = forza il "content-type html/xml" della response 29

30 JSP di Ariadne WCM» index.jsp (pagine impaginabili)» articlecategory.jsp» cardcategori.jsp» documentcategory.jsp» article.jsp» card.jsp» calendar.jsp» getxslassociation.jsp (per vedere l'associazione tra pagina ed xsl utilizzato) Vengono chiamate nel seguente modo: (Iparametri sono presi dal component "params" dell'xml) Es. Le.jsp non vengono "cacheate". 30

31 Il Repository in sintesi Root dell istanza (instanceid) box : Template di impaginazione css1 : CSS layout sito files: documenti/immagini caricati nel CMS images: immagini statiche usate x il sito javascript : javascript utilizzati per il sito Template (versione on-line) del Canale article: Template XSL di Articolo card: Template XSL di Scheda node: Template XSL di Pagina template: Template XSL di Struttura transform: trasformata.xsl 31

32 La Cache di Ariadne WCM Per attivare/disattivare la cache: Configurazione --> Instanze --> Modifica --> "Cache HTML abilitata" --> Si/No WCM salva la cache tramite URL e la "disabilita" ogni volta che la pagina viene pubblicata. Per disattivare la cache» aggiungo all'url un paramentro con una stringa casuale (disabilita la cache temporaneamente)» aggiungo all'url il paramentro "flushcache (svuota la cache di istanza)» pubblico dalla redazione la pagina, modifico l'articolo impaginato o la categoria» presente nella pagina che ha subito una modifica.» modifico la data nella tabella "utility" del database. 32

33 Canonicalizzazione dell URL Una pagina canonica è la versione preferita di una serie di pagine con contenuti molto simili. Aggiungi un link rel="canonical" alla sezione <head> della versione non canonica di ogni pagina HTML. Aggiungendo questo link e questo attributo, i proprietari del sito possono identificare i contenuti identici e suggerire a Google la pagina più utile tra tutte le pagine con contenuti identici, indicando quale mantenere in indice. Il link da utilizzare è generato da WCM e presente nell'xml: <link href="/on-line/formazione/home/tecnologia/lavatrici.html" rel="canonical"/> ES: nell'xsl di struttura: <xsl:copy-of select="/content/component[@type='page-title']/link"/> 33

34 Offset Lo si trova nel componente "installation-path (tag "instance-offset") ed è un numero. Questo numero va sommato ad ogni ID presente nei template (controlli statici su pagine,formati immagini, categorie..etc. etc.) in quanto rende flessibile il template in caso di esportazione/installazioni di instanze su macchine diverse. <xsl:variable name="offset > <xsl:value-of </xsl:variable> <xsl:for-each </xsl:for-each> 34

35 Output dei caratteri L'attributo "disable-output-escaping":» E' opzionale (di default è "no").» "yes" indica che i caratteri speciali (come "<") usciranno così come sono.» "no" indica che i caratteri speciali (come "<") usciranno come " <".» ES: <xsl:value-of select="title" disable-output-escaping="yes" /> Il termine CDATA è usato per i dati di testo che non devono essere analizzati dal parser XML. Caratteri come "<" e "&" non sono validi in elementi XML perché:» "<" Genererà un errore perché il parser lo interpreta come l'inizio di un nuovo elemento.» "&" Genererà un errore perché il parser lo interpreta come l'inizio di una entità carattere.» Se inseriti all'interno di un CDATA questi elementi non vengono analizzati dal parse XML e quindi non generano errori. Un classico esempio di questa situazione può essere la scrittura di javascript all'interno del template.» Il CDATA inizia con "<![CDATA[" e termina con "]]>" 35

36 Sviluppare Template con Ariadne WCM 5. LINK DI APPROFONDIMENTO

37 Link di approfondimento TUTORIAL W3SCHOOLS:» DOCUMENTAZIONE UFFICIALE DEI LINGUAGGI:» TOOL ON-LINE PER TESTARE LE ESPRESSIONI:»