KendoUI es un paquete de librerías listas para usar por los desarrolladores en páginas web dinámicas, enteramente realizadas con Javascript y basadas en jQuery. A pesar de usar jQuery como base en el desarrollo, podríamos denominarlo framework Javascript, ya que ofrece diversas funcionalidades básicas, como arrastrar y soltar o un sistema de plantillas Javascript, pero su fuerte son las interfaces de usuarios listas para incorporar en los proyectos web.

Por si nos sirve de algo esta comparación, Kendo UI es algo parecido a lo que nos ofrece jQueryUI, con la diferencia de que ambas librerías implementan algunos componentes (widgets) distintos. En realidad la mayoría de lo que podemos hacer en jQueryUI lo podemos hacer también con Kendo UI, pero esta última librería va un poco más allá, permitiendo algunas interfaces de usuario un poco más novedosas.

La variedad de componentes para interfaces de usuario de Kendo UI incluye menús dinámicos, gráficas, paneles, rejillas de datos, árboles, ventanas, sistemas de upload de archivos, etc. Son 13 distintos tipos de widgets altamente personalizables y con funcionalidades realmente avanzadas.

Por supuesto, se ha cuidado perfectamente la compatibilidad en todos los navegadores más habituales, tal como nos tienen acostumbrados este tipo de productos. De este modo, tanto las funcionalidades del framework como los distintos widgets, corren perfectamente en Internet Explorer (versión 7 en adelante), Safari, Chrome o Firefox, tanto en las versiones creadas para ordenadores personales, como dispositivos móviles.

Por último queremos destacar que Kendo UI, en el momento de escribir estas líneas, está publicado en fase beta. Según se explica en su página web se planea ofrecerlo bajo dos licencias distintas, una comercial y de pago, con soporte y otras ventajas, y una gratuita y de código abierto. Durante la fase beta, no se encuentra disponible la licencia comercial.

Podemos encontrar Kendo UI en la siguiente dirección: http://www.kendoui.com/

Primeros pasos con Kendo UI

En este artículo de DesarrolloWeb.com vamos a comentaros qué es lo que tenéis que hacer si queréis aprovechar las funcionalidades ya listas para usar de Kendo UI, a modo de receta.

1) Descargar Kendo UI
Podemos dirigirnos a la página de Kendo UI para descargar la versión más nueva de las librerías. Obtendremos un paquete comprimido que incluye diversas carpetas.

• examples: Ejemplos de uso de cada una de las funcionalidades del framework y de los widgets dinámicos.
• js: Archivos Javascript minimizados, que serían idóneos para usar en páginas en producción.
• source: Archivos de Javascript y CSS con el código sin minimizar y comentarios, ideales para páginas en desarrollo.
• styles: Archivos CSS minimizados, con 3 versiones distintas que aportarían diferente aspecto a los componentes de interfaces de usuario.

Una vez descargado, deberíamos copiar al menos las carpetas "js" y "styles" en nuestro proyecto.

2) Incluir el Javascript y CSS
El segundo paso sería incluir en la cabecera de la página links con las hojas de estilo y los archivos Javascript que sería necesario disponer para usar el framework.

En cuanto a hojas de estilos CSS, Kendo UI viene con tres distribuciones distintas, de las cuales podemos elegir la que más combine con nuestro sitio web. En este punto pierde un poco con respecto a jQuery UI, ya que dichas librerías incluyen decenas de temas y muy variados. Kendo UI, al menos en este momento, dispone de dos temas para usar con fondos claros (uno en naranja y otro en azul) y un tema para usar con fondos oscuros.

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css">
<link href="styles/kendo.kendo.min.css" rel="stylesheet" type="text/css">

En cuanto a los archivos Javascript a incluir, existen diversas posibilidades, dependiendo de las funcionalidades o componentes que vayamos a usar en nuestro proyecto. En las páginas de la documentación se especifican las dependencias de archivos, que debemos disponer cuando usamos unas y otras cosas de todo lo ofrecido por las librerías. Sin embargo, para facilitarnos la vida y de momento, vamos a incluir un único archivo "kendo.all.min.js", con todo el código de Kendo UI. Es un archivo un poco grande, pero nos ahorrará preocupaciones con las dependencias existentes y hará que dispongamos de todo el framework, lo que será útil al menos durante el desarrollo del proyecto.

Ahora bien, como habíamos dicho, Kendo UI está basado en jQuery, por lo que también tendremos que incluir el archivo de jQuery, justo antes de incluir las librerías de este framework. Nos quedaría un código como este.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.all.min.js" type="text/javascript"></script>

Como se puede apreciar, estamos incluyendo jQuery (actualmente en la versión 1.6.2) del CDN de GoogleAPIs y el archivo "kendo.all.min.js" que tiene todo el código de Kendo UI minimizado.

