SharePoint Latin Rotating Header Image

ASP.NET AJAX

Desarrollo de WebParts de SharePoint 2010 con soporte AJAX

Microsoft no se cansa de dar el mensaje de que SharePoint 2010 es una plataforma de aplicación aparte de una plataforma de colaboración para la empresa y la web. Y el día de hoy quiero mostrar un breve y sencillo ejemplo de cómo construir un WebPart para SharePoint 2010 con soporte AJAX.

Visual Studio 2010 por fin cuenta con un nuevo ciudadano de funcionalidad, se cuenta con toda una sección y plantillas de proyectos solo para la plataforma SharePoint 2010 soportada de forma nativamente y permitiendo a los programadores curiosos que no le temen al cambio adentrarse al mundo de desarrollo de SharePoint.

Este video muestra lo simple que es construir e implementar un WebPart para SharePoint 2010 con características de AJAX. Cero líneas de código de configuración, arrastrar, soltar, doble clic y a programar es parte del paradigma con el que contamos en esta nueva versión.

Desde mi personal punto de vista no hay nada mejor que saber que sucede tras bambalinas sin embargo en este mundo donde la economía y las empresas constantemente cambian y por ende las herramientas que simplifican las cosas para solamente dedicarnos a lo que nos compete desde el punto de vista de negocio y no necesariamente a aquellas cosas de configuración que al negocio prácticamente le es indiferente.

Aqui el video con mas resolucion:

Configurando controles ASPXGridView de DevExpress en SharePoint

Sabemos que SharePoint está construido sobre ASP.NET 2.0 y esto nos da una gran cantidad de ventajas disponibles para utilizar componentes de terceros ricos en funcionalidad. Tal es el caso de los componentes de DevExpress empresa de Mark Miller un pionero en la construcción de herramientas de productividad para el desarrollador Delphi y .NET.

En el último proyecto donde participe como programador tuve la oportunidad de implementar la Suite de controles ASPXGridView de DevExpress para soportar un escenario el despliegue de datos de manera jerárquica y la flexibilidad de agrupación dinámica sobre SharePoint.

Utilice el ASPXTreeList y el ASPXGridView, a continuación los pasos para configurar y usar estos objetos. La misma suite tiene archivos WSP para implementar sobre SharePoint los controles, estos WSP automáticamente configuran todo lo necesario para poder usarlos. Sin embargo, aquí dejo los pasos manuales.

Registrar en el Global Assembly Cache los componentes de DevExpress.

  • DevExpress.Data.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a
  • DevExpress.Data.v9.3.Linq, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a
  • DevExpress.Utils.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a
  • DevExpress.Web.ASPxEditors.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a
  • DevExpress.Web.ASPxGridView.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a
  • DevExpress.Web.ASPxHtmlEditor.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a
  • DevExpress.Web.ASPxSpellChecker.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a
  • DevExpress.Web.ASPxThemes.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a
  • DevExpress.Web.ASPxTreeList.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a
  • DevExpress.Web.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a

Manipular archivos web.config de nuestra aplicación web donde estaremos usando estos componentes y dentro de <SafeControls> agregar lo siguiente:

  • <SafeControl Assembly="DevExpress.Data.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Data" TypeName="*" Safe="True" />
  • <SafeControl Assembly="DevExpress.Web.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TypeName="*" Safe="True" />
  • <SafeControl Assembly="DevExpress.Web.ASPxEditors.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxEditors" TypeName="*" Safe="True" />
  • <SafeControl Assembly="DevExpress.Web.ASPxSpellChecker.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxSpellChecker" TypeName="*" Safe="True" />
  • <SafeControl Assembly="DevExpress.Web.ASPxHtmlEditor.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxHtmlEditor" TypeName="*" Safe="True" />

Dentro de <httpHandlers> agregar:

  • <add type="DevExpress.Web.ASPxClasses.ASPxHttpHandlerModule, DevExpress.Web.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET" path="DX.ashx" validate="false" />

Dentro de <httpModules> agregar:

  • <add type="DevExpress.Web.ASPxClasses.ASPxHttpHandlerModule, DevExpress.Web.v9.3, Version=9.3.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" name="ASPxHttpHandlerModule" />

Plantilla de ASP.NET AJAX 1.0 para Visual Studio 2008

