20/8/14

Crear páginas Web para dispositivos móviles

in /


El desarrollo de aplicaciones móviles en ASP.NET no difiere mucho del desarrollo Web basado en explorador tradicional de ASP.NET. En primer lugar, ASP.NET expone un espacio de nombres System.Web.Mobile dedicado específicamente al desarrollo Web. Puede crear una página Web a partir de la clase base MobilePage y agregar controles del espacio de nombres System.Web.Mobile.
El desarrollo para dispositivos móviles sigue el modelo orientado a eventos de .NET Framework estándar, en el que la aplicación responde a las solicitudes del usuario, a los clics en los botones, etc.
En este tutorial creará dos páginas Web que heredan de la clase MobilePage y que se diseñarán para un dispositivo móvil. La primera página tendrá una calculadora de hipotecas que puede utilizar para determinar información sobre préstamos. En la segunda página se muestran datos en un formato que facilita la paginación en un dispositivo pequeño. Las tareas ilustradas en este tutorial incluyen:
  • Crear una página Web ASP.NET que muestre resultados en un dispositivo como un teléfono móvil.
  • Agregar paginación para que los usuarios que utilicen dispositivos pequeños puedan moverse eficazmente a través de listas largas.
  • Probar las páginas con un emulador de dispositivos.

Para completar este tutorial, necesitará:
  • Poder ejecutar la página en un dispositivo, como un teléfono móvil. También puede utilizar un emulador entre varias opciones posibles. En este tutorial se supone que tiene un emulador y que puede utilizarlo en el mismo equipo que el servidor Web.
    NoteNota
    Puede ejecutar este tutorial aunque sólo tenga un explorador de escritorio. Sin embargo, un emulador le permitirá ver de forma más directa la funcionalidad de los controles que utilizará en este tutorial.
  • Obtenga acceso a Servicios de Microsoft Internet Information Server (IIS) y permiso para crear una nueva aplicación en IIS. Es recomendable utilizar una copia local de IIS para las páginas de la aplicación, ya que facilita la comprobación de la aplicación con el emulador. Sin embargo, si no le es posible crear una aplicación con IIS, quizá pueda utilizar un emulador en el servidor Web de Microsoft Visual Web Developer. Para obtener información detallada, vea la sección "Pasos siguientes" al final de este tutorial.


Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la sección siguiente, "Crear la calculadora de hipotecas". De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un nuevo sitio Web de IIS local bajo la raíz de IIS

  1. Abra Visual Web Developer.
  2. En el menú Archivo, elija Nuevo y, a continuación, elija Sitio Web.
    Aparece el cuadro de diálogo Nuevo sitio Web.
  3. En Plantillas instaladas de Visual Studio, seleccione Sitio Web de ASP.NET.
  4. Haga clic en Examinar.
    Aparecerá el cuadro de diálogo Seleccionar ubicación.
  5. Haga clic en la ficha IIS local.
  6. Seleccione Sitio Web predeterminado.
  7. Haga clic en el botón Crear nueva aplicación Web.
    Se agrega una nueva aplicación debajo de Sitio Web predeterminado.
  8. En el cuadro para el nuevo sitio Web, escriba DeviceWalkthrough y, a continuación, haga clic en Abrir.
    Volverá al cuadro de diálogo Nuevo sitio Web, en el que el cuadro Ubicación contiene http://localhost/DeviceWalkthrough.
  9. En la lista Lenguaje, seleccione el lenguaje de programación con el que prefiera trabajar.
    El lenguaje de programación que ha elegido será el lenguaje predeterminado del sitio Web. Sin embargo, puede utilizar varios lenguajes en la misma aplicación Web creando páginas y componentes en lenguajes de programación diferentes.
  10. Haga clic en Aceptar.
    Visual Web Developer crea el nuevo sitio Web y abre una nueva página con el nombre Default.aspx.


Para el tutorial creará una página que herede de la clase MobilePage y que contenga una sencilla calculadora de hipotecas. La calculadora pide al usuario que escriba el importe del préstamo, un plazo en años y la tasa de interés. La calculadora puede determinar la cuota mensual de ese préstamo.
En este tutorial utilizará controles del espacio de nombres System.Web.Mobile que están diseñados específicamente para dispositivos en los que no se puede mostrar tanta información como en un explorador de escritorio. En su lugar, los controles presentan la información en vistas independientes entre las que los usuarios pueden cambiar.
Para comenzar, eliminará la página Default.aspx y creará una página móvil para sustituirla.

Para agregar una página móvil

  1. Haga clic con el botón secundario del mouse (ratón) en la página Default.aspx en el Explorador de soluciones y elija Eliminar.
  2. Haga clic en Aceptar en el cuadro de diálogo.
  3. En el Explorador de soluciones, haga clic con el botón secundario del mouse (ratón) en la aplicación y elija Agregar nuevo elemento.
  4. Elija Formulario Mobile Web Forms, debajo de Plantillas instaladas de Visual Studio.
  5. Asigne a la página Web móvil el nombre MobileCalculator.aspx y, a continuación, haga clic en Agregar.
    Se crea una página Web que hereda de la clase MobilePage y se agrega al sitio Web.
