2015-08-28

Este artículo proviene de un motor de traducción automática.

Marcos de RIA

Crear aplicaciones web centradas en datos con ASP.NET MVC y Ext JS

Olamendy Juan Juan

Una aplicación de Internet enriquecida (RIA) combina la facilidad de uso de una aplicación de escritorio con la flexibilidad de implementación basada en Web y de revisión. Existen dos enfoques clave para la creación de aplicaciones RIA. En primer lugar, hay plug-ins de navegador host en entornos de ejecución, como Flash, Java y Silverlight. En segundo lugar, existen las bibliotecas de extensión basado en JavaScript, como Dojo, Ext JS, como jQuery, Prototype, MooTools y YUI. Cada método tiene sus ventajas e inconvenientes.

Bibliotecas de JavaScript son una opción popular para la creación de aplicaciones RIA porque JavaScript es compatible con todos los exploradores principales y no es necesario para instalar un entorno de complemento o en tiempo de ejecución. He estado experimentando con otra de las bibliotecas que se ha mencionado, Ext JS — y he descubierto que resulta una elección interesante para la implementación de aplicaciones Web. Es fácil de implementar, bien documentados y es compatible con selenio para realizar pruebas. Ext JS también proporciona controles predefinidos que simplifican la creación de la interfaz de usuario de su aplicación Web.

Por desgracia, la mayoría de los ejemplos de Ext JS se ilustran con PHP, Python y Ruby en código de rieles en el servidor. Pero eso no significa que los desarrolladores que utilizan las tecnologías de Microsoft no pueden aprovechar Ext JS. Aunque es difícil integrar Ext JS con el desarrollo de formularios Web Forms (debido a la capa de abstracción que encapsula la naturaleza de la solicitud y respuesta de la Web a fin de proporcionar un modelo con estado basado en el control), puede utilizar la aplicación ASP.Framework de NET MVC, permitiéndole aprovechar Microsoft.NET Framework y Ext JS en la misma aplicación.

En este artículo, voy a ofrecer el tutorial que no pude encontrar, recorrer el desarrollo de una solución de Web del mundo real con ASP.NET MVC y JS Ext que lee y escribe en una base de datos back-end.

Conceptos básicos de formularios de ext JS

Para utilizar Ext JS, primero deberá descargarlo desde sencha.com. (Se ha utilizado la versión 3.2.1, pero debe tomar la versión más reciente). Tenga en cuenta que una versión gratuita y de código abierto de Ext JS está disponible para proyectos de código abierto, las organizaciones sin ánimo de lucro y uso educativo. Es posible que deba adquirir una licencia para otros usos. Vea sencha.com/products/License.PHP para obtener más información.

Descomprima la descarga en un directorio en el sistema de archivos. Contiene todo lo que necesita para desarrollar una solución Web utilizando Ext JS, en particular el archivo principal ext-all.js. (También hay una versión de depuración para ayudar a encontrar errores más fácilmente.) Las dependencias, documentación y código de ejemplo se incluyen en la descarga.

Las carpetas necesarias para un proyecto son \adapters y \resources. La carpeta adaptadores permite el uso de otras bibliotecas junto a Ext JS. La carpeta de recursos contiene dependencias como CSS e imágenes.

Para utilizar Ext JS correctamente, necesitará también incluir las tres referencias de archivo de clave en las páginas:

ext-3.2.1/adapter/ext/ext-base.js
ext-3.2.1/ext-all.js
ext-3.2.1/resources/css/ext-all.css

El archivo ext-base.js contiene la funcionalidad básica de Ext JS. Las definiciones de widget están contenidas en ext-all.js y all.css-ext incluye hojas de estilos para los widgets.

Comencemos a usar Ext JS en una página HTML estática para ilustrar los conceptos básicos. Las líneas siguientes están contenidas en la sección head de la página y vincular los archivos necesarios para desarrollar con éxito una solución Ext JS (también he incluido el módulo de JavaScript con algunos widgets de ejemplo de la descarga de JS Ext):

<link rel="stylesheet" type="text/css" 
  href="ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" language="javascript" 
  src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" language="javascript" 
  src="ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" language="javascript" 
  src="extjs-example.js"></script>

En el cuerpo del archivo, insertar un elemento div para representar el principal JS Ext formulario:

<div id="frame">
</div>