Todo mundo feliz y contento con la liberación de la versión 2008 de Visual Studio. Vemos un bonche de nuevas características y mejoras que indudablemente pensamos incluir en algún nuevo proyecto. Sin embargo, estoy seguro que hay proyectos que seguimos construyendo sobre Visual Studio 2005 con las características especificas de la versión 2.0 del .NET Framework. Entonces de repente nos encontramos en la encrucijada de si queremos desarrollar sobre Visual Studio 2008 o seguimos con Visual Studio 2005 hasta terminar algun proyecto en particular. En sí, una ayudadita que podemos encontrar al respecto es la plantilla de proyecto ASP.NET AJAX 1.0 para Visual Studio 2008 que nos permite seguir desarrollando nuestras aplicaciones web ASP.NET 2.0 que hacen uso de las extensiones 1.0 de AJAX sobre Visual Studio 2008.

plantilla de ajax 1.0 para vs2008

Esta plantilla hace referencia a tipos del .NET Framework 2.0 así como a los elementos de las extensiones de ASP.NET AJAX 1.0 desde Visual Studio 2008 y nos da la libertad de seguir trabajando usando la nueva version del producto.

Saludos!


** cross posting desde geeks.ms

ASP.NET AJAX UpdatePanelPopUpExtender Control

Is been a lot of time that I don’t post in this blog. Promise I will do it more frequently. For now I think it’s very valuable the job that Raj Kaimal has been doing with the UpdatePanelPopPupExtender. The idea here is to have an ASP.NET AJAX UpdatePanel control inside a PopUp window. It’s very easy and helpful. You can have very nice behaviors and give to your users a great AJAX experience. And also last week find an RssTool Kit control that you can’t download and implement in your apps RSS functionality. Imagine that you can expose your information as RSS and allows users to subscribe to it. It’s very easy because this control allows us to use a new RssDataSource for all the data bound controls.


rssdata.JPG  


Try it!

Getting Started with WPF/E MSDN Article

This article Getting Started with WPF /E is what you need In order to understand the basics for creating ASP.NET WPF apps.

Go ahead, take a look. You will enjoy!

Conoce el primer beta de AJAX para ASP.NET

Al fin tuve el tiempo de experimentar ASP.NET 2.0 AJAX mundialmente conocido por su nombre de código "Atlas". El nombre oficial de este componente será ASP.NET 2.0 AJAX y ya tenemos la primera versión beta liberada. Altamente recomendable darse un tiempo para conocer los componentes que integran este marco de trabajo para la construcción de aplicaciones web asincrónicas.  


"nunca pensé que un producto de limpieza tan famoso, llegara a influir tanto en mi vida profesional" :)

Microsoft liberó tres componentes en esta primera versión del Beta como lo dice Scott Guthrie en este post.

El ASP.NET AJAX v1.0 "Core" contiene prácticamente el motor principal de todo este marco de trabajo así que para poder construir e implementar aplicación ASP.NET AJAX necesitaras instalar este componente en tu servidor web. Este componente cuenta con ambos marcos de trabajo los que nos sirven del lado del servidor y del lado del cliente, en el primer caso contamos con tipos, clases base y prácticamente todo el modelo de objetos para desarrollo. En el segundo contamos con un conjunto de archivos javascript que prácticamente han sido modificados para un uso más óptimo en el navegador y omitir tanta sobrecarga de este tipo de código. Por fin los componentes de AJAX los tenemos integrados al GAC.

El ASP.NET AJAX "Value-Add" CTP es otro componente interesante que contiene controles y funcionalidad adicional que no alcanzó ser parte del beta pero que sin embargo seguimos esperando. Además, este componente soporta la mayoría de los objetos que utilizábamos en "Atlas" con la finalidad de seguir trabajando por cuestiones de soporte con aplicaciones anteriores. Microsoft público una matriz de características que presenta qué características se encuentran en ASP.NET AJAX "Core" o ASP.NET AJAX CTP, si has venido siguiendo esta tecnología vale la pena que le des una revisada.

El ASP.NET AJAX Control Toolkit son los controles AJAX construidos encima del ASP.NET AJAX "Core", además todas las plantillas de proyecto para las ediciones de Visual Studio 2005, binarios y sitio web de ejemplo están incluidos aquí. Todo lo que necesitas para desarrollar aplicaciones AJAX con ASP.NET 2.0.

Definitivamente estaré modificando el material de la presentación "AJAX y su integración con las plataformas de desarrollo" que tengo que dar precisamente mañana en el Developer Community Day en la ciudad de Mexicali, Baja California México, regístrate aquí.

Ejemplo Practico UpdatePanel y UpdateProgress

Tratando de encontrar un ejemplo práctico que pueda ilustrar mejor lo que escribí hace unos días sobre lo básico de los controles UpdatePanel y UpdateProgress dejo a continuación un proyecto ASP.NET 2.0 que implementa la funcionalidad antes mencionada en el siguiente escenario.

