Guide Joomla : Analisi della nuova struttura template in Joomla! 1.5

jarod1981® · 21-08-2008, 01.57.47

Si tratta di una prima analisi e comparazione col sistema precedente,nell’intento di capire le nuove funzionalità e i metodi lavorativi. Tengo a precisare che il punto di vista dello scrivente è legato esclusivamente a fattori riguardanti il layout,l’impaginazione, le possibilità di personalizzazione dei vari “blocchi” con minimi accenni legati alla programmazione pura che in questa sede sono confinati unicamente alla struttura dell’index.php del template stesso e agli inserimenti di quegli ormai famosi “snippet” di codice che si occupano del richiamo a video di componenti e moduli.
il core del sistema è davvero cambiato e dal lato template molto è stato aggiunto/variato.Cominciamo a vedere la struttura stessa dei nuovi template:
Versione template 1.0.13
file presenti nella cartella del template di default:

file templateDetails.xml

file index.php

file template_thumbnail.png

cartella css

cartella images

Il riferimento è ovviamente ad un template standard senza script aggiuntivi
Versione template 1.5
file presenti nella cartella del template di default: (tra parentesi se variato o nuovo)

file templateDetails.xml (variato)

file Index.php (variato)

file template_thumbnail.png

file params.ini (nuovo)

file favicon.ico (nuovo)

cartella css (modificato)

cartella html (nuovo)

cartella images

La struttura appare subito differente,più ampia,e lo è di sicuro e più avanti cominceremo a capire in quale modo e con quali possibilità.
Analizziamo le singole voci:
file templateDetails.xml
<?xml version=”1.0” encoding=”utf-8”?> <install version=”1.5” type=”template”>
Struttura e funzioni variate rispetto alla 1.0.13 oltre che per la il richiamo alla versione 1,5 infatti altri parametri vanno inseriti nel file xml. <positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>breadcrumb</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>debug</position>
<position>syndicate</position>
</positions>
<params>
<param name="headerLevelComponent" type="list" default="2"
label="header level Component" description="">
<option value="1">h1</option>
<option value="2">h2</option>
<option value="3">h3</option>
<option value="4">h4</option>
<option value="5">h5</option>
</param>
<param name="pageTitleHeaderLevel" type="list" default="1"
label="header level page title" description="">
<option value="1">h1</option>
<option value="2">h2</option>
<option value="3">h3</option>
<option value="4">h4</option>
<option value="5">h5</option>

[Solo gli utenti registrati possono visualizzare tutti i links]

