Hola! bueno, no he -ni hemos- desaparecido estos meses . El trajin de las actividades académicas y otras extras han hecho que estemos en una pequeña pausa dentro de nuestro sitio web.

Por ende considero que lo mejor es hacer un post con contenido a todo dar y sin mucho floro ^^". A inicios de este año estuve trabajando en material didáctico sobre ASP.NET, la plataforma Microsoft para desarrollo web. Ad portas de Visual Studio 2010 es bueno estar al tanto de esta y más tecnologías que tenemos para realizar nuestros proyectos de software (por cierto, pueden probar la beta 2 de esta nueva versión, está buenísima). Este contenido es aplicable a lo que se viene el próximo año y en un principio trata temas básicos como creación de formularios, uso de controles, llegando a tocar temas como enlace a datos, AJAX y desarrollo web para dispositivos móviles.

Espero que este material sea de mucha utilidad para poder aprender sobre la tecnología, ver el potencial que tiene y para los proyectos que quieran emprender a futuro.

1. Introducción

2. Interfaces de Usuario

3. Acceso a Datos

4. AJAX

6. Desarrollo web para dispositivos móviles

*. Recursos del HOLs

P.D: Estoy dejando la 5ta parte para un post usando Visual Studio 2010 (el tema… sorpresa ^^”)

Post.End();

by Paul Lorena

Last 29 October, a Microsoft presentation in Brussels, the goal it’s show the Microsoft’s vision of the web in the next future. Obviously was strongly oriented to Silverligth, SketchFlow, MVC, RIA and obviously the demo on live of Surface.  They talked also about NUI (Natural User Interface)

I was really excited to attend the Brad Abrams presentation, I really enjoyed the book (co-authored by him) Framework Design Guidelines: Conventions, Idioms, and Patterns for Reusable .NET Libraries (2nd Edition) I think it’s a “must” for every .NET software engineer , I think it’s the first time I’d listened the “ecosystem concept” in the IT domain, the concept stands the environment to use an API in a right way.

The presentation was about RIA, you can follow the Abrams’s MVC project in this link

http://blogs.msdn.com/BradA/

One day before to REMIX he talked at VISUG (I didn’t attend the session) but here the link

http://www.microsoft.com/belux/msdn/nl/chopsticks/default.aspx?id=1443# 

Some pics here

Finally! I was really surprise, to discover a lot of (really a lot of) young people not more than 20 years old, that makes me think about the new generation of developers good for them! good for us…

Seguimos con la serie de post sobre asp.net ajax. En esta ocasion usaremos las bondades que nos ofrece el Microsoft Ajax Framework asi­ que empecemos.

Usando capacidades de cliente de ASP.NET AJAX

En este ejercicio revisaremos la parte cliente del Microsoft AJAX Framework, el cual esta contenido en un archivo: MicrosoftAjax.js, es de saber que cuando uno de lado del servidor agrega el ScriptManager, automaticamente se agrega este archivo junto con MicrosoftAjaxWebForms.js.

Nota: Si establece la propiedad EnablePartialRendering = false no se agrega MicrosoftAjaxWebForms.js.
MicrosoftAjaxWebForms.js contiene el Javascript que da soporte al control UpdatePanel

Nota: Si no ha tenido experiencia en Javascript, se recomienda antes de comenzar este ejercicio leer los siguientes post:
http://msdn.microsoft.com/en-us/library/bb288795.aspx
http://msdn.microsoft.com/en-us/library/bb288796.aspx

Tarea 01 - Creacion del formulario y agregando Callbacks a los controles HTML

1. Agregaremos una nueva pagina (Ajax Web Form) a nuestro sitio web ClientMsAjax.aspx

2. Agregaremos un Input (button) HTML. (id=btnCallback, value="Hola MsAjax-Client")
3. Ahora nos ubicaremos en el javascript que se crea automaticamente creado por Visual Studio en un Ajax Web Form:

   1: <script type="text/javascript">

   2:         function pageLoad() {    }    

   3:  </script>

4. Crearemos la funcion SayHelloTo con parametros event y context, la cual nos servira para el futuro callback al boton:

   1: function sayHelloTo(event, context) {

   2:    alert("hola " + context + ", has hecho " + event.type + " desde aqui­: " + this.id);

   3: }  

5. Dentro de la funcion pageLoad() añadiremos un evento al boton ya creado utilizando $addHandler. Previamente crearemos el callback correspondiente al evento:

   1: var callback = Function.createCallback(sayHelloTo, "Gabo");

   2: $addHandler($get("btnCallback"), "click", callback);

6. Adicionalmente agregaremos eventos de inicio y fin de la aplicacion:

   1: Sys.Application.add_init(function() 

   2:                   { alert('Bienvenido a la demo de asp.net ajax'); });

   3: Sys.Application.add_disposing(function() { alert('Hasta pronto.'); });

