CAPÍTULO 4

Construyendo más complejo

Aplicaciones con
Relaciones y
Pantallas de detalles
Las empresas son bastante complejas. Producen una serie de

productos que se colocan en stock y se les asigna un identificador

y un precio unitario. Tienen clientes que compran sus productos,

por lo que necesitan realizar un seguimiento de la información del cliente,

como dirección física, dirección de correo electrónico, número de teléfono y

pronto. Los clientes compran productos a través de pedidos. Cada orden tiene un

fecha, una fecha requerida y una fecha de envío; también, cada orden

contiene la lista de productos que los clientes desean comprar.

Cuando finaliza el envío del pedido, la empresa crea

una factura y se la envía al cliente.

Esto es solo un vistazo de los procesos típicos de la compañía, pero el

la descripción es lo suficientemente compleja como para que puedas entender

qué tan abarcativas deben ser las aplicaciones comerciales para ayudar

Las empresas resuelven sus problemas. Si piensas en esto

descripción desde la perspectiva de un desarrollador, sabes que

necesita definir varias tablas en una base de datos y que

la mayoría de las tablas están relacionadas entre sí (la típica

relación es entre un cliente que tiene muchos pedidos);

Además, debe diseñar muchos formularios de datos requeridos

para ingresar, buscar, consultar y filtrar datos.

Aquí es donde Visual Studio LightSwitch llega a

rescate. Microsoft entiende lo complejo que es construir

aplicaciones comerciales lo suficientemente potentes como para satisfacer las necesidades de

una empresa, por lo que el objetivo de LightSwitch es facilitar la

proceso de creación de aplicaciones compuestas centradas en datos en

Top de las tecnologías más recientes y potentes. En

Capítulo 3, "Creación de aplicaciones centradas en datos", viste

cómo LightSwitch permite a los usuarios crear un centro de datos aplicación de forma rápida, fácil
y en muy pocos pasos. El ejemplo de la aplicación mostró cómo

construir una lista de contactos y cómo administrar dicha lista agregando, buscando y filtrando

elementos, aprovechando las herramientas, controles y automatización de LightSwitch.

Esa simple explicación te ayuda a comprender el proceso de construir rápidamente un sistema

completamente funcional,

aplicación centrada en datos con LightSwitch, pero aplicaciones empresariales del mundo real

requieren más datos, más pantallas y, sobre todo, más procesamiento de datos. A partir de esto

En este capítulo, aprenderá a crear aplicaciones complejas de línea de negocio. Aquí aprendes
cómo

para diseñar fuentes de datos complejas con relaciones y pantallas sofisticadas que proporcionan

La experiencia más completa con respecto a la interacción visual con los datos. Y escribes

codifique solo cuando sea estrictamente necesario. Luego, en el próximo capítulo, aprenderá a
aprovechar

y personalizar el paso de procesamiento de datos que es otro requisito importante en cada

aplicación comercial respetable: validación de datos personalizada. Además, mientras lee esto

capítulo, comprenderá mejor la importancia del Capítulo 3. De hecho, en este capítulo,

reutiliza todos los conceptos, terminología, tareas y funciones de automatización descritas

anteriormente,

pero ahora contra aplicaciones más complejas.

LO QUE ENCUENTRAS Y LO QUE NO ENCUENTRAS EN ESTE CAPÍTULO

Recuerde que el objetivo de este libro no es explicar la teoría de la base de datos ni proporcionar
información general.

debates sobre arquitectura de aplicaciones empresariales. El objetivo de este libro es

explique cómo crea aplicaciones comerciales con Visual Studio LightSwitch. Así es
imposible explicar cada concepto relacionado con las aplicaciones comerciales y las bases de
datos.

Es importante señalar esto porque hay lugares donde el libro

asume que ya está familiarizado con ciertos conceptos. Si no lo eres, puedes

estudie en otros libros o aprenda sobre ellos a través de artículos disponibles en Internet.

Crear un nuevo proyecto LightSwitch

En este capítulo, creará una aplicación simplificada para una empresa que vende alimentos y
bebidas.

Tiene una lista de clientes que compran los productos de su empresa a través de pedidos y

que reciben facturas de su empresa. Aprenderá a crear relaciones maestro-detalles

entre entidades, cómo aprovechar todas las plantillas de pantalla disponibles,

y cómo organizar la navegación de la pantalla. La aplicación que construyes en este capítulo

también es la base para los siguientes capítulos, donde agrega tablas adicionales de diferentes

fuentes y donde aprende a personalizar tanto los datos como la interfaz de usuario con more
elaborate

procesamiento de datos. El primer paso es crear un nuevo proyecto y nombrarlo

Gestión de facturas, como se muestra en la Figura 4.1.

Cuando aparezca el diseñador de LightSwitch, seleccione Crear nueva tabla. En realidad,

necesitamos

diseñar nuestra fuente de datos desde cero. Ahora es el momento de diseñar tablas.
ENTIDADES Y TABLAS

Cuando utiliza el Diseñador de tablas, diseña una entidad y luego LightSwitch crea un

tabla para esa entidad. Una entidad es en realidad una instancia del objeto que contiene el

datos en tiempo de ejecución, que se asignan uno a uno a una tabla en LightSwitch. Por esta
razón, en

En este libro, estos términos se usan indistintamente.

Diseño de orígenes de datos complejos

Según la descripción de la aplicación en la sección anterior, necesitamos cinco entidades:

Cliente, Encabezado de Orden, Detalle de Orden, Producto y Factura.

La primera entidad que diseñe es Cliente.

La tabla 4.1 resume las propiedades y sus tipos (excepto la propiedad Id de solo lectura, que se
proporciona de manera predeterminada).

TABLA 4.1 La definición de entidad del cliente

Tipo de nombre de propiedad

Nombre Compañia String(una propiedad requerida)

País String
Ciudad String

Dirección String

Dirección de correo electrónico email

Número de teléfono

Código postal

ContactName (una propiedad requerida)

ContactTitle

ORDEN DE PROPIEDADES

Recuerde que el orden en el que agrega propiedades a la entidad es el orden en el que

aparecen de forma predeterminada en las pantallas que crea.

Al final de su trabajo, la nueva entidad se parece a la Figura 4.2.

FIGURA 4.2 La entidad del Cliente tal como aparece en el Diseñador de entidades.

Como era de esperar, LightSwitch también genera una tabla Clientes, que es visible en

Explorador de soluciones dentro de la subcarpeta Data Sources \ ApplicationData. La siguiente

entidad

que diseñas es Orden. Simplemente haga clic en el botón Nueva tabla en el Entity Designer, y un

Aparecerá una nueva entidad vacía. Cambie el nombre de OrderHeader y agregue las propiedades
resumidas
en la tabla 4.2.

TABLA 4.2 La definición de entidad OrderHeader

Tipo de nombre de propiedad

Fecha de pedido (una propiedad requerida)

Fecha requerida (una propiedad requerida)

Fecha de envío

Carga

País del barco

Ship City

Dirección del barco

Tenga en cuenta que solo las dos primeras propiedades están marcadas como necesarias; esto es
porque tu

la empresa puede recibir un pedido que aún no se ha procesado. También tenga en cuenta que
para el

la primera vez, usa el tipo de datos Money, que es uno de los nuevos tipos de negocios (consulte

Capítulo 3). Después de diseñar la entidad OrderHeader, se ve como en la Figura 4.3.

FIGURA 4.3 La nueva entidad de Encabezado de pedido tal como aparece en el Diseñador de
entidades.
Visual Studio LightSwitch genera correctamente una tabla de encabezados de pedido, como puede
ver en

Explorador de la solución. A continuación, debe definir una entidad denominada Detalle del
pedido. Porque un

el pedido puede referirse a múltiples productos, esta entidad almacena detalles del pedido, como
el precio unitario,

Cantidad de producto y descuento. La Tabla 4.3 describe la definición de entidad Detalle del
pedido,

y la Figura 4.4 muestra cómo se ve la entidad en el diseñador.

TABLA 4.3 Definición de entidad de detalle de pedido

tipo de propiedad

Precio unitario (una propiedad requerida)

Cantidad (una propiedad requerida)

Descuento (una propiedad requerida)

FIGURA 4.4 La definición de entidad OrderDetail.

Tenga en cuenta que la entidad Detalle del pedido funciona estrictamente con el Encabezado del
pedido y el Producto

entidades (esta última se define en la siguiente subsección), pero las relaciones dentro de las
entidades son

explicado en la siguiente sección. Por ahora, terminemos de diseñar entidades y echemos un

vistazo a
característica interesante en LightSwitch: listas de opciones.

Entidades que definen listas de opciones

El siguiente paso es diseñar la entidad del Producto. Nuevamente, repita los pasos descritos
anteriormente para

cree una nueva entidad y nombre este Producto. Luego agregue las propiedades resumidas en

Tabla 4.4.

Tipo de nombre de propiedad

Nombre del producto (una propiedad requerida)

Imagen del producto

Unidades en Stock (una propiedad requerida)

Categoría

Al final de su trabajo, la entidad se parece a la Figura 4.5.

La definición de entidad tiene una peculiaridad: la propiedad Categoría de tipo Integer. Suponer

desea solicitar al usuario una lista de categorías; el producto que se ingresa (o

editado) se asociará con la categoría más apropiada recogida de la lista. En

En otros entornos de desarrollo de datos, generalmente se logra esto con tablas de búsqueda.

En LightSwitch, aún puede crear tablas de búsqueda, pero si tiene un número limitado de

opciones, también tiene una alternativa más elegante: listas de opciones.

FIGURA 4.5 La nueva definición de entidad del Producto.

Una lista de opciones es básicamente una lista estática de elementos formados por dos columnas:
valor y visualización

nombre. El valor es necesario para identificar el elemento, y el nombre para mostrar es texto
descriptivo

eso se muestra dentro de la interfaz de usuario. Si es un desarrollador con experiencia previa en

.NET,

Puede pensar en una lista de opciones como una colección de Diccionario (De entero, Cadena).

Además, puede crear listas de opciones en propiedades de tipo String que no sean Integer.

En este caso, el valor es una cadena, no un valor entero (si ingresa un número es
convertido en su representación de cadena). Esto es útil si tiene que representar columnas

que contienen valores no numéricos. Cuando elige definir una lista de opciones para una
propiedad de

tipo String, .NET Framework en realidad genera un diccionario (Of String, String).

ELECCIÓN LISTAS DE RENDIMIENTO

Utilice listas de opciones cuando desee representar listas de opciones cortas y estáticas. Listas de
elección

no son factibles con cientos de opciones, por lo que si tiene más de 20 opciones (para

instancia), debe usar una tabla de búsqueda. Por supuesto, el objetivo de este libro es explicar

todas las funciones disponibles en LightSwitch, por lo que el ejemplo actual es conceptualmente
apropiado

para explicar las listas de opciones. Si tiene cientos o miles de categorías de productos,

Sin embargo, es posible que desee utilizar una tabla específica.

Para crear una lista de opciones, siga estos pasos:

1. En el Diseñador de entidades, seleccione la propiedad para la que desea crear una lista de
opciones

(Categoría en el ejemplo actual).

2.abrir propoiedades y click lista de opciones

3.

FIGURA 4.6 Definición de una lista de opciones para categorías de productos.

La columna Valor requiere que especifique un identificador alfanumérico, y no está

requerido para seguir estrictamente un orden incremental.

La columna Nombre para mostrar enumera una serie de categorías de alimentos, cada una
asociada con el

valor numérico proporcionado Una vez que haya terminado, haga clic en Aceptar para volver al
Diseñador de entidades. Tú

Verá cómo funciona la lista de opciones dentro de la interfaz de usuario más adelante en este
capítulo. Ahora nosotros

puede terminar de construir la estructura de datos para la aplicación diseñando la última entidad

para este capitulo.

Por lo tanto, cree una nueva entidad y asígnele el nombre Factura. Luego, agregue las
propiedades

resumido en la Tabla 4.5.

TABLA 4.5 La definición de entidad de factura

Tipo de nombre de propiedad

Fecha de factura Date(una propiedad requerida)

Número de factura String(una propiedad requerida)

Asunto de la factura String(una propiedad requerida)

Fecha de vencimiento de la factura Date

Detalles de la factura String (una propiedad requerida)

Impuestos Money

