JavaScript  »  Articoli  »  JQuery 

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+.

Figura 1. Il sito del progetto

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:

Altri articoli

Altre guide

Altre newsletter