bloggers bloggers

Dovendo migliorare l'accessibilità di un sito fatto con liferay 6 abbiamo dovuto implementare un portlet che consentisse ad ogni utente di modifcare il font, consentendone l' ingrandimento o la riduzione delle dimensioni, nonchè un utilizzo di contrasto alto.
La soluzione che abbiamo utilizzato sfrutta i color schemas relativi al tema di lifery.
Per ogni tipo di visualizzazione che volevamo rendere disponibile abbiamo creato un color schema dedicato, il quale tramite css definisce le proprietà da cambiare.
Successivamente abbiamo implementato un portlet che non fa altro che settare a run time un particolare color schema per il tema, in base alla selezione dell'utente.

Questa sotto è l'immagine del nostro portlet.

Il codice della jsp che mostra questo portlet è

<%@include file="/html/init.jsp" %>

<%
String titolo =(String)renderRequest.getAttribute("titolo");
if(titolo!=null && !"".equals(titolo) && "Piccolo".equals(titolo))
colorScheme.setCssClass("piccolo");
else if(titolo!=null && !"".equals(titolo) && "Grande".equals(titolo))
colorScheme.setCssClass("grande");
else if(titolo!=null && !"".equals(titolo) && "Negativo".equals(titolo))
colorScheme.setCssClass("negativo");
else
colorScheme.setCssClass("normale");
%>

<ul class="accessibilita">

<portlet:actionURL name="changeFontStyle" var="urlPiccolo">
<portlet:param name="titolo" value="Piccolo" />
</portlet:actionURL>
<li class="access"><a href="<%=urlPiccolo.toString() %>">A-</a></li>

<portlet:actionURL name="changeFontStyle" var="urlGrande">
<portlet:param name="titolo" value="Grande" />
</portlet:actionURL>
<li class="access"><a href="<%=urlGrande.toString() %>">A+</a></li>

<portlet:actionURL name="changeFontStyle" var="urlNormale">
<portlet:param name="titolo" value="Normale" />
</portlet:actionURL>
<li class="access"><a href="<%=urlNormale.toString() %>">&nbsp;A</a></li>

<portlet:actionURL name="changeFontStyle" var="urlNegativo">
<portlet:param name="titolo" value="Negativo" />
</portlet:actionURL>
<li class="access-"><a href="<%=urlNegativo.toString() %>">&nbsp;A</a></li>
</ul>

Il metodo changeFontStyle mette in request il nome del color schema da settare, cosa che viene fatta direttamente nella jsp nella parte iniziale,

colorScheme.setCssClass("piccolo");

colorScheme è un oggetto che è possibile accedere inserendo la chiamata ad una taglib di Liferay

<liferay-theme:defineObjects />

Il metodo setCssClass non fa altro che cambiare il color schema applicato al tema, che è quello che volevamo ottenere.

Per vedere come utilizzare i color schema è possibile consultare il wiki di Liferay qui.