mercoledì 11 giugno 2008

Joomla 1.5. Tabs in contenuti e moduli

L'uso di tabs (o linguette, tipo schedario o rubrica telefonica) come strumento per consentire all'utente di navigare facilmente tra diverse 'pagine' di informazioni è un modello di interfaccia che si riscontra frequentemente su molti siti web.

Posto che ce ne sia bisogno, ecco un esempio dall'home page di Yahoo.

In Joomla 1.5 le tabs si possono facilmente creare con apposite funzioni del framework. L'unico problema è che le tabs sono di solito utilizzate nel backend, per averle nel frontend è necessario un po' di lavoro. Spiego il procedimento passo passo, stile ricetta della nonna.

Per prima cosa installare il plugin Jumi che ci servirà per facilitare l'inserimento di codice html e php in un contenuto. Il plugin va attivato da Gestione plugin.

Creare con un programma FTP una cartella jumi_includes all'interno della stessa cartella dove è installato Joomla.

Poi creare un file tabs.css. Siccome è difficoltoso fare il copia e incolla dal testo, ho voluto provare pastebin.com: fate click sui nomi dei file che saranno via via citati nell'articolo per vederne una versione con sintassi evidenziata scaricabile o copiabile facilmente.

dl.tabs {
float:left;
margin:10px 0pt -1px;
z-index:50;
}
dl.tabs dt {
background:#F0F0F0 none repeat scroll 0%;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
color:#666666;
float:left;
margin-left:3px;
padding:4px 10px;
}
dl.tabs dt.open {
background:#F9F9F9 none repeat scroll 0%;
border-bottom:1px solid #F9F9F9;
color:#000000;
z-index:100;
}
div.current {
border:1px solid #CCCCCC;
clear:both;
padding:10px;
}
div.current dd {
margin:0pt;
padding:0pt;
}

Questi attributi sono copiati dal foglio di stile del template predefinito del backend e servono a determinare l'aspetto delle tabs. Fare l'upload di tabs.css in jumi_includes.

Creare un file tabs.php con questo contenuto

<?php
JHTML::stylesheet('tabs.css','jumi_includes/');

Questa istruzione serve ad includere nell'intestazione del documento html il file css creato in precedenza. Il percorso del file css è relativo alla cartella di Joomla. Per esempio supponendo che la pagina principale del vostro sito sia raggiungibile con

http://www.example.com/joomla

come risultato della esecuzione di JHTML::stylesheet() con gli argomenti visti sopra, tra <HEAD> e </HEAD> della pagina trovereste

<link rel="stylesheet" href="/joomla/jumi_includes/tabs.css" 
type="text/css" />

È una funzione da tenere a mente perché utilissima quando si sviluppano moduli e componenti che necessitano di inserire propri fogli di stile nell'intestazione del documento html.

Continuiamo con il codice

jimport('joomla.html.pane');

Include la definizione della classe JPane che utilizzeremo subito e inserisce (sempre tra <HEAD> e </HEAD>) il codice Javascript necessario al funzionamento delle tabs. Non vedremo questo codice in dettaglio, fa parte di Joomla e funziona e questa è l'unica cosa che ci interessa.

$tabs = &JPane::getInstance('tabs');
echo $tabs->startPane('test-tabs');

Otteniamo un'istanza dell'oggetto che ci serve e iniziamo il gruppo di tabs con ID test-tabs. Potete scegliere l'ID che preferite, ma se si vogliono creare più gruppi di tabs sulla stessa pagina è importante che ognuno abbia un ID differente.

echo $tabs->startPanel('Tab1', 'test-tab1');
?>
<p>Contenuto tab1</p>
<p>qwerty</p>
<?php
echo $tabs->endPanel();

Contenuto della prima tab. Mi sembra abbastanza intuitivo: inseriamo il codice html che vogliamo tra startPanel() e endPanel(). Gli argomenti da passare al primo metodo sono il titolo visibile della tab e un ID che anche in questo caso deve essere univoco.

echo $tabs->startPanel('Tab2', 'test-tab2');
?>
<p>Contenuto tab2</p>
<?php
echo $tabs->endPanel();
echo $tabs->startPanel('Tab3', 'test-tab3');
?>
<p>Contenuto tab3</p>
<?php
echo $tabs->endPanel();
echo $tabs->endPane();
?>

Allo stesso modo si creano la seconda e la terza tab e si chiude il gruppo con endPane()

Fare l'upload di tabs.php in jumi_includes.

