Instruções passo a passo: criando o aplicativo Clínica de Visão no LightSwitch

Artigo
06/10/2015

Esta explicação passo a passo demonstra o processo de ponta a ponta para a criação de um aplicativo no LightSwitch. Você usará muitos recursos do LightSwitch para criar um aplicativo para uma clínica de visão fictícia. O aplicativo inclui recursos para agendar consultas e criar faturas.

Pré-requisitos

Baixe o banco de dados PrescriptionContoso em MSDN Code Gallery.

Etapas

Criar um projeto

Crie o projeto de aplicativo.
Definir tabelas

Adicione entidades de Paciente, Fatura e Detalhes da Fatura.
Criar uma lista de opções

Crie uma lista de valores.
Definir uma relação

Vincule tabelas relacionadas.
Adicionar outra entidade

Adicione a entidade de Consulta.
Criar uma tela

Crie uma tela para exibir informações sobre qualquer paciente.
Executar o aplicativo

Execute o aplicativo e insira os dados.
Conectar-se a um banco de dados

Conecte-se a um banco de dados externo.
Fazer alterações em entidades

Modifique as entidades Products e Product Rebate.
Criar uma tela de lista e detalhes

Crie uma tela para exibir produtos.
Alterar o layout da tela

Modifique o layout da tela Lista de Produtos.
Fazer alterações no tempo de execução

Faça alterações no aplicativo em execução.
Criar uma consulta

Crie uma consulta parametrizada e associe-a a uma tela.
Adicionar um campo calculado

Crie um campo computado e adicione-o a uma tela.
Criar uma relação entre bancos de dados

Crie uma relação virtual entre entidades em bancos de dados diferentes.
Criar a tela Faturas

Crie uma tela para exibir faturas.
Modificar a tela Faturas

Altere o layout da tela Faturas no aplicativo em execução.
Adicionar lógica de tela

Grave o código para calcular datas.
Adicionar mais campos calculados

Crie mais campos computados e adicione-os à tela Faturas.
Adicionar um cliente móvel

Adicione telas para exibir os pacientes e as consultas em um dispositivo móvel.

Criar um projeto

Como a primeira etapa na criação de um aplicativo LightSwitch, você criará um projeto para esse aplicativo.

Para criar um projeto

Na barra de menus, escolha Arquivo, Novo Projeto.

A Caixa de diálogo Novo Projeto é exibida.
Na lista Modelos Instalados, expanda o nó Visual Basic ou Visual C# e escolha o nó LightSwitch.
No painel central, escolha o modelo Aplicativo de Área de Trabalho do LightSwitch.
Na caixa de texto Nome, insira Vision Clinic e escolha o botão OK.

A janela Designer de Vision Clinic é aberta e as pastas necessárias para o projeto são adicionadas à janela Gerenciador de Soluções.

Definir tabelas

No LightSwitch, tabelas são conhecidas como entidades; elas modelam o objeto que os dados representam (nesse caso, uma coleção de pacientes). Aplicativos LightSwitch usam um modelo "formulários de dados" (ou seja, formulários ou telas que exibem dados de uma ou mais fontes). LightSwitch inclui um banco de dados intrínseco no qual você pode armazenar dados para seu aplicativo. Na próxima etapa, você criará uma tabela de banco de dados para armazenar as informações de pacientes.

Para criar a entidade Paciente

Na janela Designer de Vision Clinic, escolha o link Criar Nova Tabela.

O Designer de Dados é aberto. Em Solution Explorer, um nó Table1Items é exibido sob o nó Fontes de Dados no projeto Vision Clinic.Server.
Na janela Propriedades, nomeie a tabela Paciente e escolha a tecla Enter.

O nome na barra de título Designer de Dados é alterado para "Paciente", e o nome no Gerenciador de Soluções muda para "Patients.lsml".
Na coluna Nome, do Designer de Dados, escolha o link Adicionar propriedade, insira o nome e escolha a tecla Enter.

Observe que o tipo de dados apropriado, String, é exibido na coluna Tipo, e que a caixa de seleção do campo Obrigatório está marcada. Os usuários devem especificar um nome para cada cliente.
Na coluna Nome, escolha o link Adicionar propriedade e insira Street.
Na coluna Nome, escolha o link Adicionar propriedade e insira Street2.
Na coluna Obrigatório, desmarque a caixa de seleção.

A segunda linha de um endereço é opcional.
Na coluna Nome, escolha o link Adicionar propriedade e insira City.
Na coluna Nome, escolha o link Adicionar propriedade e insira State.
Na coluna Nome, escolha o link Adicionar propriedade e insira Zip.
Na coluna Nome, escolha o link Adicionar propriedade e insira PrimaryPhone.
Na coluna Tipo, abra a lista e escolha PhoneNumber.

PhoneNumber é um tipo de negócios personalizado que representa um padrão comum para a inserção e a formatação de números de telefone.
Na coluna Obrigatório, desmarque a caixa de seleção.
Na coluna Nome, escolha o link Adicionar propriedade e insira SecondaryPhone.
Na coluna Tipo, abra a lista e escolha PhoneNumber.
Na coluna Obrigatório, desmarque a caixa de seleção.
Na coluna Nome, escolha o link Adicionar campo e insira Email.
Na coluna Tipo, abra a lista e escolha EmailAddress.

