Tutorial: Crear la aplicación Vision Clinic

Artículo
03/12/2013

Este tutorial muestra el proceso de principio a fin de cómo crear una aplicación en Visual Studio LightSwitch.Se utilizarán muchas de las características de LightSwitch para crear una aplicación para una clínica de visión ficticia.La aplicación incluye funciones para programar citas y crear facturas.

Requisitos previos

Descargue la base de datos de PrescriptionContoso de Galería de código de MSDN.

Pasos

Crear un proyecto

Cree el proyecto de aplicación.
Defina las tablas

Agregar las entidades Paciente, Factura y Detalles de factura.
Cómo crear una lista de opciones

Cree una lista de valores.
Definir una relación

Vincule tablas relacionadas.
Agregue otra entidad

Agregue la entidad Cita.
Crear pantalla

Cree una pantalla para mostrar los pacientes.
Ejecutar la aplicación

Ejecute la aplicación y escribir datos.
Conectar a una base de datos

Conéctese a una base de datos externa.
Realice cambios en las entidades

Modifique las entidades Productos y Descuento del producto.
Crear una pantalla de lista y detalles

Cree una pantalla para mostrar los productos.
Cambiar el diseño de la pantalla

Modifique el diseño de la pantalla Lista de productos.
Realice cambios en tiempo de ejecución

Realice cambios en la aplicación en ejecución.
Crear una consulta

Cree una consulta parametrizada y enlácela a una pantalla.
Agregar un campo calculado

Cree un campo calculado y agréguelo a una pantalla.
Crear una relación entre bases de datos

Cree una relación virtual entre las entidades en bases de datos diferentes.
Cree la pantalla Facturas

Cree una pantalla para mostrar las facturas.
Modifique la pantalla Facturas

Cambie el diseño de la pantalla Facturas de la aplicación en ejecución.
Agregue lógica de pantalla

Escriba código para calcular las fechas.
Agregar más campos calculados

Cree más campos calculados y agregarlos a la pantalla Facturas.
Implemente la aplicación

Publique la aplicación como una aplicación de escritorio de 2 niveles.

Crear un proyecto

El primer paso para crear una aplicación de LightSwitch es abrir un proyecto nuevo.

Para crear un proyecto

En el menú Windows Inicio, haga clic en Visual Studio 2012.

Aparecerá el diseñador LightSwitch.
En el menú Archivo, haga clic en Nuevo proyecto.

