In un articolo precedente, Utilizziamo i tab di Liferay, abbiamo visto come gestire i tab di Liferay attraverso le taglib messe a disposizione dal portale.

Con il rilascio di Liferay 6.2 e l'integrazione con Bootstrap le possibilità grafica sono aumentate: vediamo quindi come visualizzare i tab in verticale a sinistra ed a destra.

La prima cosa da segnalare è che le taglib ora generano un codice HTML adatto ad essere trattato Bootstrap e quindi è sufficiente giocare un pò con le classi CSS per ottenere il risultato desiderato.

Non entriamo nei dettagli del codice da scrivere, perchè ne abbiamo già parlato nell'altro articolo; pertanto vediamo solamente il codice finale.

Tab a sinistra

<% String currentTab = ParamUtil.getString(renderRequest, "tabs1", "tab1"); %>

<liferay-portlet:renderURL var="changeTabURL" />

<div class="tabbable tabs-left">
    <liferay-ui:tabs
        names="tab1,tab2,tab3"
        url="<%=changeTabURL %>" 
    />

    <div class="tab-content">
        <liferay-util:include
            page='<%= "/html/tab_sample/tabs/" + TextFormatter.format(currentTab, TextFormatter.N)  + ".jsp" %>'
            servletContext="<%= application %>" />
    </div>
</div>

Tab a destra

<% String currentTab = ParamUtil.getString(renderRequest, "tabs1", "tab1"); %>

<liferay-portlet:renderURL var="changeTabURL" />

<div class="tabbable tabs-right">
    <liferay-ui:tabs
        names="tab1,tab2,tab3"
        url="<%=changeTabURL %>" 
    />

    <div class="tab-content">
        <liferay-util:include
            page='<%= "/html/tab_sample/tabs/" + TextFormatter.format(currentTab, TextFormatter.N)  + ".jsp" %>'
            servletContext="<%= application %>" />
    </div>
</div>