Introducción a KendoUI

KendoUI es un framework de componentes basado en jQUERY para agilizar el desarrollo web que está siendo desarrollado por la empresa Telerik; inicialmente nació con el objetivo de ofrecer componentes HTML5 y CSS 3, actualmente y gracias a las frecuentes actualizaciones soporta además del desarrollo vía JavaScript el desarrollo desde el lado servidor con versiones para ASP.NET MVC, JSP y PHP, así como componentes para desarrollar web móviles adaptadas al estilo de los sistemas móviles más importantes, y componentes para realizar gráficos.

 

Lo primero que vamos a hacer es descargar alguna de las versiones de KendoUI, para ello vamos a su web (http://www.kendoui.com) y en la sección downloads vemos las versiones disponibles, si vamos a desarrollar un proyecto open source tenemos la posibilidad de descargar la versión GPL 3 que aunque sólo ofrece los componentes web y acceso a las versiones mayores para probar y conocer el framework es más que suficiente. En este caso voy a descargar la versión Complete en versión trial, para poder realizar la descarga tenemos que crearnos una cuenta en la web de KendoUI.

 

KendoUI Dowload

 

Un vez descargado, descomprimimos el fichero y tenemos un conjunto de carpetas, nosotros vamos a necesitar las carpetas js, styles que contienen los ficheros JavaScript y los estilos CSS junto con las imágenes que vamos a necesitar. Si hubiéramos descargado la versión comercial además de estas carpetas tendríamos una más llamada src que contiene los ficheros JavaScript y estilos CSS sin “minificar” con lo que podemos leerlos bien formateados o incluso editarlos si es que nos atrevemos.

 

KendoUIDescomprimido

 

Ahora que tenemos ya todos los ficheros necesarios, abrimos Visual Studio (en mi caso 2012) y creamos una nueva aplicación web MVC 4 de tipo Internet, yo la he llamado KendoUISample.

VisualStudioNuevoProyecto

 

Una vez creado el proyecto añadimos los ficheros JavaScript y los CSS a la solución.

KendoUI nos proporciona diferentes ficheros JavaScript para cada uno de los componentes por si solo queremos usar alguno en concreto, además nos proporciona también un fichero con todo (kendo.all.min.js)  que es el que voy a añadir yo, también proporciona los ficheros para tener documentación en JavaScript (kendo.all.min.intellisense.js para Visual Studio 2012 y kendo.all-vsdoc.js para las versiones anteriores de Visual Studio).

 

KendoUIFicherosIncluidos

Ahora en la vista _Layout.cshtml que se encuentra dentro de la carpeta Views\Shared añadimos las referencias a los ficheros de estilos y de JavaScript.

CambiosLayout

 

Por último vamos a crear un control calendario en la vista Index.cshtml de la carpeta Views\Home, para ellos añadimos un nuevo input con id datepicker y en una sección añadimos el código JavaScript que convertirá el input en un control de calendario de KendoUI.

 

CambiosIndex

 

Ejecutamos la aplicación y podemos ver el calendario funcionando. En la primera captura podemos ver el aspecto cerrado y en la segunda abierto.

DatepickerCerrado

 

DatepickerAbierto

Introducción a KendoUI
Daniel Cañamares Ullan

Daniel es especialista es tecnologias web. Es experto en ASP.NET, MVC, HTML5, CSS3, jQuery, KendoUI, etc... Es Microsoft Certified Profesional - MCP y MAP 2013.
Fecha de alta:25/05/2013
Última actualizacion:27/05/2013
Visitas totales:8733
Valorar el contenido:
Últimas consultas realizadas en los foros
Últimas preguntas sin contestar en los foros de devjoker.com