A questo punto create un articolo e nel contenuto inserite il comando Jumi

{jumi [jumi_includes/tabs.php]}

Pubblicate e visualizzate l'articolo nel frontend. Il risultato dovrebbe essere questo.

Considerando che possiamo inserire codice html come contenuto dei tabs penso sia chiaro che si possono ottenere effetti interessanti.

Ma potrebbe essere anche più interessante visualizzare dei moduli a nostra scelta in un gruppo di tabs. Si può fare, ecco la seconda ricetta.

Per prima cosa aprire con un editor di testi il file templateDetails.xml nella cartella del proprio template. Aggiungere una nuova posizione tabs nella sezione positions

<positions>
...  
<position>tabs</position>
</positions>

Al posto dei puntini avete le altre posizioni previste dal template: quelle non vanno toccate (precisazione forse inutile).

Poi effettuare il login al backend di Joomla! ed entrare in Gestione moduli. Aprire mod_latestnews (modulo Ultime Notizie), se non è nella lista dei moduli crearlo con Nuovo. Nella schermata di modifica del modulo impostare

  • Posizione: tabs
  • Assegnazione Menu: Tutti

Questo non significa che il modulo sarà visibile su tutte le pagine perché la posizione tabs che abbiamo aggiunto non è richiamata nel codice del template. Caricheremo il contenuto del modulo da codice (vedremo subito come).

Ripetere le stesse identiche operazioni per il modulo mod_mostread (Articoli più letti). Potete ovviamente scegliere due (o più) moduli diversi.

Creare un file tabs_moduli.php con questo contenuto

<?php
JHTML::stylesheet('tabs.css','jumi_includes/');
jimport('joomla.html.pane');
$tabs = &JPane::getInstance('tabs');
echo $tabs->startPane('moduli-tabs');

$document = &JFactory::getDocument();
$renderer = $document->loadRenderer('module');

La prima parte è identica al primo esempio. Le ultime due righe servono ad ottenere un'istanza dell'oggetto renderer per la visualizzazione del contenuto dei moduli. Non mi dilungo in troppi dettagli.

$i = 1;
foreach (JModuleHelper::getModules('tabs') as $mod)  {

Per ogni modulo assegnato alla posizione tabs

 echo $tabs->startPanel($mod->title, 'mod'.$i);

si crea un tab che ha per titolo il titolo del modulo

 echo $renderer->render($mod);
 echo $tabs->endPanel();

come contenuto del tab si inserisce il contenuto del modulo ottenuto utilizzando l'oggetto renderer e si chiude il tab

 $i++;
}
echo $tabs->endPane();
?>

Effettuare l'upload di tabs_moduli.php nella cartella jumi_includes usata in precedenza.

Creare un articolo, ma va bene anche quello creato in precedenza, e inserire nel contenuto il comando Jumi

{jumi [jumi_includes/tabs_moduli.php]}

Salvare e visualizzare l'articolo nel frontend. Il risultato dovrebbe essere di questo tipo

Mi sembra una buona soluzione salva spazio: si possono pubblicare più moduli nello spazio occupato da uno e lasciare che sia l'utente a scegliersi le informazioni da visualizzare selezionando le tabs.

Oltre al plugin esiste un modulo Jumi. Negli esempi abbiamo sempre utilizzato le tabs nel contenuto di un articolo, con il modulo Jumi possiamo utilizzarle allo stesso modo in una posizione modulo del template.

Per modificare l'aspetto e i colori delle tabs ed adattarli al template è necessario agire sul file tabs.css.

Questo è un post da smanettoni. Può darsi, sinceramente non mi sono messo a spulciare la directory delle estensioni su joomla.org, che ci siano moduli già pronti che fanno questo genere di cose. Però scriversi il codice a mano ci ha consentito di conoscere alcune funzioni del framework che possono sempre tornare utili.

Alla prossima.

4 commenti:

Anonimo ha detto...

post mooolto utile, solo che io il menu non lo vedo in alto in tabs come nell'immagine. Credo dipenda dal foglio di stile...o dal template.

Anonimo ha detto...

..sono quello di prima! in effetti avevo sbagliato a richiamare il foglio di stile! CIAO!

Anonimo ha detto...

Domanda: ma se si volesse solo un modulo dove ogni tab è semplicemente la voce di menù???

Massimo ha detto...

Se ho capito quello che vuoi fare basta lavorare con i css, non serve neppure Javascript. Ti consiglio di cercare tra i molti template gratuiti di Joomla uno con la navigazione a tab e studiarlo.