Dopo aver presentato il processo di creazione di un tema grafico, entriamo nello specifico analizzando Portlet Journal Content (la portlet principale di Liferay) e gli step necessari all‘aggiornamento di un tema dalla versione 5.2.x alla versione 6.0.x.

Journal Content

Il Portlet Journal Content (Web Content Display) è uno strumento molto potente in quanto consente di inserire qualsiasi tipo di contenuto all’interno di una pagina (testi, immagini, oggetti in Flash, codice HTML).

Figura 1 – Web Content Display.

 

Si possono creare anche articoli molto complessi che necessitano di una struttura e di un modello ad hoc.

Struttura

Realizzare una struttura richiede di individuare le caratteristiche dei diversi elementi che andranno a costituire il nostro “articolo”. Il primo passo da compiere è analizzare i contenuti dell’articolo da pubblicare e specificare gli elementi che lo compongono nelle seguenti tipologie:

• testo: riga di testo semplice;
• casella di testo: area composta da più righe di testo semplice;
• area di testo: testo formattato con codice HTML (Liferay 6.0.x utilizza CKEditor, la nuova versione di FCKEditor);
• immagine: immagine caricata dall’utente mediante l’uploader integrato;
• galleria immagini: immagine scelta tra quelle disponibili all’interno della galleria immagini (Image Gallery);
• gestione documenti: un documento presente nell’archivio dell’utente (Document Library);
• variabile booleana;
• elenco di selezione: lista di coppie ID/valore di elementi (opzioni) che verrà visualizzata come menu a tendina;
• lista multi-selezione: lista di coppie ID/valore di elementi (opzioni) da cui saranno selezionabili più opzioni (select multiple);
• collegamenti ad altre pagine: permette di creare un link a un’altra pagina del sito (non ad altri siti).

Nella pagina di inserimento dei contenuti (back-office) ogni elemento diventerà un campo di input a seconda della tipologia scelta (textarea, immagine, ecc.); nella stesura del modello, ogni elemento specificato diventerà una variabile.

Una volta decisi gli elementi del contenuto, si passa a definire la struttura attraverso il pannello di controllo, dove è possibile inserire ogni elemento specificando il nome mediante un campo di input, la tipologia mediante un menu a tendina e la presenza di eventuali elementi figli mediante un campo checkbox (gli elementi possono essere organizzati gerarchicamente ad albero).

Figura 2 – Pannello di controllo dove definire strutture e modelli.

 

Figura 3 – Pannello di inserimento struttura e schema XML.

Modello

Il modello ha la funzione di organizzare i contenuti basandosi sulla struttura a cui è associato. Viene definito mediante Velocity (VM) [1], un linguaggio caratterizzato da una semplice sintassi, utilizzando le variabili definite attraverso la struttura.

Di seguito riportiamo alcuni esempi di istruzioni e metodi:

Visualizzazione condizionale del valore dell’item

#if ($item.getData()!=0)
      $item.getData()
#else
      Valore non disponibile
#end

Iterazione e renderizzazione di un elenco

      #foreach($item in $items.getSiblings())
            
$item.getData()

      #end

## riga commentata

I metodi più significativi del dynamic element

$item.getName()
$item.getType()
$item.getData()
$item.getChildren()
$item.getOptions()

 

Figura 4 – Gestione contenuti: modelli.

 

Un vantaggio non trascurabile nell’applicazione di strutture e modelli è il loro libero utilizzo all’interno del sito (anche in articoli diversi) e la possibilità di risparmiare tempo in quanto le modifiche apportate alla struttura o al modello si riflettono su tutti gli articoli che ne fanno uso.

Figura 5 – Editor del modello.

Aggiornamento temi dalla versione 5.2.x alla 6.0.x

Ma che fine fanno i “vecchi” temi, magari creati in passato con lavoro e applicazione? Con i cambiamenti intervenuti nella versione 6 di Liferay, dobbiamo buttarli via? Se tentiamo di caricare in Liferay 6.0.x un tema realizzato con la versione 5.2.x, infatti, riscontreremo diversi errori dovuti al cambiamento di alcuni ID tags apportato dalla nuova UI (p.e.: scomparsa della dockbar).