Aparece el cuadro de diálogo Nuevo proyecto.
En la lista Plantillas instaladas, seleccione el nodo LightSwitch.
En el panel central, seleccione LightSwitchAplicación (VB) o LightSwitchAplicación (C#).
En el campo Nombre, escriba Clínica de Visión y haga clic en Aceptar.

Aparece la ventana Diseñador de Clínica de Visión y se agregan a la ventana Explorador de soluciones las carpetas necesarias para el proyecto.

Defina las tablas

En LightSwitch, las tablas se conocen como entidades; modelan el objeto que los datos representan, en este caso un paciente.Las aplicaciones LightSwitch utilizan el modelo "formularios sobre datos", es decir, formularios o pantallas que muestran los datos de una o más fuentes.LightSwitch incluye una base de datos intrínseca que se puede utilizar para almacenar los datos para su aplicación.En el paso siguiente, creará una tabla de base de datos para almacenar información del paciente.

Cómo crear la entidad Paciente

En la ventana Diseñador de Clínica de Visión, haga clic en Crear nueva tabla.

El Diseñador de datos aparece y un nodo Tabla1Elementos aparece debajo de Orígenes de datos en Solution Explorer.
En la ventana Propiedades, seleccione la propiedad Nombre y escriba Paciente; a continuación, presione Entrar.

El nombre en la barra de título Diseñador de datos cambia a «Paciente» y el nombre en el Explorador de soluciones cambia a «Pacientes.»
En la columna Nombre, haga clic en <Agregar propiedad> y escriba Nombre; a continuación, presione Entrar.

Observe que el tipo de datos adecuado, String, aparece en la columna Tipo y que la casilla del campo Obligatorio está activada.Un paciente debe tener un nombre.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba Apellido.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba Calle.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba Calle2.
En la columna Obligatorio, desactive la casilla.

La segunda línea de una dirección es opcional.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba Ciudad.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba Estado.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba código postal
Haga clic en <Agregar propiedad> en la columna Nombre y escriba TeléfonoPríncipal.
En la columna Tipo, seleccione PhoneNumber en la lista desplegable.

PhoneNumber es un tipo comercial personalizado que representa un modelo común para escribir y dar formato a números de teléfono.
En la columna Obligatorio, desactive la casilla.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba TeléfonoSecundario.
En la columna Tipo, seleccione PhoneNumber en la lista desplegable.
En la columna Obligatorio, desactive la casilla.
Haga clic en <Agregar campo> en la columna Nombre y escriba Correo electrónico.
En la columna Tipo, seleccione EmailAddress en la lista desplegable.

EmailAddress es otro tipo comercial personalizado que representa una dirección de correo electrónico con formato correcto.
En la columna Obligatorio, desactive la casilla.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba NúmeroDePóliza.
En la ventana Propiedades, seleccione la propiedad Longitud máxima y escriba 12.

Esto evitará que los usuarios escriban un número de póliza con más de 12 caracteres.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

A continuación creará dos entidades más para representar una factura y partidas detalladas de la factura

Cómo crear las entidades Factura y Detalle de factura

En el Explorador de soluciones, haga clic en Data Sources.En el menú Proyecto, haga clic en Agregar tabla.

Aparece una nueva instancia del Diseñador de datos.
En la ventana Propiedades, seleccione la propiedad Nombre.Escriba Factura y presione Entrar.
En la columna Nombre, haga clic en <Agregar propiedad>.Escriba FechaFactura y presione Entrar.
En la columna Tipo, seleccione DateTime en la lista desplegable.
En la columna Nombre, haga clic en <Agregar propiedad>.Escriba VencimientoFactura y presione Entrar.
En la columna Tipo, seleccione DateTime en la lista desplegable.
En la columna Obligatorio, desactive la casilla.
En la columna Nombre, haga clic en <Agregar propiedad>.Escriba EstadoFactura y presione Entrar.
En la columna Tipo, seleccione Integer en la lista desplegable.
En la columna Nombre, haga clic en <Agregar propiedad>.Escriba FechaEnvío y presione Entrar.
En la columna Tipo, seleccione DateTime en la lista desplegable.
En el Explorador de soluciones, haga clic en Data Sources.En el menú Proyecto, haga clic en Agregar tabla.
En la ventana Propiedades, seleccione la propiedad Nombre. Escriba DetalleFactura y, a continuación, presione Entrar.
En la columna Nombre, haga clic en <Agregar propiedad>. Escriba Cantidad y, a continuación, presione Entrar.
En la columna Tipo, seleccione Integer en la lista desplegable.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba PrecioUnidad.
En la columna Tipo, seleccione Money en la lista desplegable.

Money es otro tipo comercial personalizado que representa formatos de divisa correctos.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Cómo crear una lista de opciones

En el paso siguiente, creará una lista de opciones para la entidad Invoice.Una lista de opciones permite presentar al usuario un conjunto fijo de valores de donde elegir.

Cómo crear una lista de opciones

En el Explorador de soluciones, haga doble clic en Facturas.
En el Diseñador de datos, seleccione el campo EstadoFactura.
En la ventana Propiedades, haga clic en el vínculo Lista de opciones.

Aparece el cuadro de diálogo Lista de selección.
En el cuadro de diálogo Lista de opciones, escriba los valores siguientes y, a continuación, haga clic en Aceptar.

Valor

Nombre para mostrar

0

Activo

1

Pagado

2

Vencido

Cuando este campo se muestra en la pantalla, presentará al usuario una lista desplegable que contiene los tres valores Nombre para mostrar que se especificaron.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Valor	Nombre para mostrar
0	Activo
1	Pagado
2	Vencido

Defina una relación

En el paso siguiente, definirá las relaciones entre las entidades Paciente, Factura y Detalles de factura.

Cómo definir relaciones

En el Explorador de soluciones, haga doble clic en Facturas.
En la barra de herramientas Diseñador de datos, haga clic en Relación.

Aparecerá el cuadro de diálogo Agregar nueva relación.
En el cuadro de diálogo Agregar nueva relación, seleccione la columna Hasta en la fila Nombre:.Seleccione Paciente y, a continuación, haga clic en Aceptar.

Se crea una relación de uno a muchos entre las entidades Invoice y Patient; un paciente puede tener varias facturas.
En la barra de herramientas Diseñador de datos, haga clic en Relación.

Aparecerá el cuadro de diálogo Agregar nueva relación.
En el cuadro de diálogo Agregar nueva relación, seleccione la columna Hasta en la fila Nombre: y seleccione DetalleFactura.
Seleccione la columna Desde, en la fila Multiplicidad: y seleccione Uno.
Seleccione la columna Hasta en la fila Multiplicidad:, seleccione muchas y, a continuación, haga clic en Aceptar.

Se crea una relación de uno a muchos entre las entidades InvoiceDetail e Invoice; una factura puede tener varios detalles de factura.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Crear la entidad Cita

En el paso siguiente, agregará una entidad más para representar una cita y, a continuación, agregará una relación y una lista de opciones.

Cómo agregar la entidad Cita

En el Explorador de soluciones, haga clic en Data Sources y, a continuación, en el menú Proyecto, haga clic en Agregar tabla.
En la ventana Propiedades, cambie el valor de la propiedad Nombre a Cita.
En el Diseñador de datos, haga clic en <Agregar propiedad> en la columna Nombre y escriba HoraCita.
En la columna Tipo, seleccione DateTime en la lista desplegable.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba TipoCita.
En la columna Tipo, seleccione Short Integer en la lista desplegable.
Haga clic en <Agregar propiedad> en la columna Nombre y escriba NotasDelDoctor.
Acepte el tipo predeterminado, String, y desactive la casilla Obligatorio.
En la barra de herramientas Diseñador de datos, haga clic en Relación.
En el cuadro de diálogo Agregar nueva relación, seleccione la columna Hasta en la fila Nombre:.Seleccione Paciente y, a continuación, haga clic en Aceptar.

Se crea una relación de uno a muchos entre las entidades Appointment y Patient; un paciente puede tener varias citas.
En el Diseñador de datos, seleccione el campo AppointmentType.
En la ventana Propiedades, haga clic en el vínculo Lista de opciones.

Aparece el cuadro de diálogo Lista de selección.
En el cuadro de diálogo Lista de opciones, escriba los valores siguientes y, a continuación, haga clic en Aceptar.

Valor

Nombre para mostrar

0

Anual

1

Continuación

2

Emergencia
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Valor	Nombre para mostrar
0	Anual
1	Continuación
2	Emergencia

Crear pantalla

En el paso siguiente, creará una pantalla para mostrar una lista de pacientes.

Cómo crear una pantalla

En el Explorador de soluciones, haga clic en nodo Pantallas y, a continuación, en el menú Proyecto, haga clic en Agregar pantalla.

Abre el cuadro de diálogo Agregar nueva pantalla.
Seleccione Pantalla de rejilla editable en la lista Seleccione una plantilla de pantalla.
En el cuadro de texto Nombre de pantalla, escriba ListaPaciente.
Seleccione la lista desplegable Datos de pantalla y seleccione Pacientes.Haga clic en Aceptar.

El Diseñador de pantallas se abre y muestra una representación jerárquica del diseño de la pantalla.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Ejecutar la aplicación y escribir datos

Ahora tiene una aplicación operativa.En el paso siguiente, ejecutará la aplicación y escribirá algunos datos.

Para ejecutar la aplicación

Presione F5 para iniciar la aplicación.
En la aplicación en ejecución, seleccione la pantalla ListaPaciente y, a continuación, haga clic en el botón +....

Aparecerá un cuadro de diálogo Agregar nuevo paciente.
Escriba los datos para un nuevo paciente.En el campo Correo, escriba un valor no válido, por ejemplo almudena#ejemplo.com.

Cuando se mueve fuera del campo aparece un borde rojo.El tipo comercial EmailAddress tiene reglas de validación integradas que pueden detectar una dirección de correo electrónico con formato incorrecto.
Corrija el error, finalice la entrada de datos y, a continuación, haga clic en Aceptar.

El botón Guardar en la barra de herramientas de la aplicación ahora está habilitado.
Haga clic en el botón +….Agregue los datos para un segundo paciente y, a continuación, haga clic en Aceptar.
Haga clic en Guardar para guardar los datos.

Ahora, puede reorganizar las columnas en la cuadrícula ListaPaciente y puede ordenar en cualquier columna.
Haga clic en el botón Cerrar en la esquina superior derecha de la aplicación en ejecución para volver al modo de diseño.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Conectar a una base de datos

En el paso siguiente, se conectará a una base de datos externa que contiene información del producto.

[!NOTA]

Antes de realizar este paso, tendrá que descargar e instalar la base de datos PrescriptionContoso.La base de datos se puede descargar de Galería de código de MSDN.Siga las instrucciones del archivo Install.htm para instalar la base de datos.

Para enlazar a orígenes de datos

En el Explorador de soluciones, seleccione el nodo Fuente de Datos.
En el menú Proyecto, haga clic en Agregar origen de datos.

Se abrirá el asistente para Adjuntar orígenes de datos.
En el asistente para adjuntar orígenes de datos, haga clic en Base de datos y después en Siguiente.

Aparecerá el cuadro de diálogo Elegir origen de datos.

[!NOTA]

Si previamente se ha conectado a una base de datos de LightSwitch, este cuadro de diálogo no aparece y puede omitir el paso siguiente.
En el cuadro de diálogo Elegir fuente de datos, haga clic en Microsoft SQL Server (cliente SQL) y luego haga clic en Continuar.

Aparece el cuadro de diálogo Propiedades de la conexión.

En el cuadro de diálogo Propiedades de conexión, escriba los valores en la tabla siguiente y, a continuación, haga clic en Aceptar.

Campo	Valor
Nombre del servidor	(localdb)\v11.0
Iniciar sesión en el servidor	Uso de autenticación de Windows
Seleccionar o escribir nombre de base de datos	C:\Temp\PrescriptionContoso.mdf

Propiedades de la conexión

Aparece la página del asistente Elija los objetos de base de datos.

Expanda el nodo Tablas.
Seleccione las tablas Producto y DescuentoDeProducto y, a continuación, haga clic en Finalizar.

Se agrega al proyecto el origen de datos C_TEMP_PRESCRIPTIONCONTOSO_MDFData y las entidades se crean para Productos y DescuentosDeProducto.
En el Explorador de soluciones, haga clic con el botón secundario en C_TEMP_PRESCRIPTIONCONTOSO_MDFData, haga clic en Cambiar nombre y después escriba PrescriptionContoso
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Modificar las entidades Productos y DescuentoDeProducto

En el paso siguiente, realizará algunas modificaciones en las entidades DescuentoDeProducto y Productos.

Para modificar las entidades DescuentoDeProducto y Productos

En el Explorador de soluciones, haga doble clic en el nodo DescuentoDeProducto.
Seleccione el campo Descuento y cambie el Tipo a Divisa.
En el Explorador de soluciones, haga doble clic en el nodo Productos.
En el Diseñador de Datos, seleccione el campo PVR y cambie Tipo a Divisa.
Seleccione el campo ImagenDelProducto y cambie el Tipo a Imagen.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Crear una pantalla de lista y detalles

En el paso siguiente, creará una pantalla para mostrar la información de productos.

Para crear una pantalla de lista y detalles

En el Explorador de soluciones, seleccione el nodo Screens.En el menú Proyecto, haga clic en Agregar pantalla.
En el cuadro de diálogo Agregar nueva pantalla, seleccione Pantalla de lista y detalles en la lista Seleccione una plantilla de pantalla.
En el campo Nombre de pantalla, escriba ListaProducto.
Seleccione la lista desplegable Datos de pantalla y seleccione PrescriptionContoso.Productos.
En la lista Datos adicionales que incluir, active las casillas Detalles del producto y ProductRebates de producto y, a continuación, haga clic en Aceptar.

Cambiar el diseño de la pantalla

En el paso siguiente, cambiará el formato de la pantalla ListaProducto.

Para personalizar el diseño

En el Diseñador de pantallas, seleccione el nodo Diseño de Filas |Detalles de Producto en el Árbol de contenido de pantalla.
En la lista desplegable Diseño de Filas, seleccione Foto y Texto.
Seleccione los siguientes valores de la lista desplegable para cada campo bajo el nodo de Foto y texto:

Campo

Valor

(Foto)

Imagen del producto

(TITULO)

Nombre de producto

(SUBTÍTULO)

MSRP

(DESCRIPCIÓN)

Descripción
Presione F5 para ejecutar la aplicación y ver los resultados.
En la aplicación en ejecución, haga clic en el menú ListaProducto para mostrar la pantalla.

Mantenga la aplicación abierta.En el paso siguiente, realizará modificaciones en la aplicación en ejecución.

Realizar cambios en la aplicación en ejecución.

En el paso siguiente, modificará la pantalla ListaProducto mientras se ejecuta la aplicación.

Cómo personalizar una pantalla en tiempo de ejecución

En la pantalla Lista de productos, haga clic en el botón Pantalla de diseño en la esquina inferior derecha.
En el panel izquierdo, seleccione el nodo Red de Datos | Descuento Productos.
En la ventana Propiedades, cambie el valor de la propiedad Nombre para mostrar a Descuentos Contoso.

El nombre también cambia en la ventana de la aplicación.
Seleccione el campo MSRP y cambie la propiedad Descripción a Precio sugerido antes de cualquier descuento..
Haga clic en el botón Guardar para volver a la aplicación en ejecución y ver los cambios.Desplace el puntero del mouse sobre el campo MSRP para ver la descripción.
Haga clic en el botón Cerrar en la esquina superior derecha de la aplicación en ejecución para volver al modo de diseño.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Crear una consulta

En el paso siguiente, creará una consulta parametrizada y la enlazará a una pantalla.

Para crear una consulta parametrizada

En el Explorador de soluciones, seleccione el nodo Productos.En el menú Proyecto, haga clic en Agregar consulta.

Aparece el Diseñador de consultas.
En la ventana Propiedades, seleccione el campo Nombre y escriba ProductosRelacionados.
En el Diseñador de consultas, haga clic en Agregar filtro.

Se agrega una condición de filtro a la sección Filtro.
En la segunda lista desplegable, seleccione Categoría.
En la cuarta lista desplegable, seleccione Parámetro.
En la quinta lista desplegable, haga clic en Agregar nuevo.

Se agrega un nuevo Parameter de nombre Category de tipo String a la sección Parámetros.
En el Explorador de soluciones, haga doble clic en el nodo ListaProducto para abrir el Diseñador de pantallas.
En la barra de herramientas Diseñador de pantallas, haga clic en Agregar elemento de datos.

Aparecerá el cuadro de diálogo Agregar elemento de datos.
En el cuadro de diálogo Agregar elemento de datos, haga clic en Consulta.En la columna Nombre, seleccione PrescriptionContoso.RelatedProductos y, a continuación, haga clic en Aceptar.

Un nodo ProductosRelacionados aparece en el panel izquierdo.
Seleccione el nodo Categoría bajo Parámetros de la consulta.
En la ventana Propiedades, seleccione la propiedad Enlace de parámetros y escriba Productos.SelectedItem.Category.
En el panel central, expanda el nodo Agregar bajo el nodo Red de Datos | Descuentos Contoso y haga clic en Productos Relacionados.
Presione F5 para ejecutar la aplicación y ver los resultados.

Abra la pantalla Lista de productos y observe que se muestra una lista de productos relacionados para cada producto seleccionado.
Haga clic en el botón Cerrar en la esquina superior derecha de la aplicación en ejecución para volver al modo de diseño.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Agregar un campo calculado

En el paso siguiente, agregará un campo que utiliza un valor calculado.El valor calculado será el precio de un producto una vez aplicado un descuento.

Para agregar un campo calculado

En el Explorador de soluciones, haga doble clic en el nodo de entidad Productos.
En el Diseñador de datos, haga clic en <Agregar propiedad>.Escriba PrecioActual y, a continuación, haga clic en Tab.
En la columna Tipo, seleccione Money en la lista desplegable.

En la ventana Propiedades, bajo General, la propiedad Es calculado se selecciona de forma predeterminada.
En la ventana Propiedades, haga clic en el vínculo Editar método.

El Editor de código aparece y se muestra el método CurrentPrice_Compute.

Agregue el código siguiente al controlador de eventos:

Dim rebates As Decimal
    For Each item In ProductRebates
        If item.RebateStart <= Date.Today And item.RebateEnd >= Date.Today Then
            rebates = rebates + item.Rebate
        End If
    Next

    result = Me.MSRP - rebates

decimal rebates = default(decimal);


            foreach (var item in ProductRebates)
            {
                if (item.RebateStart <= System.DateTime.Today && item.RebateEnd >= System.DateTime.Today)
                {
                    rebates += item.Rebate.Value;
                }
            }

            result = this.MSRP - rebates;

Código para calcular el precio actual

En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

En el paso siguiente, agregará el campo calculado a la pantalla ListaProducto.

Para agregar un campo calculado a una pantalla

En el Explorador de soluciones, haga doble clic en el nodo de pantalla ListaProducto.
En el panel izquierdo del Diseñador de pantallas, seleccione el nodo PrecioActual y arrástrelo bajo el nodo (Descripción) | Descripción en el panel central.
Presione F5 para ejecutar la aplicación y ver los resultados.
En la pantalla ListaProducto, modifique el campo Descuento o el campo MSRP.Se vuelve a calcular PrecioActual.Haga clic en el botón Cerrar para volver al modo de diseño.
Haga clic en el botón Cerrar en la esquina superior derecha de la aplicación en ejecución para volver al modo de diseño.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Crear una relación entre bases de datos

En el paso siguiente, creará una relación virtual entre las entidades en dos bases de datos diferentes y mostrará datos a partir de dos fuentes diferentes en una pantalla única de lista y detalles.

Cómo crear una relación entre bases de datos

En el Explorador de soluciones, haga doble clic en el nodo de entidad DetallesDeFactura.
En el Diseñador de datos, haga clic en el botón de la barra de herramientas Relación.
En el cuadro de diálogo Agregar nueva relación, seleccione el campo Nombre en la columna Hasta y seleccione Producto.

Una nueva sección aparece en la parte inferior del cuadro de diálogo.Muestra los campos relacionados en las dos entidades.Si es necesario, puede cambiar los campos relacionados a otro campo del mismo tipo de datos o definir varios campos relacionados como claves.
Haga clic en Aceptar para guardar la relación.

La nueva relación se muestra como una línea de puntos en el diseñador.Esto indica que las entidades se encuentran en orígenes de datos diferentes, en este caso InvoiceDetails en la base de datos intrínseca y Products en la base de datos PrescriptionContoso.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Crear una pantalla para mostrar las facturas.

En el paso siguiente, creará una nueva pantalla para mostrar las facturas.

Cómo crear una pantalla

En el Explorador de soluciones, seleccione el nodo Pantallas.En el menú Proyecto, haga clic en Agregar pantalla.
En el cuadro de diálogo Agregar nueva pantalla, seleccione Pantalla de lista y detalles en la lista Seleccione una plantilla de pantalla.
En el cuadro de texto Nombre de pantalla:, escriba PantallaFactura.
Seleccione la lista desplegable Datos de pantalla y seleccione Facturas.
En la lista Datos adicionales que incluir:, seleccione Detalles de la factura y DetallesFactura de factura y, a continuación, haga clic en Aceptar .
Expanda el nodo Fila Red de Datos | Detalle Factura.Seleccione el nodo IdProducto Producto y elimínelo.
Para reordenar los campos, haga clic en el nodo PrecioUnidad y arrástrelo bajo el nodo Producto.
Presione F5 para ejecutar la aplicación.En el menú Ver, haga clic en Pantalla de la factura para mostrar la pantalla.
En el panel Facturas, haga clic en el botón +….

Escriba algunos datos de la factura.Observe cómo el campo EstadoFactura proporciona una lista desplegable de valores y el campo Paciente contiene un botón que abre un cuadro de diálogo que tiene una lista de pacientes.
En el panel DetalleFactura, haga clic en el botón +….

Escriba algunos datos detallados de la factura.Observe cómo el campo Producto proporciona una lista desplegable de productos de la base de datos PrescriptionContoso.
Haga clic en el botón Guardar para guardar los datos de la factura.
Mantenga la aplicación abierta.En el paso siguiente, realizará modificaciones en la aplicación en ejecución.

Modifique la pantalla Facturas

En el paso siguiente, realizará algunas modificaciones en la pantalla Facturas en la aplicación en ejecución.

Cómo modificar una pantalla en la aplicación en ejecución

En la pantalla Pantalla Factura, haga clic en el botón Pantalla de diseño en la esquina superior derecha.
En el panel izquierdo, seleccione el nodo Lista | Facturas.En la lista desplegable Lista, seleccione Red de Datos.
Seleccione el nodo Paciente.Use la flecha Subir en el margen izquierdo para moverla sobre el nodo de Fecha Factura.
Haga clic en Guardar para volver a la aplicación en ejecución y ver los cambios.
Haga clic en el botón Cerrar en la esquina superior derecha de la aplicación en ejecución para volver al modo de diseño.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Defina la lógica de pantalla

En el paso siguiente, agregará código para definir la lógica predeterminada para las fechas de la factura.

Cómo definir la lógica de pantalla

En el Explorador de soluciones, haga doble clic en el nodo de entidad Facturas.
En el de Datos Diseñador, haga clic en la lista desplegable Escribir código en la barra de herramientas.Haga clic en el vínculo Factura_Creada.

El Editor de código se abre y muestra el método Invoice_Created.

En el método Invoice_Created, agregue el código siguiente para establecer el comportamiento predeterminado de fechas:

InvoiceDate = Date.Today
InvoiceDue = Date.Today.AddDays(30)
ShipDate = Date.Today.AddDays(3)

InvoiceDate = System.DateTime.Today;
InvoiceDue = System.DateTime.Today.AddDays(30);
ShipDate = System.DateTime.Today.AddDays(3);

En el Explorador de soluciones, haga doble clic en el nodo de entidad Facturas.
En el Diseñador de datos, seleccione el campo InvoiceDate.
Haga clic en la lista desplegable Escribir código de la barra de herramientas y, a continuación, haga clic en el vínculo FechaFactura_Cambiada.

En el método InvoiceDate_Changed, agregue el siguiente código para actualizar las fechas cuando se cambia FechaFactura:

InvoiceDue = InvoiceDate.AddDays(30)
‘ If the ShipDate is earlier than the new InvoiceDate, update it.
If ShipDate < InvoiceDate Then
    ShipDate = InvoiceDate.AddDays(2)
End If

InvoiceDue = InvoiceDate.AddDays(30); 
    // If the ShipDate is earlier than the new InvoiceDate, update it
if (ShipDate < InvoiceDate)
    {
        ShipDate = InvoiceDate.AddDays(2);
    }

En el Explorador de soluciones, haga doble clic en el nodo DetalleFactura.
En el Diseñador de datos, seleccione el campo Producto, haga clic en la lista desplegable Escribir código de la barra de herramientas y, a continuación, haga clic en el vínculo Producto_Cambiado.
En el Editor de código, agregue el siguiente código para establecer el precio por unidad y cantidad predeterminada:
```
UnitPrice = Product.CurrentPrice
Quantity = 1
```
```
UnitPrice = Product.CurrentPrice;

Quantity = 1;
```
Presione F5 para ejecutar la aplicación y ver los cambios.

Abra la pantalla Factura y agregue una nueva factura.Ahora, los campos de fecha, precio y cantidad se actualizan automáticamente.
Haga clic en el botón Guardar para guardar los cambios.
Haga clic en el botón Cerrar en la esquina superior derecha de la aplicación en ejecución para volver al modo de diseño.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Agregar más campos calculados

En el paso siguiente, agregará los campos calculados para los subtotales, totales e impuestos a las entidades Facturas y DetalleFactura.

Cómo agregar campos calculado

En el Explorador de soluciones, haga doble clic en el nodo de entidad DetallesDeFactura.
En el Diseñador de datos, haga clic en <Agregar propiedad>. Escriba SubTotal y, a continuación, haga clic en Tab.
En la columna Tipo, seleccione Money en la lista desplegable.
En la ventana Propiedades, bajo Propiedades generales, active la casilla Es calculado.
Haga clic en el vínculo Editar método.

El Editor de código aparece y muestra el método SubTotal_Compute.

Agregue el código siguiente para calcular el SubTotal:

result = Quantity * UnitPrice

result = Quantity * UnitPrice;

En el Explorador de soluciones, haga doble clic en el nodo de entidad Facturas.
En el Diseñador de datos, haga clic en <Agregar propiedad>. Escriba Tax y, a continuación, haga clic en Tab.
En la columna Tipo, seleccione Money en la lista desplegable.
En la ventana Propiedades, active la casilla Es calculado.
Haga clic en el vínculo Editar método.

El Editor de código se abre y muestra el método Tax_Compute.

Reemplace el método Tax_Compute por el código siguiente para calcular el Tax:

Private Sub Tax_Compute(ByRef result As Decimal)
    Result =  GetSubTotal() * 0.095
End Sub
Protected Function GetSubTotal() As Decimal
    GetSubtotal = 0
    For Each item In InvoiceDetails
        GetSubTotal = GetSubTotal + item.SubTotal
    Next
End Function

partial void Tax_Compute(ref decimal result)
    {
        result = GetSubTotal() * (decimal)0.095;
    }
protected decimal GetSubTotal()
    {
        return this.InvoiceDetails.Sum(i => i.SubTotal);
    }

En el Explorador de soluciones, haga doble clic en el nodo de entidad Facturas.
En el Diseñador de datos, haga clic en <Agregar propiedad>.Escriba Total y, a continuación, haga clic en Tab.
En la columna Tipo, seleccione Money en la lista desplegable.
En la ventana Propiedades, active la casilla Es calculado.
Haga clic en el vínculo Editar método.

El Editor de código se abre y muestra el método Total_Compute.

Agregue el código siguiente para calcular el Tax:

result = GetSubTotal() + Tax

result = GetSubTotal() + Tax;

En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

En el paso siguiente, agregará los nuevos campos a la pantalla Facturas.

Cómo agregar campos a una pantalla

En el Explorador de soluciones, haga doble clic en el nodo de pantalla PantallaFactura.
En el panel central, seleccione y expanda el nodo Diseño Filas | Detalles Factura.
Seleccione y expanda la lista desplegable Agregar y seleccione Impuesto.

El campo Impuesto se agrega a la sección Pila Vertical | DetallesFactura.
Seleccione de nuevo la lista desplegable Agregar y seleccione el campo Total.
Presione F5 para ejecutar la aplicación y ver los resultados.

Abra la pantalla Pantalla Factura.Los campos Impuesto y Total ahora se muestran en cada fila de la factura.
Haga clic en el botón Pantalla de diseño para cambiar al modo de personalización.
En el panel izquierdo, seleccione el nodo Fila Red de Datos | Detalle de factura y expándalo.
Haga clic en la lista desplegable Agregar y seleccione SubTotal.
Haga clic en Guardar para guardar el cambio.Ahora aparece un campo Subtotal en la cuadrícula Detalles de factura.
Haga clic en el botón Cerrar en la esquina superior derecha de la aplicación en ejecución para volver al modo de diseño.
En el menú Archivo, haga clic en Guardar todo para guardar el trabajo.

Implemente la aplicación

En el paso siguiente, implementará la aplicación como una aplicación de escritorio de 2 niveles.

Para publicar una aplicación de escritorio de 2 niveles

En Explorador de soluciones seleccione el nodo Clínica de Visión, y a continuación en el menú Compilar, haga clic en Editar Clínica de Visión.

Aparecerá el Asistente para publicar aplicaciones de LightSwitch.
En la página Este es el Asistente para publicación de LightSwitch, compruebe que Escritorio está seleccionado y, a continuación, haga clic en Siguiente.
En la página Servicios de aplicación, compruebe que Local está seleccionado y, a continuación, haga clic en Siguiente.
En la página Especificar preferencia de publicación, seleccione el campo ¿Dónde desea colocar los archivos de la aplicación? y escriba C:\Publicar).
En la sección ¿Cómo desea publicar la base de datos predeterminada?, seleccione Publicar directamente en la base de datos ahora y, a continuación, haga clic en Siguiente.
En la página Datos de aplicación LightSwitch - Conexión a la base de datos SQL, acepte los valores predeterminados de las cadenas de conexión y, a continuación, haga clic en Siguiente.
En la página Instalar requisitos previos, acepte la configuración predeterminada y haga clic en Siguiente.
En la página Otra información de conexión, acepte la configuración predeterminada y, a continuación, haga clic en Publicar.
En Explorador de Archivos, busque el directorio C:\Publish y haga doble clic en el archivo Setup.exe para instalar la aplicación en el equipo local.

