Sviluppare template con Ariadne WCM

SVILUPPARE
TEMPLATE CON
ARIADNE WCM
Linguaggi e tecnologie per
sviluppare siti web
1
Le componenti da considerare
XML
XSL + XPATH
TEMPLATE
REPOSITORY ACM
2
Sviluppare Template con Ariadne WCM
1. INTRODUZIONE A XML
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
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-8859-1"?>
» 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)
5
XML valido
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.
<?xml version="1.0" encoding="UTF-8"?>
 &amp;
&
< >  &lt; &gt;
 &quot; &apos;
" '
» L' xml è case-sensitive.
<tag> è diverso da <TAG>
» E' possibile definire tag vuoti.
<tag></tag> oppure <tag/>
6
XML: definizioni
Nodo radice
Attributo
Valore dell’attributo
<catalogo>
<libro genere=“tragedia”>
<autore>
<nome>William</nome>
Nodo
<cognome>Shakespeare</cognome>
</autore>
<lingua>English</lingua>
<titolo>
<titolo-originale>True Chronicle History of the
Life and Death of King Lear anf His Three
Valore del nodo
Daughters(Quarto) - The Tragedy of King Lear
(First Folio)
Titolo
</titolo-originale>
<titolo-italiano>Re Lear</titolo-italiano>
</titolo>
<anno>1605</anno>
</libro>
</catalogo>
7
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
Sviluppare Template con Ariadne WCM
2. L’XML DI ARIADNE WCM
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
Modello generale di funzionamento
Database
XML
JSP
SERVLET
Lato applicativo
XSL
Lato template
11
XHTML
Funzionamento in dettaglio
XML
XML
XML
XHTML
Database
JSP
Trasformata.xsl
Pagina.xsl
SERVLET
12
Struttura.xsl
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
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
Sviluppare Template con Ariadne WCM
3. XSL E XPATH
XSL e XPATH
XSL
XPATH
XSL definisce le regole di trasformazione
di un documento XML in un documento
in altro formato (es. XML, XHTML, ecc.).
XPath localizza gli elementi ai quali
applicare le regole di trasformazione.
16
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>
<xsl:value-of select=“/catalogo/libro/autore”/>
William Shakespeare
Risultato
17
Documento Sorgente
Trasformazione
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
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
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
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
/catalogo/libro/@genere
/catalogo/libro[2]/anno[1]
/catalogo/libro*@genere=‘commedia’+/autore
/catalogo/libro*position() = 1+/anno*@tipo=‘composizione’+
//anno
/catalogo//libro//autore
/catalogo/libro*@genere=‘tragedia’+/anno*@tipo=‘rappresentazione’+
//anno*@tipo=‘rappresentazione’+
/anno*@tipo=‘rappresentazione’+
21
William Shakespeare
tragedia
1677
Jean Racine
1605
1605 1610 1667 1668
William Shakespeare Jean Racine
1610
1610 1668
1610
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
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
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 { }.
Documento Sorgente
<root>
<sito label=“Google” link=“http://www.google.com” />
</root>
<a href=“http://www.google.it”>Google</a>
Risultato desiderato
<a href=“{/root/sito/@link}“>
<xsl:value-of select=“/root/sito/@label”/>
</a>
Soluzione
<a>
<xsl:attribute name=“href”>http://www.google.it</xsl:attribute>
<xsl:value-of select=“/root/sito/@label”/>
</a>
24
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>&#160;</div>
» <script></script> diventa <script>…</script>
25
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="http://www.w3.org/1999/XSL/Transform">
26
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=“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” />
27
Sviluppare Template con Ariadne WCM
4. ASPETTI TECNICI AVANZATI
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:
http://www.dominio.it/site/home.html?int=feed/filenamexsl
»
»
»
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:
http://www.dominio.it/site/home.html?ext=feed/filenamexsl
»
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:
http://www.dominio.it/site/home.html?int=feed/filenamexsl&out=xml
»
out = forza il "content-type html/xml" della response
29
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:
http://[dominio]/[webapp]/[jsp]?[paramentri]
(Iparametri sono presi dal component "params" dell'xml)
Es.
http://zoroastro.ariadne.it/site/getXslAssociation.jsp?instance=1&channel=1
» Le .jsp non vengono "cacheate".
30
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
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
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
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 select="//component[@type='installation-path']/instanceoffset"/>
</xsl:variable>
<xsl:for-each select="photo[@format=123+$offset]"> …. </xsl:for-each>
34
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 " &lt;".
» 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
Sviluppare Template con Ariadne WCM
5. LINK DI APPROFONDIMENTO
Link di approfondimento
TUTORIAL W3SCHOOLS:
» http://www.w3schools.com/xsl/default.asp
» http://www.w3schools.com/xpath/
DOCUMENTAZIONE UFFICIALE DEI LINGUAGGI:
» http://www.w3.org/TR/xsl/
» http://www.w3.org/TR/xpath/
TOOL ON-LINE PER TESTARE LE ESPRESSIONI:
» http://markbucayan.appspot.com/xslt/index.html
» http://www.shell-tools.net/index.php?op=xslt
37