Ahora que tiene una página móvil, agregará controles que permitan a los usuarios escribir información de hipotecas.

Para agregar controles que permitan escribir información de hipotecas

  1. En la página MobileCalculator.aspx que ha creado en el último procedimiento, asegúrese de que está en la vista Diseño.
    Verá un control Form con el nombre predeterminado form1.
  2. Arrastre controles desde la carpeta Formularios Mobile Web Forms del Cuadro de herramientas hasta form1 y establezca sus propiedades como se indica en la tabla siguiente.

Control Valores de propiedades
Label ID = HeadingLabel
Text = Calculadora de préstamos
TextBox ID = PrincipalText
Text = Principal
TextBox ID = TermText
Text = Plazo en años
TextBox ID = RateText
Text = Tasa anual
Command ID = Calcular
Text = Calcular

Después de haber creado el control Form en el que los usuarios escriben información sobre sus préstamos, creará otro control Form que mostrará los resultados.

Para crear un formulario que muestre el resultado del cálculo de la hipoteca

  1. Desde la carpeta Formularios Mobile Web Forms del Cuadro de herramientas, arrastre un control Form hasta la superficie de diseño.
    Se asigna al control Form el id. predeterminado de Form2.
  2. Arrastre controles desde la carpeta Formularios Mobile Web Forms del Cuadro de herramientas hasta Form2 y establezca sus propiedades como se indica en la tabla siguiente.

Control Valores de propiedades
Label ID = LoanDetailsLabel
Text = Detalles del préstamo
Label ID = PaymentLabel
Text = Cuota
Command ID = ReturnToCalculator
Text = Volver a la calculadora

Ahora puede crear el código con el que se calculará la información del préstamo para mostrarla.

Para calcular la información de la hipoteca y que se muestren los resultados

  1. Si utiliza C#, agregue una referencia al espacio de nombres Microsoft.VisualBasic para poder utilizar el método Pmt con el fin de calcular la información de las cuotas. Siga estos pasos:
    1. En el Explorador de soluciones, haga clic en con el botón secundario del mouse (ratón) en el nombre del proyecto y elija Páginas de propiedades.
    2. Haga clic en Agregar referencia.
    3. En la ficha .NET, seleccione Microsoft.VisualBasic.dll y, a continuación, haga clic en Aceptar.
    4. En el cuadro de diálogo Páginas de propiedades, haga clic en Aceptar.
  2. En el control form1, haga doble clic en el botón Calcular para crear un controlador de eventos Click y, a continuación, agregue el código siguiente.
    C#
    VB
    Copiar
    protected void Calculate_Click(object sender, EventArgs e)
    {
        // Get values from the form
        Double principal = Convert.ToDouble(PrincipalText.Text);
        Double apr = Convert.ToDouble(RateText.Text);
        Double monthlyInterest = (Double)(apr / (12 * 100));
        Double termInMonths = Convert.ToDouble(TermText.Text) * 12;
        Double monthlyPayment;

        // Calculate the monthly payment
        monthlyPayment = Microsoft.VisualBasic.Financial.Pmt(
           monthlyInterest, termInMonths, -principal, 0,
           Microsoft.VisualBasic.DueDate.BegOfPeriod);

        // Change to the other form
        this.ActiveForm = this.form2;

        // Display the resulting details
        string detailsSpec = "{0} @ {1}% for {2} years";
        LoanDetailsLabel.Text = String.Format(detailsSpec,
            principal.ToString("C0"), apr.ToString(), TermText.Text);
        PaymentLabel.Text = "Payment: " + monthlyPayment.ToString("C");
    }

    El código recopila los valores de los cuadros de texto, los convierte a tipos de datos apropiados y después los utiliza como parámetros para la función Pmt de Visual Basic para calcular el costo mensual de la hipoteca. (Puede utilizar la función de Visual Basic en cualquier lenguaje siempre y cuando especifique completamente la llamada a la función con el espacio de nombres). Después de calcular el importe mensual, el código cambia al segundo control Form y muestra los resultados en los controles Label respectivos.
  3. En el control Form2, haga doble clic en el control Command para crear un controlador de eventos Click y, a continuación, agregue el código resaltado que se muestra a continuación.
    C#
    VB
    Copiar
    protected void ReturnToCalculator_Click(object sender, EventArgs e)
    {
        this.ActiveForm = this.form1;
    }

Probar la calculadora

Ahora está preparado para probar la calculadora. Puede probar la calculadora en un explorador de escritorio. Sin embargo, puede resultar de mayor interés realizar la prueba con un emulador de dispositivos.

Para probar la calculadora

  1. Presione CTRL+F5 para ver su página en el explorador predeterminado y para obtener la dirección URL exacta.
    El primer formulario aparece en la página.
  2. Inicie su emulador y establezca una conexión con la dirección URL de su página.
  3. Cuando aparezca la página en el emulador, especifique 100000 como importe del préstamo, 30 años como período y una tasa de interés del 5 por ciento y, a continuación, haga clic en Calcular.
    La calculadora es reemplazada por la vista de resultados, en la que se muestra la cifra 534,59.