</param> Il primo parametro “option” si riferisce alle zone moduli presenti nel template,nell’atto della costruzione del template,oltre che inserite nell’index.php,andranno riportate anche in questo file in caso contrario il template non funzionerebbe. Gli altri due parametri si riferiscono alla testata dei componenti e alle testate delle pagine e questi due parametri li ritroviamo anche nel file “params.ini”
file Index.php
I cambiamenti sostanziali si cominciamo a vedere proprio nella struttura di questo file (il gestore finale dell’output)
Restando invariate le finalità (cioè gestione del layout globale del sito) sono radicalmente cambiate le modalità di richiamo dei vari blocchi che creano e compongono l’output a video del CMS:
A cominciare dall’header per esempio e come riportato sul tutorial di Barrie north il listato: <!DOCTYPE html PUBLIC “-W3CDTD XHTML 1.0 Transitional//EN” “[Solo gli utenti registrati possono visualizzare tutti i links]
“>
<html xmlns=”[Solo gli utenti registrati possono visualizzare tutti i links]
” xml:lang=”<?php echo $this→language; ?>” lang=”<?php echo $this→language; ?>” >
<head>
Fà prelevare direttamente dal file di configurazione il parametro relativo alla lingua
mentre il susseguente:
<jdoc:include type=”head” />
prende sempre dallo stesso file parametri relativi ai metatag,alla favicon e agli rss del sito.
Cambia nella sostanza la sintassi utilizzata e cioè al posto di:
<link href=”<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/css/template_css.css”
presente nella versione 1.0.13 del template rhuk_solarflare
troviamo ora:
<link rel=”stylesheet” href=”templates/<?php echo $this→template ?>/css/template.css” type=”text/css” />
la variabile <?php echo $this→template ?> sostituisce<?php echo $mosConfig_live_site;?> come percorso base di richiamo.
Ovviamente ciò vale per tutti i file da richiamare,ad esempio nel template Beez sempre nella attuale versione 1,5 RC1 il richiamo all’immagine del logo è il seguente:
<img src=”templates/<?php echo $this→template ?>/images/logo.gif”
I componenti ed i moduli
Listato relativo alla versione 1.0.0 di Joomla! per richiamare il Mainbody:
<?php mosMainBody(); ?>
Diventa per la 1,5
<jdoc:include type=”component” />
E a questo punto una piccola considerazione,il listato completo e corretto relativo al richiamo dell’output dei componenti è il seguente (si considerano sempre listati relativi ai template di default di joomla! 1,5):
<?php if($this→params→get(’showComponent’)) : ?>
<jdoc:include type="component" /> <?php endif; ?> Significa che vengono lette le variabili impostate nel file “Params.in” uno dei nuovi file inseriti nella struttura (come segnalato sopra) e a seconda dei casi può essere possibile non visualizzare il componente nella pagina.E’ di sicuro un impostazione utile......il primo caso che viene in mente riporta alle tante richieste sui forum ufficiali di utenti che desideravano avere due home page distinte,la prima senza output del mainbody e le altre in modalità normale (es. quando si desidera mostrare in determinate pagine solo l’output di moduli senza il mainbody).In aggiunta questa funzione potrebbe di sicuro rivelarsi interessante per la gestione degli spazi occupati dai moduli in assenza dell’output di componenti,ma và ovviamente gestita con condizioni php.
I moduli,cosa è cambiato nella loro gestione
lo snippet di codice della versione 1.0.0
<?php mosLoadModules ( ‘user1’ ); ?>
Le possibilità di output della versione 1.0.0 oltre ad assegnare un nome e posizione al modulo prevedevano anche il suo “stile”, è cioè possibile assegnare questi stili:
0, 1, -1, -2 , -3
Esempio:
<?php mosLoadModules ( ‘user1’, -2 ); ?>
Gli stili 0 ed 1 creano un output in tabelle,il primo in colonna il secondo in celle
lo stile -1 genera un output grezzo e senza titolo del modulo
lo stile -2 genera un ouput con div contenitore e testata (h3)
lo stile -3 genera un output con div annidati fornendo possibilità maggiormente performanti (si và dalla possibilità di differenziare testata,parte centrale e footer del modulo,sino alla creazione ad esempio di moduli scalabili (adattabili) in larghezza ed altezza o all’utilizzo di angoli arrotondati (sfruttando la composizione di immagini)
Nella Nuova versione di Joomla! invece abbiamo questo:
<jdoc:include type=”modules” name=”user2” style=”xhtml” />
e gli stili disponibili per i livelli diventano,come riportato da barrie north e come peraltro facilmente visibile nel file index.php del template rhuk_milkyway

table

horz

xhtml

rounded

gli stili table ed horz si rifanno agli stili 0 ed 1 della versione 1.0.0
lo stile xhtml genera un div contenitore per il modulo e la sua testata in h3
lo stile rounded genera div annidati che riprendono le funzionalità dello stile -3 precedente
E’ in ogni caso possibile personalizzare ulteriormente l’output dei moduli utilizzando i suffissi css come del resto abbiamo fatto fin’ora.
In sostanza i cambiamenti sembrano di facile comprensione e sicuramente capire questa nuova sintassi aiuta nella migrazione dei template dalla versione 1.0.0 alla versione 1,5,ma sfortunatamente o fortunamente,a seconda dei casi,per noi non è tutto qui, ci sono altre considerazioni da fare.
Nei riferimenti fatti in precedenza sui cambiamenti del core di joomla avevo premesso che il lavoro degli sviluppatori è stato magnifico e non è stato rivolto solo al distacco definitivo dai sorgenti Mambo bensì si è cercato di dare maggiore flessibilità al lavoro dei designer e dei programmatori, realizzando quello che a prima vista sembra una specie di sistema template aggiuntivo e differenziato:
Ogni componente ed ogni modulo di Joomla! versione 1,5 ha la sua cartella “tpl” ad esempio prendiamo il componente “com_search”,all’interno della cartella views\search\tmpl ed aprendo il file “default.php” osserviamo il listato prestanto attenzione alla classe componentheading:
Faccio riferimento a componentheading per fare notare che è cioè possibile a questo punto anche assegnare css diversi ai componenti per fare cioè in modo di avere testate diverse per diversi componenti.
Stiamo però agendo direttamente nel core del sistema,questo è bene ricordarlo,ed è una cosa che possiamo fare anche nella versione 1.0.0,allora perchè questa nuova struttura?
La risposta credo si possa trovare aprendo il template “beez” anch’esso presente di default nell’installazione di Joomla! 1,5 e prestando attenzione al contenuto della cartella “html” al suo interno

com_content

com_newsfeeds

com_poll

mod_latestnews

mod_login

Ne cito solo alcune,in realtà sono molte di più, e vi invito a fare questa prova,installate come predefinito il template in questione,osservate la home e il modulo “login”,ora semplicemente rinominate la cartella “mod_login” e fate un refresh della home...........visto?
il layout del modulo login è cambiato perchè il suo layout adesso è gestito esternamente e precisamente dalla cartella “mod_login” presente nel template “Beez” con sue classi css definite.Altre prove fatte ad esempio impostando uno sfondo #000 ai file relativi della cartella “com_contact” hanno dato esito positivo.

21-08-2008, 01.57.47	#1
jarod1981® Admin 1,618034 Data registrazione: 21-12-2005 Residenza: Dove il mare luccica ;-) Messaggi: 12,300	Guide Joomla : Analisi della nuova struttura template in Joomla! 1.5 Si tratta di una prima analisi e comparazione col sistema precedente,nell’intento di capire le nuove funzionalità e i metodi lavorativi. Tengo a precisare che il punto di vista dello scrivente è legato esclusivamente a fattori riguardanti il layout,l’impaginazione, le possibilità di personalizzazione dei vari “blocchi” con minimi accenni legati alla programmazione pura che in questa sede sono confinati unicamente alla struttura dell’index.php del template stesso e agli inserimenti di quegli ormai famosi “snippet” di codice che si occupano del richiamo a video di componenti e moduli. il core del sistema è davvero cambiato e dal lato template molto è stato aggiunto/variato.Cominciamo a vedere la struttura stessa dei nuovi template: Versione template 1.0.13 file presenti nella cartella del template di default: file templateDetails.xml file index.php file template_thumbnail.png cartella css cartella images Il riferimento è ovviamente ad un template standard senza script aggiuntivi Versione template 1.5 file presenti nella cartella del template di default: (tra parentesi se variato o nuovo) file templateDetails.xml (variato) file Index.php (variato) file template_thumbnail.png file params.ini (nuovo) file favicon.ico (nuovo) cartella css (modificato) cartella html (nuovo) cartella images La struttura appare subito differente,più ampia,e lo è di sicuro e più avanti cominceremo a capire in quale modo e con quali possibilità. Analizziamo le singole voci: file templateDetails.xml <?xml version=”1.0” encoding=”utf-8”?> <install version=”1.5” type=”template”> Struttura e funzioni variate rispetto alla 1.0.13 oltre che per la il richiamo alla versione 1,5 infatti altri parametri vanno inseriti nel file xml. <positions> <position>left</position> <position>right</position> <position>top</position> <position>breadcrumb</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>debug</position> <position>syndicate</position> </positions> <params> <param name="headerLevelComponent" type="list" default="2" label="header level Component" description=""> <option value="1">h1</option> <option value="2">h2</option> <option value="3">h3</option> <option value="4">h4</option> <option value="5">h5</option> </param> <param name="pageTitleHeaderLevel" type="list" default="1" label="header level page title" description=""> <option value="1">h1</option> <option value="2">h2</option> <option value="3">h3</option> <option value="4">h4</option> <option value="5">h5</option> [Solo gli utenti registrati possono visualizzare tutti i links] </param> Il primo parametro “option” si riferisce alle zone moduli presenti nel template,nell’atto della costruzione del template,oltre che inserite nell’index.php,andranno riportate anche in questo file in caso contrario il template non funzionerebbe. Gli altri due parametri si riferiscono alla testata dei componenti e alle testate delle pagine e questi due parametri li ritroviamo anche nel file “params.ini” file Index.php I cambiamenti sostanziali si cominciamo a vedere proprio nella struttura di questo file (il gestore finale dell’output) Restando invariate le finalità (cioè gestione del layout globale del sito) sono radicalmente cambiate le modalità di richiamo dei vari blocchi che creano e compongono l’output a video del CMS: A cominciare dall’header per esempio e come riportato sul tutorial di Barrie north il listato: <!DOCTYPE html PUBLIC “-W3CDTD XHTML 1.0 Transitional//EN” “[Solo gli utenti registrati possono visualizzare tutti i links] “> <html xmlns=”[Solo gli utenti registrati possono visualizzare tutti i links] ” xml:lang=”<?php echo $this→language; ?>” lang=”<?php echo $this→language; ?>” > <head> Fà prelevare direttamente dal file di configurazione il parametro relativo alla lingua mentre il susseguente: <jdoc:include type=”head” /> prende sempre dallo stesso file parametri relativi ai metatag,alla favicon e agli rss del sito. Cambia nella sostanza la sintassi utilizzata e cioè al posto di: <link href=”<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/css/template_css.css” presente nella versione 1.0.13 del template rhuk_solarflare troviamo ora: <link rel=”stylesheet” href=”templates/<?php echo $this→template ?>/css/template.css” type=”text/css” /> la variabile <?php echo $this→template ?> sostituisce<?php echo $mosConfig_live_site;?> come percorso base di richiamo. Ovviamente ciò vale per tutti i file da richiamare,ad esempio nel template Beez sempre nella attuale versione 1,5 RC1 il richiamo all’immagine del logo è il seguente: <img src=”templates/<?php echo $this→template ?>/images/logo.gif” I componenti ed i moduli Listato relativo alla versione 1.0.0 di Joomla! per richiamare il Mainbody: <?php mosMainBody(); ?> Diventa per la 1,5 <jdoc:include type=”component” /> E a questo punto una piccola considerazione,il listato completo e corretto relativo al richiamo dell’output dei componenti è il seguente (si considerano sempre listati relativi ai template di default di joomla! 1,5): <?php if($this→params→get(’showComponent’)) : ?> <jdoc:include type="component" /> <?php endif; ?> Significa che vengono lette le variabili impostate nel file “Params.in” uno dei nuovi file inseriti nella struttura (come segnalato sopra) e a seconda dei casi può essere possibile non visualizzare il componente nella pagina.E’ di sicuro un impostazione utile......il primo caso che viene in mente riporta alle tante richieste sui forum ufficiali di utenti che desideravano avere due home page distinte,la prima senza output del mainbody e le altre in modalità normale (es. quando si desidera mostrare in determinate pagine solo l’output di moduli senza il mainbody).In aggiunta questa funzione potrebbe di sicuro rivelarsi interessante per la gestione degli spazi occupati dai moduli in assenza dell’output di componenti,ma và ovviamente gestita con condizioni php. I moduli,cosa è cambiato nella loro gestione lo snippet di codice della versione 1.0.0 <?php mosLoadModules ( ‘user1’ ); ?> Le possibilità di output della versione 1.0.0 oltre ad assegnare un nome e posizione al modulo prevedevano anche il suo “stile”, è cioè possibile assegnare questi stili: 0, 1, -1, -2 , -3 Esempio: <?php mosLoadModules ( ‘user1’, -2 ); ?> Gli stili 0 ed 1 creano un output in tabelle,il primo in colonna il secondo in celle lo stile -1 genera un output grezzo e senza titolo del modulo lo stile -2 genera un ouput con div contenitore e testata (h3) lo stile -3 genera un output con div annidati fornendo possibilità maggiormente performanti (si và dalla possibilità di differenziare testata,parte centrale e footer del modulo,sino alla creazione ad esempio di moduli scalabili (adattabili) in larghezza ed altezza o all’utilizzo di angoli arrotondati (sfruttando la composizione di immagini) Nella Nuova versione di Joomla! invece abbiamo questo: <jdoc:include type=”modules” name=”user2” style=”xhtml” /> e gli stili disponibili per i livelli diventano,come riportato da barrie north e come peraltro facilmente visibile nel file index.php del template rhuk_milkyway table horz xhtml rounded gli stili table ed horz si rifanno agli stili 0 ed 1 della versione 1.0.0 lo stile xhtml genera un div contenitore per il modulo e la sua testata in h3 lo stile rounded genera div annidati che riprendono le funzionalità dello stile -3 precedente E’ in ogni caso possibile personalizzare ulteriormente l’output dei moduli utilizzando i suffissi css come del resto abbiamo fatto fin’ora. In sostanza i cambiamenti sembrano di facile comprensione e sicuramente capire questa nuova sintassi aiuta nella migrazione dei template dalla versione 1.0.0 alla versione 1,5,ma sfortunatamente o fortunamente,a seconda dei casi,per noi non è tutto qui, ci sono altre considerazioni da fare. Nei riferimenti fatti in precedenza sui cambiamenti del core di joomla avevo premesso che il lavoro degli sviluppatori è stato magnifico e non è stato rivolto solo al distacco definitivo dai sorgenti Mambo bensì si è cercato di dare maggiore flessibilità al lavoro dei designer e dei programmatori, realizzando quello che a prima vista sembra una specie di sistema template aggiuntivo e differenziato: Ogni componente ed ogni modulo di Joomla! versione 1,5 ha la sua cartella “tpl” ad esempio prendiamo il componente “com_search”,all’interno della cartella views\search\tmpl ed aprendo il file “default.php” osserviamo il listato prestanto attenzione alla classe componentheading: Faccio riferimento a componentheading per fare notare che è cioè possibile a questo punto anche assegnare css diversi ai componenti per fare cioè in modo di avere testate diverse per diversi componenti. Stiamo però agendo direttamente nel core del sistema,questo è bene ricordarlo,ed è una cosa che possiamo fare anche nella versione 1.0.0,allora perchè questa nuova struttura? La risposta credo si possa trovare aprendo il template “beez” anch’esso presente di default nell’installazione di Joomla! 1,5 e prestando attenzione al contenuto della cartella “html” al suo interno com_content com_newsfeeds com_poll mod_latestnews mod_login Ne cito solo alcune,in realtà sono molte di più, e vi invito a fare questa prova,installate come predefinito il template in questione,osservate la home e il modulo “login”,ora semplicemente rinominate la cartella “mod_login” e fate un refresh della home...........visto? il layout del modulo login è cambiato perchè il suo layout adesso è gestito esternamente e precisamente dalla cartella “mod_login” presente nel template “Beez” con sue classi css definite.Altre prove fatte ad esempio impostando uno sfondo #000 ai file relativi della cartella “com_contact” hanno dato esito positivo. __________________

Strumenti discussione
Visualizza versione stampabile Invia questa pagina via e-mail
Modalità visualizzazione
Modalità lineare Modalità ibrida Modalità elencata