De que se trata

En la base de datos AdventureWorks contamos con la tabla Product la cual contiene información sobre productos y datos adicionales relacionados con el control de inventarios. En este escenario lo que haremos es permitir al usuario actualizar la información de control de inventario para cada producto. En un control GridView mostramos los productos filtrados por una sub categoría y además habilitamos en la vista principal la capacidad de que se capture la información de dos columnas (Nivel Optimo y Punto de Reorden). Una vez que el usuario termine de capturar la información da clic sobre el botón actualizar el cual se encarga de recorrer el listado y hacer la actualizaciones correspondientes.

ejemplopractico01.jpg  

Mediante el uso de Atlas UpdatePanel y UpdateProgress creamos una interface de usuario verdaderamente responsiva para este sencillo proceso logrando que el usuario tenga una mejor experiencia.

Como funciona

Nosotros podemos especificar que eventos de los controles de nuestro formulario web disparan una llamada asincrónica realizada por el control UpdatePanel a través de la sección “<Triggers>”. Como vemos en la siguiente declaración dentro de la sección “<Triggers>” estamos diciendo que cuando el “Button1” dispare el evento “Click” entonces nuestro control UpgradePanel realizara su trabajo. Lo mismo sucede con el evento “SelectIndexChanged” de nuestro control “DropDownList1” causando que nuestro GridView simplemente se refresque sin realizar un PostBack al servidor. [Ver ejemplo 1]. Ahora nuestro control GridView tiene un comportamiento muy sencillo ya que para renglón mostrado en las columnas donde requerimos captura de datos simplemente mostramos un control de tipo TextBox. Eso lo logramos utilizando la funcionalidad de “<ItemTemplate>” de una columna de tipo “<TemplateField>”. Una columna de tipo “<TemplateField>” en cualquier contexto de los controles GridView, DetailsView, etc. Nos permite contener y mostrar cualquier código XHTML. [Ver ejemplo 2].

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<!—ejemplo 1 –>

<Triggers>

<atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />

<atlas:ControlEventTrigger ControlID="Button1" EventName="Click" />

</Triggers>

<ContentTemplate>

<asp:GridView

ID="GridView1"

runat="server"

AutoGenerateColumns="False"

DataKeyNames="ProductID"

DataSourceID="productsDataSource"

Width="601px"

GridLines="None"

BorderStyle="None"

CaptionAlign="Right" BorderWidth="3px" CellPadding="5">

<Columns>

<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False" ReadOnly="True" SortExpression="ProductID" Visible="False" />

<asp:BoundField DataField="Name" HeaderText="Nombre del Articulo" SortExpression="Name" />

<asp:BoundField DataField="ProductNumber" HeaderText="Codigo" SortExpression="ProductNumber" />

<!—ejemplo 2 –>

<asp:TemplateField HeaderText="Nivel Optimo" SortExpression="SafetyStockLevel">

<ItemTemplate>

<asp:TextBox

ID="safetelyStockLevel"

runat="server"

Text='<%# Bind("SafetyStockLevel", "{0}") %>'

Width="40px"

CssClass="control-textbox">

</asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Punto de Reorden" SortExpression="ReorderPoint">

<ItemTemplate>

<asp:TextBox

ID="reorderLevel"

runat="server"

Text='<%# Bind("ReorderPoint", "{0}") %>'

Width="40px"

CssClass="control-textbox">

</asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

</Columns>

<HeaderStyle CssClass="control-gridview-header" />

<RowStyle CssClass="control-gridview-item" />

<AlternatingRowStyle CssClass="control-gridview-alternate" />

</asp:GridView>

</ContentTemplate>

</atlas:UpdatePanel>

Cuando el usuario da clic sobre el botón “Actualizar” se ejecuta un código que recorre cada elemento del control GridView y manda ejecutar el comportamiento de actualización de nuestro control no visual “SqlDataSource” el cual tiene declarado tres parámetros necesarios para ejecutar la actualización del registro. Si recordamos nuestras declaraciones “<Trigger>” del control UpdatePanel especificamos que precisamente el evento “Click” del control “Button1” disparara la llamada causando que el siguiente código se ejecute asincrónicamente vía XmlHttp.

protected void Button1_Click(object sender, EventArgs e)

{

for (int i = 0; i < GridView1.Rows.Count; i++)

{

GridViewRow row = GridView1.Rows[i];

productsDataSource.UpdateParameters[0].DefaultValue = ((TextBox)row.Cells[0].FindControl("safetelyStockLevel")).Text;

productsDataSource.UpdateParameters[1].DefaultValue = ((TextBox)row.Cells[0].FindControl("reorderLevel")).Text;

productsDataSource.UpdateParameters[2].DefaultValue = GridView1.DataKeys[i].Value.ToString();

productsDataSource.Update();

}

}