EmailAddress é outro tipo personalizado de empresa que representa um endereço de email formatado corretamente.
Na coluna Obrigatório, desmarque a caixa de seleção.
Na coluna Nome, escolha o link Adicionar propriedade e insira PolicyNumber.
Na janela Propriedades, defina a propriedade Comprimento Máximo como 12.

Esse valor impedirá que usuários insiram um número de política que contenha mais de 12 caracteres.
Na janela Propriedades, desmarque a caixa de seleção de propriedades de Ativar Criado/Alterado.

É possível usar as propriedades criadas e alteradas para criar uma trilha de auditoria para a tabela, acompanhando quem criou um registro ou o editou recentemente. Mas você não precisa deles para esta entidade.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Em seguida, você criará mais duas entidades para representar uma fatura e itens de uma linha da fatura.

Para criar as entidades InvoiceDetail e Invoice

Em Gerenciador de Soluções, escolha o nó Data Sources e, na barra de menus, escolha Projeto, Adicionar Tabela.

Uma nova instância do Designer de Dados é aberta.
Na janela Propriedades, defina a propriedade Nome como Fatura e pressione a tecla Enter.
Na coluna Nome, escolha o link Adicionar propriedade, insira InvoiceDate e escolha a tecla Tab.
Na coluna Tipo, abra a lista e escolha DateTime.
Na coluna Nome, escolha o link Adicionar propriedade, insira InvoiceDue e escolha a tecla Tab.
Na coluna Tipo, abra a lista e escolha DateTime.
Na coluna Nome, escolha o link Adicionar propriedade, insira InvoiceStatus e escolha a tecla Tab.
Na coluna Tipo, abra a lista e escolha Inteiro.
Na coluna Nome, escolha o link Adicionar propriedade, insira ShipDate e escolha a tecla Tab.
Na coluna Tipo, abra a lista e escolha DateTime.
Em Gerenciador de Soluções, escolha o nó Data Sources e, na barra de menus, escolha Projeto, Adicionar Tabela.
Na janela Propriedades, defina a propriedade Nome como InvoiceDetail e pressione a tecla Enter.
Na coluna Nome, escolha o link Adicionar propriedade, insira Quantity e escolha a tecla Tab.
Na coluna Tipo, abra a lista e escolha Inteiro.
Na coluna Nome, escolha o link Adicionar propriedade e insira UnitPrice.
Na coluna Tipo, abra a lista e escolha Dinheiro.

Money é outro tipo personalizado de negócio que representa e formata corretamente a moeda.
Na janela Propriedades, digite $ na caixa de texto Símbolo de Moeda.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Criar uma lista de opções

Na próxima etapa, você criará uma lista de opções para a entidade Invoice. Ao criar uma lista de opções, você pode apresentar ao usuário um conjunto fixo de valores selecionáveis.

Para criar uma lista de opções

Em Gerenciador de Soluções, abra o menu de atalho do nó Invoices.lsml e, em seguida, escolha Abrir.
No Designer de Dados, escolha o campo InvoiceStatus.
Na janela Propriedades, escolha o link Lista de Opções.
Na caixa de diálogo Lista de Opções, digite os seguintes valores e escolha o botão OK.

Valor

Nome para exibição

0

Ativo

1

Pago

2

Atrasado

Quando este campo aparece em uma tela, o usuário poderá abrir uma lista e, em seguida, escolher alguns dos três valores de Nome para Exibição que você inseriu.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Valor	Nome para exibição
0	Ativo
1	Pago
2	Atrasado

Definir uma relação

Na próxima etapa, você definirá relações entre as entidades Paciente, Fatura e InvoiceDetail.

Para definir relações

Em Gerenciador de Soluções, abra o menu de atalho do nó Invoices.lsml e, em seguida, escolha Abrir.
Na barra de ferramentas do Designer de Dados, escolha o botão Relação.

A caixa de diálogo Adicionar Nova Relação aparece.
Na linha Nome:, escolha a coluna Para, abra a lista e selecione Paciente e clique no botão OK.

Uma relação um para muitos é criada entre as entidades Patient e Invoice. Um paciente pode ter várias faturas.
Na barra de ferramentas do Designer de Dados, escolha o botão Relação.

A caixa de diálogo Adicionar Novo Relacionamento é aberta.
Na linha Nome:, escolha a coluna Para, abra a lista e selecione InvoiceDetail.
Na linha Multiplicidade:, escolha a coluna De, abra a lista e selecione Um.
Na linha Multiplicidade:, escolha a coluna Para, abra a lista, selecione Muitos e escolha o botão OK.

Uma relação um para muitos é criada entre as entidades Invoice e InvoiceDetail. Uma fatura pode ter vários detalhes.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Criar a entidade Compromisso

Na próxima etapa, você adicionará mais uma entidade para representar um compromisso e, em seguida, adicionará uma relação e uma lista de opções.

Para adicionar a entidade Consulta

