Tutorial: Personalizar páginas Web de ASP.NET Mobile para dispositivos específicos

Artículo
10/07/2008

Actualización: noviembre 2007

Los filtros de dispositivo, las técnicas de plantillas y las funciones de reemplazo de propiedades de las páginas Web de ASP.NET Mobile permiten personalizar las aplicaciones para que los controles se representen de forma diferente para los distintos tipos de dispositivos. En este tutorial se explica cómo puede utilizarse Visual Studio para crear plantillas, filtros de dispositivo y reemplazos de propiedades para un control móvil. Para obtener más información sobre los filtros de dispositivo, vea Información general sobre el filtrado de dispositivos de ASP.NET

Durante este tutorial aprenderá a:

Agregar una página Web ASP.NET y un archivo de configuración Web móvil.
Agregar un control List a un formulario.
Agregar un control con plantilla a una página Web móvil.
Editar las plantillas de control.
Aplicar reemplazos de propiedades a una plantilla.

Cliente de dispositivo

Requisitos previos

Para completar este tutorial, necesita lo siguiente:

Visual Studio o Visual Web Developer Express.
Capacidad para ejecutar la página en un dispositivo, como un teléfono móvil. Puede ejecutar este tutorial aunque sólo tenga un explorador de escritorio. Sin embargo, un emulador de dispositivos permitirá ver de forma más directa la funcionalidad de los controles que se utilizarán en este tutorial.
Acceso a Servicios de Microsoft Internet Information Services (IIS) y permisos para crear una nueva aplicación (o directorio virtual) 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 puede crear una aplicación utilizando IIS, quizás pueda utilizar un emulador con el servidor de desarrollo de ASP.NET. Para obtener información detallada, vea Cómo: Trabajar con emuladores y exploradores.

Crear el sitio Web

Si ya ha creado un sitio Web de IIS local en Visual Web Developer (por ejemplo, siguiendo los pasos que se indican en Tutorial: Crear un sitio Web local de IIS en Visual Web Developer), puede utilizar ese sitio Web y pasar a la sección siguiente, "Crear una página Web móvil y un archivo de configuración". En caso contrario, cree un nuevo sitio Web de IIS local siguiendo estos pasos:

Nota

Si ha instalado un emulador de dispositivos, este emulador debe tener acceso al sitio Web con el que va a trabajar en este tutorial, por lo que se recomienda utilizar un sitio Web de IIS. Si el emulador puede tener acceso a páginas Web proporcionadas por el servidor de desarrollo de ASP.NET, puede crear o abrir en su lugar un sitio Web del sistema de archivos.

Para crear un sitio Web local de IIS

Abra Visual Studio.
En el menú Archivo, haga clic en Nuevo sitio Web.

Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.
Haga clic en Examinar.

Aparecerá el cuadro de diálogo Seleccionar ubicación.
Haga clic en IIS local.
Haga clic en Sitio Web predeterminado.
Haga clic en el icono Crear nuevo programa Web, que se encuentra en la esquina superior derecha.

Este icono no está etiquetado, pero cuando sitúe el puntero del mouse sobre él, aparecerá una información sobre herramientas que lo identificará.

Se agrega una nueva aplicación con el nombre Sitio Web debajo de Sitio Web predeterminado.
En el cuadro del nuevo sitio Web, escriba C:\WebSites\DeviceSpecificWalkthrough y, a continuación, haga clic en Abrir.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que desee trabajar.
Haga clic en Aceptar.

Visual Web Developer crea el nuevo sitio Web y abre una nueva página con el nombre Default.aspx.

Crear una página Web móvil y un archivo de configuración

En esta sección, creará una página Web móvil. Estas páginas son similares a las página Web ASP.NET normales, pero contienen algunos elementos que son exclusivos de las páginas móviles. Por ejemplo, todas las páginas Web móviles deben heredar de MobilePage y deben incluir un control Form. También creará un archivo Web.config móvil, que utilizará posteriormente para establecer las características específicas del dispositivo.

Asimismo, agregará un control que muestre los datos y que admita el uso de plantillas. Los controles móviles que admiten plantillas son los controles List, ObjectList y DeviceSpecific. En los procedimientos siguientes se utiliza un control List. A continuación, agregará código del tutorial para emular un origen de datos.

