Primeros pasos con Ext.Net y Visual Web Developer Express
En este post voy a hacer una breve introducción al desarrollo de aplicaciones Web con Coolite y Visual Web Developer Express 2010, Coolite es un toolkit de controles para ASP.net que nos permiten utilizar el popular framework de Javascript ExtJS, pueden navegar por los ejemplos aquí.
Actualmente la versión de Coolite es la 0.8.2, sin embargo en su cuenta de Twitter anuncian que la versión 1.0 esta disponible como un preview, si se fijan bien notarán que el anuncio esta marcado bajo el tag #extnet, esto se debe a que en la nueva versión, coolite será renombrado a Ext.Net, luego de descargarlo, vamos a crear un nuevo proyecto Web en VWD, yo lo he llamado Extnet_ParteUno.
Vamos a agregar tres referencias a el proyecto recién creado, los archivos que debemos referenciar son lo siguientes:
-
Ext.Net.dll
-
Ext.Net.Utilities.dll
-
Newtonsoft.Json.dll
Luego en el archivo web.config agregamos dentro de system.web, las siguientes secciones:
<pages> <controls> <add namespace="Ext.Net" assembly="Ext.Net" tagPrefix="ext"/> </controls> </pages>
Esto nos permitirá incluir los controles de Ext.Net dentro de nuestras páginas sin tener que registrar el ensamblado en cada una de ellas.
<httpModules> <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" /> </httpModules>
La sección anterior es requerida por extnet, si no la incluimos nuestra aplicación se ejecutará sin embargo aparecerá un mensaje similar al siguiente:
Los controles de Ext.Net requieren que el control ResourceManager se encuentre al inicio de la pagina así:
<ext:ResourceManager ID="rm" runat="server"></ext:ResourceManager>
Voy a agregar un control tipo Window
<ext:Window ID="win" runat="server" Width="800" Height="500" Title="Mi Ventana" > <AutoLoad Url="http://www.coolite.com"> </AutoLoad> </ext:Window>
La ventana tendrá un ancho de 800 px por 500px de alto, como titulo el texto “Mi Ventana” y cargará automáticamente el contenido del sitio de Coolite cuando se muestre la ventana a través de AutoLoad que tiene definida la propiedad Url.
Visualizamos nuestra pagina y deberíamos tener algo similar a:
Pueden descargar el código de este ejemplo aquí.
Este es uno de una serie de posts que hare sobre el desarrollo de aplicaciones web utilizando Ext.Net
Hasta la próxima.
[Editado por Administrador] muy buen aporte seria bueno que dieras mas ejemplos con controles ajax
[Comentario del Administrador: He editado este comentario para que pueda ser leído facilmente]
Me interesan mucho tus exposiciones pero, si no me equivoco, solo has preparado dos capítulos. ¿Tienes idea y tiempo de publicar alguno más? GRACIAS
Pues la proxima entrada la estoy preparando en cuanto a Eventos y código del lado del servidor pero una fecha no tengo establecida para su publicación.
hola edison, he estado trabajando con esta simpática y útil dll, mi pregunta es la siguiente, tengo datos de una grilla, pero no he encontrado información respecto a incluir gráficos en este tipo de páginas que usan Ext.Net, has intentado o investigado eso?
saludos
alejandra
Para poder presentar imagenes dentro de una grilla puedes revisar esta entrada [http://edisontorres.wordpress.com/2011/04/18/directmethods-y-control-gridpanel/] en donde se utiliza renderizadores para modificar la forma en que se presentan los datos de una celda.
Por otro lado el uso de imagenes en Ext.Net esta soportado por el control Ext:Image al cual le puedes atar eventos tando del lado del cliente como del lado del servidor, si lo que quieres es incluir imagenes utilizando HTML se lo puede hacer dentro de de por ejemplo un Ext.Panel o cualquier otro control que soporte esta propiedad.
edison, me expresé mal al decir gráficos, mi pregunta tiene relación con los charts, reprentaciones gráficas de los datos de una grilla por ejemplo http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Bar.html
En un comentario anterior ya te estoy respondiendo. Saludos
Saludos Edison, hoy actualmente el framework de Ext.Net se encuentra en la versión 1.1, me gustaría saber si continuas desarrollando con el y si ya configuraste la nueva versión con VS 2008 o 2010, por q’ la verdad es q’ varia de la versión anterior, llevo horas intentándo iniciar un proyecto sin lograr q’ funcione correctamente, se reinicia VS o se presenta con error la pagina. como ya sabemos el soporte y documentación de este framework es muy pobre y la verdad es q’ e tratado de indagar y buscar en foros(en ingles), sin obtener mayor solución, si podrías darme una mano en esto, te lo agradeceria…
Jorge Mercado
Hola Jorge,
Pues no he tenido problemas con la version 1.1 de Ext.Net, te recomiendo que pruebes con la configuración de ejemplo (web.config) que se encuentra en el archivo 1. README.txt dentro del zip de la descarga, funciona correctamente para el servidor integrado dentro de Visual Studio como para IIS.
Saludos.
Hola Edison muy buen post, aun no lo eh probado pero si que me dio curiosidad,y tengo un par de preguntas
1.- se puede usar con el Visual Studio 2010 ??
2.- Es Gratuito? xq quiero usarlo en la empresa donde trabajo, sino es gratuito cuanto cuesta. grasias
@Maximo, contestando tus inquietudes:
1.- se puede usar con el Visual Studio 2010 ??
Definitivamente si, ya que esta desarrollado con .NET, puedes agregar los controles a la barra de herramientas.
2.- Es Gratuito? xq quiero usarlo en la empresa donde trabajo, sino es gratuito cuanto cuesta. gracias
Si y No, me explico, tiene un modelo de licenciamiento doble, es libre y gratuito cuando los utilizas para realizar proyectos Open Source, caso contrario para proyectos Comerciales se debe obtener una licencia, cuando adquieres una licencia tienes Soporte Premium, puedes revisar mas detalles aqui: http://www.ext.net/store/
Hola muy buena libreria, la he estado usando en visual studio 2010, claro que al principio tuve algunos problemas, no podía arrastrar los controles desde el toolbox , se cerraba el visual, asi que lo estoy trabajando desde el code behind y ningún problema, tienes más ejemplos como cargar datos desde una BD ?
saludos
@Paty, talves ya los viste pero los creadores tiene un muy buen sitio de ejemplos: examples.ext.net