Em Gerenciador de Soluções, escolha o nó Data Sources e, na barra de menus, escolha Projeto, Adicionar Tabela.
Na janela Propriedades, selecione a caixa de texto Nome e insira Compromisso.
No Designer de Dados, escolha o texto de espaço reservado Adicionar propriedade na coluna Nome e insira AppointmentTime.
Na coluna Tipo, abra a lista e escolha DateTime.
No Designer de Dados, escolha o texto de espaço reservado Adicionar propriedade na coluna Nome e insira AppointmentDate.
Na coluna Tipo, abra a lista e escolha Data.
Na coluna Nome, escolha o texto de espaço reservado Adicionar propriedade e digite AppointmentType.
Na coluna Tipo, abra a lista e escolha Inteiro Curto.
Na coluna Nome, escolha o texto de espaço reservado Adicionar propriedade e digite DoctorNotes.
Aceite o tipo padrão, Cadeia de Caracteres e desmarque a caixa de seleção Obrigatório.
Na barra de ferramentas do Designer de Dados, escolha o botão Relação.
Na caixa de diálogo Adicionar Nova Relação, escolha a coluna Para na linha Nome:.
Abra a lista, escolha Paciente e escolha o botão OK.

Uma relação um para muitos é criada entre as entidades Patient e Appointment. Cada paciente pode ter várias consultas.
No Designer de Dados, escolha o campo AppointmentType.
Na janela Propriedades, escolha o link Lista de Opções.
Na caixa de diálogo Lista de Opções, digite os seguintes valores e clique no botão OK.

Valor

Nome para exibição

0

Anual

1

Acompanhamento

2

Emergência
Na barra Perspectiva, escolha a guia DesktopClient.
Na janela Propriedades, abra a lista Propriedade de Resumo e escolha AppointmentTime.

Essa propriedade define o campo que será exibido quando uma lista de nomeações aparecer.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Valor	Nome para exibição
0	Anual
1	Acompanhamento
2	Emergência

Criar uma tela

No próximo procedimento, você criará uma tela para exibir uma lista de pacientes.

Para criar uma tela

Em Gerenciador de Soluções, escolha o nó Telas e, na barra de menus, escolha Projeto, Adicionar Tela.

A caixa de diálogo Adicionar Nova Tela é aberta.
Na lista Selecionar um modelo de tela, escolha Tela de Grade Editável.
Na caixa de texto Nome da Tela, insira PatientList.
Na lista Dados da Tela, escolha Pacientes e clique no botão OK.

O Designer de Tela é aberto, exibindo uma representação hierárquica do layout da tela.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Criar uma tela Consulta

No próximo procedimento, você criará uma tela para agendar consultas.

Para criar a tela

No Gerenciador de Soluções, no projeto Vision Clinic.Server, abra o menu de atalho do nó Appointments.lsml e, em seguida, clique em Abrir.
Na barra Perspectiva, escolha a guia DesktopClient e, na barra de ferramentas, clique no botão Tela.
Na caixa de diálogo Adicionar Nova Tela, na lista Selecione um modelo de tela, escolha Nova Tela de Dados.
Na lista Dados da Tela, escolha Consulta e clique no botão OK.
No painel à esquerda do Designer de Tela, escolha o nó AppointmentTime.
Na janela Propriedades, desmarque a caixa de seleção Mostrar Data.

Essa alteração exibirá apenas a seção de tempo do controle de Seletor de Data e Hora.

Executar o aplicativo e inserir os dados

Agora você tem um aplicativo funcionando. Na próxima etapa, você irá executá-lo e inserir alguns dados.

Para executar o aplicativo

Escolha a tecla F5 para iniciar o aplicativo.
No aplicativo em execução, escolha a tela PatientList e escolha o botão de adição (+).

