Creare una sezione di navigazione personalizzata
Note: Return to tutorial view.
Creare una sezione di navigazione personalizzata
Se si sta creando una skin personalizzata, potrebbe essere utile una sezione di navigazione personalizzata, magari in un portlet, o semplicemente come parte di un main_template customizzato o altri template standard (header, per esempio). Questo documento mostra proprio come fare tutto ciò, con le seguenti premesse e i seguenti rischi:
- Tutti gli elementi che appariranno nella navigazione saranno sotto un'unica cartella. Per quest'esempio, la cartella sarà
/sections, ma se ne può usare una qualsiasi (Se si vuole usare la root del portale, passare uno string vuoto come nome della cartella nella chiamata agetSectionsdi seguito. Se si vogliono elencare elementi sotto la cartella corrente, indipendentemente da dove essa si trovi, passare invece la stringa.- come un unico punto). - L'ordine di navigazione è significativo. Un amministratore del portale può cambiare l'ordine dei contenuti di
/sectionsusando i pulsanti standard di riordinamento presenti nella tabella "contenuti" della cartella. - Potrebbe essere necessario ignorare alcuni elementi. L'attributo standard
exclude_from_navdi Plone, che è mostrato come opzione nel tab "Proprietà" di tutti i tipi di contenuto, funzionerà esattamente allo stesso modo, come in un albero di navigazione standard. - Potrebbero essere necessari dei sottomenù nella navigazione - questo metodo permetterà di specificare una profondità prefissata di sottomenù da considerare. Per esempio, se si ha una cartella
/sections/info, e si imposta la profondità a 2, si potranno creare link sia alla stessainfo, sia ai suoi sottoinsiemi. Alternativamente, si possono avere tutte le sottosezioni in una root data. - Si vorrà probabilmente evidenziare l'elemento correntemente selezionato dal navigatore.
getSectionselabora quale elemento è correntemente selezionato e imposta la sua proprietàselectedsu True. Ciò avviene in maniera ricorsiva, quindi con una navigazione a due livelli di profondità, se l'utente è in/sections/contact/email-form, siacontactcheemail-formsaranno segnati comeselected.
Sintassi semplice
Questo metodo è costituito da due parti: uno script chiamato getSections.py che dovrebbe essere messo nella cartella della skin (o in portal_skins/custom, in questo caso va eliminato il suffisso .py) e una parte di codice TAL che può essere usato come base per sviluppare la propria navigazione personalizzata. Si tende a mettere tutto ciò direttamente in main_template o in un template incluso in main_template dato che è il modo principale per navigare un sito, ma un portlet può essere un altro buon posto in cui posizionarlo.
Il codice TAL per mostrare la navigazione deve richiamare lo script getSections e usare la struttura dati di ritorno in uno o più cicli tal:repeat. Per una navigazione a due livelli di profondità che mostri tutte le cartelle e i documenti sotto /sections nella root del portale, si userà una struttura simile a questa:
<ul class="topLevelNavigation"
tal:define="sections python:here.getSections('/sections', levels=2, types=['Folder', 'Document'])">
<li tal:repeat="section sections">
<a tal:attributes="href section/item/getURL;
class python:test (section['active'], 'selected', '');"
tal:content="section/item/Title">
Top level section
</a>
<ul class="secondLevelNavigation">
<li tal:repeat="subsection section/children">
<a tal:attributes="href subsection/item/getURL;
class python:test (subsection['active'], 'selected', '');"
tal:content="subsection/item/Title">
Second level section
</a>
</li>
</ul>
</li>
</ul>
Da notare l'uso delle classi CSS - da usare (o classi simili a queste) per modellare la navigazione in modo appropriato. In particolare, da notare come la classe del tag <a> è impostata su selected per l'elemento selezionato. Usare .selected nel proprio foglio di stile per evidenziare l'elemento correntemente selezionato nella navigazione.
Per l'accessibilità, gli elementi di navigazione dovrebbero sempre essere in un <ul> in modo che appaiano come si desidera. Per controllare se la navigazione creata funziona, si può provare ad accedere al sito in un browser in modalità testo come lynx, oppure non renderizzare nella propria finestra il foglio di stile di Plone (usare Opera o Firefox). Se ciò che appare è una lista ben ordinata, usabile e pratica, è molto più probabile che il sito sia accessibile a persone disabili e da browser meno potenti.
Macro ricorsive e liste con più livelli
Per fare un ulteriore passo, si possono usare macro ricorsive per ottenere delle liste con diversi livelli di profondità. Ciò richiede l'uso di due template e di macro.
Prima di tutto, creare un template chiamato 'navigation_macros.pt':
<ul metal:define-macro="navigation_menu">
<li tal:repeat="section sections">
<a tal:attributes="href section/item/getURL;
class python:test (section['active'], 'selected', '');"
tal:content="section/item/Title">
Top level section
</a>
<tal:recurse define="sections section/children"
condition="nocall:sections">
<metal:call use-macro="here/navigation_macros/macros/navigation_menu" />
</tal:recurse>
</li>
</ul>
Notare il blocco tal:recurse. Questo richiama nuovamente la stesso macro per sottoinsiemi dell'elemento corrente, producendo quindi liste a più livelli. Il template richiama la macro per definire una variabile sections che gestisca le sezioni di livello più alto, e poi per ridefinire queste ultime in modo che puntino alle sottosezioni, in modo ricorsivo.
Ora c'è solo più bisogno di richiamare il template dove il menù deve essere visualizzato:
<tal:block define="sections python:here.getSections('/info')">
<metal:call use-macro="here/navigation_macros/macros/navigation_menu" />
</tal:block>
Non passando un parametro levels, si otterranno tutte le sezioni sotto /info.
Credits
Questo documento è stato realizzato da:
- Alice Narduzzo
Fonti e contributi:
Questo how-to è una libera traduzione del testo originale Creating a custom navigation section.
Nota: Questo tutorial si riferisce alla versione Plone 2.1.x.