Creato da pastuweb.com
Share My Page
My Social Accounts
Account FaceBook Account LinkedIn Account Twitter Account Google Plus Account Git Hub
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.
Average (1 Vote)
The average rating is 5.0 stars out of 5.