Navigation
In questo esempio mostro come integrare una Progress Bar jQuery in una portlet.
Scriptlet Java:
<%//ottieni totali sul progresso Utente Completoint 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.