3) Usar Kendo UI desde nuestras páginas
Ahora ya solo nos quedaría empezar a usar Kendo UI en nuestra página, ya que disponemos de todo lo que nos hace falta para empezar. Claro está que en este momento necesitaríamos consultar la documentación para encontrar cómo se debe utilizar cada uno de los componentes que nos ofrece el framework. Para ello, en la sección de "demos" podremos encontrar bastantes ejemplos y todos los detalles necesarios para implementarlos en nuestra página web.

Ejemplo de uso del componente Menú de Kendo UI

A modo de demostración de la facilidad con la que podemos crear nuestras páginas basadas en las interfaces de Kendo UI, vamos a explicar a continuación cómo poner en marcha el widget "Menu", que nos sirve para crear menús desplegables dinámicos con Javascript, que además permiten varios niveles de anidamiento de las opciones del menú.

Para crear nuestro menú debemos empezar por crear la estructura HTML necesaria para definir las opciones que dispondrá.

<ul id="menu">
   <li>Opción primera</li>
   <li>Opción segunda
      <ul>
         <li>Opción anidada 1
            <ul>
               <li>Podemos anidar n niveles</li>
            </ul>
         </li>
         <li>Otra opción anidada</li>
      </ul>
   </li>
   <li>Tercera opción</li>
</ul>

Después debemos invocar al componente mediante Javascript, tal como estamos acostumbrados a hacer con los plugins jQuery.

$("#menu").kendoMenu()

Eso es todo!! como podríamos ver en el siguiente ejemplo el menú se ha creado perfectamente y se encuentra animado por defecto con diversos efectos.

Pero además, al crear el menú podemos proveer distintas opciones para personalizarlo. Cada tipo de componente soporta sus opciones particulares, que se pueden encontrar explicadas en la documentación. Nosotros veremos un ejemplo de personalización por opciones, para hacer que el menú presente sus diversas opciones en vertical en lugar de horizontal.

$("#menu").kendoMenu({
   orientation: "vertical"
})

Este menú lo podemos ver en un ejemplo en página aparte.

Por si fuera poco, cada componente de interfaces de usuario ofrecido en Kendo UI dispone de una serie de métodos y eventos, encaminados a mejorar todavía más los comportamientos dinámicos. Por ejemplo en un menú de estas características podemos hacer cosas como añadir opciones, quitarlas, habilitarlas o inhabilitarlas, cerrar una rama o abrirla, todo a través de métodos que podemos invocar sobre el objeto "kendoMenu". Podemos también definir instrucciones Javascript a ser ejecutadas como respuesta a eventos creados específicamente dentro del componente, como podría ser abrir una rama del menú, cerrarla o seleccionar un elemento.

Para ofrecer un ejemplo de estas posibilidades hemos creado un botón que sirve para añadir una nueva opción al menú.

Esto lo conseguimos mediante dos sencillos pasos. Primero, al crear el menú, debemos guardarnos una variable con una referencia del objeto "kendoMenu".

var menu = $("#menu").kendoMenu().data("kendoMenu");

Esa referencia está almacenada en la variable "menu", pero además, fíjate que hacemos una llamada al método jQuery data() dentro del objeto kendoMenu, pasando como parámetro el valor "kendoMenu". Esto nos ofrece una referencia a dicho objeto en la que estarán disponibles todas las funcionalidades que define el widget de las librerías Kendo UI.

Una vez tenemos esa referencia, crear nuevos elementos es tan sencillo como llamar al método insertAfter(), que inserta elementos en el menú. Ese método recibe dos parámetros. El primero es un JSON con los textos de los elementos a insertar indicados con la propiedad "text" (en este caso solo hay uno, pero podría ser un array en notación JSON). El segundo parámetro es el objeto jQuery del elemento detrás de donde queremos insertar la opción al menú.

menu.insertAfter({
   text: "Redes sociales"
}, $("#li3"))

Conclusión

Las librerías Kendo UI son una excelente herramienta para el desarrollo de aplicaciones HTML5. Vienen con diversas funcionalidades útiles como el "Drag & Drop", pero sobretodo resultan interesantes los diversos componentes para la creación de interfaces de usuario enriquecidas.

Hemos visto el componente KendoMenu, que nos permite hacer un Menú dinámico, que es sin duda una de las funcionalidades más típicas en interfaces de usuario. En pocos minutos hemos podido comprobar lo sencillo que es implementarlo gracias a Kendo UI y personalizarlo según nuestros intereses.

Seguiremos estudiando KendoUI para la creación de nuevos artículos para DesarrolloWeb.com, ya que el framework nos ha sorprendido muy gratamente. En el siguiente artículo te explicaremos a utilizar la KendoGrid, el componente para realizar una rejilla de datos (data grid) en KendoUI.