[!NOTA]

Para instalar la aplicación en un equipo diferente, copie el contenido de la carpeta Publicar y todas sus subcarpetas.Antes de instalar debe completar los pasos descritos en el archivo Install.htm, que se puede encontrar en la carpeta Publicar.
Si aparece el cuadro de diálogo Instalación de aplicación – Advertencia de seguridad, haga clic en Instalar.

La aplicación Clínica de Visión se instalará e iniciará.
Escriba algunos datos y compruebe que la aplicación funciona según lo previsto.

Sugerencia

Si desea ejecutar la aplicación Clínica de Visión de nuevo, puede abrirla desde el menú Inicio.

Sugerencia
Si desea ejecutar la aplicación Clínica de Visión de nuevo, puede abrirla desde el menú Inicio.

Esto completa el tutorial de la aplicación Clínica de Visión.Ahora debe tener los conocimientos básicos del proceso de principio a fin para crear una aplicación LightSwitch.

En este tutorial se han mostrado las funciones básicas de LightSwitch, pero se puede hacer mucho más con LightSwitch.Cuando inicia la compilación de sus propias aplicaciones, puede obtener información sobre más funciones en la documentación del producto.

Vea también

Conceptos

Paseo guiado por LightSwitch

Visual Studio LightSwitch

Otros recursos

