Pantallas de cliente HTML para aplicaciones LightSwitch

Mediante LightSwitch, puede crear pantallas de cliente HTML optimizadas para la presentación en dispositivos móviles. En este tema se presentan las plantillas que se pueden utilizar para crear pantallas basadas en HTML5, las herramientas que se pueden utilizar para diseñar pantallas y algunas de las tareas que se pueden realizar para diseñar las pantallas más adecuadas para la aplicación de LightSwitch.

Para obtener un ejemplo completo de un cliente que usa pantallas HTML, vea Tutorial: Crear un cliente LightSwitch para usuarios móviles.

Clientes de HTML

Puede agregar uno o más clientes HTML a una aplicación existente de LightSwitch, o puede crear una aplicación de LightSwitch que únicamente contenga un cliente HTML. Cada cliente HTML está contenido en su propio proyecto dentro de la solución de LightSwitch.

Plantillas de pantalla

Para comenzar, cree una pantalla con una de las siguientes plantillas de pantalla:

• Conjunto de pantallas común

• Pantalla de examinar

• Ver la pantalla de detalles

• Agregar/editar pantalla de detalles

Para obtener más información acerca de cómo elegir una plantilla, vea Elegir un tipo de pantalla para un cliente HTML de una aplicación LightSwitch.

Para obtener información acerca de cómo buscar estas plantillas, vea Cómo: Crear una pantalla de cliente HTML.

Diseñador de pantallas

Se puede modificar el diseño de una pantalla mediante el diseñador de pantallas. El diseñador de pantallas muestra elementos, como campos de datos y comandos, y el árbol de contenido de pantalla, que es una representación jerárquica de sus datos. Puede arrastrar los elementos al árbol de contenido de pantalla y organizarlos en el orden que desee.

Para obtener más información sobre el diseñador de pantallas, vea Paseo por el Diseñador de pantallas.

Para obtener más información sobre cómo realizar tareas concretas en el diseñador de pantallas, vea Cómo: Diseñar una pantalla HTML usando el Diseñador de pantallas.

Tareas de diseño de pantallas

Para modificar el diseño de una pantalla, puede realizar las siguientes tareas:

• Modificar la apariencia de una pantalla

• Agregar campos y comandos a una pantalla

• Filtrar los datos que aparecen en una pantalla

• Agregar datos a una pantalla

• Personalizar la navegación entre pantallas

• Modificar una pantalla mediante código

Modificar la apariencia de una pantalla

Puede modificar el modo en que se muestran los datos en una pantalla. Por ejemplo, puede configurar un conjunto de información para que aparezca como una lista plana o una lista en mosaico. Puede cambiar el orden en el que aparecen campos o agrupar campos.

Para obtener más información, vea Cómo: Diseñar una pantalla HTML usando el Diseñador de pantallas.

Agregar campos y comandos a una pantalla

Las pantallas HTML en LightSwitch proporcionan comandos integrados para que los usuarios puedan ver, actualizar, eliminar o guardar datos. También puede agregar comandos y campos personalizados.

Agregue un comando personalizado si desea agregar lógica de negocios a la pantalla. Por ejemplo, puede agregar un botón para que un usuario muestre una lista de clientes a partir del volumen de pedidos de venta. Para obtener más información, vea Cómo: Agregar una botón a un cliente móvil para LightSwitch.

Puede agregar campos personalizados de propiedades locales para recopilar o mostrar información. Por ejemplo, puede agregar un cuadro de texto situado junto al botón del volumen de ventas para que el usuario pueda especificar cuántos clientes desea que aparezcan en la lista. Para obtener más información, vea Cómo: Agregar una propiedad local a una pantalla HTML.

Agregar controles personalizados a una pantalla

Al agregar controles personalizados a una pantalla HTML, puede mostrar u obtener información de maneras que van más allá de las capacidades de los controles integrados en LightSwitch. También puede utilizar un control personalizado para reemplazar cualquier control de LightSwitch integrado que aparezca en la pantalla. Para obtener más información, vea Cómo: Agregar un control personalizado a una pantalla HTML para una aplicación LightSwitch.

Filtrar los datos que aparecen en una pantalla

