Sviluppare il tema grafico, ossia l‘insieme di stili CSS, immagini, template e layout personalizzati per un progetto web diventa molto più lineare e uniforme grazie all‘uso di Liferay Portal. In particolare, fatte salve le necessarie competenze di progettazione grafica, Liferay Portal consente all‘utilizzatore di trasformare completamente l‘aspetto grafico di un sito web rendendolo facile da usare e visivamente piacevole.
Sempre più spesso ci viene richiesto di studiare la grafica per progetti web realizzati con Liferay Portal Server [1]. Questo significa sviluppare il tema grafico, ossia l’insieme di stili CSS, immagini, template (con XSL o Velocity VM [2]) e layout personalizzati.
Il processo di creazione di un nuovo tema inizia con il suo studio grafico mediante gli opportuni software di progettazione; una volta definita la veste grafica si può passare alla creazione del tema su Liferay.
I temi Liferay sono hot deployable plugin in grado di trasformare completamente l’aspetto grafico del portale rendendolo facile da usare e visivamente piacevole, tant’è che a volte risulta difficile o addirittura impossibile riconoscere un sito realizzato con Liferay [3].
Startup
La creazione di un tema vuoto è piuttosto semplice. Per farlo abbiamo a disposizione diversi modi. Ne illustriamo due.
Plugins Software Development Kit (SDK)
Il Plugin SDK [4] è un framework per la generazione di plugin (portlet, temi, hook, etc.) creato dal team di Liferay. Vediamo come utilizzarlo per il tema.
- Dal terminale posizionarsi all’interno della cartella dove si è scompattato il plugin SDK, dentro themes.
- Lanciare il comando create.bat su Windows o create.sh su Linux/Mac OS con i due argomenti richiesti: nome e titolo. Attenzione: il parametro nome non deve contenere spazi ed al nome viene automaticamente appeso “-theme”.
Nello specifico, definiamo il nome del tema “Liferay-Solution” e il titolo di visualizzazione “Liferay Solution theme”. Avremo quindi:
create.bat Liferay-Solution “Liferay Solution Theme”
Tramite questo script il plugin SDK crea dentro themes la cartella Liferay-Solution-Theme. All’interno troveremo i file necessari per il deploy di un tema. In questa stessa cartella inseriremo, come spiegato più avanti nell’articolo, i file (CSS, immagini, template, etc. ) utili a definire l’aspetto grafico del tema, organizzati secondo una precisa struttura.
Liferay IDE
Liferay IDE [5] è un plugin per Eclipse sviluppato anch’esso dal team di Liferay. Sostanzialmente ci permette di fare quello che facciamo con il Plugins SDK, ma in maniera visuale. Per i dettagli di installazione e configurazione si rimanda a [5].
Una volta installato, per creare il tema basta avviare il wizard dal menù (vedi fgura 4), riempire i campi richiesti, nome e titolo visualizzato e cliccare su Finish (vedi figura 5). Ora abbiamo il nostro tema vuoto pronto per la personalizzazione.
Il principio dell’ereditarietà
I temi Liferay sono organizzati in una struttura modulare che consente allo sviluppatore di modificare rapidamente l’aspetto grafico di una singola portlet o di un qualsiasi oggetto presente sulla pagina. Non è necessario personalizzare/modificare ogni singolo aspetto del tema in quanto esso eredita le immagini, gli stili e i template dai temi di default di Liferay. I temi personalizzati quindi si basano sulle differenze rispetto a temi di default di Liferay.
Nel file build.xml è possibile determinare ciò che si desidera utilizzare come base per il tema.
Il nostro tema dimostrativo “Liferay-Solution” si basa sul tema “_styled”. Di seguito si riporta il contenuto del file build.xml
Il tema padre è definito dalla proprietà theme.parent [6]. Nel nostro caso abbiamo scelto di ereditare “_styled” che prevede stili delle portlet piuttosto minimali. Si potrebbe anche scegliere di ereditare il tema “_unstyled” che non contiene alcun tipo di stile.
Struttura
La struttura di un tema organizza i diversi tipi di risorse in cartelle facilmente accessibili [7]. La struttura completa di “Liferay-Solution” è la seguente:
/ Liferay-Solution-theme / / Docroot / / WEB-INF / liferay-plugin-package.properties liferay-look-and-feel.xml / _diffs / / Css / custom.css / Images / / pic / / Layouttpl / / Custom / home.tpl home.png / Templates / portal_normal.vm / Css / application.css base.css custom.css dockbar.css extras.css forms.css layout.css main.css navigation.css portlet.css / Images / ... / Layouttpl / / Custom / home.tpl home.png / Templates / init_custom.vm navigation.vm portal_normal.vm portal_pop_up.vm portlet.vm
All’interno della cartella docroot è presente la cartella _diffs dove andremo a inserire tutte le personalizzazioni, modificando esclusivamente le parti del tema che differiscono dal tema principale. Per fare questo è necessario copiare la struttura della directory del tema principale dentro la cartella _diffs, ponendo solo le cartelle e i file necessari alla personalizzazione.
Per esempio, se vogliamo sostituire un’icona di default (nello specifico search.png) dobbiamo ricreare il percorso relativo dentro la cartella _diffs, ossia /images/common/search.png. Nel nostro tema “Liferay Solution”, la struttura di _diffs è la seguente:
/ _diffs / / Css / custom.css / Images / / common / / pic / / Layouttpl / / Custom / home.tpl home.png / Templates / portal_normal.vm
Andiamo ad analizzare le singole cartelle nel dettaglio.
Gli stylesheet: CSS
È la cartella che raccoglie gli stili .css del nostro tema e contiene esclusivamente il file custom.css, incluso nel file main.css del tema principale. Essendo l’ultimo file letto, per la legge della cascata va a sostituire tutti gli altri stili precedentemente richiamati. Di conseguenza per personalizzare il nostro tema è sufficiente modificare il file custom.css aggiungendo nuovi stili o sovrascrivendo quelli del tema principale.
Si raccomanda di non modificare gli altri stili specifici del portale (application.css, dockbar.css, ecc); questo renderà molto più facile l’aggiornamento del portale in quanto basterà sostituire solamente il file custom.css e applicare eventualmente gli opportuni aggiustamenti.
Le immagini del portale: IMAGES
Contiene la directory pic nella quale andremo a inserire tutte le immagini personalizzate del portale e la directory common che contiene le immagini sovrascritte a quelle di default (vedi paragrafo Struttura)
I modelli di layout: LAYOUTTPL
L’impaginazione del main-content, ovvero l’area in cui andremo a posizionare le varie portlet, viene gestita tramite i modelli di layout. Essi dividono la pagina in varie aree dove poter trascinare e posizionare le portlet [8]. La struttura tipica di un file .tpl con Liferay 5.x è:
$processor.processColumn("column-1")
dove l’impaginazione è organizzata con le tabelle. Invece, con Liferay 6.0, i file .tpl hanno un aspetto molto simile al seguente:
dove l’impaginazione è organizzata con i DIV. I modelli predefiniti di Liferay 6.0 controllano se il browser utilizzato è IE di una versione precedente alla 8:
#if ($browserSniffer.isIe($request) && $browserSniffer.getMajorVersion($request) < 8)
In questo caso i layout utilizzano la vecchia struttura a tabelle, mentre per tutti gli altri browser utilizzano i DIV, evitando così di specificare gli stili ad hoc per tutte le versione di IE.
Liferay viene fornito con diversi modelli di layout predefiniti.
Molto spesso capita di dover costruire una pagina più complessa, come puo’ essere ad esempio una homepage. Si deve quindi creare un modello di layout personalizzato. Per il nostro tema grafico abbiamo realizzato il seguente layout chiamato home.tpl:
Coerentemente con la filosofia di replicare solamente le cartelle su cui abbiamo effettuato una personalizzazione, dentro la directory / Layouttpl / andiamo a creare la cartella / Custom / all’interno della quale sistemeremo il file home.tpl e l’icona home.png (vedi figura 8).
Per far comparire il nostro layout all’interno della lista dei layout di default, è necessario che entrambi vengano richiamati nel file /docroot/WEB-INF/liferay-look-and-feel.xml con la seguente sintassi:
/layouttpl/custom/home.tpl /layouttpl/custom/home.tpl /layouttpl/custom/home.png
Operando in questo modo il layout viene associato al nostro tema grafico e non può essere applicato al di fuori di esso. Alternativamente è possibile creare un layout staccato dal tema, disponibile a livello globale, così da poterlo utilizzare indipendentemente dal tema scelto.
I modelli di pagina: TEMPLATE
È la directory che contiene i modelli di pagina o template. Il template su cui siamo andati ad intervenire è portal_normal.vm modificando i riferimenti nel footer e commentando la breadcrumb in quanto non prevista nella nostra interfaccia grafica. Questo file contiene la dockbar ed è possibile, ad esempio, inserire eventuali javascript, controllare la posizione della toolbar di navigazione e gestire variabili custom [9] di Velocity [2].
Il nostro tema grafico
A titolo di esempio pubblichiamo il tema grafico del progetto “Liferay Solution Theme”, un portale dimostrativo dai contenuti fittizi (vedi figura 11).
Sono state inserite quattro applicazioni di default:
Site Map è la portlet che mostra i link a tutte le pagine del sito. Nel nostro caso l’abbiamo configurata in modo da visualizzare soltanto le pagine figlie della pagina Archivio.
Search è la portlet che consente agli utenti di ricercare contenuti all’interno del sito.
Asset Publisher è la portlet che permette di visualizzare liste di articoli di diverse tipologie (blog, documenti, wiki, ecc). È possibile scegliere la tipologia di visualizzazione (solo titolo, titolo con estratto, titolo con contenuto) e decidere quali tipologie mostrare tramite l’utilizzo dei tags.
Web Content Display è la portlet che consente di visualizzare il contenuto di un solo articolo.
Una volta inserite le applicazioni, dobbiamo scegliere se applicare o meno i bordi a queste portlet. Se intendiamo aggiungere i bordi, andremo ad intervenire su tre stili:
- .portlet .portlet-topper
- .portlet .portlet-title
- .portlet .portlet-content
Con la personalizzazione di questi, è possibile dare la stessa veste grafica a tutte le portlet col bordo che andremo ad inserire nel nostro portale.
Se abbiamo l’esigenza di personalizzare ulteriormente possiamo operare in due modi:
- personalizzare la singola applicazione specificando nel file custom.css la classe della portlet interessata (ad esempio .portlet-search .portlet .portlet-title);
- personalizzare la singola portlet andando ad incollare lo stile direttamente in “aspetto grafico > stili avanzati” specificando l’istanza della portlet (ad esempio: #p_p_id_56_INSTANCE_s0N6_). L’inconveniente è che, una volta cancellata la portlet, questi dati vengono persi con essa.
Una portlet senza bordi, invece, ha una struttura più snella, senza il titolo e caratterizzata da una sola classe: .portlet-borderless-container. Quindi per la personalizzazione andremo ad intervenire sullo stile .portlet-borderless-container e sulle sue declinazioni.
Una volta terminate tutte le personalizzazioni, lanciamo il comando
ant deploy
nel terminale all’interno della cartella del tema. Andiamo così a creare il file .war (Web Archives Repository) ossia un archivio che contiene tutti i file del tema.
Infine procediamo con l’integrazione attraverso l’installazione del file
Liferay-Solution-theme-5.2.3.1.war
nel pannello di controllo del portale (Installazione Plugin > Plugin del tema > Installa altri temi > Invia file).
Conclusioni
Con questo primo articolo sulla customizzazione grafica, abbiamo voluto mostrare sia alcuni concetti alla base del funzionamento di Liferay, sia il modo in cui è possibile realizzare alcuni semplici temi grafici in maniera lineare e veloce. Con questo strumento e un po’ di capacità, infatti, la qualità dei risultati è garantita: sicuramente un ausilio notevole per chi deve realizzare portali. Continueremo ad approfondire Liferay nei prossimi numeri: nel frattempo i lettori interessati possono scaricare e analizzare il tema grafico proposto (scaricando l’allegato dal menu in alto a destra).
Riferimenti
[1] Liferay: il sito
[2] Apache Velocity
[3] Development LIferay: come creare un tema
http://www.liferay.com/documentation/liferay-portal/6.0/development/-/ai/creating-liferay-themes-2
[4] Plugins Software Development Kit (SDK)
http://www.liferay.com/documentation/liferay-portal/6.0/development/-/ai/the-plugins-sdk
[5] Liferay IDE
http://www.liferay.com/community/wiki/-/wiki/Main/Liferay+IDE
[6] Development LIferay: proprietà theme-parent
[7] Development LIferay: anatomia di un tema
http://www.liferay.com/documentation/liferay-portal/6.0/development/-/ai/anatomy-of-a-theme
[8] Layout
http://www.liferay.com/community/wiki/-/wiki/Main/Layout+Template
[9] Variabili di Velocity custom
http://www.liferay.com/community/wiki/-/wiki/Main/Custom+Velocity+Variables
Lorenza Amato è nata a Chieti nel 1982. Si è laureata in Informatica presso l‘Università degli studi di Bologna. Dal 2009 svolge, presso la D‘vel Snc, l‘attività di sviluppatrice software in ambiente Java. In particolare si occupa di sviluppo di progetti per Liferay Portal Server.
Chiara Mambretti è un‘anima inquieta dalla passione sfrenata per il cioccolato. Inizia a giocare con le matite e sogna di passare la sua vita disegnando. Le capita tra le mani la rivista AD, si laurea in disegno industriale e compra lo spremiagrumi di Philippe Starck. Il suo indiscutibile gusto grafico la spinge fin sotto le mura di Urbino dove si specializza in disegno grafico. Prende una sbandata per l‘illustrazione, lavora per l‘editoria scolastica e di nascosto inizia a illustrare storie per bambini. Si fidanza con un programmatore, sente parlare spesso di HTML, CSS, JavaScript e si ritrova a progettare siti web presso D‘vel s.n.c. L‘anima inquieta troverà mai pace?
Dopo la laurea in Scienze Economiche all‘Università di Bologna sono entrata a contatto con il mondo dei sistemi informativi grazie a un tirocinio formativo presso il Cineca di Bologna e varie attività di collaborazione con il Dipartimento MIUR (Ministero dell‘Istruzione, dell‘Università e della Ricerca). Dal 1999 mi occupo della realizzazione di siti Internet e dell‘integrazione grafica di applicazioni web complesse. Sono iscritta come Consulente Tecnico di Ufficio presso il Tribunale di Bologna per cui svolgo incarichi in materia di diritto commerciale e regolamentazione Internet. Attualmente lavoro per D‘vel Snc.