Muchos dispositivos tienen áreas de presentación pequeñas, lo que resulta poco práctico para que se muestren listas largas. ASP.NET proporciona un control ObjectList diseñado para dispositivos móviles que puede mostrar automáticamente toda una pantalla de información a la vez y proporciona vínculos para que los usuarios puedan avanzar y retroceder por la lista.
En esta sección del tutorial creará un listado de datos en el que se muestre más información de la que se puede mostrar en una pantalla, incluso si se trata de la de un explorador de escritorio. Mediante un control ObjectList, agregará automáticamente la función de paginación al resultado, con dimensiones apropiadas para el explorador del usuario.
Lo primero que debe hacer es crear una página de formularios Mobile Web Forms y agregarle un control ObjectList.

Para agregar una página de formularios Mobile Web Forms y crear en ella un control ObjectList

  1. Haga clic con el botón secundario del mouse (ratón) en la aplicación en el Explorador de soluciones y elija Agregar nuevo elemento.
  2. Elija Formulario Mobile Web Forms, debajo de Plantillas instaladas de Visual Studio.
  3. Asigne a la página el nombre MobilePaging.aspx y, a continuación, haga clic en Agregar.
    Se crea una página Web que hereda de la clase MobilePage y se agrega al proyecto. La página contiene un control Form denominado form1. Sólo se pueden utilizar controles en el espacio de nombres System.Web.Mobile en una página que herede de la clase MobilePage.
  4. Desde la carpeta Formularios Mobile Web Forms del Cuadro de herramientas, arrastre un control ObjectList hasta la superficie de diseño y colóquelo en form1.
    Se agrega un control ObjectList a la página. Muestra un conjunto genérico de datos que da una idea de la apariencia que tendrá el control cuando se represente en el cliente.
Una vez creado el control ObjectList, deberá crear datos para rellenarlo.

Para crear los datos

  1. En la página MobilePaging.aspx, cambie a la vista Diseño y haga doble clic en la superficie de diseño vacía para crear un controlador de eventos vacío para el evento Load de la página.
  2. En el controlador vacío, agregue el siguiente código:
    C#
    VB
    Copiar
    protected void Page_Load(object sender, EventArgs e)
    {
        // Create and fill an array of strings
        string[] listItems = new string[25];
        for (int i = 0; i < 25; i++)
            listItems[i] = 
                String.Format("This is item {0}.", i);

        // Bind the ObjectList to the Items
        this.ObjectList1.DataSource = listItems;
        this.ObjectList1.DataBind();
    }

    El código crea una matriz de objetos de cadena y la rellena con cadenas. A continuación enlaza la matriz al control ObjectList.
Ya puede probar la página.

Para probar la página

  1. Presione CTRL+F5 para ejecutar la página.
    La página se muestra con una larga lista de elementos numerados.
  2. Inicie su emulador de dispositivos y escriba la dirección URL de la página (http://localhost/DeviceWalkthrough/paging.aspx).
    Observe que los datos se muestran en una larga lista.

Agregar paginación

Ahora que tiene una página en la que se muestran datos, puede agregar opciones de paginación para que el tamaño de la presentación se ajuste a la pantalla del dispositivo.

Para agregar paginación

  1. En la página MobilePaging.aspx, cambie a la vista Diseño y, a continuación, seleccione form1.
  2. En la ventana Propiedades, establezca la propiedad Paginate en true.
  3. Seleccione el control ObjectList y, en la ventana Propiedades, establezca la propiedad ItemsPerPage como 5.
Ya puede probar la paginación.

Para probar la paginación

  1. Presione CTRL+F5 para ejecutar la página en Internet Explorer.
    La página se muestra con una página de datos y un control de exploración.
  2. Utilice los vínculos Siguiente y Anterior para desplazarse a través de los datos.
  3. En el emulador de dispositivos, escriba la dirección URL de la página.
    El emulador muestra una página de datos (cinco elementos). Si es necesario, puede desplazarse hacia arriba o hacia abajo por la página.
  4. Utilice los vínculos para desplazarse a otras páginas con más elementos.

En este tutorial ha creado una página a medida aprovechando controles diseñados para dispositivos cuya área de presentación es limitada. ASP.NET y Visual Web Developer incluyen recursos para crear aplicaciones destinadas a una amplia gama de dispositivos y exploradores.
Quizá también le interese explorar los siguientes aspectos de los dispositivos:
  • Según el emulador que utilice, podría integrarlo en Visual Web Developer. En el Explorador de soluciones, haga clic con el botón secundario del mouse (ratón) en la página de la calculadora de hipotecas y elija Explorar con. Haga clic en Agregar y escriba la información para el emulador con el fin de agregarla a la lista de exploradores. A continuación podrá utilizar el comando Explorar con para ver una página en el emulador. Tenga en cuenta que no todos los emuladores son compatibles


................................................................................