El archivo extjs-example.js ofrece alguna perspectiva sobre cómo se construyen aplicaciones Ext JS. La plantilla para cualquier aplicación Ext JS utiliza el ext. NS, instrucciones Ext.BLANK_IMAGE_URL y Ext.onReady:

Ext.ns('formextjs.tutorial');
Ext.BLANK_IMAGE_URL = 'ext-3.2.1/resources/images/default/s.gif';
formextjs.tutorial.FormTutorial = {
  ...
}
Ext.onReady(formextjs.tutorial.FormTutorial.init, 
  formextjs.tutorial.FormTutorial);

El ext. instrucción NS permite organizar lógicamente el código en un espacio de nombres, a fin de evitar conflictos de nombres y problemas de ámbito.

La instrucción de Ext.BLANK_IMAGE_URL es importante para representar los widgets. Tiene llama a la imagen de separador (una imagen transparente de 1 x 1 píxeles) y se utiliza principalmente para generar el espacio en blanco, así como para colocar los iconos y separadores.

La instrucción de Ext.onReady es el primer método para definir con el código JS Ext. Este método se llama automáticamente una vez que el DOM se ha cargado completamente, garantizando que todos los elementos HTML que se pueden hacer referencia está disponible cuando se ejecuta la secuencia de comandos. En el caso de extjs-example.js, aquí está la secuencia de comandos:

formextjs.tutorial.FormTutorial = {
  init: function () {
    this.form = new Ext.FormPanel({
      title: 'Getting started form',
      renderTo: 'frame',
      width: 400,
      url: 'remoteurl',
      defaults: { xtype: 'textfield' },
      bodyStyle: 'padding: 10px',
      html: 'This form is empty!'
    });
  }
}

Se crea una instancia de la clase Ext.FormPanel como un contenedor para los campos. La propiedad renderTo indica el elemento div donde se representará el formulario. La propiedad de los valores predeterminados especifica el tipo de componente predeterminado en el formulario. La propiedad url Especifica el URI para enviar la solicitud del formulario. Por último, la propiedad html especifica el texto (con formato HTML) en la salida predeterminada.

Para agregar campos, tiene que reemplazar la propiedad html con la propiedad items:

items: [ nameTextField, ageNumberField ]

Los dos primeros elementos para agregar son un campo de texto y un campo numérico:

var nameTextField = new Ext.form.TextField({
  fieldLabel: 'Name',
  emptyText: 'Please, enter a name',
  name: 'name'
});
var ageNumberField = new Ext.form.NumberField({
  fieldLabel: 'Age',
  value: '25',
  name: 'age'
});

Las propiedades requeridas son: propiedad fieldLabel (para establecer un mensaje descriptivo que acompaña al componente del formulario) y la propiedad name (para establecer el nombre del parámetro de solicitud). La propiedad emptyText define el texto de marca de agua que contendrá el campo cuando está vacío. La propiedad value es el valor predeterminado para el control.

Otra forma de declarar controles es sobre la marcha:

items: [
  { fieldLabel: 'Name', emptyText: 'Please, enter a name', name: 'name' },
  { xtype: 'numberfield', fieldLabel: 'Age', value: '25', name: 'age' }
]

Como puede ver, para el campo nombre no tendrá que especificar el tipo porque se toma de las propiedades predeterminadas del formulario.

Vamos a agregar algunos elementos adicionales para el formulario, que acaba por parecerse figura 1.

image: The Completed Form

Figura 1 el formulario completado

Hasta ahora, ha creado un formulario utilizando Ext JS para aceptar los datos del usuario. Ahora, vamos enviar los datos al servidor. Deberá agregar un botón para controlar el proceso de enviar y mostrar el resultado al usuario, como se muestra en figura 2.

Figura 2 botones de formulario

buttons: [{
  text: 'Save', 
  handler: function () {
    form.getForm().submit({
      success: function (form, action) {
        Ext.Msg.alert('Success', 'ok');
      },
      failure: function (form, action) {
        Ext.Msg.alert('Failure', action.result.error);
      }
    });
  }
},
{
  text: 'Reset',
  handler: function () {
    form.getForm().reset();
  }
}]

La propiedad buttons permite que el formulario administrar todas las acciones posibles. Cada botón tiene propiedades name y el controlador. La propiedad handler contiene la lógica asociada a la acción que se ejecuta en el botón. En este caso, hay dos botones, cuyos nombres son Save y restablecer. El controlador del botón Guardar ejecuta una acción de envío del formulario y muestra un mensaje que indica el éxito o fracaso. El controlador del botón Restablecer restablece los valores de campo del formulario.