<asp:SqlDataSource

ID="productsDataSource"

runat="server"

ConnectionString="<%$ ConnectionStrings:AdventureWorksCnn %>"

SelectCommand="SELECT ProductID, Name, ProductNumber, SafetyStockLevel, ReorderPoint FROM Production.Product WHERE (ProductSubcategoryID = @subcategory)"

UpdateCommand="UPDATE Production.Product SET SafetyStockLevel = @safety, ReorderPoint = @reorder WHERE (ProductID = @productID)">

<UpdateParameters>

<asp:Parameter Name="safety" />

<asp:Parameter Name="reorder" />

<asp:Parameter Name="productID" />

</UpdateParameters>

<SelectParameters>

<asp:ControlParameter ControlID="DropDownList1" Name="subcategory" PropertyName="SelectedValue" />

</SelectParameters>

</asp:SqlDataSource>

ejemplopractico02.jpg  

Esperando te sea útil este pequeño ejemplo te dejo proyecto y el código fuente para que lo descargues. Asegúrate de contar con una instancia local de SQL Server 2005 o Express Edition que contenga la base de datos AdventureWorks.

Descargas

Suerte!!

Bases del control UpdatePanel de Atlas

Cuando una página ASP.NET ejecuta una llamada al servidor (postback) sucede una pequeña pausa seguida de un refrescado de toda la pagina sobre el navegador dibujando el nuevo contenido que es regresado en la petición. Durante esta pausa, el usuario definitivamente no puede interactuar con la aplicación y en ocasiones cuando la aplicación tiene que acceder a recursos del lado de servidor o la conexión está muy lenta resulta incomodo y tardío el cargar la información haciendo que la experiencia de usuario no sea del todo interactiva.

Una de las maneras que AJAX (Asynchronous JavaScript and XML) se diferencia de las aplicaciones web clásicas es el cómo se comunica con el servidor. AJAX utiliza código del lado del cliente (Client Script) para actualizar porciones de una página en vez de tener que hacer todo un postback. Esta técnica ofrece fluidez, responsividad y mejora la experiencia del usuario.

En el mundo de ASP.NET 2.0 contamos con Atlas, la implementación de AJAX sobre Visual Studio 2005 ofreciéndonos una serie de conceptos y controles que entienden y manejan el mismo principio de AJAX. Por supuesto que Microsoft siempre buscando mejorar la productividad de los programadores nos ofrece una serie de controles de servidor que con solamente configúralos podemos integrar en nuestras aplicaciones comportamientos y conceptos AJAX.

El control “UpdatePanel” de Atlas simplifica dramáticamente el uso del concepto AJAX en nuestras aplicaciones ASP.NET 2.0 abstrayendo la interacción entre el navegador y el servidor, restringiendo actualizaciones y refrescados de porciones particulares de nuestra página.

Asumiendo que cuentas con Atlas instalado vamos a crear una nueva aplicación de tipo “Atlas” Web Site que tenga un control SqlDataSource configurado para seleccionar registros de una tabla de cualquier base de datos y asegúrate de vincular en un control GridView el SqlDataSource para que muestre la información.

Para poder tener un comportamiento AJAX para cada evento de nuestro control GridView, lo primero que debemos integrar a nuestra página es una declaración que siempre debemos declarar. Siempre que utilicemos controles atlas en nuestras páginas tendremos que hacer la siguiente declaración.

<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />

Una recomendación es que si utilices paginas maestros convendría hacer esta declaración allá.

Con solamente rodear a nuestra declaración del control GridView con el control UpdatePanel de Atlas tendremos un comportamiento AJAX para cada evento de nuestro GridView.

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:GridView

ID="GridView1"

runat="server"

AllowPaging="True"

AllowSorting="True"

DataKeyNames="IDCountry"

DataSourceID="SqlDataSource1">

</asp:GridView>

</ContentTemplate>

</atlas:UpdatePanel>

Tan solo cinco líneas de código nos ha costado habilitar un comportamiento AJAX para los eventos de un GridView.

Bases del control UpdateProgress de Atlas

