sábado, 25 de junio de 2011

Cómo agregar funcionalidad a la interfaz de usuario (Asp.Net MVC)

Introducción

Una de las grandes limitantes de los generadores de código es la imposibilidad de agregar funcionalidad propia a las cosas generadas automáticamente, y si se hace, generalmente pierden la integración al código generado.

Las herramientas SFS son totalmente diferentes a los demás generadores de código en este sentido, ya que permiten un buena integración entre el código generado y el manual.

En este tutorial agregaremos funcionalidad a la interfaz de usuario apoyándonos del framework de javascript: jquery (http://www.jquery.com ).

Esta es una aplicación de ASP.NET MVC, y ASP.NET MVC es altamente dependiente de javascript para adicionar funcionalidad. Aprender lo básico de jquery es mínimo esfuerzo, y el beneficio es grande.

Pre-Requisitos

  1. Crear la aplicación de ejemplo.
  2. Comprender cómo extender una entidad.

Pasos

Configurar la entidad y regenerar código

  1. En el archivo de extensibilidad de la entidad “Contact”: “Contact.sfsedmx”, agregar el nodo de “CustomProperties” y agregar la CustomProperty “UIHeaderInclude” con el valor “true” y guardar los cambios.
    image
    Este atributo permite agregar contenido en el encabezado de la forma. En el caso de la forma aspx(<header></header>) y al inicio de la forma en el caso de la forma ascx.

Crear el archivo para agregar código manualmente

  1. Observa que el archivo “CreateGen.aspx” en la carpeta de la vistas “Views/Contacts” del proyecto de presentación “SFS.AventureWorks.Web.Mvc” no contiene la inclusión siguiente:
    <% Html.RenderPartialIfExist("HeaderContact", Model); %>
    image
  2. Re-generar el código de la capa de presentación y observar que ahora ya existe esa nueva línea de código en la forma CreateGen.aspx: El Framework espera encontrar (tal vez) una vista parcial llamada “HeaderContact.ascx”.
    image
  3. Ahora agregar la vista parcial haciendo clic derecho en la carpeta “Views / Contacts” y seleccionando “Add / View…” y en la forma de adición escribir el nombre de la vista en el campo “Vew name”: “HeaderContact” y seleccionar la opción “Create a partial view (.ascx)”.
    image   image

Agregando la funcionalidad manualmente



  1. Identificar los elementos sobre los que se van a realizar las acciones. Desde el explorador (IE), navega a la dirección: ”SFSAdventureWorks/Contacts/CreateGen” y abre la ventana de herramientas de desarrollador de Internet Explorer (Presiona F12).
  2. Desde la pestaña HTML de la ventana de herramientas selecciona la herramienta del  puntero.
    image
  3. Identifica los tres elementos sobre los que se realizarán acciones en este ejemplo. El elemento checkbox: “NameStyle”, el contenedor “dcTitle” y el campo de texto “MiddleName”.
    image
      image  image
    Tu puedes no necesitar de hacer esta inspección, si conoces exactamente las propiedades que participan en la funcionalidad. Debe tenerse en cuenta que el contenedor (Tanto de la etiqueta como del campo de entrada de texto) tiene el prefijo “dc”.
  4. En la vista parcial “HeaderContact.ascx” agregar la funcionalidad de javascript:
    image
    El código:
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <% if (Request.Url.ToString().Contains("CreateGen"))
    { %>
    <script type="text/javascript" >
    $(document).ready(function () {
    $("#NameStyle").change(
    function () {
    if ($(this).attr("checked")) {
    $("#dcTitle").hide();
    $("#MiddleName").val("this is a test");
    } else {
    $("#dcTitle").show();
    $("#MiddleName").val("");
    }
    });
    });

    </script>
    <% } %>

  5. Más ayuda de cómo usar jquery: http://docs.jquery.com/Main_Page.
  6. Compilar la aplicación SFS.AdventureWorks.Web.Mvc y refrescar la pantalla “SFSAdventureWorks/Contacts/CreateGen”. Probar la funcionalidad  haciendo clic sobre el checkbox “NameStyle”.
    image  image

Listo. Ahora pueden seguir haciéndose cambios, re-generando el código una y otra vez y el archivo “HeaderContact.ascxno se verá afectado.


Conclusión


Con las herramientas SFS es fácil agregar código personalizado en archivos separados, los cuales se integran de forma transparente en la ejecución de la aplicación.


Esta es una característica importante, ya que elimina una de las desventajas más comunes de los generadores de código.


También puedes revisar el atributo  “Type” con el valor: “Include”, que permite agregar espacios en blanco en cualquier lugar de la forma para agregar código completamente personalizado con estas mismas ventajas.

No hay comentarios.:

Publicar un comentario