Para crear un formulario de ASP.NET Mobile y un archivo de configuración Web móvil

Si el archivo Default.aspx está abierto, ciérrelo.

No se utilizará en este tutorial.
Si el sitio Web tiene un archivo Web.config, elimínelo. Si está trabajando con un sitio Web que ya existe, cambie provisionalmente el nombre del archivo Web.config mientras trabaja con este tutorial.
En Visual Studio, en el menú Archivo, haga clic en Nuevo y, a continuación, en Archivo. En Visual Web Developer Express, en el menú Archivo, haga clic en Nuevo archivo.

Aparecerá el cuadro de diálogo Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Archivo de configuración Web móvil.
Haga clic en Aceptar.

El nuevo archivo de configuración se abre en el editor. Observe la sección <deviceFilters> del archivo Web.config. Estos filtros aparecerán en una lista más adelante en este tutorial.
Cierre el archivo Web.config.
En el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Archivo.

Aparecerá el cuadro de diálogo Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Formulario Web Forms para dispositivos móviles.
En el cuadro Nombre, escriba el nombre del archivo.

Escriba, por ejemplo, TemplateTest.
Desactive la casilla Colocar el código en un archivo independiente.
Haga clic en Aceptar.
Cambie a la vista Diseño.
Arrastre un control List desde la ficha Formulario Web Formspara dispositivos móviles del Cuadro de herramientas hasta el control Form.

Seleccionar un filtro de dispositivo

Ahora ya dispone de un sitio Web, una versión de controles móviles del archivo Web.config y un formulario con un control List. En el procedimiento siguiente, seleccionará el filtro de dispositivo predeterminado.

Un filtro de dispositivo hace posible que las aplicaciones puedan personalizar la apariencia de los controles en dispositivos de hardware específicos o en categorías de dispositivos. La personalización dependerá de las funciones del explorador del dispositivo en el que se utiliza la aplicación. Para obtener más información acerca de los filtros de dispositivo, vea Introducción a los filtros de dispositivo.

Para seleccionar un filtro de dispositivo predeterminado

Haga clic con el botón secundario del mouse en el control List y, a continuación, haga clic en Opciones de plantillas.

Aparecerá el cuadro de diálogo Opciones de plantillas. La lista Filtro de dispositivo aplicado no contendrá ningún filtro. Esto significa que no se ha aplicado ningún filtro de dispositivo al control.
Haga clic en Editar.

Aparecerá el cuadro de diálogo Filtros de dispositivo aplicados.
Si la lista Filtros de dispositivo disponibles no contiene ningún elemento, compruebe que el archivo Web.config tiene una sección <deviceFilters> que contiene elementos para varios filtros de dispositivo. Si es preciso, consulte el procedimiento anterior para crear un archivo Web.config móvil.
En la lista Filtros de dispositivo disponibles, seleccione (Predeterminado) y haga clic en Agregar a la lista.
Haga clic en Aceptar.

El cuadro de diálogo Opciones de plantillas debe permanecer abierto.
En la lista Filtro de dispositivo aplicado, seleccione (Predeterminado).

En el cuadro de lista Esquema de marcado, debe aparecer Plantilla HTML 3.2 móvil.

Nota

La información especificada en el campo Esquema de marcado sólo la utiliza el diseñador y no tiene efecto en tiempo de ejecución. El esquema proporciona la tecnología IntelliSense de Microsoft y permite comprobar la sintaxis en la vista Código fuente.
Haga clic en Cerrar.

Editar plantillas

Ahora puede editar cada una de las plantillas del control List que agregó a la página. El control List define las plantillas siguientes:

Plantilla de encabezado
Plantilla de pie de página
Plantilla de elementos
Plantilla de elementos alternos
Plantilla del separador

En el procedimiento siguiente, insertará controles Label en la plantilla de encabezado y la plantilla de elementos. Además, enlazará el control Label de la plantilla de elementos a un valor de datos.

Para editar las plantillas

Haga clic con el botón secundario del mouse en el control List, haga clic en Editar plantillas y, a continuación, haga clic en Plantillas de encabezado y pie de página.

Los cuadros HeaderTemplate y FooterTemplate se muestran en el formulario.
Arrastre un control Label desde la ficha Formularios Web Forms para dispositivos móviles del Cuadro de herramientas hasta la plantilla de encabezado.
En la ventana Propiedades, establezca la propiedad Text en Lista de poblaciones.
Haga clic con el botón secundario del mouse en el control List, haga clic en Editar plantillas y, a continuación, haga clic en Plantillas de elementos.

