In questo esempio mostro come integrare una Progress Bar jQuery in una portlet.
Scriptlet Java:
<%
//ottieni totali sul progresso Utente Completo
int progressUtentecompleto = 0;
int totServiziByUtente = ActionUtil.getTotServiziByUtente(utente);
if(totServiziByUtente > 0)
progressUtentecompleto++;
int totRuoliByUtente = ActionUtil.getTotRuoliByUtente(utente);
if(totRuoliByUtente > 0)
progressUtentecompleto++;
int totUnitLogByUtente = ActionUtil.getTotUnitLogByUtente(utente);
if(totUnitLogByUtente > 0)
progressUtentecompleto++;
int totCentrServByUtente = ActionUtil.getTotCentrServByUtente(utente);
if(totCentrServByUtente > 0)
progressUtentecompleto++;
int totSistEstByUtente = ActionUtil.getTotSistEstByUtente(utente);
if(totSistEstByUtente > 0)
progressUtentecompleto++;
%>
I metodi statici della classe ActionUtil non fanno altro che utilizzare le classi Utils delle rispettive Entity Liferay per ottenere il numero di record (COUNT(*)) di una certa tabella(o entity).
La variabile progressUtentecompleto viene incrementata ogni volta che il numero di record di una certa tabella è maggiroe di zero.
Codice HTML:
<h3>
Stato Utente Piattaforma:
</h3>
<ul>
<li><strong> Totale Servizi associati:</strong>: <span style="color:#FF0000;">
<%=totServiziByUtente %></span></li>
<li><strong> Totale Ruoli associati:</strong> <span style="color:#FF0000;">
<%=totRuoliByUtente %></span></li>
<li><strong> Totale Unita Logistiche associate:</strong>: <span style="color:#FF0000;">
<%=totUnitLogByUtente %></span></li>
<li><strong> Totale Centro Servizi associati:</strong>: <span style="color:#FF0000;">
<%=totCentrServByUtente %></span></li>
<li><strong> Totale Sistemi Esterni associati:</strong>: <span style="color:#FF0000;">
<%=totSistEstByUtente %></span></li>
</ul>
<div id="progressbar"></div>
Codice jQuery / JavaScript / AllowUI (va inserito al fondo della portlet):
il codice qui sotto permette di creare una barra con un colore ben definito a seconda del valore di progressUtentecompleto.
<script type="text/javascript" >
AUI().use('get', function(A){
A.Get.script('http://code.jquery.com/jquery-1.9.1.js', {
onSuccess: function(A){
$(document).ready(function(){
//comandi jQuery Core
});
}
});
});
AUI().use('get', function(A){
A.Get.script('http://code.jquery.com/ui/1.10.3/jquery-ui.js', {
onSuccess: function(A){
$(document).ready(function(){
//calcolo il totale per la barra
var progress = <%=progressUtentecompleto %>;
var tot = (progress / 5) * 100;
//definisco il colore
var colore = "#39e01f";
if(progress<2){
colore = "#ff0000"; //rosso
}else if(progress==2){
colore = "#ff7f00"; //arancione
}else if(progress==3){
colore = "#fff200"; //giallo
}else if(progress>4){
colore = "#39e01f"; //verde
}
$( "#progressbar" ).progressbar({
value: tot
});
progressbar = $( "#progressbar" );
progressbarValue = progressbar.find( ".ui-progressbar-value" );
progressbarValue.css({
"background": colore
});
});
}
});
});
</script>
In rosso le parti più rilevanti.