A caixa de diálogo Adicionar Novo Paciente é exibida.
Digite dados de um novo paciente e insira um valor que não seja válido no campo Email (por exemplo, john#example.com).

Quando você se move para fora do campo, uma borda vermelha aparece. O tipo de empresa EmailAddress tem regras de validação internas que podem detectar um endereço de email formatado incorretamente.
Corrija o erro, conclua a entrada de dados e, em seguida, escolha o botão OK.

Na barra de ferramentas do aplicativo, o botão Salvar agora está habilitado.
Adicione mais alguns pacientes.
Escolha o botão Salvar para salvar seus dados.

Agora você pode reorganizar as colunas na grade PatientList e classificar em qualquer coluna.
Na barra de menus, escolha Tarefas, Criar Nova Consulta.

A tela Criar Nova Consulta é aberta.
Insira os dados para uma consulta, escolhendo um paciente na lista Paciente e um horário posteriormente hoje.
Adicione mais algumas consultas para mais tarde hoje e escolha o botão Salvar para salvar os dados.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.

Conectar-se a um banco de dados

Na próxima etapa, você se conectará a um banco de dados externo que contém informações do produto.

Dica

Antes de executar esta etapa, você deve baixar o banco de dados PrescriptionContoso da Galeria de Códigos do MSDN e instalar o banco de dados seguindo as instruções no arquivo Install.htm.

Para anexar a uma fonte de dados

No Gerenciador de Soluções, escolha o nó Fontes de Dados.
Na barra de menus, escolha Projeto, Adicionar Fonte de Dados.
No assistente Anexar Fonte de Dados, escolha o ícone Base de dados e o botão Próximo.

A caixa de diálogo Escolher Fonte de Dados é aberta.

Dica

Se você tiver se conectado anteriormente a um banco de dados no Visual Studio, esta caixa de diálogo não aparecerá e você poderá ignorar o próximo passo.
Na lista, escolha Microsoft SQL Server e escolha o botão Continuar.
Na caixa de diálogo Propriedades da Conexão, insira os valores na tabela a seguir e clique no botão OK.

Field

Valor

Nome do servidor

(localdb)\v11.0

Fazer logon no servidor

Use a Autenticação do Windows

Selecionar ou inserir um nome de banco de dados

C:\Temp\PrescriptionContoso.mdf

A página do assistente Escolher Objetos do Banco de Dados aparece.
Expanda o nó Tabelas, escolha as tabelas Produto e ProductRebate e o botão Finalizar.

A fonte de dados C_TEMP_PRESCRIPTIONCONTOSO_MDFData é adicionada ao projeto, e as entidades são criadas para Products e ProductRebates.
Em Gerenciador de Soluções, abra o menu de atalho do nó C_TEMP_PRESCRIPTIONCONTOSO_MDFData, escolha Renomear e insira PrescriptionContoso.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Field	Valor
Nome do servidor	(localdb)\v11.0
Fazer logon no servidor	Use a Autenticação do Windows
Selecionar ou inserir um nome de banco de dados	C:\Temp\PrescriptionContoso.mdf

Modificar as entidades Products e ProductRebate

Na próxima etapa, você irá alterar as entidades ProductRebate e Products.

Para modificar as entidades ProductRebate e Products

Em Gerenciador de Soluções, abra o menu de atalho do nó ProductRebates.lsml e escolha Abrir.
Escolha o campo Rebate e altere o Tipo para Dinheiro.
Na janela Propriedades, digite $ na caixa de texto Símbolo de Moeda.
Em Gerenciador de Soluções, abra o menu de atalho do nó Products.lsml e escolha Abrir.
No Designer de Dados, escolha o campo MSRP e altere o Tipo para Dinheiro.
Na janela Propriedades, digite $ na caixa de texto Símbolo de Moeda.
Escolha o campo ProductImage e altere o Tipo para Imagem.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Criar uma tela de lista e detalhes

Na próxima etapa, você criará uma tela para exibir informações sobre o produto.

Para criar uma tela de detalhes e lista

No Designer de Dados, na barra Perspectiva, escolha a guia DesktopClient e, na barra de ferramentas, clique no botão Tela.

A caixa de diálogo Adicionar Nova Tela é aberta.
Na lista Selecionar um modelo de tela, escolha Tela de Lista e Detalhes.
Na caixa de texto Nome da Tela, insira ProductList.
Na lista Dados da Tela, escolha PrescriptionContoso.Products.
Na lista Dados Adicionais a Incluir, marque as caixas de seleção Detalhes do Produto e Product ProductRebates e escolha o botão OK.

Alterar o layout da tela

Na próxima etapa, você alterará o layout da tela ProductList.

Para personalizar o layout

No Designer de Tela, na Árvore de Conteúdo de Tela, escolha o nó Layout das Linhas |Detalhes do Produto.
Na lista Layout das Linhas, escolha Imagem e Texto.
Na lista de cada campo abaixo do nó Imagem e Texto, escolha os seguintes valores:

Field

Valor

(PICTURE)

Imagem do produto

(TITLE)

Nome do produto

(SUBTITLE)

MSRP

(DESCRIPTION)

Descrição
Escolha a tecla F5 para executar o aplicativo e exibir os resultados.
No aplicativo em execução, na barra de menus, selecione Tarefas, Lista de Produtos para exibir a tela ProductList.

Mantenha o aplicativo aberto. Na próxima etapa, você fará alterações no aplicativo em execução.

Fazendo alterações no aplicativo em execução

Na próxima etapa, você modificará a tela Lista de Produtos enquanto o aplicativo estiver em execução.

Para personalizar uma tela em tempo de execução

No canto inferior direito da tela Lista de Produtos, escolha o link Criar Tela.
No painel à esquerda, escolha o nó Grade de Dados | Descontos do Produto.
Na janela Propriedades, defina a propriedade Nome para Exibição como Descontos da Contoso.

O nome também muda na janela do aplicativo.
Escolha o campo MSRP e defina a propriedade Descrição como Preço sugerido antes de qualquer desconto.
Escolha o botão Salvar para retornar ao aplicativo em execução e exibir as alterações.

Por exemplo, você pode apontar para o campo MSRP para mostrar a descrição.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Criando uma consulta

Na próxima etapa, você criará uma consulta parametrizada e a associará a uma tela.

Para criar uma consulta parametrizada

No Gerenciador de Soluções, abra o menu de atalho do nó Produtos e escolha Adicionar Consulta.

O Designer de Consulta é aberto.
Na janela Propriedades, selecione a caixa de texto Nome e insira RelatedProducts.
No Designer de Consulta, escolha o link Adicionar Filtro.

Uma condição de filtro é adicionada à seção Filtrar.
Na segunda lista, escolha Categoria.
Na quarta lista, escolha Parâmetro.
Na quinta lista, escolha Adicionar Novo.

Um novo Parameter chamado Category do tipo String é adicionado à seção Parâmetros.
Em Gerenciador de Soluções, abra o menu de atalho do nó ProductList.lsml e, em seguida, escolha Abrir.
Na barra de ferramentas do Designer de Tela, escolha o botão Adicionar Item de Dados.
Na caixa de diálogo Adicionar Item de Dados, escolha o botão de opção Consulta.
Na coluna Nome, escolha PrescriptionContoso.RelatedProducts e selecione o botão OK.

Um nó RelatedProducts aparece no painel à esquerda.
Em Parâmetros da consulta, selecione o nó Categoria.
Na janela Propriedades, defina a propriedade Associação de Parâmetros como Products.SelectedItem.Category.
No painel central, expanda o nó Adicionar abaixo do nó DataGrid | Descontos do Contoso e escolha Produtos Relacionados.
Escolha a tecla F5 para executar o aplicativo e exibir os resultados.

Caso você abra a tela Lista de Produtos, uma lista de produtos relacionados é exibida para cada produto selecionado.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Adicionar um campo calculado

Na próxima etapa, você adicionará um campo que usa um valor computado. O valor computado será o preço de um produto após ser aplicado o desconto.

Para adicionar um campo computado

Em Gerenciador de Soluções, abra o menu de atalho do nó de entidade Products.lsml e, em seguida, escolha Abrir.
No Designer de Dados, na barra Perspectiva, escolha a guia Servidor.
Escolha o link Adicionar Propriedade, insira CurrentPrice e escolha a tecla Tab.
Na coluna Tipo, abra a lista e escolha Dinheiro.

Na janela Propriedades, na seção Geral, a caixa de seleção Computado é marcada como padrão.
Na janela Propriedades, digite $ na caixa de texto Símbolo de Moeda.
Na janela Propriedades, escolha o link Editar Método.

O Editor de Códigos é aberto e exibe o método CurrentPrice_Compute.

Adicione o seguinte código ao manipulador 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 o preço atual

Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

No próximo procedimento, você adicionará o campo computado à tela ProductList.

Para adicionar um campo computado a uma tela

Em Gerenciador de Soluções, abra o menu de atalho do nó de tela ProductList.lsml e, em seguida, escolha Abrir.
No painel à esquerda do Designer de Tela, mova o nó CurrentPrice abaixo do nó (Descrição) | Descrição no painel central.
Escolha a tecla F5 para executar o aplicativo e exibir os resultados.
Na tela ProductList, edite o campo Desconto ou MSRP.

O CurrentPrice é recomputado.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Criar uma relação entre bancos de dados

Na próxima etapa, você criará uma relação virtual entre entidades em dois bancos de dados e exibirá dados de duas fontes em uma única tela Lista e Detalhes.

Para criar uma relação entre bancos de dados

Em Gerenciador de Soluções, abra o menu de atalho do nó InvoiceDetails.lsml e escolha Abrir.
Em Designer de Dados, na barra de ferramentas, escolha o botão Relação.

A caixa de diálogo Adicionar Novo Relacionamento é aberta.
Na coluna Para, escolha o campo Nome, abra a lista e selecione Produto.

Uma nova seção é exibida na parte inferior da caixa de diálogo. A seção mostra os campos relacionados das duas entidades. Se necessário, você poderá alterar os campos relacionados a outro campo do mesmo tipo de dados ou definir vários campos relacionados como chaves.
Escolha o botão OK para salvar a relação.

O designer mostra a nova relação como uma linha pontilhada. Essa linha indica que as entidades estão em diferentes fontes de dados. Nesse caso, InvoiceDetails é do banco de dados intrínseco e Products é do banco de dados PrescriptionContoso.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Criar uma tela para exibir faturas

Na próxima etapa, você criará uma tela para exibir faturas.

Para criar uma tela

Em Gerenciador de Soluções, escolha o nó Telas e, na barra de menus, escolha Projeto, Adicionar Tela.

A caixa de diálogo Adicionar Nova Tela é aberta.
Na lista Selecionar um modelo de tela, escolha Tela de Lista e Detalhes.
Na caixa de texto Nome da Tela, insira InvoiceScreen.
Na lista Dados da Tela, escolha Faturas.
Na lista Dados Adicionais para Inclusão, escolha Detalhes da Fatura e Invoice InvoiceDetails e escolha o botão OK.
Expanda o nó Linha da Grade de Dados | Detalhes da Fatura e exclua o nó Identificação do Produto.
Para reorganizar os campos, mova os nós Quantidade e Preço Unitário no nó Produto.
Escolha a tecla F5 para executar o aplicativo.
Na barra de menu, escolha Tarefas, Tela de Fatura para exibir a tela.
No painel Faturas, escolha o botão de adição (+) e insira alguns dados da fatura.

O campo InvoiceStatus fornece uma lista suspensa de valores, e o campo Paciente contém um botão que abre uma caixa de diálogo que lista pacientes.
No painel Detalhes da Fatura, escolha o botão de adição +… e insira alguns dados detalhes da fatura.

O campo Produto fornece uma lista de produtos do banco de dados PrescriptionContoso.
Escolha o botão Salvar para salvar os dados de fatura e manter o aplicativo aberto.

No próximo procedimento, você fará alterações no aplicativo em execução.

Modificar a tela Faturas

Na próxima etapa, você alterará a tela Faturas no aplicativo em execução.

Para modificar uma tela do aplicativo em execução

No canto inferior direito da tela Tela de Fatura, escolha o link Criar Tela.
No painel à esquerda, escolha o nó Lista | Faturas, abra a lista Lista e escolha DataGrid.
Escolha o nó Paciente e a seta Mover para Cima na margem esquerda para mover o nó acima do nó Data da Fatura.
Escolha o botão Salvar para retornar ao aplicativo em execução e exibir as alterações.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Definir lógica da tela

Na próxima etapa, você adicionará código para definir a lógica padrão para datas de fatura.

Para definir a lógica de tela

Em Gerenciador de Soluções, abra o menu de atalho do nó Invoices.lsml e, em seguida, escolha Abrir.
Em Designer de Dados, na barra de ferramentas, abra a lista Gravar Código e escolha Invoice_Created.

O Editor de Códigos é aberto e exibe o método Invoice_Created.

No método Invoice_Created, adicione o seguinte código para definir o comportamento padrão das datas:

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);