7. Ahora probaremos nuestra pagina web:

Analisis de la tarea 01

1. Hemos creado un evento para un boton, notese la firma de la funcion <Nombre_de_la_funcion>(event,context), en donde event contiene la informacion del evento y context los datos de parametro ingresado en Function.CreateCallback.

2. Para usar la el framework de Microsoft AJAX, simplemente agregamos el control ScriptManager a nuestro WebForm.

3. Microsoft AJAX tiene un metodo que hace las de document.getElementById() el cual es $get()

4. Para agregar eventos a los controles utilizamos $addHandler.

5. Function.CreateCallback(method, context) crea un metodo al que se le pasa un parametro a la funcion que administra el mismo

Read the rest of this entry »

Esta serie de posts se daran a manera de Hands On Lab sobre el framework AJAX de Microsoft. Exploraremos las bondades del lado del servidor y tambien del lado del cliente de ASP.NET AJAX. Utilizaremos una pequeña base de datos CarPictures que estoy empleando en otros ejemplos. Al final del post se podra descargar el codigo completo.

Usando capacidades de servidor de ASP.NET AJAX

En este ejercicio crearemos un sitio web en el que se utilizaran los controles de ASP.NET AJAX ScriptManager, UpdatePanel, Timer y UpdateProgress.

Tarea 1 - Creacion del formulario y uso de UpdatePanel

Para completar esta tarea realizaremos lo siguiente:

1. Abra Microsoft Visual Studio 2008 desde Inicio | Todos los Programas | Microsoft Visual Studio 2008 | Microsoft Visual Studio.
2. Crearemos el sitio web AjaxWebSite.
   

   
   

    

3. Agregaremos una AJAX WebForm Default.aspx.
   

    

   
   

    

4. Agregaremos tambien a nuestro sitio web LINQ To SQL CarPictures.dbml

   

   

    

5. Empezaremos por la edicion de Default.aspx utilizando los controles del grupo AJAX Extensions

   

    