Cuando utilizamos atlas para habilitar un comportamiento AJAX con la finalidad de mejorar la experiencia de usuario, la comunicación con el servidor se hace a través de XmlHttp el cual no infiere con el navegador en absoluto para mostrar alguna notificación o icono que notifique el comportamiento de la pagina. El uso de notificaciones que describan lo que esta sucediendo cuando existe algún tipo de tardanza a la hora de que Atlas este estableciendo una comunicación con el servidor para cargar datos y actualizar una porción de la pagina es un aspecto que también debemos de cuidar para que cuando el servidor tarde en responder y no lo haga instantáneamente el usuario final no piense que su acción no se efectuo.

El control “UpgradeProgress” de Atlas ofrece la posibilidad de mostrar una especie de indicador de progreso en nuestras páginas ASP.NET 2.0. Este control no está visible en la pagina cuando es cargada por primera vez en el navegador, pero para cuando se haga cualquier invocación asincrónica muestra automáticamente su contenido hasta que se reciba una respuesta del servidor o se cancele la petición.

Entonces, continuando con el mismo código del post sobre UpdatePanel que utilizamos anteriormente, veamos como configurar un control UpgradeProgress para nuestro UpdatePanel.

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:GridView

ID="GridView1"

runat="server"

AllowPaging="True"

AllowSorting="True"

DataSourceID="SqlDataSource1">

</asp:GridView>

<atlas:UpdateProgress ID="UpdateProgress1" runat="server">

<ProgressTemplate>

<b>Cargando datos…</b>

</ProgressTemplate>

</atlas:UpdateProgress>

</ContentTemplate>

</atlas:UpdatePanel>

Con esta declaración tendremos un comportamiento interesante. Cuando en nuestro control GridView seleccionemos el ordenado de una columna en particular dando clic sobre el link de la columna, en ese momento se dispara una operación asincrónica al servidor para cargar los datos ordenados y justamente mientras eso sucede se presenta justo debajo de nuestro GridView una leyenda que dice “Cargando datos…”. Cabe mencionar que dentro de nuestra sección “<ProgressTemplate>” podemos escribir cualquier tipo de código HTML que muestra una mejor interface, iconos o imágenes.

updateprogress01.jpg 

Lanzamiento en Mexico, DF

El martes 15 de noviembre se llevo acabo en México el lanzamiento de las nuevas tecnologías de desarrollo de Microsoft. Visual Studio 2005, SQL Server 2005 y Biztalk Server 2006 fueron lanzados al mercado oficialmente el 7 de noviembre en la ciudad de Chicago y desde entonces en todo el mundo una ola de lanzamientos se ha liberado y esta ola por fin llego a México en donde directivos, ejecutivos, empleados de Microsoft México así como ISV’s de todo el país hicieron de este evento toda una experiencia que permitió dejar sentir en el ambiente una sensación de emoción.

 

sesionweblanzamiento Varios MVP’s estuvimos en la primer fila presenciando el lanzamiento, escuchando al arquitecto de SQL Server 2005 presentar las ventajas y mejoras de estas nuevas herramientas, viendo cada una de las demostraciones y de los avances que Microsoft tiene pleneado liberar en un futuro. Luís Daniel Soto, Jaime Sánchez y Armando Halbinger dieron toda una sesión de innovación donde nos presentaron algunos de los proyectos que Research de Microsoft Corp ha estado investigando.

De verdad que considero que fue un evento donde pudimos compartir con las autoridades de Microsoft México como estas nuevas herramientas permiten habilitar el desarrollo de soluciones de información de una manera productiva y verdaderamente funcional. Los MVP’s estuvimos a cargo de presentar el Developer Track donde dimos a conocer un poco mas a detalle las nuevas características de ASP.NET 2.0 y SmartClients con Windows Forms 2.0. Miguel Muñoz Serafín de Puebla, Héctor Obregon de México, Fernando García nuestro líder de MVP en Latinoamérica y yo presentamos a un grupo de aproximadamente 250 desarrolladores estas nuevas tecnologías logrando engancharlos en esta ola de innovación y productividad.

Lanzamiento de VS2005Se hizo una buena química, Miguel Muñoz tiene una gran capacidad para explicar y transferir de una manera digerible el conocimiento, a mi me toco realizar las demostraciones de ASP.NET 2.0 y pudimos hacer una buenísima mancuerna, además Fernando García estuvo explicando el valor del programa MVP donde producto de presentar juntos pudimos constatarlo.

 

Héctor Obregon no dejo de impresionar con su tan elegante forma de presentar su charla (SmartClients) y explicar las nuevas características de esta singular tecnología. En resumen consideramos todo un éxito nuestro trabajo, me sentí motivado al compartir con mis compañeros MVP’s y que en conjunto pudimos reafirmar y en mi caso sentir el valor del programa.

Bueno pues continuamos trabajando por la causa y evangelizando con mas fuerza estas tecnologías.