Em Gerenciador de Soluções, abra o menu de atalho do nó Invoices.lsml e, em seguida, escolha Abrir.
No Designer de Dados, escolha o campo InvoiceDate.
Na barra de ferramentas, abra a lista Gravar Código e escolha InvoiceDate_Changed.

No método InvoiceDate_Changed, adicione o seguinte código para atualizar datas quando o InvoiceDate for alterado:

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);
    }

Em Gerenciador de Soluções, abra o menu de atalho do nó InvoiceDetails.lsml e escolha Abrir.
Em Designer de Dados, escolha o campo Produto.
Na barra de ferramentas, abra a lista Gravar Código e escolha Product_Changed.
No Editor de Códigos, adicione o seguinte código para definir o preço unitário e a quantidade padrão:
```
UnitPrice = Product.CurrentPrice
Quantity = 1
```
```
UnitPrice = Product.CurrentPrice;

Quantity = 1;
```
Escolha a tecla F5 para executar o aplicativo, abra a tela Fatura e adicione uma fatura.

Os campos de data, preço e quantidade são atualizados automaticamente agora.
Escolha o botão Salvar para salvar suas alterações.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Adicionar mais campos calculados

Na próxima etapa, você adicionará campos computados para Subtotal, Imposto e Totais às entidades InvoiceDetails e Invoices.