En la siguiente subsección, aprenderá a manejar el símbolo de moneda y otras propiedades.

del tipo de dinero. Finalmente, la entidad se parece a la Figura 4.7.

FIGURA 4.7 La nueva definición de entidad de factura

Trabajando con el tipo de datos de dinero

Debido a que esta es la primera vez que trabaja con el tipo de datos Money, algunas explicaciones

son requeridos. Este tipo se usa para representar monedas y se basa en Decimal .NET

escriba e incluye el símbolo de moneda y los dígitos decimales. Si selecciona cualquier elemento
de tipo

Dinero en Entity Designer y luego abra la ventana Propiedades, en Apariencia

grupo, puede encontrar algunas propiedades importantes: Código de moneda, lugares decimales y

Modo de símbolo, como se muestra en la Figura 4.8.

La propiedad Código de moneda le permite especificar el símbolo de moneda en función del

código de moneda internacional Esta información está compuesta de tres letras mayúsculas que
representan

un codigo. Por ejemplo, el valor predeterminado en USD significa que la moneda utilizada por la
aplicación

es el dólar estadounidense Si vives en Europa, el código de moneda apropiado para la mayoría

Países es en cambio EUR (euro). Si su aplicación va a ser utilizada por usuarios canadienses,

el código apropiado es CAD (dólar canadiense).

CÓDIGOS DE MONEDA DISPONIBLES

Puede encontrar la lista completa de códigos de moneda disponibles en www.nationsonline.org/

oneworld / monedas.htm.

Es importante especificar el código de moneda apropiado porque esto afecta la forma en que

Se muestra la información. Por ejemplo, el código USD le dice a LightSwitch que use $
símbolo de moneda, como en este ejemplo:

$ 1,000,000.00

FIGURA 4.8 Propiedades específicas para el tipo de datos Money.

En contraste, el código EUR le dice a LightSwitch que use el símbolo de moneda €, como en este

ejemplo:

€ 1.000.000,00

Por lo tanto, después de haber determinado el código de moneda apropiado, especifíquelo como

Símbolo de moneda valor de la propiedad. Eventualmente puede reemplazar lo que el símbolo de

moneda

se muestra como cambiando la propiedad Modo de símbolo. Tiene las siguientes tres opciones:

. Símbolo de moneda (predeterminado): muestra el símbolo de moneda para el seleccionado

cultura, como $ o €.

. Símbolo de moneda ISO: muestra el código de moneda real, como USD o EUR.

. Sin símbolo: muestra el valor numérico sin ningún símbolo de moneda.

A continuación, la propiedad Dígitos decimales especifica cuántos dígitos siguen al separador

decimal

(que es 2 por defecto). Ahora que hemos examinado el tipo de datos de Money, necesitamos

considere una cosa más: hasta ahora, ha definido cuatro entidades, cada una representando un
particular

momento en la vida empresarial de su empresa. Pero en este punto, no pueden comunicarse

uno con el otro porque no hay conexión entre ellos. Entonces, tienes que

definir relaciones, que se explican en la siguiente sección.

Agregar relaciones

NOTA

Esta sección asume su familiaridad con los conceptos básicos en la teoría de la relación.

bases de datos, especialmente con respecto a Microsoft SQL Server. Si eres un absoluto

principiante con SQL Server, marque la Guía de inicio de MSDN Library:

http://msdn.microsoft.com/en-us/library/ms130214.aspx.

Las relaciones son la forma en que define las conexiones entre conjuntos de datos para que el
sistema

Puede mantener la integridad de los datos. Por ejemplo, los clientes tienen muchos OrderHeaders.
Cuando tú

defina la relación, puede especificar que no se puede eliminar ningún Cliente en el sistema si

existe un OrderHeader. Las relaciones son muy importantes; mantienen la integridad

de sus datos y protección contra datos faltantes e inconsistentes.

Las relaciones pueden ser de varios tipos:

. Uno a muchos: este es el tipo de relación más común en los escenarios empresariales.

Tiene una instancia de una entidad (por ejemplo, Cliente), que puede tener muchas

instancias de otra entidad (como OrderHeaders). Básicamente, cada entidad del

La parte "muchos" debe estar relacionada con una entidad de la parte "uno".

. Cero o uno a muchos: esto es como uno a muchos, pero difiere en que cada entidad de
la parte "muchos" puede estar relacionada con una entidad de la parte "uno" (por ejemplo, uno

El cliente puede tener muchas instancias de OrderHeader y un OrderHeader puede tener

Un cliente).

. Cero o uno a uno: tiene una instancia de una entidad que puede tener una instancia

de otra entidad (por ejemplo, un OrderHeader debe tener un Cliente y otro

El cliente puede tener un OrderHeader).

RELACIONES UNO A UNO Y MUCHOS A MUCHOS

Tenga en cuenta que en esta primera versión de Visual Studio LightSwitch, uno a uno y muchos

Las relaciones no son compatibles. Solo cero o uno a muchos, uno a muchos y cero,

o relaciones uno a uno son compatibles actualmente. Eventualmente puedes lograr muchos

muchos mapas mediante el uso de una tabla de enlace. Andy Kung, del equipo LightSwitch, tiene
un

publicación de blog que explica cómo lograr esto: http://bit.ly/fGyF12.

Las aplicaciones comerciales utilizan mucho las relaciones uno a muchos. Cuando hablamos del
usuario

interfaz, también se denominan relaciones maestro-detalles porque una entidad (la

maestro) está relacionado con muchas instancias de otra entidad que almacena los detalles de la
parte maestra. En esta sección, aprenderá cómo agregar relaciones uno a muchos y uno a uno.

Comencemos agregando la relación uno a muchos más fácil posible, que es entre

las entidades Cliente y EncabezadoDeOrden. En el Explorador de soluciones, haga doble clic en

Tabla OrderHeaders para que el Entity Designer muestre la presentación de la entidad

OrderHeader.

En la barra de herramientas del diseñador, haga clic en el botón Relación. En este punto, el
Agregar nuevo

Aparece el cuadro de diálogo Relación, como se muestra en la Figura 4.9.

 FIGURA 4.9 El cuadro de diálogo Agregar nueva relación le permite especificar relaciones
entre

entidades.

El diálogo está organizado en columnas y filas. Las columnas Desde y Hasta especifican la relación

dirección y simplificar la comprensión visual de los elementos involucrados en la relación.

La fila Nombre básicamente indica el nombre de las entidades involucradas en el

relación. Observe que el nombre de la tabla en la columna De no se puede cambiar, mientras que

Usted especifica el nombre de la segunda tabla involucrada dentro de la columna Para. La

multiplicidad

La fila permite especificar el tipo de relación, tanto en las columnas Desde como Hasta. En esto

caso, la multiplicidad One es para la tabla Cliente y la multiplicidad Many es para

Tabla OrderHeader (ver Figura 4.9 para una representación visual).

En la fila Al eliminar comportamiento, puede especificar lo que desea que suceda cuando

intenta eliminar una fila en una tabla.

Tiene dos opciones disponibles: Restringido y Eliminar en cascada. Cuando se establece en

Restringido, el

"Una" entidad no se puede eliminar hasta que haya una o más instancias de la entidad en el
Parte "muchos"; en esta situación particular, esto significa que una instancia del Cliente no puede
ser

eliminado si existe alguna instancia de OrderHeader. Cuando se establece en Cascade Delete,

cuando el "uno" es

eliminado todas las instancias relacionadas de la entidad en la parte "muchos" también se

eliminan. En esto

ejemplo particular, esto significa que si se elimina un Cliente, también lo son todos los
relacionados

Instancias de OrderHeader. Además, esto significa que debe tener mucho cuidado al usar el
comportamiento de eliminación en cascada. En el escenario actual, deje la configuración
predeterminada

sin alterar. La fila de propiedades de navegación le permite especificar el nombre de la entidad

referencia que LightSwitch usará para manejar la relación. Por lo general, quieres dejar esto

ajuste sin cambios. Ahora haga clic en Aceptar para finalizar la adición de la relación. En este
punto,

Visual Studio LightSwitch muestra la existencia de una relación entre entidades agregando

un pequeño cuadro que informa el nombre de la entidad relacionada, como se muestra en la

Figura 4.10.

En el Diseñador de tablas también observe que LightSwitch agrega una propiedad llamada
OrderHeaders,

de tipo OrderHeader Collection. Esta propiedad mantiene viva la relación y permite

cargar todos los pedidos relacionados con un solo cliente y la referencia entre

el cliente y la recolección de pedidos es manejada por la navegación OrderHeaders_Customer

propiedad definida en el cuadro de diálogo Agregar nueva relación. Como verá más adelante en
este capítulo,

Las pantallas con soporte de detalles maestros utilizan tanto la propiedad de navegación como la
recopilación de datos

para mostrar elementos relacionados con una entidad específica. Las propiedades de la colección
no se pueden modificar.

dentro del Entity Designer porque son básicamente solo una referencia. Sin embargo, si tomas

un vistazo a la definición de entidad OrderHeader, puede ver cómo LightSwitch agrega un nuevo

Propiedad del cliente de tipo Cliente, que representa al cliente único que el cliente actual
el orden está relacionado con. Ahora repita los mismos pasos para agregar una nueva relación uno
a muchos

entre la entidad del Cliente y la entidad de Factura. Al final, asegúrese de que una nueva entidad

La propiedad se agrega a la entidad Cliente, denominada Facturas de tipo Colección de facturas.

Detrás de escena, Visual Studio LightSwitch maneja la relación y carga datos para

entidades relacionadas.

FIGURA 4.10 La relación se muestra en el Entity Designer.

En el Diseñador de tablas también observe que LightSwitch agrega una propiedad llamada
OrderHeaders,

de tipo OrderHeader Collection. Esta propiedad mantiene viva la relación y permite

cargar todos los pedidos relacionados con un solo cliente y la referencia entre

el cliente y la recolección de pedidos es manejada por la navegación OrderHeaders_Customer

propiedad definida en el cuadro de diálogo Agregar nueva relación. Como verá más adelante en
este capítulo,
Las pantallas con soporte de detalles maestros utilizan tanto la propiedad de navegación como la
recopilación de datos

para mostrar elementos relacionados con una entidad específica. Las propiedades de la colección
no se pueden modificar.

dentro del Entity Designer porque son básicamente solo una referencia. Sin embargo, si tomas

un vistazo a la definición de entidad OrderHeader, puede ver cómo LightSwitch agrega un nuevo

Propiedad del cliente de tipo Cliente, que representa al cliente único que el cliente actual

el orden está relacionado con. Ahora repita los mismos pasos para agregar una nueva relación uno
a muchos

entre la entidad del Cliente y la entidad de Factura. Al final, asegúrese de que una nueva entidad

La propiedad se agrega a la entidad Cliente, denominada Facturas de tipo Colección de facturas.

Detrás de escena, Visual Studio LightSwitch maneja la relación y carga datos para

entidades relacionadas.

Ahora es el momento de agregar nuevas relaciones para otras entidades. Por ejemplo, abra el

Tabla OrderHeader dentro del Diseñador de tablas. Los pedidos son la forma en que otras
compañías compran nuestros

productos de la empresa, pero cada pedido de productos tiene detalles mapeados por OrderDetail

entidad. Por lo tanto, existe la necesidad de una relación entre el OrderHeader y el

OrderDetails entidades. Vuelva a hacer clic en Relación en la barra de herramientas del Diseñador
de tablas y

especifique la multiplicidad One de la tabla OrderHeader y la multiplicidad Many para

Tabla OrderDetail, como se muestra en la Figura 4.11.

FIGURA 4.11 Establecer otra relación uno a muchos

Cuando hace clic en Aceptar, se agrega la nueva relación y una propiedad de Producto de tipo

El producto se agrega a la entidad Detalles del pedido, como puede ver en el Diseñador de tablas.
Otro

tipo de relación también necesita ser agregado. Por lo general, para cada pedido, su empresa

Crear una factura; sin embargo, la factura no se crea realmente hasta que el pedido esté en
proceso.

Entonces, este es el caso para una relación cero o uno a uno, entre la Factura y el

Entidad de encabezado de pedido. Abra la entidad Factura y, en el Diseñador de tablas, haga clic
en el

Botón de relación Establezca la multiplicidad Cero o Uno para la entidad Factura y el Uno