Los datos que aparecen en una pantalla se pueden filtrar mediante la modificación de las condiciones de las consultas de pantalla.

Cada grupo de datos que aparece en el panel izquierdo del diseñador está basado en una consulta. La pantalla muestra únicamente la información devuelta por esas consultas. Si desea cambiar la información que aparece para un grupo de datos, modifique su consulta.

Para obtener más información, vea Cómo: Filtrar datos en un cliente HTML para una aplicación LightSwitch.

Agregar datos a una pantalla

Se pueden agregar otros tipos de datos a una pantalla. Por ejemplo, en una pantalla que muestra clientes, puede agregar una cuadrícula de datos que muestre una lista de pedidos. Para obtener más información, vea Cómo: Agregar datos a una pantalla.

Personalizar la navegación entre pantallas

En un cliente HTML, solo hay una pantalla activa en un momento determinado. Puede especificar el modo en que el usuario abre una pantalla desde otra y lo que sucede cuando una pantalla se convierte en inactiva.

Para obtener más información, vea Cómo: Controlar la navegación entre pantallas HTML en una aplicación LightSwitch.

Modificar una pantalla mediante código

Se puede agregar código a los métodos parciales a los que llama LightSwitch para que cuando se produzcan determinados eventos en tiempo de ejecución, la pantalla se modifique de la forma adecuada. Por ejemplo, puede agregar código que oculte el nombre de una compañía que desea permanecer en el anonimato para los usuarios de la aplicación. Este código examinaría los nombres de las compañías de los clientes y, al encontrar una coincidencia, establecería la propiedad IsVisible del campo CompanyName en False antes de que la información aparezca en la pantalla.

Para obtener más información sobre dónde escribir el código, vea Cómo: Controlar los eventos de pantalla en un cliente móvil para una aplicación LightSwitch.

Para obtener más información acerca de cómo agregar código que modifica una pantalla, vea Cómo: Modificar una pantalla HTML usando código.

Consulte la lista de API de clientes HTML de LightSwitch en Referencia de la API de cliente HTML.

Temas relacionados

Título	Descripción
Elegir un tipo de pantalla para un cliente HTML de una aplicación LightSwitch	Describe las plantillas que se pueden usar como punto de partida para crear pantallas.
Cómo: Crear una pantalla de cliente HTML	Muestra cómo agregar pantallas a la aplicación.
Paseo por el Diseñador de pantallas	Muestra los componentes del diseñador y sus funciones.
Cómo: Diseñar una pantalla HTML usando el Diseñador de pantallas	Muestra cómo utilizar el diseñador de pantallas.
Cómo: Agregar una propiedad local a una pantalla HTML	Muestra cómo agregar un campo personalizado de propiedad local a una pantalla.
Cómo: Agregar una botón a un cliente móvil para LightSwitch	Muestra cómo agregar un botón o vínculo que ejecuta código personalizado en una pantalla.
Cómo: Agregar un control personalizado a una pantalla HTML para una aplicación LightSwitch	Muestra cómo usar un control HTML personalizado en una pantalla de LightSwitch.
Cómo: Agregar datos a una pantalla	Muestra cómo agregar datos de otras consultas a una pantalla.
Filtrar datos en una pantalla HTML	Muestra cómo usar consultas para controlar los datos que aparecen en la pantalla.
Cómo: Controlar los eventos de pantalla en un cliente móvil para una aplicación LightSwitch	Describe cómo se puede personalizar una aplicación mediante la escritura de código que se ejecuta cuando ocurren ciertos eventos.
Cómo: Modificar una pantalla HTML usando código	Describe cómo utilizar código para modificar controles e interactuar con elementos en una pantalla.
Referencia: Propiedades del Diseñador de pantallas	Describe las propiedades de los elementos que aparecen en la lista de miembros de pantalla y en el árbol de contenido de pantalla del Diseñador de pantallas. Puede modificar el aspecto y el comportamiento de los elementos mediante la ventana Propiedades, para establecer el valor de las propiedades.
Cómo: Controlar la navegación entre pantallas HTML en una aplicación LightSwitch	Describe el modelo de navegación de pantalla para un cliente HTML de una aplicación de LightSwitch.