Para adicionar campos computados

Em Gerenciador de Soluções, abra o menu de atalho do nó InvoiceDetails.lsml e escolha Abrir.
No Designer de Dados, escolha o link Adicionar Propriedade, insira SubTotal e escolha a tecla Tab.
Na coluna Tipo, abra a lista e escolha Dinheiro.
Na janela Propriedades, digite $ na caixa de texto Símbolo de Moeda
Na janela Propriedades, na seção Propriedades Gerais, marque a caixa de seleção IsComputed e escolha o link Editar Método.

O Editor de Códigos é aberto e exibe o método SubTotal_Compute.

Adicione o seguinte código para computar o SubTotal:

result = Quantity * UnitPrice

result = Quantity * UnitPrice;

Em Gerenciador de Soluções, abra o menu de atalho do nó Invoices.lsml e, em seguida, escolha Abrir.
No Designer de Dados, escolha o link Adicionar Propriedade, insira Imposto e escolha a tecla Tab.
Na coluna Tipo, abra a lista e escolha Dinheiro.
Na janela Propriedades, digite $ na caixa de texto Símbolo de Moeda.
Na janela Propriedades, marque a caixa de seleção Computado e escolha o link Editar Método.

O Editor de Códigos é aberto e exibe o método Tax_Compute.

Substitua o método Tax_Compute pelo seguinte código para computar o 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);
    }

Em Gerenciador de Soluções, abra o menu de atalho do nó Invoices.lsml e, em seguida, escolha Abrir.
No Designer de Dados, escolha o link Adicionar Propriedade, insira Total e escolha a tecla Tab.
Na coluna Tipo, abra a lista e escolha Dinheiro.
Na janela Propriedades, digite $ na caixa de texto Símbolo de Moeda.
Na janela Propriedades, marque a caixa de seleção Computado e escolha o link Editar Método.

O Editor de Códigos é aberto e exibe o método Total_Compute.

Adicione o seguinte código para computar o Total:

result = GetSubTotal() + Tax

result = GetSubTotal() + Tax;

Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Na próxima etapa, você adicionará os novos campos à tela Faturas.

Para adicionar campos a uma tela

Em Gerenciador de Soluções, abra o menu de atalho do nó InvoiceScreen.lsml e, em seguida, escolha Abrir.
No painel central, expanda o nó Layout das Linhas | Detalhes da Fatura, expanda a lista Adicionar e escolha Imposto.

O campo Imposto aparece na seção Pilha Vertical | InvoiceDetails.
Abra a lista Adicionar novamente e escolha o campo Total.
Escolha a tecla F5 para executar o aplicativo e abra a tela Tela de Fatura.