multiplicidad para la entidad de Encabezado de pedido en el cuadro de diálogo Agregar nueva

relación, como se muestra en

Figura 4.12.

En este caso, se agrega una propiedad de Encabezado de pedido de tipo OrderHeader a la entidad
Factura.

Después de agregar todas las relaciones requeridas, puede ser útil tener una representación visual

de cómo se ve la definición de la base de datos. Esto es fácil en LightSwitch. Por ejemplo, haga
doble clic
la tabla OrderHeaders en el Explorador de soluciones. Verás cómo el Diseñador de tablas

muestra todas las relaciones disponibles, excepto la tabla Producto (ver Figura 4.13).

Edición de relaciones existentes

Si se da cuenta de que una relación definida anteriormente necesita ser cambiada, puede hacer
clic derecho

la relación dentro del Entity Designer y luego seleccione Editar relación. Haciendo

abre el cuadro de diálogo Editar relación, que funciona como el de Agregar nueva relación.

FIGURA 4.12 Establecer una relación cero o uno a uno.

FIGURA 4.13 El Diseñador de tablas señala todas las relaciones para la tabla seleccionada

Cambie la configuración de la relación y luego haga clic en Aceptar. Lo importante es que todas las
referencias

a los datos se actualizan para reflejar los cambios. Ahora que las relaciones de entidad definitorias
tienen

completado (y entendiendo cómo funcionan todas las plantillas de pantalla disponibles), es hora
de

agregue la interfaz de usuario.

Para desarrolladores experimentados de .NET: cómo LightSwitch maneja las relaciones

Microsoft SQL Server, el motor de base de datos utilizado por Visual Studio LightSwitch,
proporciona

Soporte para las relaciones de la manera clásica: una clave primaria para un campo único en la
primera tabla

coincide con una clave externa en la segunda tabla, haciendo referencia a un campo con el mismo
nombre en

Ambas mesas. El beneficio en LightSwitch es que el desarrollador no necesita saber sobre

la arquitectura subyacente, pero puede ser útil si uno planea crear WCF RIA personalizado
Servicios. Visual Studio LightSwitch funciona sobre bases de datos de SQL Server, pero modela
datos

basado en ADO.NET Entity Framework, por lo que la forma en que se modelan las relaciones

LightSwitch es bastante diferente. Básicamente, no necesita tener un campo con el mismo

nombre en dos tablas que desea relacionar. Esto se debe a que Entity Framework crea

una referencia de entidad, que en realidad es una propiedad .NET que maneja la relación entre

entidades. Bajo el capó, el tiempo de ejecución de Entity Framework genera claves primarias y

claves foráneas en la base de datos intrínseca para usted. Además, en lugar de tener un campo
con

el mismo nombre de uno en la primera tabla, en la segunda tabla genera un extraño específico

llave. En realidad, nunca ves todas estas cosas cuando trabajas con LightSwitch porque solo

especifique las relaciones que desea agregar entre entidades y el IDE hace el resto.

Una buena manera de investigar la estructura de una base de datos creada por LightSwitch, que
incluye

claves y relaciones, está utilizando SQL Server 2008 R2 Management Studio Express para generar

Un diagrama de base de datos. Para generar diagramas, la base de datos debe estar adjunta al

instancia del motor de SQL Server. Para determinar si una base de datos está conectada, inicie

SQL Server Management Studio y, cuando esté conectado, expanda el nodo Bases de datos. Si el

la base de datos no figura entre las bases de datos adjuntas, haga clic con el botón derecho en el
nodo Bases de datos y

seleccione Adjuntar. Especifique el nombre de ruta para la base de datos y espere hasta que se
adjunte al

Instancia de SQL Server. Después de adjuntar su base de datos, expanda su nombre y luego
expanda

el nodo Diagramas de base de datos. Se le debe indicar que la base de datos está actualmente

faltan algunos objetos requeridos por lo que se requiere su permiso para generarlos. Una vez

tales objetos se generan, simplemente haga clic derecho en el nodo Diagramas de base de datos y
haga clic en Nuevo

Diagrama de base de datos. En este punto, se le pide que seleccione las tablas que desea agregar a

El diagrama. Al trabajar con aplicaciones LightSwitch, puede excluir tablas que

están relacionados con la infraestructura de seguridad y administración de los usuarios (cuyo

nombre comienza con
aspnet_). Después de unos segundos, verá el nuevo diagrama dentro de Management Studio,
como

se muestra en la figura 4.14.

En este diagrama, puede ver cómo se definen realmente las tablas dentro del SQL Server

base de datos que LightSwitch generó para la aplicación. Note como hay algunas diferencias

entre el enfoque LightSwitch y la estructura pura de SQL Server. En particular,

preste atención a los siguientes puntos:

. Las relaciones se representan con líneas grises que unen dos tablas. La llave amarilla

El símbolo identifica la tabla que expone la clave primaria en la relación, y el

El símbolo de dos círculos representa la clave foránea.

. Cada tabla tiene una columna cuyo nombre se basa en el nombre de la propiedad de navegación

definido para cada relación dentro del cuadro de diálogo Agregar nueva relación de LightSwitch.
Como

un ejemplo, considere la columna Customer_OrderHeader en la tabla Encabezados de pedidos.

FIGURA 4.14 Diagrama de la base de datos de la aplicación de muestra.

. La columna descrita en el punto anterior es de tipo int. El motor de la base de datos.

comprueba si esta columna coincide con la columna Id de la tabla relacionada para comprender

si un elemento en la primera tabla está relacionado con la segunda tabla.

En general, lo que ve en LightSwitch es diferente de las siguientes maneras:

. Los elementos de la base de datos se asignan a objetos .NET. Una entidad es una clase .NET que
representa

Un solo artículo en una mesa. Las tablas están representadas por una colección de entidades, y

Las columnas se asignan a propiedades .NET.

. Las relaciones se manejan a través de propiedades de navegación, que no son más que .NET

clases Esto es diferente de hacer coincidir la relación entre columnas de tipo

int como sucede en su lugar en el nivel de SQL Server.

. El Diseñador de tablas no muestra columnas de tipo SQL int. Por ejemplo, si tu

considere la entidad OrderHeader, no muestra una propiedad Customer_OrderHeader.

En su lugar, muestra una propiedad de Cliente del tipo Cliente que representa el

instancia de la entidad del Cliente con la que está relacionado un pedido. Por otro lado, el

La entidad del cliente muestra la propiedad OrderHeaders, que es una colección de

OrderHeader entidades.

Estas diferencias existen porque Visual Studio LightSwitch usa la entidad ADO.NET

Mecanismos de modelado de marcos. Luego, Entity Framework se traduce en instrucciones SQL

que LightSwitch genera como código .NET.

Usar propiedades calculadas

A veces necesita realizar cálculos matemáticos y almacenar el resultado dentro de un campo. por

ejemplo, piense en las facturas. Usted tiene el monto de la factura y el monto de los impuestos, y
luego usted

tener el monto total, que es la suma del monto de la factura y los impuestos. En los negocios

aplicaciones, podría escribir algún código que realice el cálculo y almacene el resultado

dentro de la propiedad de una entidad. Por cierto, es importante solo para mostrar e imprimir
propósitos, no para el manejo de datos, por lo que sería bueno si pudieran calcularse sobre la
marcha

solo cuando realmente lo necesite y lo use.

Afortunadamente, LightSwitch ofrece una alternativa interesante, que se conoce como

propiedades calculadas Una propiedad calculada es una propiedad de entidad del tipo
especificado que

contiene el resultado de un cálculo y cuyo valor se calcula realmente solo cuando

necesario; esto significa que el valor de una propiedad calculada no se almacena dentro de la base
de datos;

Se calcula sobre la marcha, en la memoria.

Para comprender cómo funcionan las propiedades calculadas, considere la entidad de factura
diseñada

más temprano. Sería interesante agregar una propiedad calculada para calcular la factura

cantidad, sin la cantidad de impuestos, basada en el valor de los pedidos solicitados por el
seleccionado

cliente. Seleccione la tabla Facturas en el Explorador de soluciones y luego en el Diseñador de

tablas,

haga clic en el botón Propiedad calculada, que se encuentra en la barra de herramientas del
diseñador. Esta

action agrega una nueva propiedad a la entidad, denominada Property1, de tipo String. Puedes
visualmente

reconocer las propiedades calculadas porque LightSwitch agrega el símbolo de una pequeña
calculadora

cerca del nombre de la propiedad. Reemplace Property1 con Amount y cambie el tipo de datos

de la cadena al dinero. Ahora, presionando F4, abra la ventana Propiedades para el nuevo

propiedad agregada y ubique el grupo General en la parte superior de la ventana, como se

muestra en

Figura 4.15.
FIGURA 4.15 El grupo General para propiedades calculadas ofrece el acceso directo Método de
edición.

Inmediatamente nota dos cosas: la primera es que (obviamente) la propiedad Is

Computed

está chequeado. Lo segundo que observa es el acceso directo Método de edición. Esto
permite escribir

El código de procedimiento que realiza el cálculo y que asigna el resultado al

propiedad calculada (Los métodos en la terminología de .NET son funciones y

procedimientos).

Esto también significa que se encontrará con el editor de código LightSwitch por primera
vez.

De hecho, no hay otra forma de realizar cálculos matemáticos que escribir Visual Basic o

Código visual C #. Dicho esto, haga clic en el método abreviado Editar método. Al hacerlo,
se abre el editor de código.

se muestra en la figura 4.16.

 FIGURA 4.16 El editor de código muestra una función vacía.

Debido a que esta es la primera vez que ve y escribe código en LightSwitch, debe prestar atención

a algunas cosas:

. Las aplicaciones LightSwitch son aplicaciones 100% .NET organizadas en soluciones de Visual
Studio,

así que hay algunos puntos en común enumerados en los siguientes puntos con los típicos

tareas en Visual Studio.

. Cada entidad está representada por una clase .NET, en este caso, Factura.

. Cada clase se define dentro de un archivo de código. En LightSwitch, los archivos de código se
nombran exactamente

como en Visual Studio 2010 y tienen extensión .vb (si se trabaja con Visual Basic)

