Tutorial: Diseñar una pantalla
El tutorial muestra cómo utilizar el diseñador de pantalla LightSwitch para crear una pantalla que muestra los datos del cliente desde la base de datos de ejemplo Northwind.El diseñador de pantalla es un lienzo de diseño visual que puede utilizar para modificar la apariencia de una pantalla.
En el tutorial se muestra cómo realizar las tareas siguientes:
Crear una pantalla
Cambiar el diseño de una pantalla
Quitar campos de una pantalla
Cambiar el orden de presentación de los elementos
Cambiar el nombre para mostrar de un elemento
Cambiar el tipo de control de un elemento
Personalizar una pantalla en una aplicación en ejecución
Requisitos previos
En el tutorial se asume que la base de datos de ejemplo Northwind se instaló en su equipo y que la ha agregado como un origen de datos en el proyecto.
Para obtener información sobre la forma de instalar la base de datos de ejemplo Northwind, vea Instalar la base de datos de ejemplo Northwind.
Para obtener información sobre cómo agregar la base de datos de ejemplo Northwind como un origen de datos en el proyecto, vea Conectarse a datos.
Creación de pantalla
En la sección se muestra cómo crear una pantalla para mostrar los datos del cliente desde la base de datos de ejemplo Northwind.La pantalla se divide en dos partes.La primera parte muestra una lista de resumen de todos los clientes; la otra muestra los detalles sobre el cliente que está seleccionado..
Para crear una pantalla
En el Explorador de soluciones, seleccione Pantallas.
En el menú Proyecto, haga clic en Agregar pantalla.
Aparecerá el cuadro de diálogo Agregar nueva pantalla.
En el cuadro de diálogo Agregar nueva pantalla, en la lista Seleccione una plantilla de pantalla, seleccione Pantalla de lista y detalles.
En Nombre de pantalla, escriba Clientes.
En la lista desplegable debajo Datos de pantalla, seleccione <NombreDeOrigenDeDatos>.Clientes.
En Datos adicionales a incluir, seleccione Detalles del Cliente y Pedidos del Cliente.
Esto agrega los campos de la entidad Cliente a la parte de los detalles de la pantalla, junto con una lista de los pedidos hechos por ese cliente.
La siguiente ilustración muestra cómo aparece el cuadro de diálogo después de haber realizado los pasos de esta sección.
.png "Cuadro de diálogo Agregar nueva pantalla")
Haga clic en Aceptar para crear la pantalla.
Aparece el Diseñador de pantalla.
Cambiar el diseño de una pantalla
La pantalla Lista y detalles tiene dos columnas.La columna de la izquierda es una lista de los clientes.La columna de la derecha contiene dos filas.La fila superior contiene los detalles del cliente seleccionado y la fila inferior contiene los pedidos relacionados con el cliente seleccionado.El árbol de contenido de pantalla del diseñador de pantalla muestra cómo se crea la lista.
Esta sección muestra cómo modificar el diseño de la pantalla para que contenga dos filas en lugar de dos columnas.La fila superior contendrá la lista de clientes.La fila inferior contendrá dos columnas.La columna de la izquierda contendrá los detalles del cliente seleccionado y la de la derecha contendrá los pedidos relacionados con el cliente seleccionado.
Para cambiar el diseño de la lista
En el Árbol de contenido de pantalla del Diseñador de pantallas, cambie el diseño del nodo Clientes de Diseño de columnas a Diseño de filas.Para hacerlo, haga clic en la flecha hacia abajo que aparece junto al nodo Clientes.Después, desde la lista desplegable, haga clic en Diseño de filas.
Cambie el diseño de Detalles de columna de Diseño de filas a Diseño de columnas.Para hacerlo, haga clic en la flecha hacia abajo que aparece junto al nodo Detalles de columna y, a continuación, haga clic en Diseño de columnas.
Quitar campos de una pantalla
De forma predeterminada, el área de la pantalla que muestra los detalles de un cliente y que se denomina Detalles de columna muestra todos los campos desde el origen de datos.Si no desea que aparezcan todos los campos, puede quitar los que no desee.Por ejemplo, los siguientes pasos muestran cómo quitar el campo País.
Para quitar campos de una pantalla
En el Árbol de contenido de pantalla, expanda el nodo Detalles del cliente si aún no está expandido.
Haga clic en el campo País, a continuación, en la barra de comandos del Diseñador de pantallas, haga clic en Eliminar.
Cambiar el orden de los campos
Los siguientes pasos muestran cómo cambiar el orden de la presentación de campos, por ejemplo, el campo CustomerID y el campo Postal Code.
Para cambiar el orden de presentación de los campos
En el Árbol de contenido de pantalla, expanda el nodo Detalles del cliente si aún no está expandido.
Para mover el campo CustomerID a la parte inferior de la columna de detalles, arrástrelo al campo Fax.
Para mover el campo Código postal a la posición sobre Cliente ID, arrástrelo entre el campo Fax y el campo ClienteID.
Cambiar el tipo de control de un campo
Puede personalizar cómo se muestra un campo al usuario.Por ejemplo, puede establecer un campo de texto para que se muestre como un TextBox o como un Label.Los siguientes pasos muestran cómo cambiar un campo de presentación por un campo Label para que el usuario no pueda modificar su valor.
Para cambiar el tipo de control de un campo
En el Árbol de contenido de pantalla, expanda el nodo Detalles del cliente si aún no está expandido.
Seleccione el campo Cliente ID y en la lista desplegable seleccione Label.
Puede repetir el paso para cambiar otros campos.
Para probar los cambios, presione F5 para ejecutar la aplicación.
Personalizar una pantalla en una aplicación en ejecución
También puede personalizar una pantalla mientras la aplicación se está ejecutando.Por ejemplo, puede quitar los campos, cambiar el orden de campos y cambiar propiedades como tipo de control o alineación de etiqueta.
Para personalizar una pantalla en una aplicación en ejecución
Si su aplicación no se está ejecutando, presione F5 para iniciarla.
En la barra de comandos de la pantalla, haga clic en Pantalla de diseño.
En la pantalla Modo de personalización, quite el campo Cliente ID de la columna de detalles seleccionándolo en el nodo Detalles del cliente y a continuación haga clic en el botón de Eliminar (
.png "Elimina el elemento seleccionado.")
).Mueva el campo Fax debajo del campo Código postal al seleccionarlo en el nodo Detalles del cliente y luego hacer clic en el botón Bajar (
.png "Desplaza un elemento a una posición inferior en la lista.")
).Cambie el nombre del campo Teléfono a Número de teléfono al seleccionar el nodo Detalles de cliente y después, en la ventana Propiedades, cambiar el valor de la propiedad Nombre para mostrar a Número de teléfono.
Cambie el tipo de pantalla del campo Número de teléfono por un Label seleccionando el campo en el nodo Detalles de cliente y, a continuación, en la ventana Propiedades, haga clic en la propiedad Control y seleccione el valor Label.
Cambiar la alineación de las etiquetas en la columna de detalles.Seleccione el primer campo en el nodo Detalles del cliente, en este caso, el campo Nombre de la empresa.En la ventana Propiedades, haga clic en la propiedad Posición de etiqueta y seleccione el valor Alineado a la derecha.Repita el paso para todos los campos del nodo Detalles del cliente.
Haga clic en Guardar para guardar los cambios.La aplicación muestra ahora los cambios que acaba de hacer.
Pasos siguientes
De forma predeterminada, al seleccionar un origen de datos para una pantalla, se muestran todos los datos del origen.Si solo desea mostrar un subconjunto de datos, puede crear una consulta que defina los datos que se van a mostrar.Para obtener más información, vea Cómo: Diseñar una consulta usando el Diseñador de consultas.