Os campos Imposto e Total são exibidos para cada linha de fatura agora.
Escolha o link Criar Tela para alterar o modo de personalização.
No painel à esquerda, expanda o nó Linha da Grade de Dados | Detalhes da Fatura, expanda a lista Adicionar e escolha Subtotal.
Escolha o botão Salvar para salvar a alteração.

Um campo Subtotal agora é exibido na grade Detalhes de Fatura.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Adicionar um cliente móvel

Até agora, as telas que você criou são otimizadas por entrada de dados em um computador da área de trabalho. Algumas tarefas na clínica, como a exibição das informações do paciente e próximos compromissos são mais adequados para dispositivos móveis. É possível usar o LightSwitch para criar as telas que os usuários podem exibir em um navegador na maioria dos tablets e telefones. No próximo passo, você criará telas de cliente HTML para procurar pacientes e consultas.

Para adicionar um projeto de cliente HTML

Em Gerenciador de Soluções, abra o menu de atalho do nó Vision Clinic e escolha Adicionar Cliente.
Na caixa de diálogo Adicionar Cliente, escolha o item Cliente HTML e o botão OK.

Um projeto VisionClinic.HTMLClient é adicionado à solução.

Para adicionar uma tela para procurar pacientes

No Gerenciador de Soluções, no projeto Vision Clinic.Server, abra o menu de atalho do nó Patients.lsml e, em seguida, clique em Abrir.
Na barra Perspectiva, escolha a guia HTMLClient e, na barra de ferramentas, clique no botão Tela.

A caixa de diálogo Adicionar Nova Tela é aberta.
Na lista Selecionar um modelo de tela, escolha Tela Procurar Dados.
Na lista Dados da Tela, escolha Pacientes e clique no botão OK.

Para personalizar a tela de pesquisa

No Designer de Tela, na Árvore de Conteúdo de Tela, escolha o nó Lista | Pacientes.
Na lista Lista, escolha Lista Lado a Lado.

Essa opção exibirá um quadro para cada paciente. Por padrão, o quadro mostra todos os campos do paciente.
No nó Layout das Linhas | Patient, exclua todos os campos, exceto Nome, Sobrenome e Número de Política.
No Gerenciador de Soluções, no projeto Vision Clinic.HTMLClient, abra o menu de atalho do nó BrowsePatients.lsml e, em seguida, escolha Definir como Tela Inicial.
Escolha a tecla F5 para executar o aplicativo.

Se você redimensionar a janela do navegador, a disposição lado a lado será alterada à medida que a janela ficar mais estreita, otimizando a exibição para as telas de dispositivos menores, como telefones.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Em seguida, você adicionará uma tela para exibir os detalhes do paciente.

Para adicionar uma tela de detalhes

No Designer de Tela, na Árvore de Conteúdo de Tela, escolha o nó Lista Lado a Lado | Pacientes.
Na janela Propriedades, na seção Ações, escolha o link Toque em Item: Nenhum.
Na caixa de diálogo Editar Ação de Toque em Item, expanda a lista ShowTab, escolha viewSelected e o botão OK.
Na caixa de diálogo Adicionar Nova Tela, aceite os valores padrão e escolha o botão OK.
Escolha a tecla F5 para executar o aplicativo.
Na tela Procurar Pacientes, escolha um paciente para abrir a tela Exibir Paciente.

Os campos Telefone Primário, Telefone Secundário e Email são hiperlinks. Esses campos são baseados em tipos de negócios personalizados e na capacidade de iniciar um telefonema ou de enviar um email ser interna nos controles personalizados desses tipos.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Em seguida, você adicionará uma tela baseada em consulta para exibir as próximas consultas.

Para criar uma consulta

No Gerenciador de Soluções, abra o menu de atalho do nó Appointments.lsml e escolha Adicionar Consulta.
Na janela Propriedades, digite UpcomingAppointments na caixa de texto Nome.
No Designer de Consulta, escolha o link Adicionar Filtro.
Na terceira lista, escolha = (é maior que ou igual a).
Na quarta lista, escolha Global.
Na quinta lista, escolha Hoje.
Escolha o link Adicionar Filtro novamente.
Na segunda lista, escolha AppointmentTime.
Na terceira lista, escolha = (é maior que ou igual a).
Na quarta lista, escolha Global.
Na quinta lista, escolha Agora.
Escolha o link Adicionar Classificação e aceite os valores padrão de AppointmentDate e Crescente.
Escolha o link Adicionar Classificação novamente e aceite os valores padrão de AppointmentTime e Crescente.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Para criar uma tela de consulta

Em Gerenciador de Soluções, abra o menu de atalho do nó Appointments.lsml e, em seguida, escolha Abrir.
No Designer de Dados, na barra Perspectiva, escolha a guia HTMLClient.
Na janela Propriedades, abra a lista Propriedade de Resumo e escolha AppointmentTime.
No Designer de Dados, na barra de ferramentas, escolha o botão Tela.
Na caixa de diálogo Adicionar Nova Tela, na lista Selecione um modelo de tela, escolha Tela Procurar Dados.
Na lista Dados da Tela, escolha UpcomingAppointments e escolha o botão OK.