6. Ahora agregaremos un UpdatePanel (id=”upPanel”)
   y agregaremos dentro de este un DropDownList (id=ddlCountries,AutoPostBack=”true”) y un DataList (id=lstManufacturers,
   BorderStyle=“Solid” BorderWidth=“1px” BorderColor=“#006699″ GridLines=“Horizontal”)
7. Ahora agregaremos un dos controles control LinqDataSource. El primero seleccionaremos datos de la tabla Country, los campos Name y ID (id=srcCountries, ContextTypeName=”CarPicturesDataContext” Select=”new (ID, Name)” TableName=“Countries”). Del segundo seleccionaremos datos de la tabla Manufacturers, los campos Name y URL, teniendo como fuente de where expression el control ddlCountries (ID=srcManufacturers ContextTypeName=”CarPicturesDataContext” Select=”new (Name, URL)” TableName=”Manufacturers” Where=”CountryID == @CountryID“)

    

   

    

8. Estableceremos la fuente de datos de ddlCountries
   (DataSourceID=”srcCountries” DataTextField=”Name” DataValueField=”ID“)
   
9. Editaremos el ItemTemplate de lstManufacturers
   agregando los controles Literal (id=ltlName,Text=“<%# Eval(”Name”)%>”) y Hyperlink (id=lnkURL, Text=”Ir a sitio web” NavigateUrl=”<%# Eval(”URL”)%>”) de manera opcional tambien podemos editar el HeaderTemplate.
   
10. El diseño de pagina debe quedar de la siguiente manera:
    

    

     

11. Probaremos nuestro sitio web
    

1. Notese que al momento de seleccionar algun pai­s, la pagina no realiza postbacks.

Tarea 2 - Uso de UpdateProgress

1. Se agregara ahora un control UpdateProgress(id= upProgress) encima del control lstManufacturers, en su propiedad AsociatedUpdatePanelID estableceremos el ID del UpdatePanel creado anteriormente upPanel.
2. Editaremos el control upProgress agregando en el un control Image (id=imgLoading, ImageUrl=”~/loading.gif“) y un texto “en progreso…”.
3. Probaremos nuevamente nuestra pagina:

    

   

    

4. Notese que esta vez en cada round-trip se muestra el contenido del control UpdateProgress insertado.

Tarea 3 - Uso de Timer

1. Ahora fuera del UpdatePanel creado, agregaremos otro UpdatePanel(id=upTime) al cual le agraremos un control Literal (id=ltlSeconds, Text=”0“) y un texto previo “usted esta en esta pagina” y posterior “segundos”.
2. Agregaremos el control Timer (id=tmrSeconds, Interval=”1000“) fuera del UpdatePanel creado, estableciendo su evento OnTick :

   protected void tmrSeconds_Tick(object sender, EventArgs e)
   

   {
   

   ltlSeconds.Text = (int.Parse(ltlSeconds.Text) + 1).ToString();
   

   }
   

3. Ahora en la vista de codigo, agregaremos la seccion Triggers en el UpdatePanel upTime
   agregando un AsyncPostBackTrigger estableciendo las propiedades de la siguiente manera:

   <Triggers>
   

   <asp:AsyncPostBackTrigger ControlID=”tmrTime” EventName=”Tick” />
   

   </Triggers>
   

4. Probaremos nuestra pagina
5. Notese que la pagina actualiza el mensaje de segundos, sin embargo no permite hacer una “comoda” seleccion del pai­s. Pasaremos a corregir esto en un paso.
6. En el UpdatePanel upPanel cambiaremos la propiedad UpdateMode=”Conditional” y procederemos nuevamente a probar la pagina:

    

   

Analisis del Ejercicio

1. Hemos utilizado las capacidades de servidor de ASP.NET AJAX, los controles UpdateProgress, Timer y UpdatePanel. En la practica el ASP.NET AJAX server framework consiste en este ultimo control.
2. Es necesario para utilizar las capacidades de ASP.NET AJAX la presencia del control ScriptManager
3. UpdatePanel participa en el tiempo de ejecucion tanto del lado del servidor como del cliente. Captura los postbacks y realiza un Ajax-Postback/Asynchronous-PostBack.
4. Por defecto UpdatePanel captura los Postbacks producidos en la pagina, sin embargo podemos hacer que actualice contenidos desde un control localizado fuera del contenido especificando un trigger.(para el ejemplo del Timer). El trigger AsyncPostBackTrigger causa un AjaxPostBack, el PostBackTrigger causa un postback normal a la pagina.
5. Si no asociamos un Timer a un UpdatePanel, realizara PostBacks
6. UpdateProgress muestra un mensaje de progreso de descarga de nuevo contenido de la accion asi­ncrona

   Nota: Es de recomendacion utilizar una imagen animada en el UpdateProgress

Bueno, este es el primer post de 1,2,3 ASP.NET AJAX, espero les haya sido de mucha utilidad ^^. Si hubiera comentarios aportadores o preguntas no duden en escribir.

El codigo lo pueden descargar de aqui­ :

AjaxWebSite.rar

Posteado desde Microsoft Word 2007
J

Post.End(”Se vienen mas novedades en cidesoft.com.pe, si­guenos“);

Mayormente siempre tenemos que consultar alguna web o descargar algun script, control o programa para mejorar productividad o porque la aplicacion en si­ lo requiere.

Esto es algo que durante algun desarrollo realizado o en proceso, posteare, los microtips. Links a temas aleatorios que se van cruzando en el camino y puedo compartir. Asi­ que empecemos!

• HTTP 1.1 Status Code Definitions

  Como para listar todos los errores 400 y tener en cuenta otros status en nuestro web.config

  <system.web>
          <customErrors mode="On">
              <error statusCode="404" redirect="error404.aspx" />
          </customErrors>
  </system.web>
  

• customErrorsElement

  Y ligado a lo anterior, no puede faltar la explicacion de esta seccion del web.config.

• jQuery Corner Plugin de malsup.com

  Ahora necesito tambien hacer bordes a ciertos elementos y prefiero algo simple sin muchas imagenes.

• Mi Tip para tener un BulletedList de manera horizontal:

  Primero el markup:
  

  <div id="menuNav">
         <asp:BulletedList CssClass="menuNavList" ID="menuListNav" BulletStyle="NotSet" DisplayMode="HyperLink"
                     runat="server">
              <asp:ListItem Text="Inicio" Value="~/"></asp:ListItem>
              <asp:ListItem Text="Item1" Value="~/Item1.aspx"></asp:ListItem>
              <asp:ListItem Text="Item2" Value="~/Item2.aspx"></asp:ListItem>
              <asp:ListItem Text="Item3" Value="~/Item3.aspx"></asp:ListItem>
              <asp:ListItem Text="Item4" Value="~/Item4.aspx"></asp:ListItem>
         </asp:BulletedList>
  </div>

  Luego el css respectivo:

  #menuNav ul
  {
      margin:0;
      padding:0;
      list-style-type: none;
      display:inline;
  }
  #menuNav ul li
  {
      float:left;
      width:125px;
      height:22px;
      text-align:center;
      font-size: 13px;
      background: #EFEFEF;
  }

  Se ve bien en Firefox, Chrome e Internet Explorer. Combinado con jQuery Corner y un fondo degradado, la hace!.

• CSS Zen Garden

  Ahora, todos los developers tenemos una batalla sin fin con el CSS y cuestiones de Diseño. Esta pagina es muy buena.

• Dino Esposito escribiendo sobre jQuery

  La segunda parte de dos arti­culos que merecen ser lei­dos sobre la famosa libreri­a javascript.

Bueno hasta aca los primeros microtips. Espero sean de utilidad

Post.End();