Introducción a LightSwitch

Campo	Valor
(Foto)	Imagen del producto
(TITULO)	Nombre de producto
(SUBTÍTULO)	MSRP
(DESCRIPCIÓN)	Descripción

Compartir a través de

Tutorial: Crear la aplicación Vision Clinic

Requisitos previos

Pasos

Crear un proyecto

Para crear un proyecto

Defina las tablas

Cómo crear la entidad Paciente

Cómo crear las entidades Factura y Detalle de factura

Cómo crear una lista de opciones

Cómo crear una lista de opciones

Defina una relación

Cómo definir relaciones

Crear la entidad Cita

Cómo agregar la entidad Cita

Crear pantalla

Cómo crear una pantalla

Ejecutar la aplicación y escribir datos

Para ejecutar la aplicación

Conectar a una base de datos

Para enlazar a orígenes de datos

Modificar las entidades Productos y DescuentoDeProducto

Para modificar las entidades DescuentoDeProducto y Productos

Crear una pantalla de lista y detalles

Para crear una pantalla de lista y detalles

Cambiar el diseño de la pantalla

Para personalizar el diseño

Realizar cambios en la aplicación en ejecución.

Cómo personalizar una pantalla en tiempo de ejecución

Crear una consulta

Para crear una consulta parametrizada

Agregar un campo calculado

Para agregar un campo calculado

Para agregar un campo calculado a una pantalla

Crear una relación entre bases de datos

Cómo crear una relación entre bases de datos

Crear una pantalla para mostrar las facturas.

Cómo crear una pantalla

Modifique la pantalla Facturas

Cómo modificar una pantalla en la aplicación en ejecución

Defina la lógica de pantalla

Cómo definir la lógica de pantalla

Agregar más campos calculados

Cómo agregar campos calculado

Cómo agregar campos a una pantalla

Implemente la aplicación

Para publicar una aplicación de escritorio de 2 niveles

Vea también

Conceptos

Otros recursos

Recursos adicionales