Se il tema era stato creato in accordo con le indicazioni esposte nel nostro articolo precedente [2], ossia modificando soltanto il file custom.css, è molto semplice rendere il tema compatibile con l’ultima versione Liferay.

Basta creare una copia di backup del file custom.css (p.e.: custom_copia.css), sovrascrivere custom.css con gli elementi sottostanti e integrare questo file con custom_copia.css, avendo cura di posizionare gli elementi secondo le linee guida dettate dalla pagina.

Di seguito riportiamo gli elementi CSS da integrare:

/* -------- Global -------- */
 
#skip-to-content,
#heading .community-title,
#heading .page-title,
#navigation h1 {
      clip: rect(0 0 0 0);
      position: absolute;
}
 
body {
}
 
/* -------- Wrapper / Skip / Sign-in -------- */
 
#wrapper {
      margin: 0 auto;
      position: relative;
}
 
#skip-to-content,
#sign-in {
      color: #FFF;
      top: 1.5em;
}
 
#skip-to-content {
      left: 2em;
}
 
#skip-to-content:active,
#skip-to-content:focus {
      clip: auto;
}
 
#sign-in {
      position: absolute;
      right: 2em;
}
 
/* -------- Heading -------- */
 
#heading {
}
 
#heading .company-title {
      margin: 0;
}
 
#heading .company-title a {
      margin 0 auto;
}
 
/* -------- Navigation -------- */
 
#navigation {
}
 
#navigation ul {
      list-style: none;
      margin: 0;
}
 
.ie6 #navigation ul,
.ie7 #navigation ul {
      zoom: 1;
}
 
#navigation ul:after {
      clear: both;
      content: "";
      display: block;
}
 
#navigation li,
#navigation a {
      float: left;
}
 
#navigation a {
}
 
#navigation a:active,
#navigation a:focus,
#navigation a:hover {
}
 
/* -------- Content -------- */
 
#content {
}
 
#breadcrumbs {
      display: none;
}
 
/* -------- Footer -------- */
 
#footer {
}
 
#footer p {
      margin: 0;
}

Lo step successivo è rinominare gli ID tags che hanno subito variazioni con la nuova versione.

5.2.x                        6.0.x
.lfr-grid                    .portlet-layout
.lfr.column                  .portlet-column
#content-wrapper             #main-content
                             #content

Di seguito riportiamo le variazioni di JavaScript e template:

5.2.x                              6.0.x
javascript/javascript.js           js/main.js
dock.vm                            eliminato

Nella versione 6.0.x sono stati aggiunti nuovi macro:

#breadcrumbs()
#dockbar()

Nella versione 5.2.x la dockbar veniva inclusa con il seguente codice

#parse ("$full_templates_path/dock.vm");

Figura 6 – Dockbar Liferay 5.2.x

 

Per aggiornare il portal_normal.vm, nella versione 6.0.x, il richiamo della dockbar è da modificare con il seguente codice:

#if($is_signed_in)
      #dockbar()
#end

Figura 7 – Dettaglio dockbar Liferay 6.0.x.

Conclusioni

In questo secondo articolo, abbiamo presentato alcune rapide indicazioni sull’importanza dei concetti di struttura e modello in Liferay. Abbiamo poi riportato i passi necessari al corretto aggiornamento di temi realizzati nella versione precedente. Seguendo queste linee guida, si riuscirà a realizzare delle grafiche personalizzate con diversi livelli di complessità strutturale e ad aggiornare con facilità quasi ogni tema realizzato con versioni precedenti alla 6.0.x.

Riferimenti

[1] Apache Velocity

http://velocity.apache.org/

 

[2] F. Fabbri – L. Amato – C. Mambretti, “Liferay Portal Overview – I parte: La creazione di un tema grafico”, MokaByte 158, Gennaio 2011

https://www.mokabyte.it/cms/article.run?articleId=8RH-1C2-1XB-4EL_7f000001_29118337_6fac7eed