Introducción a Kendo UI

  • Por
Kendo UI es una librería Javascript para el desarrollo de aplicaciones web enriquecidas del lado del cliente, con diversas interfaces de usuario dinámicas basadas en jQuery.
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">

Nota: Al enlazar con las hojas de estilo tenemos dos archivos distintos. Uno para los estilos comunes "kendo.common.min.css" y otro para los estilos particulares del tema que hayamos escogido (uno de entre los tres posibles "kendo.kendo.min.css", "kendo.blueopal.min.css" o "kendo.black.min.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"))

Nota: En este caso el objeto jQuery con el elemento que nos sirve de referencia, para insertar la opción nueva en el menú detrás de él, lo seleccionamos con el selector "#li3", luego se entiende que en algún lugar de la lista hemos colocado un elemento LI con id="li3". Es detrás de ese elemento donde se insertará esa opción del menú. Con selectores jQuery más avanzados podríamos acceder también a elementos de la lista como menu.element.children("li:last").

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Isra

31/8/2011
woww
woww gusto lo que buscaba

Felipe

01/9/2011
Kendo
Buen complemento al desarrollo esperemos que perdure en el tiempo.

javier oswaldo

02/9/2011
kendo ui
hola amigos muy buen tutorial deberian de poner otros mas por ejemplo de los combobox grids etc gracias saludos

usuario_borrado_606848

05/9/2011
buen articulo
es bueno saber que existe este tipo de framework, nos podrian detallar un poco mas sobre los tipos de licencias que existiran, y si es posible el costo!!!

midesweb

12/9/2011
Licencias KendoUI y su coste
Con respecto a los tipos de licencias, en la página de KendoUI de momento tienen únicamente la licencia "open source" gratuita.
Cuando salga de fase beta han anunciado que se creará una licencia de pago, con soporte técnico y otras ventajas. Pero seguirán ofreciendo el producto con código abierto para las personas que deseen utilizarlo gratuitamente.

Debug

21/9/2011
parecido a extjs
Interesante, lo veo bastante parecido a Extjs, aunque a este aun le queda bastante por hacer.

Bernardao

04/10/2011
Muy interesante
Muchas gracias, me gustaría saber si tenéis pensado enseñar un taller donde podamos ver como utilizamos los plugins, jugando con las opciones.
Gracias

ORBITA

18/1/2012
TRABAJA CON AJAX?
hola quisiera saber si tambien trabaja con AJAX o tambien se puede adherir ajax
espero su rpta, ya que estoy trabajando con Spring e Hibernate y necesito un framework q me maneje toda la parte de presentacion

Alraul

17/2/2012
me encanta...
... estoy descubriendo todo un universo con jquery, y Kendu me parece el Big Bang, esta genial...

Rodolfo

20/8/2012
Competencia
Claramente es una competencia directa a ExtJs, es muy interesante, pero la versión FREE me parece que no ofrece mucho.

Daniel

14/4/2016
Kendo UI
Hola que tal, mira estoy empezando a utilizar este framework de Kendo UI y quisiera desplegar datos dentro de un grid, si los datos los coloco en duro la información de muestra correctamente; mientras que si realizo a traves de un servicio web svc en formato json, no alcanzo a desplegar nada de información. Me podrías explicar un poco de Datasource.

Basicamente el web service me regresa lo siguiente :
{"Result":"[{"nombre":"Pedro Fernandez","edad":49,"peso":72,"dia_lab":12,"recorrido":79,"falta":0,"extra":3,"subtotal":49,"total":60}]"}