La última — pero importantes — paso en la creación de los formularios es la validación. A fin de especificar los campos requeridos, debemos establecer la propiedad allowBlank en false y la propiedad blankText para un mensaje de error que se muestra cuando se produce un error en la validación necesarias. Por ejemplo, aquí es el campo nombre del formulario:

{ fieldLabel: 'Name', emptyText: 'Please, enter a name', name: 'name', allowBlank: false }

Cuando se ejecuta la aplicación y haga clic en el botón Guardar sin incluir ningún dato en los campos nombre y edad, recibirá un mensaje de error y los campos requeridos se subrayan en rojo.

Para personalizar los mensajes de error en los campos, agregue la siguiente línea de código justo debajo de la función Ext.onReady:

Ext.QuickTips.init();

Ahora, cuando el usuario mueve el puntero del mouse sobre el campo, se muestra un globo con un mensaje que muestra el error.

Establecer varias reglas de validación para los campos como, por ejemplo, especificar la longitud mínima y máxima permitida, aplazar la validación de campo hasta el envío de formularios y la creación de validación funciona para las direcciones URL, direcciones de correo electrónico y otros tipos de datos. Puede ver los detalles de esta validación en la descarga de código.

Creación de la aplicación Web

Ahora, vamos desarrollar una solución Web mediante Ext JS y ASP.NET (MVC). He usado ASP.NET MVC 2, pero esta solución debe ser aplicable a ASP.NET MVC 3. El escenario que voy a dirección está agregando a un empleado en un sistema de administración de recursos humanos.

La descripción de caso de uso de agregar empleado es como sigue: una pantalla que solicita el usuario para introducir información válida para un nuevo empleado, como identificador de empleado, nombre completo, dirección, edad, el salario y el departamento. El campo departamento es una lista de departamentos donde elegir.

La estrategia de implementación principal es crear un JS Ext formulario del cliente, como ya ha visto y, a continuación, procesar los datos mediante ASP.NET (MVC). La capa de persistencia utilizará LINQ para representar entidades empresariales y para conservar los datos para el sistema de base de datos. La base de datos back-end es Microsoft SQL Server 2008.

Iniciar abriendo 2010 de Visual Studio y crear un nuevo proyecto con la aplicación ASP.Plantilla de aplicación Web de NET MVC 2.

A continuación, cree el esquema de base de datos. En este ejemplo, el esquema contendrá dos entidades: empleado y departamento. Figura 3 muestra cómo crean los recursos humanos, base de datos y las tablas y las restricciones subyacentes.

Figura 3 crear la base de datos de recursos humanos

create table department(
  deptno varchar(20) primary key,
  deptname varchar(50) not null,
  location varchar(50)
);
create unique index undx_department_deptname on department(deptname);
insert into department
  values('HQ-200','Headquarter-NY','New York');
insert into department
  values('HR-200','Human Resources-NY','New York');
insert into department
  values('OP-200','Operations-NY','New York');
insert into department
  values('SL-200','Sales-NY','New York');
insert into department
  values('HR-300','Human Resources-MD','Maryland');
insert into department
  values('OP-300','Operations-MD','Maryland');
insert into department
  values('SL-300','Sales-MD','Maryland');
create table employee(
  empno varchar(20) primary key,
  fullname varchar(50) not null,
  address varchar(120),
  age int,
  salary numeric(8,2) not null,
  deptno varchar(20) not null,
  constraint fk_employee_department_belong_rltn foreign key(deptno)
    references department(deptno)
);
create unique index undx_employee_fullname on employee(fullname);

Ahora vamos a usar LINQ to SQL para definir la estructura de las entidades y el mecanismo de persistencia. Empiece por crear una clase de EmployeeRepository para administrar la lógica de acceso a datos para la tabla employee. En este caso, basta con implementar la operación de creación:

public class EmployeeRepository {
  private HumanResourcesDataContext _ctxHumanResources = 
    new HumanResourcesDataContext();
  public void Create(employee employee) {
    this._ctxHumanResources.employees.InsertOnSubmit(employee);
    this._ctxHumanResources.SubmitChanges();
  }
}

También necesita una clase de DepartmentRepository para administrar la lógica de acceso a datos a la tabla del departamento. De nuevo, en este caso simple sólo necesita implementar la operación de lectura a fin de encontrar una lista de departamentos:

public class DepartmentRepository {
  private HumanResourcesDataContext _ctxHumanResources = 
    new HumanResourcesDataContext();
  public IQueryable<department> FindAll() {
    return from dept in this._ctxHumanResources.departments
           orderby dept.deptname
           select dept;
  }
}

Ahora vamos a definir otra parte importante de la arquitectura: el controlador. Para definir un controlador, haga clic en la carpeta de controladores en la ventana del explorador de soluciones y seleccione Agregar | Controlador. HumanResourcesController utiliza como el nombre del controlador.

Capa de presentación de ext JS

Ahora volvamos a Ext JS y utilizar el marco de trabajo para crear la capa de presentación de la aplicación. Para esta solución, sólo tiene que importar ext-all.js y las carpetas \adapter y \resources.

Ir a la página Site.Master y agregue referencias a los archivos de Ext JS dentro del elemento de encabezado, así como un < asp: ContentPlaceHolder >la etiqueta de elemento como un contenedor del código JavaScript y CSS personalizado para cada página, como se muestra en figura 4.

Figura 4 Site.Master

    <head runat="server">
      <title><asp:ContentPlaceHolder ID="TitleContent" 
        runat="server" /></title>
      <link href="../../Content/Site.css" rel="stylesheet" 
        type="text/css" />
      <!-- Include the Ext JS framework -->
      <link href="<%= Url.Content("~/Scripts/ext-3.2.1/resources/css/ext-all.css") %>" 
        rel="stylesheet" type="text/css" />
      <script type="text/javascript" 
        src="<%= Url.Content("~/Scripts/ext-3.2.1/adapter/ext/ext-base.js") %>">
      </script>
      <script type="text/javascript" 
        src="<%= Url.Content("~/Scripts/ext-3.2.1/ext-all.js") %>">
      </script>    
      <!-- Placeholder for custom JS and CSS and JS files 
        for each page -->
      <asp:ContentPlaceHolder ID="Scripts" runat="server" />
    </head>

Ahora vamos a agregar las demás partes importantes de la arquitectura MVC: la vista. La vista presentará el formulario para obtener los datos relacionados con un empleado. Vaya a HumanResourcesController, con el botón secundario en el método de acción de índice y seleccione Agregar a la vista. Haga clic en el botón Agregar en el cuadro de diálogo Agregar vista.

Para implementar el formulario de Ext JS creado anteriormente en este artículo, deberá agregar un archivo de JavaScript para el directorio de secuencias de comandos y una referencia a este archivo de JavaScript en la vista. A continuación, se incluyen la referencia al archivo employee_form.js y agregar un elemento div en la vista de Index.aspx (consulte figura 5).

Figura 5 Agregar el formulario empleado

    <%@ Page Title="" Language="C#" 
      MasterPageFile="~/Views/Shared/Site.Master" 
      Inherits="System.Web.Mvc.ViewPage" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" 
      runat="server">
    Index
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" 
      runat="server">
      <h2>Add a New Employee</h2>
      <div id="employeeform"></div>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="Scripts" 
      runat="server">
      <script type="text/javascript" 
        src="<%= Url.Content("~/Scripts/employee_form.js") %>">
      </script>
    </asp:Content>

Vaya al archivo employee_form.js y agregar código para configurar el formulario de ExtJS y sus widgets subyacentes. El primer paso es definir una instancia de la clase Ext.data.JsonStore para obtener una lista de departamentos:

var departmentStore = new Ext.data.JsonStore({
  url: 'humanresources/departments',
  root: 'departments',
  fields: ['deptno', 'deptname']
});

La propiedad url señala al método de acción de departamentos en el controlador de HumanResourceController. Este método se obtiene acceso mediante el verbo HTTP POST. La propiedad root es el elemento raíz de la lista de departamentos. La propiedad fields especifica los campos de datos. Ahora definir el formulario. Las propiedades son descriptivos:

var form = new Ext.FormPanel({
  title: 'Add Employee Form',
  renderTo: 'employeeform',
  width: 400,
  url: 'humanresources/addemployee',
  defaults: { xtype: 'textfield' },
  bodyStyle: 'padding: 10px',

En este caso, la propiedad url señala al método de acción AddEmployee en el controlador de HumanResourceController. Este método, también se puede obtener acceso mediante HTTP POST.

La propiedad items proporciona la lista de widgets que representan los campos del formulario (figura 6). Aquí el widget de predeterminado es un campo de texto (Esto se especifica en la propiedad de los valores predeterminados). El primer campo es el número de empleado, que es necesario (especificado por la propiedad allowBlank). El segundo campo es el nombre completo, que es también un campo de texto obligatorio. El campo dirección es un área de texto opcional. El campo edad es un campo de número opcional. El campo Salario es un campo de número obligatorio. Y, finalmente, el campo número de departamento es una cadena de identificador, que se selecciona de una lista de departamentos.

Figura 6 Widgets de campo de formulario

items: [
  { fieldLabel: 'Employee ID', name: 'empno', allowBlank: false },
  { fieldLabel: 'Fullname', name: 'fullname', allowBlank: false },
  { xtype: 'textarea', fieldLabel: 'Address', name: 'address', 
    multiline: true },
  { xtype: 'numberfield', fieldLabel: 'Age', name: 'age' },
  { xtype: 'numberfield', fieldLabel: 'Salary', name: 'salary', 
    allowBlank: false },
  { xtype: 'combo', fieldLabel: 'Department', name: 'deptno', 
    store: departmentStore, hiddenName: 'deptno', 
    displayField: 'deptname', valueField: 'deptno', typeAhead: true,
    mode: 'remote', forceSelection: true, triggerAction: 'all', 
    emptyText: 'Please, select a department...', editable: false }
],

Por último, se define la propiedad de los botones para controlar las acciones a través del formulario. Esto se configura como figura 2, pero la propiedad de texto tiene el valor "Agregar".

Ahora el archivo de employee_form.js está completo. (He pasado a través de la mayoría de los elementos del archivo aquí. Consulte el código de descarga de la lista para este archivo de código fuente completo.)

Ahora vayamos a HumanResourceController y la implementan los métodos de acción correspondiente, como se muestra en figura 7.

Figura 7 HumanResourceController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HumanResources_ExtJS_ASPNETMVC.Models;
namespace HumanResources_ExtJSASPNETMVC.Models.BusinessObjects {
  public class HumanResourcesController : Controller {
    DepartmentRepository _repoDepartment = new DepartmentRepository();
    EmployeeRepository _repoEmployee = new EmployeeRepository();
    // GET: /HumanResources/
    public ActionResult Index() {
      return View();
    }
    // POST: /HumanResource/Departments
    [HttpPost]
    public ActionResult Departments() {
      var arrDepartment = this._repoDepartment.FindAll();
      var results = (new {
        departments = arrDepartment
      });
      return Json(results);
    }
    // POST: /HumanResource/AddEmployee
    [HttpPost]
    public ActionResult AddEmployee(employee employee) {
      string strResponse = String.Empty;
      try {
        this._repoEmployee.Create(employee);
        strResponse = "{success: true}";
      }
      catch {
        strResponse = "{success: false, error: \"An error occurred\"}";
      }
      return Content(strResponse);
    }
  }
}

Eso es todo!

Ahora ejecute la solución. Verá la página Web mostrada en figura 8. Escriba algunos datos en el formulario y, a continuación, haga clic en Agregar. Verá un cuadro de mensaje de confirmación. También verá la fila insertada en la tabla dbo.employee en la base de datos.

image: Running the Application

Figura 8 ejecución de la aplicación

Eso es realmente todo hay que crear un sencillo RIA. Dependiendo de las características que usted desea aprovechar, se pudo generar una aplicación similar con cualquiera de los otros marcos de JavaScript populares mientras todavía emplean ASP.NET (MVC). Fácilmente podría sustituir Entity Framework para la capa de datos y utilizar el almacenamiento de información de blanco cielo de Windows o blanco cielo SQL como el almacén de datos back-end. Estos bloques de creación sencillos facilitan la creación de un básico RIA centrado en datos rápida y sencilla.

Juan Carlos Olamendy es un arquitecto jefe, desarrollador y consultor. Se ha visto reconocido como un Microsoft Most Valuable Professional (MVP) y Oracle (ACE) varias veces. Es Microsoft Certified Technology Specialist en Windows Communication Foundation. Puede ponerse en contacto con Olamendy en johnx_olam@fastmail.

Gracias a los siguientes expertos técnicos para la revisión de este artículo: Scott hanselman y eilon Lipton

Compartir a través de