Kendo UI è una libreria che si pone come alternativa a jQuery UI e jQuery Mobile. Anch'essa è basata su jQuery e sfrutta le potenzialità di HTML5 consentendo lo sviluppo di interfacce grafiche evolute sia per il Web che per il mobile.
Pur rappresentando un framework completo per lo sviluppo di applicazioni HTML5, Kendo UI è compatibile con tutti i principali browser, anche i meno recenti: Internet Explorer 7+, Firefox 3+, Chrome, Safari 4+, e Opera 10+.
Il framework è composto di tre pacchetti:
- Kendo UI Web, per la realizzazione di interfacce Web evolute
- Kendo UI DataViz, un insieme di widget per la visualizzazione grafica dei dati
- Kendo UI Mobile, una libreria per la realizzazione di applicazioni Web per il mobile
Prima di vedere un esempio pratico aggiungiamo solo che sono completamente maturi solo i primi due pacchetti, mentre Kendo UI Mobile è disponibile solo in beta e che il framework è distribuito in dual licensing: una licenza commerciale ad hoc, che include anche il supporto, e la licenza GPLv3. In ogni caso per scaricarlo occorre registrarsi sul sito del produttore.
Kendo UI Web, TreeView
Andiamo al concreto provando Kendo UI Web, che può essere considerato il diretto concorrente di jQuery UI. Rispetto a questa libreria, Kendo UI Web si presenta con una maggiore ricchezza di widget. Molte delle funzionalità che in jQuery troviamo disseminate in vari plugin, Kendo UI li fornisce nativamente: Timepicker, TreeView, Grid, giusto per citarne qualcuno.
Per iniziare con l'esempio pensiamo a caricare la libreria nelle pagine HTML del nostro progetto. La versione di jQuery supportata è la 1.7.1 o superiore.
Possiamo scegliere se includere la libreria JavaScript kendo.all.min.js, contenente l'intero framework, compreso Kendo UI DataViz, e che ha il peso significativo di circa 300KB, oppure includere selettivamente le librerie corrispondenti ai widget che servono.
Scegliamo la via più economica e importiamo il widget TreeView, includendo le librerie:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.core.min.js"></script>
<script type="text/javascript" src="js/kendo.fx.min.js"></script>
<script type="text/javascript" src="js/kendo.treeview.min.js"></script>La libreria kendo.core.min.js contiene le funzionalità di base del framework, mentre kendo.fx.min.js gli effetti grafici e kendo.treeview.min.js la definizione del widget TreeView.
Il codice HTML per definire la struttura del widget sarà analogo al seguente:
<ul id="treeview">
<li data-expanded="true">Toscana
<ul>
<li>Firenze</li>
<li>Pisa</li>
<li>Siena</li>
</ul>
</li>
<li>Lazio
<ul>
<li>Roma</li>
<li>Latina</li>
<li>Viterbo</li>
</ul>
</li>
<li>Valle d'Aosta</li>
</ul>mentre il codice JavaScript per abilitarlo è:
$(document).ready(function() {
$("#treeview").kendoTreeView();
});Vediamo l'esempio in esecuzione:
Kendo UI DataViz
Un particolare gruppo di widget, che prende il nome di Kendo UI DataViz, è specializzato nella visualizzazione di dati in forma di grafici, a barre, lineari, a torta, a linea spezzata, di notevole impatto visivo. Ad esempio, la visualizzazione di dati statistici su un grafico a torta prevede il caricamento delle opportune librerie:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.core.min.js"></script>
<script type="text/javascript" src="js/kendo.chart.min.js"></script>la definizione di un <div> HTML:
<div id="chart"></div>l'attivazione del widget tramite JavaScript:
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Età dei lettori di HTML.it"
},
legend: {
position: "bottom"
},
seriesDefaults: {
labels: {
visible: true,
format: "{0}%"
}
},
series: [{
type: "pie",
data: [ {
category: "Tra 25 e 45 anni",
value: 47
}, {
category: "Tra 18 e 24 anni",
value: 16
}, {
category: "Oltre 55 anni",
value: 15
}, {
category: "Tra 46 e 54 anni",
value: 14
},{
category: "Meno di 18 anni",
value: 8
} ]
}],
tooltip: {
visible: true,
format: "{0}%"
}
});
}
$(document).ready(function() {
setTimeout(function() {
createChart();
}, 400);
//Il ritardo impostato assicura la visibilità dell'animazione iniziale
$(document).bind("kendo:skinChange", function(e) {
createChart();
});
});In questo esempio, la funzione createChart() crea il widget invocando il metodo kendoChart() con la definizione dei dati da visualizzare in formato JSON. L'esecuzione ritardata della funzione createChart() impostata tramite setTimeout() assicura la visibilità dell'effetto di animazione iniziale del grafico.
Ecco il risultato:
Data binding ad altre funzionalità di Kendo UI
Al di là della ricchezza e dell'impatto visivo dei widget, alcune funzionalità messe a disposizione dal framework sono molto interessanti.
Prima fra tutte il supporto di un meccanismo di data binding che consente di caricare dinamicamente dati locali o remoti e visualizzarli su Grid ed altri widget. Il meccanismo è basato sull'oggetto DataSource che funge da intermediario tra i dati e i widget che li visualizzano. Il framework prevede la rappresentazione dei dati sia come array di oggetti JSON sia in formato XML. I dati da associare ai widget tramite Data Source possono anche essere caricati da remoto tramite Ajax con poche semplici istruzioni ed è prevista la possibilità di eseguire operazioni come la paginazione e l'ordinamento.
Altra interessante funzionalità è la possibilità di creare dei template, cioè dei blocchi di codice HTML con parametri da istanziare dinamicamente. Completano il sistema un supporto semplificato del drag and drop e la validazione di form.
Kendo UI è sicuramente un framework interessante che lo rende un valida alternativa a jQuery UI. Il forte legame con jQuery si evidenzia, oltre che naturalmente per la sintassi, anche per le modalità con cui i vari widget vengono renderizzati. Interessante la possibilità di creare pacchetti personalizzati della libreria tramite il Build Custom Download, riservato però a chi acquista una licenza commerciale.
Link Utili
- Sito della libreria Kendo UI
- Kendo UI ThemeBuilder
- Esempi di utilizzo di libreria Kendo UI
- Build Custom Download