o extensión .cs (si trabaja con C #).

. Cada propiedad de la entidad está representada por una propiedad .NET, en este caso, Cantidad.

. Existen varios métodos que, detrás de escena, procesan datos cuando son particulares

los eventos ocurren Puede conectarse a la mayoría de estos métodos y escribir su propio código.

En LightSwitch, la mayoría de los métodos no devuelven valores; en cambio, trabajan en variables

aprobada por referencia. (La Figura 4.8 muestra la palabra clave ByRef). Aunque este enfoque
puede parecer extraño, se usa en toda la infraestructura de las aplicaciones LightSwitch

y tiene sentido especialmente cuando trabaja con colecciones de resultados de validación.

Además, la definición del método Amount_Compute debería permitirle comprender de inmediato

que esto funciona de manera similar a un controlador de eventos para un evento llamado
Compute expuesto

por la propiedad Amount, que se genera cuando se necesita cargar la propiedad Amount. también

observe que el método toma un parámetro de tipo Decimal, aunque la propiedad de entidad es

de tipo dinero. Esto se debe a que los tipos de datos comerciales son una característica en
LightSwitch pero no en

.NET Framework. Por lo tanto, el código administrado que escribe manualmente funciona con
datos .NET

tipos que LightSwitch luego asigna a los tipos comerciales apropiados cuando sea necesario (y

El dinero es una evolución de LightSwitch del tipo Decimal .NET). Como regla general de
LightSwitch

para las propiedades calculadas, devuelve el resultado de un cálculo asignando dicho resultado

a la variable pasada por referencia como parámetro del método. Con respecto a la corriente

ejemplo, esto se traduce al siguiente código:

Private Sub Amount_Compute (resultado ByRef como decimal)

‘Establezca el resultado en el valor de campo deseado

If Me.OrderHeader no es nada entonces

Dim totalExpense As Decimal = 0

Para cada det In Me.OrderHeader.OrderDetails

totalExpense + = (det.UnitPrice * det.Quantity) - det.Discount

próximo

resultado = totalExpense

Más

resultado = 0

Terminara si

End Sub

Entonces, el código primero verifica que la instancia actual de Factura tenga una instancia válida
de
OrderHeader adjunto (Me.OrderHeader IsNot Nothing). Si esto es cierto, el código itera

cada pedido detalla y devuelve la suma de todos los precios unitarios por producto, menos el
descuento.

La suma se devuelve a la persona que llama asignando su valor a la variable de resultado, que es

manejado por el marco de LightSwitch. Todo este trabajo evita la necesidad de ingresar
manualmente

El importe de la factura. Este código también demuestra cuán simple es acceder a entidades
relacionadas,

lo cual se logra simplemente llamando el nombre de la entidad relacionada en el actual

objeto (como Me.OrderHeader.OrderDetails). Ahora puede agregar una nueva propiedad

calculada

para calcular el importe total de la factura, sumando el importe y los impuestos. Repita los pasos.

descrito anteriormente para crear una propiedad calculada y renombrar la nueva TotalAmount,

de tipo dinero. Haga clic en el hipervínculo Método de edición en la ventana Propiedades para el
nuevo

propiedad creada y escriba el siguiente código:

Private Sub TotalAmount_Compute (resultado ByRef como decimal)

‘Establezca el resultado en el valor de campo deseado If Me.Taxes IsNot Nothing Nothing Entonces

resultado = Me.Amount + Me.Taxes.Value

Terminara si

End Sub

El código simplemente devuelve la suma de los valores de la propiedad Monto e impuestos

asignando el

resultado de la suma a la variable resultado. Por supuesto, puede realizar cálculos más complejos,

y no está limitado a datos del tipo Money / Decimal, pero puede hacerlo contra

diferentes tipos de datos, como Fecha u otros tipos. Solo como ejemplo, puede tener un

propiedad calculada de tipo String, que podría permitir la concatenación de cadenas.

Una vez que haya realizado las modificaciones, guarde los cambios y cierre la ventana del editor de
código.

Interfaces de usuario más complejas, orientadas a los negocios

En el Capítulo 3, creó una interfaz de usuario fácil para una fuente de datos de una sola tabla. En
esto
capítulo, está trabajando en una aplicación más compleja que tiene una estructura de datos
basada

en cuatro mesas con relaciones. Entonces, ahora necesita implementar pantallas que puedan
manejar

Múltiples tablas y relaciones. Por ejemplo, aparte de las pantallas de entrada de datos y búsqueda

pantallas, debe implementar una pantalla que muestre la lista de facturas por cliente,

incluidos los detalles de la factura. Básicamente, el proceso de agregar elementos a la interfaz de

usuario es

no es diferente de lo que viste en el Capítulo 3, pero Visual Studio LightSwitch ofrece

plantillas para construir pantallas de datos específicas para manejar relaciones maestro-detalles,

que es lo que aprendes en esta sección. Comienza creando pantallas de entrada de datos y

busca pantallas, y luego examinamos las plantillas de pantalla que LightSwitch ofrece

manejar fuentes de datos complejas y relaciones.

Crear pantallas de entrada de datos

Cada aplicación empresarial necesita pantallas de entrada de datos en las que los usuarios
ingresen datos nuevos. En el

ejemplo actual, la aplicación expone cuatro entidades que requieren cuatro pantallas de entrada
de datos.

En el Capítulo 3, aprendió a agregar pantallas de entrada de datos en LightSwitch, entonces, ¿qué

hace?

Aquí no hay nada nuevo. Comencemos agregando una nueva pantalla de entrada de datos para la
entidad Cliente.

Para lograr esto, siga estos pasos:

1. Haga clic en el botón Pantalla en el Diseñador de entidades.

2. En el cuadro de diálogo Agregar nueva pantalla, seleccione la plantilla Nueva pantalla de datos.

3. En el cuadro combinado Datos de pantalla, seleccione la entidad Cliente y luego haga clic en
Aceptar.

Repita los mismos pasos para las entidades de Pedido, Factura y Producto para completar los
datos.

pantalla de entrada Repita los mismos pasos para las entidades de Pedido, Factura y Producto
para completar los datos.

Generación de pantalla de entrada. Con respecto a la entidad de encabezado de pedido, asegúrese

de que el
La casilla de verificación Detalles del pedido del encabezado del pedido está marcada. Esto
permite agregar detalles del pedido cuando

crear un nuevo pedido en lugar de crear una pantalla de entrada de datos específica para
OrderDetails

entidad (que no tendría mucho sentido).

El Capítulo 3 describe en detalle, y con figuras, cómo generar pantallas de entrada de datos.

Regrese y revise si los pasos mencionados anteriormente no le son familiares. Adicionalmente,

cuando crea pantallas de entrada de datos para una entidad que mantiene una relación con

otra entidad, el cuadro de diálogo Agregar nueva pantalla le pregunta si desea agregar detalles del

entidad relacionada en la pantalla de entrada de datos. Porque en este capítulo, aprenderás a

manejar

relaciones master-details a través de otras plantillas de pantalla, por el bien de los ejemplos

que se muestra aquí, desmarque este tipo de casillas de verificación. Por supuesto, pruébalos por
tu cuenta

tiempo y mira lo que obtienes.

Crear pantallas de búsqueda

Generar pantallas de búsqueda es otra tarea que aprendió en el Capítulo 3 y que reutiliza en

La aplicación actual. Por supuesto, puede personalizar sus pantallas de búsqueda con consultas

y filtros, pero esto se describe más adelante en el libro. Por ahora, solo considere el escenario en

que desea implementar algunas pantallas de búsqueda básicas. A partir del cliente

entidad, realiza los siguientes pasos:

1. En el Explorador de soluciones, haga doble clic en la entidad Cliente y luego haga clic en la
Pantalla

botón en la barra de herramientas de Entity Designer.

2. En el cuadro de diálogo Agregar nueva pantalla, seleccione la plantilla Pantalla de búsqueda de

datos.

3. En el cuadro combinado Datos de pantalla, seleccione la colección de entidades Clientes y

luego haga clic en Aceptar.

Repita los mismos pasos para las entidades de Producto y Factura para completar el

generación de pantallas de búsqueda.

GESTIÓN DE LA PANTALLA FLUJO DE TRABAJO

Es una buena práctica pensar en el flujo de su aplicación, incluidas las pantallas. los

El equipo de LightSwitch tiene una publicación de blog que explica cómo un desarrollador debe
abordar esto

tema. Puede encontrarlo en http://bit.ly/lR6Uwq.

Ejecutando la aplicación e ingresando datos

Después de generar pantallas de entrada de datos y pantallas de búsqueda, ejecute la aplicación

presionando F5.

Asegúrese de que todo se vea como en la Figura 4.17, y luego ingrese algunos datos de muestra
por

Ejecutar Crear nuevo cliente, Crear nueva factura, Crear nuevo encabezado de pedidos y

Crear pantallas de nuevos productos.

Simplemente complete los formularios de datos con información ficticia: solo necesita algunos
datos para

trabajar con el resto del capítulo. Por ejemplo, la Figura 4.18 muestra un ejemplo para

Un nuevo producto.

Después de agregar algunos clientes, pedidos, facturas y productos, guarde los cambios.

y asegúrese de que todas las pantallas de búsqueda funcionen como se esperaba (es decir, como
se explicó en el Capítulo 3).
FIGURA 4.17 La aplicación en ejecución.
FIGURA 4.18 Introducción de un nuevo producto de muestra.

MÚLTIPLES USUARIOS QUE AHORRAN CAMBIOS: MANEJO DE LA CONCURRENCIA OPTIMISTA

Debido a su naturaleza, las aplicaciones LightSwitch pueden encajar perfectamente en un entorno

multiusuario,

en el que varios clientes se conectan a la misma base de datos simultáneamente. En esto

escenario, podría suceder que dos o más usuarios intenten guardar los cambios en el mismo

información (por ejemplo, a la misma instancia de una entidad). En este caso, hay un

conflicto que usted, como desarrollador, es responsable de resolver; concurrencia tan optimista

es cómo se capturan las violaciones. De forma predeterminada, LightSwitch usa concurrencia

optimista,

y cuando el servidor intercepta una violación de concurrencia, devuelve un error al cliente.

En particular, genera una pantalla para el usuario que explica lo que ha cambiado por

otro usuario.

El manejo de la concurrencia optimista requiere más experiencia tanto como desarrollador

y como usuario de LightSwitch que no sea escribir algunas líneas de código. Siendo una tarea más
para

expertos, la discusión se detalla en el Capítulo 12, “Disección de un LightSwitch

Solicitud."

En este punto, la aplicación tiene todo lo que necesita para crear y mostrar elementos, pero
mucho

aún se necesita más porque necesita manejar las relaciones maestro-detalles. En el

En las siguientes secciones, aprenderá sobre las plantillas de pantalla específicas que LightSwitch
ofrece

para este propósito.

PRUEBA DE NUEVAS PANTALLAS

En las siguientes secciones, agrega al proyecto todos los tipos de pantallas disponibles.

Aunque no siempre se le recordará que lo haga, para probar las funcionalidades de la pantalla

y trabajar con datos de muestra, debe ejecutar la aplicación. Al hacerlo, también puedes

compare las cifras de este capítulo con los resultados reales que obtiene de la aplicación

corriendo en tu máquina.

Edición de datos con cuadrículas editables

En el Capítulo 3, vio cómo se pueden usar las pantallas de búsqueda para editar datos dentro de
las celdas por

desmarque la casilla de verificación Usar controles de solo lectura en la ventana Propiedades. En

lugar de

realizando cambios en una pantalla de búsqueda, Visual Studio LightSwitch ofrece una alternativa
conveniente

para editar datos tabulares a través de la plantilla de pantalla Editable Grid. Básicamente, esta
pantalla

la plantilla funciona como una pantalla de búsqueda con la propiedad de controles de solo lectura
deshabilitada, por lo que

muestra una lista de elementos que se pueden editar dentro de las celdas. Además, esta plantilla
de pantalla agrega algunos

funcionalidad, como botones para agregar, editar, eliminar y actualizar datos. Comprender

cómo funciona, supongamos que desea tener una pantalla para editar una lista de la empresa

productos dentro de una cuadrícula de datos. En el Diseñador de entidades, haga clic en el botón
Pantalla. Cuando el Agregar

Aparece el cuadro de diálogo Nueva pantalla, seleccione la plantilla de Pantalla de cuadrícula

editable y luego desde

Cuadro combinado Datos de pantalla, seleccione Productos. La figura 4.19 muestra cómo se ve el
diálogo.

Cuando hace clic en Aceptar, dentro del Diseñador de pantalla puede ver cómo la parte crucial de
la

La nueva pantalla está hecha de un control de cuadrícula de datos y de una barra de comandos
que incluye algunos

botones: Agregar, Editar, Eliminar, que se explican por sí mismos. Aunque en este punto, la
aplicación

aún no se ha completado, la mejor manera de entender cómo funciona la pantalla es verla en

acción. Entonces, inicie la aplicación presionando F5, sin tener en cuenta todas las cosas que

debe mejorarse en la interfaz de usuario. En el panel Tareas a la izquierda de la ventana principal,

haga clic en el acceso directo de la cuadrícula de productos editables. Al hacerlo, se abrirá la

pantalla editable agregada.

antes, como se muestra en la Figura 4.20, que muestra un par de productos de muestra agregados
para

fines de demostración
FIGURA 4.19 Agregar una nueva plantilla de pantalla de tipo Pantalla de cuadrícula editable.

Como puede ver, la plantilla de cuadrícula editable proporciona un cuadro de búsqueda y Exportar
a Excel

botón, exactamente como las pantallas de búsqueda. Además, los datos se muestran en una
representación tabular

y se puede editar simplemente haciendo clic dentro de las celdas. En esta pantalla, también puede
ver

primera vez cómo la interfaz de usuario asigna listas de opciones. En la columna Categoría,
selecciona el

categoría del producto al expandir el cuadro combinado dentro de la celda y luego seleccionar el
deseado

categoría. Como regla general, Visual Studio LightSwitch presenta listas de opciones mediante el
combo

cajas en la interfaz de usuario. En cuanto a las imágenes, la plantilla de cuadrícula editable

aprovecha

el control del Editor de imágenes que utilizó en el Capítulo 3. La diferencia más importante

entre una cuadrícula editable y pantallas de búsqueda con la opción de controles de solo lectura
deshabilitada es
que en la primera plantilla, hay una serie de botones nuevos:

. Agregar, que le permite ingresar una nueva instancia de la entidad a través de un útil cuadro de
diálogo emergente

. Editar, que le permite editar una instancia existente de la entidad a través de un cuadro de
diálogo emergente

en lugar de edición en línea

. Eliminar, que le permite eliminar el elemento seleccionado (después de solicitar su confirmación

primero)

Cuando agrega o edita datos a través de los botones Agregar y Editar, la acción se realiza a través
de un

emergente, que se muestra en la Figura 4.21.

FIGURA 4.20 La nueva cuadrícula editable permite la edición en línea de cada elemento.
FIGURA 4.21 Puede agregar o editar datos mediante una simple ventana emergente

Hasta ahora, ha visto cómo agregar, editar y buscar elementos, pero aún no ha aprendido

cómo visualizar entidades que tienen relaciones con otros. Ofertas de Visual Studio LightSwitch

plantillas de pantalla específicas para mostrar relaciones de detalles maestros en la interfaz de

usuario, como

explicado en la siguiente sección.

Manejo de relaciones de detalles maestros con pantallas de detalles

En las aplicaciones comerciales, la interfaz de usuario a menudo necesita mostrar el resultado de

una sola vez

relaciones Cuando se habla en términos de interfaz de usuario, esto se conoce como detalles
maestros

relaciones Visual Studio LightSwitch ofrece una plantilla de pantalla dedicada a

mostrando relaciones de detalles maestros de una manera fácil. En realidad, cualquier plantilla de
pantalla permite

incluir niños, pero esta plantilla está optimizada para un diseño de Lista y Detalles. En

De hecho, dicha plantilla se denomina Lista y pantalla de detalles, y le permite mostrar sofisticados
relaciones En esta sección, verá esta plantilla desde dos perspectivas: primero,

agrega una pantalla para mostrar una lista de facturas y detalles para cada factura. Segundo,
agregas

una pantalla para mostrar una lista de clientes, además de los pedidos y los detalles de cada
cliente.

En el Explorador de soluciones, haga clic con el botón derecho en el nodo Pantallas y seleccione
Agregar pantalla. Cuando el Agregar

Aparece el cuadro de diálogo Nueva pantalla, seleccione la plantilla Pantalla de lista y detalles, y
como datos

fuente, seleccione la colección Facturas, asegurándose de que la casilla Detalles de factura esté

comprobado; luego haga clic en Aceptar. En este punto, el Diseñador de pantalla muestra un
diseño más complejo,

como se muestra en la figura 4.22.

Las siguientes son algunas consideraciones importantes relacionadas con la nueva generación de
pantallas:

. La pantalla se divide en dos columnas y el nivel raíz incluye la pantalla habitual.

Control de barra de comando.

. La primera columna (Columna de lista) muestra un resumen de los artículos disponibles (facturas,
en este ejemplo) a través de un control de Lista.

. La segunda columna muestra los detalles del elemento seleccionado en la lista mediante
controles

con el que ya estás familiarizado. Puede localizarlo a través de su nombre, que es

Detalles de la factura. Vale la pena mencionar que el trabajo de enlace de datos para vincular el

LightSwitch realiza la factura seleccionada para sus detalles. Tambien usted puede

acceder a entidades relacionadas (Cliente y OrderHeader en el ejemplo actual) a través de

controles de tipo Auto Complete Box y Modal Window Picker que son responsables

para seleccionar (o mostrar a) la entidad principal.

CONTROLES DE PROPIEDADES COMPUTARAS

La figura 4.22 muestra que la propiedad calculada TotalAmount (que es de tipo Money) es

se muestra a través de un visor de dinero, porque es un objeto de solo lectura. Como regla
general,

LightSwitch muestra propiedades calculadas con controles de solo lectura que son apropiados

para un tipo de datos particular, como Image Viewer para imágenes, Email Address Viewer para

direcciones de correo electrónico y Money Viewer por dinero. Cuando la propiedad calculada es
una fecha

o texto, LightSwitch utiliza, respectivamente, el Visor de fecha y los controles de Etiqueta.

Si anteriormente ingresó algunos clientes, pedidos, productos y varias facturas, el

La pantalla Detalles de la lista de facturas debe ser similar a la Figura 4.23.

FIGURA 4.23 La primera pantalla Lista y Detalles en acción.

ARREGLO DE ARTÍCULOS

Use el cuadro desplegable Ordenar por de la lista para cambiar la propiedad de las entidades

organizado por. Esta es una característica específica del usuario disponible en el nivel de pantalla,
pero si usted como

el desarrollador quiere forzar un orden de clasificación, debe implementar una consulta.

Básicamente, una pantalla secundaria de búsqueda en el lado izquierdo de la pantalla muestra la

lista de todos los disponibles

facturas. Esta parte de la interfaz de usuario permite exportar la lista a Excel; buscando y

filtrando la lista; y agregar, editar o eliminar elementos de la lista. Agregar y editar

los nuevos elementos se realizan a través de una ventana emergente que es similar a la que se
muestra en la Figura 4.22

pero eso obviamente proporciona campos de entrada de datos específicos para la entidad actual
(Factura). Después

Si selecciona un elemento de la lista, los detalles de dicho elemento se muestran en el lado

derecho del
pantalla. Aquí también puede editar las propiedades para el elemento seleccionado y, una vez
hecho, guardar su

cambios a la base de datos. Al igual que con las facturas, es posible que desee tener una vista de
Lista / Detalles para

su lista de clientes, que es un escenario común en las aplicaciones comerciales. Si lo haces, repite

Los pasos descritos al principio de esta sección para crear una nueva pantalla de Lista y Detalles

para la entidad Cliente, asegurándose de que solo la casilla de verificación Detalles del cliente esté
marcada

el cuadro de diálogo Agregar nueva pantalla. Como puede ver en la Figura 4.24, la nueva pantalla
está organizada

de manera habitual, en dos columnas, donde la primera columna almacena la lista de clientes y el

La segunda columna muestra los detalles del cliente seleccionado en la lista. De nuevo, puedes ver
cómo

la pantalla usa controles de edición (como TextBox, Editor de direcciones de correo electrónico y
Número de teléfono

Editor), lo que significa que puede editar los detalles del cliente directamente desde el formulario
de detalles.

FIGURA 4.24 El Diseñador de pantalla muestra la estructura de la nueva pantalla Detalles de la lista
de clientes.

Al ejecutar la aplicación, la nueva pantalla simplemente muestra la lista de clientes en

a la izquierda y detalles para cada cliente a la derecha, como se muestra en la Figura 4.25. Usted
puede

nuevamente agregue, edite o elimine clientes de la lista o edite detalles para el cliente actual.

FIGURA 4.25 La pantalla Detalles de la lista de clientes en acción.

desea que la aplicación muestre la lista de pedidos y, para cada pedido, los detalles del pedido y

Productos pedidos. LightSwitch lo hace fácil. En el Explorador de soluciones, haga clic con el botón
derecho en Pantallas

y seleccione Agregar nueva pantalla. A continuación, en el cuadro de diálogo Agregar nueva

pantalla, haga lo siguiente:

1. Seleccione la plantilla de Pantalla de lista y detalles.

2. Seleccione la colección de entidades OrderHeaders como la fuente de datos.

3. Asegúrese de que tanto los detalles de OrderHeader como los detalles de OrderHeader
OrderDetails

las casillas están marcadas y luego haga clic en Aceptar.

La figura 4.26 muestra cómo la nueva pantalla parece bastante compleja en el Diseñador de
pantalla.

En un nivel superior, la nueva pantalla se divide en dos columnas y consta de lo siguiente

componentes:

. La barra de comandos de la pantalla tipo cinta.

. Un contenedor de diseño de columnas, que está formado por dos columnas.

. La columna izquierda, que contiene la lista de pedidos y puede mostrar una ventana emergente

ventana para agregar / editar pedidos directamente desde la lista haciendo clic en el botón con

Un símbolo de lápiz.

. La columna de la derecha, que muestra los detalles del pedido en la parte superior (incluida la
información

desde la factura asociada y un control de Auto Complete Box, permitiendo la selección

de la entidad del Cliente relacionada) y una Cuadrícula de datos en la parte inferior que contiene

la lista de detalles del pedido relacionados con el pedido actual. Cada fila de cuadrícula de datos
está hecha de

controles que permiten editar la lista de productos que pertenecen al pedido.

FIGURA 4.26 Composición de la pantalla Detalle de lista de encabezado de pedido.

Cuando la aplicación se está ejecutando, una pantalla tan nueva le permite mostrar la lista de

pedidos y también editar detalles de pedidos y mostrar / editar la lista de productos que están
asociados

con el pedido actual La Figura 4.27 muestra cómo se ve esta pantalla en acción.

Este tipo de pantalla ofrece al usuario una vista completa de los elementos y sus detalles y

hace que la experiencia del usuario sea realmente sencilla. Puede buscar, filtrar, agregar y editar
datos

y detalles relacionados dentro de una pantalla. También puede exportar a Microsoft Excel tanto el

Recogida de pedidos y recogida de productos.

EXPORTANDO A EXCEL
Tenga en cuenta que cuando exporta listas desde la misma pantalla a Excel, lo que realmente
obtiene

son dos instancias de Excel con dos libros de trabajo diferentes. Esta información puede ser útil.

si esperaba un libro de trabajo con dos hojas.

FIGURA 4.27 La nueva pantalla Detalles de la lista de encabezados de pedidos le permite trabajar
tanto con el pedido

y productos.

Vale la pena mencionar que con respecto a la colección de entidades OrderDetail, puede

seleccione un producto al ingresar un nuevo detalle del pedido simplemente expandiendo el

autocompletado

cuadro disponible en el campo Producto, que muestra la lista de productos disponibles, como se
muestra en

Figura 4.28.
FIGURA 4.28 La selección de una lista de productos es fácil.

Esta es una manera conveniente de seleccionar productos con un simple clic y sin ningún otro
esfuerzo para

usuario, y es importante enfatizar que esto es ofrecido por LightSwitch sin usuarios

tener que escribir una sola línea de código. También puede alcanzar otro nivel de complejidad.
Tomar

un vistazo a la figura 4.27. Puede ver cómo la pantalla muestra la lista de detalles de pedidos que
están

asociado con un orden particular. Pero, ¿cómo mostrarías dos listas de entidades que son

asociado con un maestro? Por ejemplo, suponga que desea mostrar la lista de

clientes, y luego desea ver los detalles del cliente más pedidos y facturas para cada

cliente. La plantilla Pantalla de lista y detalles le permite mostrar más de una asociada

Colección de entidades gracias a paneles.

En el Explorador de soluciones, haga clic con el botón derecho en Pantallas y luego en Agregar
nueva pantalla. En el Agregar nuevo

Diálogo de pantalla, seleccione la misma plantilla. En el cuadro combinado Datos de pantalla,

seleccione el

Recolección de clientes, y luego asegurarse de que tanto Customer OrderHeaders como Customer
Las casillas de verificación de facturas están marcadas. Finalmente, reemplace Nombre de pantalla
con

CustomerOrdersListDetail y haga clic en Aceptar. Para su conveniencia, la Figura 4.29 resume

estos pasos

FIGURA 4.29 Generando una pantalla compleja de Lista y Detalles

Ahora eche un vistazo al Diseñador de pantalla. La nueva definición de pantalla es similar a la

anterior.

definición de la pantalla, pero difiere en que en la parte inferior, dos colecciones de elementos
relacionados

están disponibles y organizados dentro de un diseño de pestañas. La figura 4.30 muestra lo que el
diseñador

se parece a la pantalla recién agregada.

FIGURE 4.30 Via the Tabs panel at the bottom, multiple related collections are displayed.

El panel Pestañas se denomina Pestañas de colección secundaria. Este nombre implica que dicho
panel

incluye una colección de colecciones relacionadas, como puedes entender al expandir las pestañas

La definición del panel, que muestra dos controles de Cuadrícula de datos, uno denominado
Pedidos y otro denominado

Facturas (cuyo papel en la pantalla se explica por sí mismo). Cuando ejecutas esta pantalla,
obtienes

la lista de clientes en el lado izquierdo, y en el lado derecho, verá los detalles del cliente en

arriba y las colecciones de pedidos y facturas en la parte inferior, organizadas en pestañas. Sólo

cambiar entre pestañas para ver los elementos deseados. La figura 4.31 muestra cómo se ve la
pantalla.
FIGURA 4.31 Una pantalla compleja de Lista y Detalles que muestra múltiples colecciones de
detalles.

En resumen, esto es lo que puede hacer dentro de la pantalla:

. Mostrar, buscar, filtrar, agregar y editar elementos de tipo Cliente

. Mostrar detalles para artículos de tipo Cliente

. Mostrar, buscar, filtrar, agregar y editar elementos de tipo Orden asociados con el

Instancia actual del cliente

. Mostrar, buscar, filtrar, agregar y editar elementos de tipo Factura asociados con

la instancia actual del Cliente

. Exportar listas a Microsoft Excel (disponible solo para clientes de escritorio)

Las pantallas de Lista y Detalles proporcionan una forma flexible y poderosa de mostrar y editar
múltiples

fuentes de datos procedentes de relaciones maestro-detalles. Puede dar a los usuarios un lugar
donde

pueden manipular múltiples datos, proporcionándoles una vista completa de los elementos que
son

trabajando en. Si no desea ofrecer este tipo de representación compleja, tenga en cuenta

dos consideraciones importantes:

. LightSwitch ofrece la forma más rápida y fácil de crear aplicaciones comerciales.

Por lo tanto, debe sacrificar, en algunos casos, un sistema basado en Windows o basado en
páginas

interfaz de usuario, como lo haría en aplicaciones cliente de Windows o en Silverlight

aplicaciones. Sin embargo, esto no significa sacrificar el poder y el procesamiento de datos

funcionalidad

. Afortunadamente, puede personalizar la interfaz de usuario de varias maneras. Mientras

aprendes

en las siguientes secciones, puede usar pantallas de detalles cuando sea necesario, y puede
reorganizar

los paneles dentro de una interfaz de usuario.

Crear e invocar listas de detalles

Las pantallas Lista y Detalles ofrecen la forma más rápida de mostrar los detalles de la entidad a
partir de una lista de elementos,

Pero este no es el único camino. Por ejemplo, es posible que desee crear una pantalla que muestre

solo la lista de entidades y luego recoge los detalles solo cuando el usuario hace clic en un botón.
Esta

podría ser útil para proporcionar una visualización de datos simplificada y más limpia. Estudio
visual

LightSwitch ofrece una plantilla de pantalla llamada Pantalla de detalles que agrupa los detalles de
la entidad pero

eso no es parte de la interfaz de usuario y, por lo tanto, no está disponible en la pantalla

Control de navegación. En cambio, este tipo de pantalla está disponible bajo demanda (en otros

palabras, cuando una entidad necesita ser editada). Por ejemplo, considere SearchCustomer

pantalla construida al comienzo de este capítulo. Sabes que muestra la lista de

clientes y proporciona un botón Editar (el que tiene el símbolo del lápiz) para rápidamente

Acceso a los detalles del cliente. De forma predeterminada, esta acción muestra una ventana
emergente donde puede proporcionar

Detalles del cliente. Por ejemplo, suponga que no desea mostrar una ventana emergente y que

en su lugar, desea mostrar los detalles del cliente en una nueva pestaña. Puedes anular este
comportamiento

de las siguientes maneras:

. Vuelva a escribir el código predeterminado para el botón Editar.

. Agregue un nuevo botón para realizar la acción personalizada.

Mostrar una de las propiedades del cliente como un enlace, utilizando Mostrar como enlace

característica que aprendiste anteriormente. Esto ya está habilitado en las pantallas y es el

la manera más fácil.

En esta sección, aprenderá las dos primeras formas (la tercera no implica personalizaciones

en código), pero la explicación comienza con la adición de un nuevo botón. Esto se hace para
familiarizarse

usted con algunas funciones en LightSwitch que se explican en detalle en el Capítulo 7,

"Personalización de aplicaciones con botones, automatización COM y extensiones", y porque

para anular el código predeterminado, debe aprender conceptos sobre la ejecución del botón

métodos Entonces, el primer paso es agregar una nueva pantalla de detalles al proyecto. Para
hacerlo, haga clic derecho

Pantallas en el Explorador de soluciones y seleccione Agregar nueva pantalla en el menú

emergente.

Cuando aparezca el cuadro de diálogo Agregar nueva pantalla, seleccione la plantilla Pantalla de
detalles, asegurándose

ese Cliente es la fuente de datos actual y que tanto la Pantalla de detalles predeterminada es

las casillas de verificación Detalles del cliente están marcadas (consulte la Figura 4.32).
FIGURA 4.32 Creación de una nueva pantalla de detalles para la entidad Cliente.

PANTALLA DE DETALLES POR DEFECTO

Al marcar la casilla de verificación Es la pantalla de detalles predeterminada, le indica a LightSwitch

que use

nueva pantalla como la pantalla de detalles predeterminada en cada pantalla que usa una vista de
detalles para

la entidad seleccionada Es importante saber esto porque en realidad no haces nada

cambia a la nueva pantalla. La pantalla de detalles normalmente se abre al hacer clic en la

propiedad

enlaces para navegar por los detalles de la entidad, pero el objetivo aquí es explicar un
comportamiento personalizado.

Ahora abra el Diseñador de pantalla para la pantalla Buscar clientes para que pueda agregar un

botón que iniciará la pantalla de detalles generada previamente.

Para lograr esto, siga estos pasos:

1. Expanda el elemento Barra de comandos, que está anidado en el control Cuadrícula de datos.

2. Haga clic en Agregar y luego en Nuevo botón en la lista desplegable. Se le pide que

especificar un método que realiza una acción cuando se hace clic en el nuevo botón (ver Figura

4.33). Entonces, en el cuadro de diálogo Agregar botón, seleccione Nuevo método y luego
especifique

ShowDetails como el nombre del método. Luego haga clic en Aceptar.

FIGURA 4.33 Especificar el nombre del método para el nuevo botón.

Básicamente, agregó un nuevo botón que, cuando se hace clic, inicia la pantalla de detalles para

cliente actual. El problema es que el botón aún no sabe cómo iniciar el

pantalla, por lo que debe escribir algo de código. Haga clic derecho en el botón y seleccione Editar
Ejecutar

Código. LightSwitch muestra el editor de código, donde debe manejar la ejecución

método para que pueda implementar la acción que debe ejecutarse cuando se presiona el botón

hizo clic El modelo de objetos LightSwitch ofrece una clase llamada Aplicación que, entre otras

características, expone procedimientos para iniciar pantallas rápidamente. El nombre de cada uno
de estos

los procedimientos comienzan con Mostrar, seguidos del nombre de la pantalla. Porque quieres

invoque la pantalla CustomerDetail, llame al método ShowCustomerDetail que recibe

como parámetro el ID del cliente actual. Aquí está el código:

Private Sub ShowDetails_Execute ()

‘Escriba su código aquí.

Yo. Aplicación.

ShowCustomerDetail (Me.Clientes.

SelectedItem.Id)

End Sub

Cada colección de entidades expone la propiedad SelectedItem, que representa la propiedad

actual

elemento seleccionado en la lista y que es del mismo tipo de la entidad. Por lo tanto, la

La colección Clientes tiene una propiedad SelectedItem, del tipo Cliente. Porque el objetivo

la pantalla acepta solo el número de identidad de la entidad, no la instancia, el código pasa el ID

del cliente a la pantalla CustomerDetail. Para hacer las cosas lo más completas posible, hay

También otro evento para manejar, que es CanExecute. Como su nombre lo indica, este evento
notifica

la interfaz de usuario si el botón se puede ejecutar y requiere que proporcione un

Condición booleana que permite ejecutar la acción del botón cuando se evalúa la condición

como cierto En este caso, una buena idea es permitir la ejecución del botón solo cuando un

el cliente está realmente seleccionado en la lista (técnicamente hablando, cuando el cliente

seleccionado es
no nulo). Puede volver al Diseñador de pantalla, hacer clic con el botón derecho en el botón y
seleccionar

Edite el código CanExecute, o puede escribir el siguiente código directamente en el editor de

código:

Private Sub ShowDetails_CanExecute (resultado ByRef como booleano)

‘Escriba su código aquí.

resultado = (Me.Customers.SelectedItem IsNot Nothing)

End Sub

La expresión Me.CustomerCollection.SelectedItem IsNot Nothing se evalúa como True si

se selecciona un cliente en la lista y el resultado se asigna a la variable de resultado.

EJECUTAR, CANEXECUTAR Y EL MODELO MODELO DE VISTA Y MODELO DE VISTA

Detrás de escena, LightSwitch genera aplicaciones comerciales que dependen del Modelo.

Patrón View-ViewModel (MVVM). Esto se discute más adelante en el Capítulo 12, “Disección de un

Aplicación LightSwitch ". Si tiene experiencia previa con el patrón MVVM en

Silverlight o Windows Presentation Foundation (WPF), encontrará los controles "

Los métodos Execute y CanExecute son familiares. Está más allá del alcance de este libro discutir

el patrón MVVM, pero puede pensar en los dos métodos de esta manera: CanExecute

establece si un comando asociado con un control puede ejecutarse o no, manejando

un valor booleano que devuelve True si se puede ejecutar el comando. Ejecutar representa

en cambio, la acción que debe ejecutarse cuando el comando asociado con

Se invoca un control.

Si ahora ejecuta la aplicación y muestra la pantalla SearchCustomer, observará cómo

El nuevo botón Detalles está disponible y el nombre de la empresa ya no se muestra como

hipervínculo, como se muestra en la Figura 4.34. Simplemente seleccione un cliente en la lista y

haga clic en Detalles

botón. Cuando lo haga, la pantalla de detalles que creó anteriormente mostrará el

detalles en una pestaña separada.

La segunda forma de cambiar cómo se inicia una pantalla de detalles es anular el código de

botón de edición incorporado. Cierre la aplicación si aún se está ejecutando y luego en Visual
Studio
LightSwitch, abra el Diseñador de pantalla para la pantalla Buscar cliente. Haga clic derecho en
Editar

botón y seleccione Código de anulación. En este punto, se abre el editor de código, mostrando

definiciones vacías para dos métodos: gridEditSelected_Execute y

gridEditSelected_CanExecute, donde gridEditSelected es el nombre de la edición incorporada

botón. El siguiente código muestra cómo mostrar la pantalla Detalles del cliente en un

pestaña diferente, además de mostrar un cuadro de mensaje antes de que se inicie la pantalla:

Private Sub gridEditSelected_Execute ()

‘Escriba su código aquí.

ShowMessageBox ("Está a punto de editar el cliente" +

Me.Customers.SelectedItem.CompanyName + "en una pestaña diferente")

Me.Application.ShowCustomerDetail (Me.Customers.SelectedItem.Id)

End Sub

Private Sub gridEditSelected_CanExecute (ByRef _

resultado como booleano)

resultado = (Me.Customers.SelectedItem IsNot Nothing)

EndSub

FIGURA 4.34 La pantalla de SearchCustomer ahora muestra un botón personalizado.

 En este punto, puede volver a ejecutar la aplicación y ver cómo está la pantalla de detalles

se inicia mediante el código personalizado cuando se hace clic en el botón Editar.

CÓDIGO DE BOTONES ANULADOS

Por supuesto, puede anular el código de todos los botones integrados, no solo Editar,
aunque

Esto no suele ser necesario.

Las pantallas de detalles representan solo una de las personalizaciones de las aplicaciones
que ofrece LightSwitch.

Edición del control de navegación de pantalla

Hasta ahora, ha agregado muchas pantallas a la aplicación de muestra actual. Todos ellos

aparecer en el control de navegación de pantalla, que es la parte de la interfaz de usuario

que

permite a los usuarios navegar entre pantallas y que aparece en el lado izquierdo de la
pantalla principal

ventana de la aplicación (o página, si está ejecutando la aplicación como un cliente de

navegador). Eso Consiste en un menú principal y un panel de tareas predeterminado que enumera
todas las pantallas disponibles. Esta

El comportamiento predeterminado no siempre es el más apropiado y, en algunos casos,

puede ser confuso.

De hecho, el mejor enfoque es organizar pantallas en múltiples paneles de tareas; por

ejemplo,

es posible que desee agrupar pantallas del mismo tipo en un grupo, o simplemente
organizar la pantalla

navegación según el tipo de datos con el que desea trabajar. Por ejemplo, podrías

desea agrupar todas las pantallas relacionadas con clientes en un grupo, todas las
pantallas relacionadas con pedidos en

otro grupo, y así sucesivamente. Visual Studio LightSwitch le permite organizar la pantalla

Control de navegación agregando grupos de tareas y asociando pantallas con los nuevos
grupos.

Establece las propiedades de navegación de la pantalla a través de la pestaña Navegación

de pantalla en la aplicación

Designer (que se puede iniciar haciendo doble clic en Propiedades en el Explorador de

soluciones).
 Cuando se abre, la pantalla muestra los paneles de tareas disponibles para la aplicación
actual, que

de manera predeterminada, son dos: tareas y administración. Tareas siempre está

disponible, pero Administración

solo está visible cuando habilita la autenticación en su aplicación (mostrando dos

pantallas,

Roles y Usuarios). Es por eso que dicho grupo se discute en el Capítulo 9, "Implementación

Autenticación y autorización "y Capítulo 10," Implementación de aplicaciones LightSwitch

".

Si enfoca su atención en el grupo Tareas, puede ver cómo agrupa todas las pantallas

ha definido hasta ahora, como se muestra en la Figura 4.35.

FIGURA 4.35 El control de navegación de pantalla en su estado original.

El grupo de tareas es un contenedor de uso general que facilita la navegación entre pantallas.

En una aplicación empresarial del mundo real, los usuarios deberían obtener un control de
navegación más organizado.

El control de navegación de pantalla le permite agregar, renombrar y eliminar grupos, además de

le permite colocar pantallas en el grupo apropiado y decidir qué pantalla será la

pantalla de inicio. Suponga que desea reorganizar la navegación de la pantalla agrupando pantallas

según su destino, como pantallas para clientes, pedidos, productos y

facturas. Para lograr esto, siga estos pasos:

1. En el menú de navegación, haga clic con el botón derecho en Tareas y luego haga clic en
Cambiar nombre en la ventana emergente

menú. En este punto, el nombre del panel se vuelve editable, como puede ver en

Figura 4.36. Reemplazar tareas con clientes.

FIGURA 4.36 Cambiar el nombre del grupo predeterminado

2. Usando la Figura 4.35 como referencia, haga clic en el botón Agregar grupo, disponible en el

parte inferior del árbol Luego puede agregar un nuevo grupo. Puede asignar inmediatamente un

nombre del grupo, así que llámalo Ordenar encabezados. Como puede ver en la Figura 4.37, el

El diseñador ofrece un botón anidado llamado Incluir pantalla.

FIGURA 4.37 Agregar un nuevo grupo.

3. Haga clic en el botón Incluir pantalla y seleccione la pantalla Crear nuevo encabezado de pedido
para

que se agrega al nuevo grupo. Tenga en cuenta que agregar una pantalla a un grupo no
eliminar la pantalla en sí de otro grupo. En este caso particular, puedes ver en

Figura 4.38 que la pantalla Crear nuevo encabezado de pedido está disponible tanto en

Clientes y grupos de encabezados de pedidos. Esto tiene sentido porque es posible que desee

organice la navegación de pantalla agrupando pantallas de acuerdo con diferentes criterios. Si

desea agrupar pantallas de acuerdo con un solo criterio, simplemente haga clic derecho en la
pantalla

en el grupo deseado y luego haga clic en Eliminar en el menú emergente (o simplemente presione
el

Eliminar clave).

En este ejemplo en particular, haga clic con el botón derecho en la pantalla Crear nuevo
encabezado de pedido en

Grupo de clientes y luego haga clic en Eliminar en el menú emergente.

FIGURA 4.38 La pantalla Crear nuevo encabezado de pedido es realmente visible en dos grupos.

4. Agregue al grupo Encabezados de pedidos todas las pantallas relacionadas con la entidad
OrderHeader,

como Detalles de la lista de encabezados de pedidos y Detalles de la lista de pedidos de clientes.

Excepto por el

Por último, elimine todos los demás del grupo Clientes.

5. Repita los pasos anteriores para crear el grupo Facturas y productos y agregar

pantallas a los grupos apropiados. La figura 4.39 muestra qué es el menú de navegación

la estructura de su máquina debería verse así.

 FIGURA 4.39 La navegación de la pantalla se reorganizó.

MOVER ARTÍCULOS ARRIBA Y ABAJO

Puede usar las flechas hacia arriba y hacia abajo ubicadas a la derecha del diseñador para
cambiar

La posición de ambos grupos y pantallas en grupos. Esto afecta el orden en que

grupos y elementos se muestran en la interfaz de usuario.

AJUSTE DE LA PANTALLA DE INICIO

De forma predeterminada, Visual Studio LightSwitch establece la primera pantalla que

agrega a su proyecto como

la pantalla de inicio Puede cambiar este comportamiento seleccionando la pantalla que

desea

ser la pantalla de inicio en la estructura del menú de navegación y luego hacer clic en el
botón Establecer
 en la parte inferior del diseñador (ver Figura 4.35). Puedes restaurar el estado
predeterminado

haciendo clic en el botón Borrar.

Si ahora ejecuta la aplicación, puede ver cómo se organiza mejor el menú principal:

La navegación de pantalla está organizada en múltiples grupos, cada uno dirigido a un

grupo específico de pantallas

relacionado con una entidad, como se muestra en la Figura 4.40.

FIGURA 4.40 La reorganización de los resultados del control de Navegación de

pantalla en un usuario de mejor impacto

interfaz.

Cuando termine de reorganizar la navegación de la pantalla, el proceso de desarrollo de la

aplicación

Está casi completo. El último paso es personalizar las pantallas examinando los contenedores de
control.
Personalizando la apariencia de las pantallas

Le han dicho que los controles dentro de una pantalla están organizados dentro de otros controles
que actúan

como contenedores que organizan controles en la interfaz de usuario, pero hasta ahora solo has
visto

El comportamiento predeterminado. En esta sección, aprenderá sobre los controles de diseño

disponibles y cómo

Puedes personalizar el diseño de la pantalla. La tabla 4.6 resume los controles de diseño
disponibles.

TABLA 4.6 Controles disponibles

Descripción de los controles

Modal

Ventana

Permite agregar, editar o mostrar dentro de una ventana modal externa, que se ve

como una ventana emergente

Diseño de filas Organiza los controles y los datos en dos filas.

Columnas

Diseño

Organiza controles y datos en dos columnas.

Diseño de pestañas Organiza controles y datos en pestañas.

Imagen y

Texto

Organiza los datos en dos columnas: la columna izquierda muestra una imagen; el del

derecha muestra un título, un subtítulo y una descripción. Específico para trabajar con imágenes.

Texto y

Imagen

Al igual que el control de imagen y texto, pero las columnas se intercambian.

Diseño de tabla Divide la superficie de la interfaz de usuario en celdas

Para comprender cómo funcionan los grupos, consideremos la pantalla CustomerOrdersListDetail,

que es la pantalla más compleja en la interfaz de usuario. En el Diseñador de pantalla, haga clic en
el

desplegable en el elemento raíz, denominado Diseño de columnas, Detalle de la lista de pedidos

del cliente.

Aquí el diseño de columnas es el contenedor principal que contiene subgrupos y controles.

Reemplazar

el contenedor Diseño de columnas con Diseño de filas y vuelva a ejecutar la aplicación. Como tu

puede ver en la Figura 4.41, el diseño de la pantalla ha cambiado, y ahora la colección Clientes

y los detalles de la lista están organizados en dos filas.

Hay disponibles otras personalizaciones interesantes, y LightSwitch también ofrece otra simple

forma de personalizar el diseño de la pantalla en tiempo real. Esta característica se llama Modo de
personalización

y se discute en la siguiente subsección.

Modo de personalización

Romper la ejecución de la aplicación y volver al Diseñador de pantalla cada vez que

Desear hacer un cambio en la apariencia de la interfaz de usuario puede ser molesto.

Afortunadamente, LightSwitch ofrece una forma más conveniente de editar la apariencia del

interfaz de usuario en tiempo real, lo que significa que esto se puede hacer mientras la aplicación
aún está

corriendo y sin la necesidad de interrumpir la ejecución, y realizando todo lo mencionado

anteriormente

pasos. Esta característica se conoce como Modo de personalización y se puede habilitar fácilmente

haciendo clic en el botón Pantalla de diseño que puede ver en la esquina superior derecha de la

elemento raíz en la interfaz de usuario (ver Figura 4.42).

FIGURA 4.41 Cambiar el diseño de la pantalla utilizando un contenedor de Diseño de filas.

FIGURA 4.42 El botón Pantalla de diseño

Para comprender cómo funciona, considere la pantalla Detalles de la lista de pedidos del cliente.
Suponer

desea reorganizar la posición de los contenedores y controles de una manera diferente, para ver

(sin interrumpir la ejecución de la aplicación) cómo se vería la interfaz de usuario.

Haga clic en la pantalla de diseño; en este punto, la pantalla principal de la aplicación cambia a

Modo de personalización, que muestra la lista de contenedores y controles que componen

actualmente

la interfaz de usuario (en el lado izquierdo de la pantalla) y una vista previa de lo que la interfaz de
usuario

se parece a (para reflejar los cambios en tiempo real). Tenga en cuenta que esta vista previa es
interactiva, por lo que

puedes probarlo usando los controles como lo harías en la pantalla normal. Adicionalmente,
puede cambiar las propiedades de control utilizando el cuadro Propiedades en la parte inferior de
la pantalla.

La figura 4.43 muestra cómo se ve el modo de personalización en este momento.

FIGURA 4.43 En el Modo de personalización, puede realizar ediciones en tiempo real en la interfaz
de usuario.

Observe también que en el lado izquierdo de la pantalla, una barra de herramientas ofrece
accesos directos a comunes

tareas, como agregar nuevos botones y nuevos grupos de elementos y mover elementos hacia
arriba y

abajo. Cada acceso directo se habilita según el elemento que seleccione en la interfaz de usuario

árbol. Por ejemplo, suponga que desea probar una apariencia diferente para la interfaz de usuario
de

La pantalla actual. Para hacerlo, sigue estos pasos:

1. Reemplace el contenedor de nivel raíz actual, Diseño de columnas, con Diseño de pestañas.

2. Busque el diseño de pestañas, elemento de pestañas de colección secundaria.

3. Reemplace el contenedor Diseño de pestañas con un Diseño de filas.

Ahora puede ver cómo se muestran los cambios en el diseño de la pantalla en la vista previa de la
pantalla. Puedes ver
exactamente cómo se verá la pantalla en la aplicación en ejecución. Además, puedes probar

el comportamiento de la pantalla haciendo clic en los diversos controles, que son completamente
interactivos. Figura 4.44

muestra cómo aparece el Modo de personalización después de las ediciones anteriores, y la Figura
4.45 muestra

cómo se ve la pantalla después de tus ediciones.

CÓMO SE HACE LA VISTA PREVIA

Si ya sabes cómo desarrollar con Silverlight o WPF, probablemente entiendas

que el control de vista previa en el Modo de personalización reproduce la pantalla real aplicando

un objeto ScaleTransform. Es por eso que el control no es solo una vista previa simple sino un

elemento de interfaz de usuario completamente funcional

FIGURA 4.44 Los cambios en la interfaz de usuario se muestran en la vista previa y pueden
probarse activamente.
FIGURA 4.45 Cambiar el diseño de la pantalla utilizando los grupos Diseño de pestañas y Diseño de
filas.

Con especial atención al cuadro Propiedades, puede usarlo para realizar las siguientes ediciones:

. Cambiar el nombre para mostrar de los contenedores y los controles (propiedad Nombre para
mostrar)

. Establecer una descripción para los contenedores y los controles (propiedad Descripción)

. Elija un tipo de control diferente expandiendo el cuadro combinado Tipo de control

. Marcar un elemento como visible o invisible (casilla de verificación Es visible)

. Establezca controles de tipo Lista y Cuadrícula de datos para usar controles de solo lectura

. Evite que los controles de tipo Lista y Cuadrícula de datos ofrezcan el botón Exportar a Excel

. Cambie el tamaño y la extensión de los controles (cuadro de tamaño), lo que resulta

particularmente útil

cuando agrega controles personalizados a la interfaz de usuario y necesita verificar sus

posición en la pantalla.

Cuando esté satisfecho con sus ediciones, haga clic en Guardar para guardar esos cambios en el
actual

configuración. Cuando lo haga, la pantalla actual de la aplicación muestra las modificaciones.

Si decide no guardar los cambios, simplemente haga clic en Cancelar y regrese a la pantalla original

composición.

Solo para probar otro escenario, restaure el contenedor raíz al diseño de columnas. Luego ubica

el diseño de pestañas, pestañas de colección secundaria y reemplácelo con un control de ventana

modal.

Lo que hace la ventana modal es agregar un botón en la pantalla, y una vez que este botón está

Al hacer clic, aparece una ventana modal que muestra las colecciones secundarias, como se
muestra en la Figura 4.46.

FIGURA 4.46 Reorganizar pantallas con ventanas modales.

Como se enumera en la Tabla 4.6, también están los grupos Imagen y Texto y Texto e Imagen. Tú

úselas con entidades que cumplan estrictamente con los requisitos del grupo (imagen, título,
subtítulo,

y descripción) y así organizar las propiedades de la entidad de una manera interesante. Lo único

La diferencia entre ellos es que en el primer grupo, se coloca una imagen a la izquierda, mientras
que

en el segundo grupo, la imagen se coloca a la derecha. En la aplicación actual, el

La entidad del producto es un buen candidato para esto. El siguiente ejemplo muestra cómo
organizar las propiedades de la entidad dentro de un diseño de imagen y texto en la pantalla
Buscar productos.

Para comprender cómo funciona, siga estos pasos:

1. Haga clic en Pantalla de diseño.

2. Localice el elemento llamado Cuadrícula de datos, Productos y haga clic en el menú desplegable.
Entonces

reemplazar la cuadrícula de datos con la lista. En este punto, el control Resumen está disponible
en

Elemento de lista

3. Haga clic en el menú desplegable cerca de Resumen y seleccione Imagen y texto, como se
muestra en

Figura 4.47.

4. Asigne cada elemento del nuevo diseño a las propiedades de entidad apropiadas (consulte

Figura 4.48). Excepto por la imagen, que debe asignarse a una propiedad de entidad de

escriba Image, puede asignar las otras propiedades de la manera que desee. En la corriente

ejemplo, podría especificar el nombre del producto como el Título, las unidades en stock como el

Subtítulo y la categoría como Descripción

FIGURA 4.47 Selección del elemento de diseño de imagen y texto.
FIGURA 4.48 Propiedades de la entidad de mapeo al diseño de imagen y texto.

La vista previa muestra el nuevo aspecto de esta pantalla. Este diseño particular utiliza
propiedades de resumen,

para que la propiedad de resumen predeterminada se pueda usar para acceder a los detalles del
elemento. Figura 4.49

muestra cómo se ve la pantalla después de guardar los cambios.

Modo de personalización, diseños disponibles y la forma en que LightSwitch permite la

personalización de la pantalla

simplifique la adaptación de las pantallas a las necesidades de su negocio.

MODO DE PERSONALIZACIÓN Y CONFIGURACIONES VISUAL STUDIO 2010

Si está ejecutando Visual Studio 2010 Professional o superior, puede elegir

Configuración de depuración o lanzamiento para compilar aplicaciones (en contraste con lo que
hace con

Visual Studio LightSwitch). Recuerde que el modo de personalización es una depuración al 100%

función, por lo que estará disponible en sus pantallas solo si se inicia una aplicación en

La configuración de depuración. Porque Visual Studio LightSwitch no ofrece la versión

configuración, el modo de personalización siempre está disponible.

FIGURA 4.49 Una pantalla de búsqueda personalizada con el diseño de Imagen y Texto.

Mostrar mensajes de texto dentro de etiquetas o cuadros de texto

A veces, es posible que desee mostrar mensajes de texto simples en sus pantallas, como

consejos, avisos, advertencias, información general o mensajes de bienvenida. Por defecto, cada

El control Label o TextBox en una pantalla está vinculado a datos, por lo que no puede usar
directamente

controles para mostrar texto. Sin embargo, puede agregar una propiedad local a su pantalla,
agregue la propiedad

al diseñador de pantalla, y luego complete su valor en código con el texto deseado.

Las propiedades locales se analizan más adelante en este libro; por ahora, concéntrate en cómo
los usas para

Muestra algo de texto. Siga estos pasos para agregar un mensaje de texto:

1. Abra una pantalla en el Diseñador de pantalla y haga clic en Agregar elemento de datos.

2. En el cuadro de diálogo Agregar elemento de datos, seleccione Propiedad local y deje sin
modificar el

selección predeterminada en el tipo de cadena.

3. Deseleccione la casilla de verificación Es obligatorio.

4. En el campo Nombre, especifique un nombre para la nueva propiedad local (por ejemplo,

SampleMessage) y luego haga clic en Aceptar. En este punto, la nueva propiedad estará disponible

en la lista de elementos de datos a la izquierda del diseñador.

5. Arrastre la propiedad local al Diseñador de pantalla y suéltela después de la Pantalla

Barra de comandos (o en un lugar diferente). Tenga en cuenta que, de forma predeterminada,

LightSwitch selecciona un

Control TextBox para propiedades locales de tipo String. Puedes reemplazarlo con una etiqueta

control, que es más apropiado si solo necesita mostrar algo de texto.

De esta forma, la propiedad local recién agregada se convierte en parte de los datos de la pantalla
y puede

poblar su valor mediante programación. Para hacerlo, debe escribir un par de líneas de código.

Puede asignar fácilmente un valor a la propiedad local escribiendo el enlace Método creado

para la pantalla Para escribir este método, expanda la lista desplegable Escribir código en la
pantalla
Diseñador y luego seleccione el método ScreenName_Created, donde ScreenName es el nombre

de tu pantalla. Por ejemplo, el siguiente código muestra cómo llenar la propiedad de muestra

en la pantalla CreateNewCustomer:

Private Sub CreateNewCustomer_Created ()

Me.SampleMessage = "En esta pantalla puede agregar un nuevo cliente"

End Sub

Como puede ver, con una simple línea de código puede asignar el mensaje de texto al local

propiedad que aparecerá en su pantalla cuando ejecute la aplicación. Tú también puedes

cambie el estilo de fuente predeterminado para su texto seleccionando la Etiqueta (o TextBox) en

su

pantalla y cambiar el valor de la propiedad Estilo de fuente en la ventana Propiedades. por

Por ejemplo, si selecciona el estilo Advertencia, su mensaje se mostrará en negrita roja. Si tu

seleccione Fuerte, su mensaje se mostrará en negrita. Simplemente vuelva a Normal para mostrar

Su mensaje en el estilo normal. También puede ocultar o cambiar la posición del local

nombre de propiedad en pantalla cambiando el valor de la propiedad Posición de etiqueta. Vale la

pena

mencionar que cambiar el estilo y la posición de la etiqueta de las propiedades del texto no se
limita a

propiedades locales que agregue manualmente, pero se pueden aplicar a cualquier etiqueta
vinculada a datos o cuadro de texto

en la pantalla.

Implementando Validación de Datos

Los conceptos cubiertos en el Capítulo 3 siguen siendo importantes para otro tema fundamental:
los datos

validación. Todas las entidades de datos y pantallas descritas en este capítulo aún aprovechan

de las reglas de validación incorporadas que LightSwitch implementa para usted. En cuanto a la
aplicación actual

Por ejemplo, las pantallas aprovechan las reglas de validación incorporadas para las direcciones de
correo electrónico,

cadenas y números de teléfono. Sería útil proporcionar algún tipo de validación para

otros tipos de datos, como Fecha y Dinero. Por ejemplo, es una buena idea asegurarse de que
el usuario no ingresa una fecha de factura que no se encuentre dentro de un intervalo de tiempo
especificado y

que el usuario no ingresa valores negativos para una factura. Porque la validación se realiza en

La definición de entidad, esto afecta automáticamente a todas las pantallas en la interfaz de

usuario. Considerar,

por ejemplo, la entidad Factura. Seleccione la propiedad InvoiceDate y en las Propiedades

ventana, ubique el grupo de Validación y luego reemplace el contenido del Valor mínimo con

1/1/2010. Al hacerlo, evita que el usuario ingrese facturas con fechas anteriores a

1/1/2010. Repita este paso para la propiedad InvoiceDueDate. A continuación, pasar a los
impuestos

propiedad de tipo dinero. Por defecto, esto acepta números negativos, lo que no es bueno.
Entonces,

reemplace el contenido del valor mínimo con 0. La figura 4.50 muestra errores de validación para

Pantalla Crear nueva factura si intenta ingresar una fecha no válida y una cantidad negativa.

Del mismo modo, puede personalizar las propiedades OrderDate, RequiredDate y ShippedDate

de tipo Fecha en la definición de entidad de Pedido y la propiedad de Carga de tipo Dinero por

siguiendo las mismas reglas descritas aquí. Con respecto a la entidad del Producto, asegúrese de
que el

La propiedad UnitsInStock, de tipo Integer, tiene el valor mínimo establecido en 0. El cliente

la entidad no necesita una regla de validación adicional porque las reglas integradas para los tipos
de datos

son suficientes Por supuesto, una buena infraestructura de validación debe cuidar

escenarios adicionales. Por ejemplo, la definición de entidad de pedido debe garantizar que el

ShippedDate no es anterior a OrderDate. Dicha validación está más allá del alcance de la función
incorporada.

reglas de validación y es algo que debe definirse manualmente. Para más información

sobre cómo escribir e implementar reglas de validación de datos personalizadas, consulte el

Capítulo 5,

"Personalización de la validación de datos".

FIGURA 4.50 Errores de validación de datos cuando el usuario ingresa datos no válidos.

Validación de relaciones Master-Details

Anteriormente en este capítulo, aprendió a agregar y administrar relaciones con Agregar

Nuevo diálogo de relación. En particular, viste cómo este diálogo proporciona información

sobre el comportamiento de la relación seleccionada, especialmente para el comportamiento de

eliminación. por

ejemplo, considere la relación Cliente - OrderHeaders de tipo uno a muchos. los

El comportamiento de eliminación predeterminado es Restringido, lo que significa que si el

usuario intenta eliminar un

instancia de la entidad Cliente (que tiene pedidos activos), la operación de eliminación se rechaza.

Si intenta realizar esta acción mientras se ejecuta la aplicación de muestra, obtendrá una
validación

error al decir que el cliente seleccionado no se puede eliminar porque los registros relacionados
aún

existen (y lo están haciendo referencia), como se muestra en la Figura 4.51.

FIGURA 4.51 Errores de validación para relaciones maestro-detalles.

Este problema de validación se genera solo cuando el usuario intenta guardar los cambios. (De
hecho, esto es

una validación del lado del servidor, que se explica en el siguiente capítulo.) Si no le gusta esto

tipo de comportamiento, puede reemplazar la regla restringida con cascada en la relación de

edición

diálogo. Pero ten cuidado; esta regla no solo eliminará el elemento seleccionado sino también
todos los

entidades relacionadas (continuando con el ejemplo del cliente, el cliente y todos los pedidos
relacionados

son eliminados)

Resumen

Las aplicaciones empresariales del mundo real con fuentes de datos complejas requieren una
composición bien compuesta y

formularios de datos detallados. Visual Studio LightSwitch le permite crear entidades complejas y

le permite diseñar datos relacionales agregando relaciones a las entidades. Para proporcionar el

usuario final con la mejor experiencia de usuario posible, LightSwitch ofrece una serie de
funciones integradas
plantillas de pantalla que lo ayudan a diseñar relaciones maestro-detalles; puede permitir a los
usuarios

ingresar, buscar, filtrar y editar datos relacionados (a través de, por ejemplo, cuadrículas editables
y Lista y

Pantallas de detalles). Debido a que la interfaz de usuario consta de varias pantallas, LightSwitch
permite

puede diseñar la navegación de pantalla personalizando el control de Navegación de pantalla. Tú

También puede cambiar el diseño de la pantalla mediante el uso de diferentes contenedores de

control conocidos como paneles,

en lugar de simplemente crear una interfaz de usuario más legible configurando nombres para
mostrar. Usted puede

también aproveche las funciones integradas de validación de datos que puede extender a todos
los tipos de datos que

utilizar. A partir del próximo capítulo, usará muchas características interesantes en Visual Studio

LightSwitch que hace que la experiencia de desarrollo sea increíblemente productiva