Para criar uma tela de detalhes de consulta

No Designer de Tela, na Árvore de Conteúdo de Tela, escolha o nó Lista | Próximos Compromissos.
Na janela Propriedades, na seção Ações, escolha o link Toque em Item: Nenhum.
Na caixa de diálogo Editar Ação de Toque em Item, expanda a lista ShowTab, escolha viewSelected e o botão OK.
Na caixa de diálogo Adicionar Nova Tela, aceite os valores padrão e escolha o botão OK.

Para adicionar navegação de tela

Em Gerenciador de Soluções, abra o menu de atalho do nó Vision Clinic.HTMLClient e escolha Editar Navegação de Tela.
No Designer de Aplicativos, escolha o link Tela Incluir e, em seguida, escolha Procurar Pacientes.
Escolha o link Tela Incluir novamente e, em seguida, escolha Procurar Próximos Compromissos.
Escolha a tecla F5 para executar o aplicativo.
Na tela Procurar Pacientes, escolha a seta para baixo ao lado da barra de título e, em seguida, escolha Procurar Próximos Compromissos para abrir a tela Compromissos.

A tela Compromissos agora tem um botão voltar, que você pode clicar para retornar à tela Pacientes. Quando você redimensiona a janela do navegador, o menu de navegação continua disponível, mas o título é truncado. Você corrigirá o problema adicionando qualquer código JavaScript no procedimento final.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Para modificar o título da tela

Em Gerenciador de Soluções, abra o menu de atalho do nó BrowseUpcomingAppointments.lsml e, em seguida, escolha Abrir.
No Designer de Tela, na barra de ferramentas, abra a lista Gravar Código e escolha criado.
No Editor de Códigos, adicione o seguinte código ao método criado:
```
screen.details.displayName = "Appointments";
```
Escolha a tecla F5 para executar o aplicativo.
Na tela Procurar Pacientes, escolha a seta para baixo ao lado da barra de título e, em seguida, escolha Procurar Próximos Compromissos para abrir a tela Compromissos.

O título agora é Compromissos.
No canto superior direito do aplicativo em execução, escolha o botão Fechar para retornar ao modo de design.
Na barra de menus, escolha Arquivo, Salvar todos para salvar seu trabalho.

Esse procedimento conclui a explicação passo a passo do Aplicativo Vision Clinic. Agora você deve ter uma compreensão básica do processo de criação de ponta a ponta de um aplicativo LightSwitch.

Nesse ponto você pode publicar seu aplicativo no IIS (Serviços de Informações da Internet) ou no Microsoft Azure, disponibilizando-o para outros usuários.

Esta explicação passo a passo demonstrou os recursos básicos do LightSwitch, mas é possível fazer muito mais com ela. Enquanto começa a criar seus próprios aplicativos, você pode saber mais recursos na documentação do produto.

Consulte também

Conceitos

LightSwitch Tour guiado

Visual Studio LightSwitch

Outros recursos

Introdução a LightSwitch

Field	Valor
(PICTURE)	Imagem do produto
(TITLE)	Nome do produto
(SUBTITLE)	MSRP
(DESCRIPTION)	Descrição

Compartilhar via

Instruções passo a passo: criando o aplicativo Clínica de Visão no LightSwitch

Pré-requisitos

Etapas

Criar um projeto

Para criar um projeto

Definir tabelas

Para criar a entidade Paciente

Para criar as entidades InvoiceDetail e Invoice

Criar uma lista de opções

Para criar uma lista de opções

Definir uma relação

Para definir relações

Criar a entidade Compromisso

Para adicionar a entidade Consulta

Criar uma tela

Para criar uma tela

Criar uma tela Consulta

Para criar a tela

Executar o aplicativo e inserir os dados

Para executar o aplicativo

Conectar-se a um banco de dados

Para anexar a uma fonte de dados

Modificar as entidades Products e ProductRebate

Para modificar as entidades ProductRebate e Products

Criar uma tela de lista e detalhes

Para criar uma tela de detalhes e lista

Alterar o layout da tela

Para personalizar o layout

Fazendo alterações no aplicativo em execução

Para personalizar uma tela em tempo de execução

Criando uma consulta

Para criar uma consulta parametrizada

Adicionar um campo calculado

Para adicionar um campo computado

Para adicionar um campo computado a uma tela

Criar uma relação entre bancos de dados

Para criar uma relação entre bancos de dados

Criar uma tela para exibir faturas

Para criar uma tela

Modificar a tela Faturas

Para modificar uma tela do aplicativo em execução

Definir lógica da tela

Para definir a lógica de tela

Adicionar mais campos calculados

Para adicionar campos computados

Para adicionar campos a uma tela

Adicionar um cliente móvel

Para adicionar um projeto de cliente HTML

Para adicionar uma tela para procurar pacientes

Para personalizar a tela de pesquisa

Para adicionar uma tela de detalhes

Para criar uma consulta

Para criar uma tela de consulta

Para criar uma tela de detalhes de consulta

Para adicionar navegação de tela

Para modificar o título da tela

Consulte também

Conceitos

Outros recursos

Recursos adicionais