Los cuadros ItemTemplate y AlternatingItemTemplate se muestran en el formulario.
Arrastre un control Label desde la ficha Formularios Web Forms para dispositivos móviles del Cuadro de herramientas hasta la plantilla de elementos.
Haga clic con el botón secundario del mouse en el control Label y, a continuación, haga clic en Editar DataBinding.

Aparecerá el cuadro de diálogo Enlaces de datos.
En el cuadro Expresión de código, escriba la siguiente expresión:
```
CType(Container, MobileListItem)
```
```
(MobileListItem)Container
```
Haga clic en Aceptar.
Haga clic con el botón secundario del mouse en el control List y, a continuación, haga clic en Terminar edición de plantilla.
Guarde el archivo y ciérrelo.

Crear datos para mostrarlos en el control List

Para emular la lectura de datos de una base de datos u otro origen de datos, creará algunos datos en el código que podrá enlazar con el control List.

Para crear datos en el código

Cambie a la vista Código fuente.
Copie el código siguiente y péguelo en el elemento <script runat="server"> de la página.

Nota

El código de ejemplo utiliza un objeto MobileListItem para estructurar los datos en dos propiedades: Text y Value. También puede crear una clase personalizada y establecer las propiedades DataTextField y DataValueField del control List para que utilicen las propiedades de la clase personalizada.
```
Private Sub Page_Load()
    Dim _arrayList As New ArrayList()

        _arrayList.Add(New MobileListItem("San Francisco", "SF"))
        _arrayList.Add(New MobileListItem("Seattle", "SEA"))
        _arrayList.Add(New MobileListItem("New York", "NY"))
    List1.DataSource = _arrayList
    List1.DataBind()
End Sub
```

Aplicar reemplazos de propiedades

En cada uno de los filtros de dispositivo seleccionados, puede definir propiedades específicas para cada dispositivo y reemplazar las propiedades correspondientes del control List. En el procedimiento siguiente, establecerá las propiedades DataTextField y ForeColor para el filtro de dispositivo (Predeterminado).

Para reemplazar propiedades de un filtro de dispositivo específico

Cambie a la vista Diseño.
Seleccione el control List y, en la ventana Propiedades, haga clic en el botón de puntos suspensivos () del cuadro (PropertyOverrides).

Aparece el cuadro de diálogo Reemplazos de propiedad.
En la lista Filtro de dispositivo aplicado, haga clic en (Predeterminado).

La lista Propiedades específicas del dispositivo muestra las propiedades que se pueden reemplazar.
En la propiedad DataTextField, escriba Text.

De este modo, se asegura de que la propiedad Text de cada MobileListItem del origen de datos aparecerá en tiempo de ejecución en el control List del filtro de dispositivo especificado.
Establezca la propiedad ForeColor en Rojo.
Haga clic en Aceptar.

Probar la página

Ahora puede ejecutar la página.

Para probar la página

En el Explorador de soluciones, haga clic con el botón secundario del mouse en TemplateTest.aspx y, a continuación, haga clic en Ver en el explorador.

La página se muestra en el explorador predeterminado.
Para ver la página en un emulador de dispositivos, siga las instrucciones proporcionadas por el fabricante del emulador para navegar hasta la página.

Si el emulador coincide con el filtro de dispositivo seleccionado que aparece en el archivo Web.config, verá el resultado que especificó para ese dispositivo.

Pasos siguientes

En este tutorial ha aprendido a utilizar Visual Studio para crear un control con valores de propiedades específicos para dispositivos, seleccionar un filtro de dispositivo, editar las plantillas de ese filtro y definir reemplazos de propiedades para ese filtro.

También puede cambiar a la vista Código fuente y consultar el marcado declarativo generado por Visual Studio.

Examine la página en distintos exploradores o emuladores para ver si la configuración específica de los dispositivos proporciona diferentes resultados en el explorador predeterminado y en el emulador. También puede ampliar este tutorial y seleccionar otro filtro de dispositivo además del filtro predeterminado para ver el resultado en el emulador.

Para obtener más información, vea los temas siguientes:

Vea también

Compartir a través de