Compartilhar via

Passo a passo: Criando o aplicativo de clínica de visão

  • Artigo

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

Pré-requisitos

Baixar o banco de dados de Galeria de código do MSDNPrescriptionContoso.

Etapas

  • Criar um Projeto

    Crie o projeto de aplicativo.

  • Definir Tabelas

    Adicione entidades de Pacientes, 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 os pacientes.

  • Executar o aplicativo

    Execute o aplicativo e insira dados.

  • Conectar a um Banco de Dados

    Conecte a um banco de dados externo.

  • Fazer Alterações em Entidades

    Modifique as entidades de Produtos e Descontos de Produtos.

  • Criar uma Lista e Tela de Detalhes

    Crie uma tela para exibir produtos.

  • Alterar o Layout da Tela

    Modifique o layout da tela com a Lista de Produtos.

  • Fazer Alterações em Tempo de Execução

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

  • Criar uma Consulta

    Crie uma consulta parametrizada e vincule-a a uma tela.

  • Adicionar um Campo Computado

    Crie um campo computado e adicione-o a uma tela.

  • Criar um Relacionamento entre Bancos de Dados

    Crie um relacionamento virtual entre entidades em bancos de dados diferentes.

  • Criar a Tela de Faturas

    Crie uma tela para exibir as faturas.

  • Modificar a Tela de Faturas

    Altere o layout da tela de Faturas no aplicativo em execução.

  • Adicionar Lógica de Tela

    Escreva código para calcular datas.

  • Adicionar Mais Campos Computados

    Crie mais campos computados e adicione-os a tela de Faturas.

  • Implantar o Aplicativo

    Publica o aplicativo como um aplicativo de Desktop de 2 camadas.

Criar um Projeto

A primeira etapa na criação de um aplicativo LightSwitch é abrir um novo projeto.

Para criar um projeto

  1. No menu Windows Iniciar, clique em Visual Studio 2012.

    O designer LightSwitch aparece.

  2. No menu Arquivo, clique em Novo Projeto.

    A Caixa de diálogo Novo Projeto é exibida.

  3. Na lista Modelos Instalados, selecione o nó LightSwitch.

  4. No painel central, selecione LightSwitchAplicativo (VB) ou LightSwitch Aplicativo (C#).

  5. No campo Nome, digite Clínica de Visão e, em seguida, clique em OK.

    A janela Designer de Clínica de Visão aparece, e as pastas necessárias para o projeto são adicionadas à janela Gerenciador de Soluções.

    O projeto visão clínica

Definir Tabelas

Em LightSwitch, tabelas são conhecidas como entidades; elas modelam o objeto que o dado representa, nesse caso um paciente. 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 que pode ser usado para 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

  1. Na janela Designer de Clínica de Visão, clique em Criar Nova Tabela.

    O Designer de Dados é exibido e um nó Table1Items aparece sob Fontes de Dados no Solution Explorer.

  2. Na janela Propriedades, selecione a propriedade Nome e digite Paciente, depois pressione Enter.

    O nome na barra de título Designer de Dados é alterado para "Paciente" e o nome no Gerenciador de Soluções muda para "Pacientes".

  3. Na coluna Nome clique em <Adicionar propriedade> e digite PrimeiroNome, então pressione Enter.

    Observe que o tipo de dado apropriado, String, aparece na coluna Tipo, e que a caixa de seleção do campo Requerido está marcado. Um paciente precisa ter um nome.

  4. Clique em <Adicionar propriedade> na coluna Nome e digite Sobrenome.

  5. Clique em <Adicionar propriedade> na coluna Nome e digite Rua.

  6. Clique em <Adicionar propriedade> na coluna Nome e digite Rua2.

  7. Na coluna Requerido, desmarque a caixa de seleção.

    A segunda linha de um endereço é opcional.

  8. Clique em <Adicionar propriedade> na coluna Nome e digite Cidade.

  9. Clique em <Adicionar propriedade> na coluna Nome e digite Estado.

  10. Clique em <Adicionar propriedade> na coluna Nome e digite CEP.

  11. Clique em <Adicionar propriedade> na coluna Nome e digite TelefonePrincipal.

  12. Na coluna Tipo, selecione PhoneNumber na lista suspensa.

    PhoneNumber é um tipo personalizado para negócio que representa um padrão comum para a inserção e formatação de números de telefone.

  13. Na coluna Requerido, desmarque a caixa de seleção.

  14. Clique em <Adicionar propriedade> na coluna Nome e digite TelefoneSecundário.

  15. Na coluna Tipo, selecione PhoneNumber na lista suspensa.

  16. Na coluna Requerido, desmarque a caixa de seleção.

  17. Clique em <Adicionar Campo> na coluna Nome e digite E-mail.

  18. Na coluna Tipo, selecione EmailAddress na lista suspensa.

    EmailAddress é outro tipo personalizado para negócio que representa um endereço de e-mail formatado corretamente.

  19. Na coluna Requerido, desmarque a caixa de seleção.

  20. Clique em <Adicionar propriedade> na coluna Nome e digite NúmerodaPolítica.

  21. Na janela Propriedades, selecione a propriedade Comprimento máximo e digite 12.

    Isso impedirá que usuários insiram um número de política com mais de 12 caracteres.

    A entidade de pacientes

  22. No menu File, clique em Save All 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 DetalhedaFatura e Fatura

  1. No Gerenciador de Soluções, clique em Data Sources. No menu Projeto, clique em Adicionar Tabela.

    Uma nova instância do Designer de Dados aparece.

  2. Na janela Propriedades, selecione a propriedade Nome. Digite Fatura e pressione Enter.

  3. Na coluna Nome, clique em <Adicionar propriedade>. Digite DatadaFatura e pressione Enter.

  4. Na coluna Tipo, selecione DataHora na lista suspensa.

  5. Na coluna Nome, clique em <Adicionar propriedade>. Digite VencimentodaFatura, depois pressione Enter.

  6. Na coluna Tipo, selecione DataHora na lista suspensa.

  7. Na coluna Requerido, desmarque a caixa de seleção.

  8. Na coluna Nome, clique em <Adicionar propriedade>. Digite StatusdaFatura, depois pressione Enter.

  9. Na coluna Tipo, selecione Inteiro na lista suspensa.

  10. Na coluna Nome, clique em <Adicionar propriedade>. Digite DatadeEnvio, depois pressione Enter.

  11. Na coluna Tipo, selecione DataHora na lista suspensa.

    A entidade de nota fiscal

  12. No Gerenciador de Soluções, clique em Data Sources. No menu Projeto, clique em Adicionar Tabela.

  13. Na janela Propriedades, selecione a propriedade Nome. Digite DetalhedaFatura, depois pressione Enter.

  14. Na coluna Nome, clique em <Adicionar propriedade>. Digite Quantidade, depois pressione Enter.

  15. Na coluna Tipo, selecione Inteiro na lista suspensa.

  16. Clique em <Adicionar propriedade> na coluna Nome e digite PreçodaUnidade.

  17. Na coluna Tipo, selecione Dinheiro na lista suspensa.

    Money é outro tipo personalizado para negócio que representa e formata corretamente a moeda.

    A entidade InvoiceDetails

  18. No menu File, clique em Save All 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 (Fatura). Uma lista de opções lhe permite apresentar ao usuário um conjunto fixo de valores selecionáveis.

Para criar uma lista de opções

  1. No Gerenciador de Soluções, clique duas vezes em Faturas.

  2. No Designer de Dados, selecione o campo StatusdaFatura.

  3. Na janela Propriedades, clique no link Lista de Opções.

    A caixa de diálogo lista de opções

    A caixa de diálogo Lista de Opções aparece.

  4. Na caixa de diálogo Lista de Opções, digite os seguintes valores e clique em OK.

    Valor

    Nome de Exibição

    0

    Active

    1

    Pago

    2

    Atrasado

    Quando este campo for exibido em uma tela, ele irá apresentar ao usuário uma lista suspensa que contém os três valores de Nome de Exibição que você inseriu.

  5. No menu File, clique em Save All para salvar seu trabalho.

Definir um relacionamento

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

Para definir relações

  1. No Gerenciador de Soluções, clique duas vezes em Faturas.

  2. Na barra de ferramentas Designer de Dados, clique em Relacionamento.

    A caixa de diálogo Adicionar Novo Relacionamento aparece.

  3. Na caixa de diálogo Adicionar Novo Relacionamento, selecione a coluna Para na linha Nome:. Selecione Paciente, e depois clique em OK.

    Um relacionamento de um para muitos é criada entre as entidades Patient (Paciente) e Invoice (Fatura); um paciente pode ter várias faturas.

  4. Na barra de ferramentas Designer de Dados, clique em Relacionamento.

    A caixa de diálogo Adicionar Novo Relacionamento aparece.

  5. Na caixa de diálogo Adicionar Novo Relacionamento, selecione a coluna Para na linha Nome:, e selecione DetalhedaFatura.

  6. Selecione a coluna De na linha Multiplicidade:, e selecione Um.

  7. Selecione a coluna Para na linha Multiplicidade:, e selecione Muitos, depois clique em OK.

    Uma relação de um para muitos é criada entre as entidades Invoice (Fatura) e InvoiceDetail (DetalhedaFatura); uma fatura pode ter vários detalhes da fatura.

    A relação entre a nota fiscal e InvoiceDetail

  8. No menu File, clique em Save All para salvar seu trabalho.

Criar a Entidade Consulta

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

Para adicionar a entidade Consulta

  1. No Gerenciador de Soluções, clique em Data Sources, depois no menu Projeto clique em Adicionar Tabela.

  2. Na janela Propriedades altere o Nome para Consulta.

  3. No Designer de Dados, clique em <Adicionar propriedade> na coluna Nome e digite HoradaConsulta.

  4. Na coluna Tipo, selecione DataHora na lista suspensa.

  5. Clique em <Adicionar propriedade> na coluna Nome e digite TipodeConsulta.

  6. Na coluna Tipo, selecione Inteiro Curto na lista suspensa.

  7. Clique em <Adicionar propriedade> na coluna Nome e digite AnotaçõesdoDoutor.

  8. Aceite o tipo padrão, Cadeia de Caracteres, e desmarque a caixa de seleção Requerido.

  9. Na barra de ferramentas Designer de Dados, clique em Relacionamento.

  10. Na caixa de diálogo Adicionar Novo Relacionamento, selecione a coluna Para na linha Nome:. Selecione Paciente, e depois clique em OK.

    Uma relação de um para muitos é criada entre as entidades Patient (Paciente) e Appointment (Consulta) ; um paciente pode ter várias consultas.

  11. No Designer de Dados, selecione o campo AppointmentType (TipodeCompromisso).

  12. Na janela Propriedades, clique no link Lista de Opções.

    A caixa de diálogo Lista de Opções aparece.

  13. Na caixa de diálogo Lista de Opções, digite os seguintes valores e clique em OK.

    Valor

    Nome de Exibição

    0

    Anual

    1

    Acompanhamento

    2

    Emergência

    A entidade de compromisso

  14. No menu File, clique em Save All para salvar seu trabalho.

Criar uma tela

Na próxima etapa, você criará uma tela para exibir uma lista de pacientes.

Para criar uma tela

  1. No Gerenciador de Soluções, clique no nó Telas, e depois, no menu Projeto, clique em Adicionar Tela.

    A caixa de diálogo Adicionar Nova Tela é aberta.

  2. Selecione Tela de Grade Editável na lista Selecionar um modelo de tela.

  3. Na caixa de texto Nome da Tela, digite ListadePacientes.

  4. Selecione a lista suspensa Dados da Tela, depois selecione Pacientes. Clique em OK.

    Definir a tela de PatientList

    O Designer de Tela é aberto, exibindo uma representação hierárquica do layout da tela.

  5. No menu File, clique em Save All para salvar seu trabalho.

Executar o Aplicativo e Inserir Dados

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

Para executar o aplicativo

  1. Pressione F5 para iniciar o aplicativo.

  2. No aplicativo em execução, selecione a tela ListadePacientes e, em seguida, clique no botão adicionar +….

    Uma caixa de diálogo Adicionar Novo Paciente aparece.

  3. Insira os dados para um novo paciente. No campo E-mail, insira um valor inválido, por exemplo john#example.com.

    Endereço de email inválido

    Quando você se move para fora do campo uma borda vermelha aparece. O tipo para negócio EmailAddress (Endereço de e-mail) tem regras de validação interna que podem detectar um endereço de email formatado incorretamente.

  4. Corrija o erro, conclua a entrada de dados, e, em seguida, clique em OK.

    O botão Salvar na barra de ferramentas do aplicativo agora está habilitado.

  5. Clique no botão adicionar + …. Adicione dados para um segundo paciente, depois clique em OK.

  6. Clique em Salvar para salvar seus dados.

    Agora você pode reorganizar as colunas na grade ListadePacientes e classificar segundo qualquer coluna.

  7. Clique no botão Fechar no canto superior direito do aplicativo em execução para retornar ao modo de design.

  8. No menu File, clique em Save All para salvar seu trabalho.

Conectar 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.

ObservaçãoObservação

Antes de executar essa etapa, você terá que baixar e instalar o banco de dados PrescriptionContoso. O banco de dados pode ser baixado de Galeria de código do MSDN. Siga as instruções no arquivo Install.htm para instalar o banco de dados.

Para anexar a uma fonte de dados

  1. No Gerenciador de Soluções, selecione o nó Fontes de Dados.

  2. No menu Projeto, clique em Adicionar Fonte de Dados.

    O assistente Anexar Fonte de Dados é aberto.

  3. No assistente Anexar Fonte de Dados, clique em Banco de Dados, depois clique em Próximo.

    A caixa de diálogo Escolher Fonte de Dados aparece.

    ObservaçãoObservação

    Se você tiver se conectado anteriormente a um banco de dados em LightSwitch, esta caixa de diálogo não aparece e você pode ignorar o próximo passo.

  4. Na caixa de diálogo Escolher Fonte de Dados, clique em Microsoft SQL Server (Cliente SQL), em seguida, clique em Continuar.

    A caixa de diálogo Propriedades de Conexão aparece.

  5. Na caixa de diálogo Propriedades de Conexão, insira os valores da tabela a seguir e clique em OK.

    Campo

    Valor

    Nome do servidor

    (localdb)\v11.0

    Faça logon no servidor

    Use a Autenticação do Windows

    Selecione ou insira um nome de banco de dados

    C:\Temp\PrescriptionContoso.mdf

    Propriedades de conexão

    A página do assistente Escolha seus Objetos do Banco de Dados aparece.

  6. Expanda o nó Tables.

  7. Selecione as tabelas Produto e DescontodoProduto, em seguida, clique em Concluir.

    A fonte de dados C_TEMP_PRESCRIPTIONCONTOSO_MDFData é adicionada ao projeto e são criadas entidades para Produtos e DescontodoProduto.

  8. No Gerenciador de Soluções, clique com o botão direito em C_TEMP_PRESCRIPTIONCONTOSO_MDFData e clique em Renomear, depois digite PrescriptionContoso

  9. No menu File, clique em Save All para salvar seu trabalho.

Modificar as Entidades Produtos e DescontodoProduto

Na próxima etapa, você fará algumas alterações nas entidades DescontodoProduto e Produtos.

Para modificar as entidades DescontodoProduto e Produtos

  1. No Gerenciador de Soluções, clique duas vezes no nó DescontodoProduto.

  2. Selecione o campo Desconto e altere o Tipo para Dinheiro.

  3. No Gerenciador de Soluções, clique duas vezes no nó Produtos.

  4. No Designer de Dados, selecione o campo MSRP e altere o Tipo para Dinheiro.

  5. Selecione o campo ImagemdoProduto e altere o Tipo para Imagem.

  6. No menu File, clique em Save All para salvar seu trabalho.

Criar uma Lista e Tela de Detalhes

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

Para criar uma lista e tela de detalhes

  1. No Gerenciador de Soluções, selecione o nó Telas. No menu Projeto, clique em Adicionar Tela.

  2. Na caixa de diálogo Adicionar Nova Tela, selecione Lista e Tela de Detalhes na lista Selecione um modelo de tela.

  3. No campo Nome da Tela, digite ListadeProdutos.

  4. Selecione a lista suspensa Dados da Tela e em seguida PrescriptionContoso.Products.

  5. Na lista Dados Adicionais para Incluir, selecione ambas as caixas de seleção Detalhes do Produto e DescontodoProduto do Produto, em seguida clique em OK.

Alterar o Layout da Tela

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

Para personalizar o layout

  1. No Designer de Tela, selecione o nó Layout de Linhas |Detalhes do Produto na Árvore de Conteúdo da Tela.

  2. Na lista suspensa Layout de Linhas, selecione Imagem e Texto.

  3. Selecione os seguintes valores da lista suspensa para cada campo abaixo do nó Imagem e Texto:

    Campo

    Valor

    (IMAGEM)

    Imagem do Produto

    (TÍTULO)

    Nome do Produto

    (LEGENDA)

    MSRP

    (DESCRIÇÃO)

    Descrição

    Layout de texto e imagem

  4. Pressione F5 para executar o aplicativo e exibir os resultados.

  5. No aplicativo em execução, clique no menu ListadeProdutos para exibir a tela.

    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 está em execução.

Para personalizar uma tela em tempo de execução

  1. Na tela de Lista de Produtos , clique no botão de Criar Tela no canto inferior direito.

  2. No painel esquerdo, selecione o nó Grade de Dados | Descontos do Produto.

  3. Na janela Propriedades, altere a propriedade Nome de Exibição para Descontos do Contoso.

    O nome também muda na janela do aplicativo.

  4. Selecione o campo MSRP e altere a propriedade Descrição para Preço sugerido antes de quaisquer descontos..

    Personalização de tempo de design

  5. Clique no botão Salvar para retornar ao aplicativo em execução e exibir as alterações. Deixe o mouse sobre o campo MSRP para ver a descrição.

  6. Clique no botão Fechar no canto superior direito do aplicativo em execução para retornar ao modo de design.

  7. No menu File, clique em Save All para salvar seu trabalho.

Criando uma Consulta

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

Para criar uma consulta parametrizada

  1. No Gerenciador de Soluções, selecione o nó Produtos. No menu Projeto, clique em Adicionar Consulta.

    O Designer de Consulta aparece.

  2. Na janela Propriedades, selecione o campo Nome e digite ProdutosRelacionados.

  3. No Designer de Consulta, clique em Adicionar Filtro.

    Uma condição de filtro é adicionada à seção Filtro.

  4. Na segunda lista suspensa, selecione Categoria.

  5. Na quarta lista suspensa, selecione Parâmetro.

  6. Na quinta lista suspensa, clique em Adicionar Novo.

    Um novo Parameter (parâmetro) chamado Category (categoria) do tipo String (cadeia de caracteres) é adicionado à seção Parâmetros.

    A consulta RelatedProducts

  7. No Gerenciador de Soluções, clique duas vezes no nó ListadeProdutos para abrir o Designer de Tela.

  8. Na barra de ferramentas Designer de Tela, clique em Adicionar Item de Dados.

    A caixa de diálogo Adicionar Item de Dados aparece.

  9. Na caixa de diálogo Adicionar Item de Dados, clique em Consulta. Na coluna Nome selecione PrescriptionContoso.RelatedProducts, depois clique em OK.

    Um nó ProdutosRelacionados aparece no painel esquerdo.

  10. Selecione o nó Categoria em Parâmetros da Consulta.

  11. Na janela Propriedades, selecione a propriedade Associação de Parâmetros e digite Products.SelectedItem.Category.

  12. No painel central, expanda o nó Adicionar abaixo do nó Grade de Dados | Descontos do Contoso e clique em Produtos Relacionados.

    Adicionando produtos relacionados

  13. Pressione F5 para executar o aplicativo e exibir os resultados.

    Abra a tela Lista de Produtos e observe que é exibida uma lista de produtos relacionados para cada produto selecionado.

  14. Clique no botão Fechar no canto superior direito do aplicativo em execução para retornar ao modo de design.

  15. No menu File, clique em Save All para salvar seu trabalho.

Adicionar um Campo Computado

Na próxima etapa, você irá 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

  1. No Gerenciador de Soluções, clique duas vezes no nó da entidade Produtos.

  2. No Designer de Dados, clique em <Adicionar Propriedade>. Digite PreçoAtual e, em seguida, clique Guia.

  3. Na coluna Tipo, selecione Dinheiro na lista suspensa.

    Na janela Propriedades, embaixo de Geral a propriedade É Computado por padrão é selecionada.

  4. Na janela Propriedades, clique no link Editar Método.

    O Editor de Código aparece e o método CurrentPrice_Compute é exibido.

  5. 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

  6. No menu File, clique em Save All para salvar seu trabalho.

Na próxima etapa, você irá adicionar o campo computado à tela ListadeProdutos.

Para adicionar um campo computado a uma tela

  1. No Gerenciador de Soluções, clique duas vezes no nó da tela ListadeProdutos.

  2. No painel esquerdo do Designer de Tela, selecione o nó PreçoAtual e o arraste para baixo do nó (Descrição) | Descrição, no painel central.

    Preço atual depois de arrastar e soltar

  3. Pressione F5 para executar o aplicativo e exibir os resultados.

  4. Na tela ListadeProdutos, edite o campo Desconto ou MSRP. O PreçoAtual é recalculado. Clique no botão Fechar para retornar ao modo de design.

  5. Clique no botão Fechar no canto superior direito do aplicativo em execução para retornar ao modo de design.

  6. No menu File, clique em Save All para salvar seu trabalho.

Criar um Relacionamento entre Bancos de Dados

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

Para criar uma relação entre bancos de dados

  1. No Gerenciador de Soluções, clique duas vezes no nó da entidade DetalhedaFatura.

  2. No Designer de Dados, clique no botão Relação da barra de ferramentas.

  3. Na caixa de diálogo Adicionar Nova Relação, selecione o campo Nome na coluna Para e selecione Produto.

    Uma nova seção é exibida na parte inferior da caixa de diálogo. Mostra os campos relacionados das duas entidades. Se necessário, você poderia mudar os campos relacionados para outro campo do mesmo tipo de dado, ou definir vários campos relacionados como chaves.

    Uma relação entre bancos de dados

  4. Clique em OK para salvar a relação.

    A nova relação é mostrada como uma linha pontilhada no designer. Isso indica que as entidades estão em diferentes fontes de dados, neste caso InvoiceDetails (DetalhedaFatura) do banco de dados intrínseco e Products (Produtos) do banco de dados PrescriptionContoso.

  5. No menu File, clique em Save All para salvar seu trabalho.

Criar uma Tela para Exibir Faturas

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

Para criar uma tela

  1. No Gerenciador de Soluções selecione o nó Telas. No menu Projeto, clique em Adicionar Tela.

  2. Na caixa de diálogo Adicionar Nova Tela, selecione Lista e Tela de Detalhes na lista Selecione um modelo de tela.

  3. Na caixa de texto Nome da Tela:, digite TeladeFatura.

  4. Selecione a lista suspensa Dados de Tela e depois Faturas.

  5. Na lista Dados Adicionais para Incluir:, selecione Detalhes da Fatura e DetalhedaFatura da Fatura e depois clique em OK .

    O layout de InvoiceScreen

  6. Expanda o nó Linha da Grade de Dados | Detalhe da Fatura. Selecione o nó ID do Produto e o exclua.

  7. Para reordenar os campos, clique no nó PreçoUnitário e arraste-o sob o nó Produto.

  8. Pressione F5 para executar o aplicativo. No Menu, clique em Tela de Fatura para exibir a tela.

  9. No painel Faturas, clique no botão adicionar + ….

    Insira alguns dados de fatura. Observe como o campo StatusdaFatura fornece uma lista suspensa de valores, e o campo Paciente contém um botão que abre uma caixa de diálogo que possui uma lista de pacientes.

  10. No painel Detalhes da Fatura, clique no botão adicionar + ….

    Insira alguns dados de detalhe de fatura. Observe como o campo Produto fornece uma lista suspensa de produtos do banco de dados PrescriptionContoso.

  11. Clique no botão Salvar para salvar seus dados de fatura.

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

Modificar a Tela de Faturas

Na próxima etapa, você fará algumas alterações na tela de Faturas do aplicativo em execução.

Para modificar uma tela do aplicativo em execução

  1. Da Tela de Fatura, clique no botão Design de Tela no canto superior direito.

  2. No painel esquerdo, selecione o nó Lista | Faturas. Selecione GradedeDados da lista suspensa Lista.

  3. Selecione o nó Paciente. Use a seta MoverParaCima na margem esquerda para movê-lo para cima do nó Data da Fatura.

    A tela de nota fiscal personalizada

  4. Clique em Salvar para retornar ao aplicativo em execução e exibir as alterações.

  5. Clique no botão Fechar no canto superior direito do aplicativo em execução para retornar ao modo de design.

  6. No menu File, clique em Save All para salvar seu trabalho.

Definir a Lógica de 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

  1. No Gerenciador de Soluções, clique duas vezes no nó da entidade Faturas.

  2. No Designer de Dados clique na lista suspensa Escrever Código na barra de ferramentas. Clique no link Fatura_Criada.

    O Editor de Código é aberto e exibe o método Invoice_Created (Fatura_Criada).

  3. No método Invoice_Created (Fatura_Criada), adicione o seguinte código para definir o comportamento padrão para 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);

  4. No Gerenciador de Soluções, clique duas vezes no nó da entidade Faturas.

  5. No Designer de Dados, selecione o campo InvoiceDate (DatadaFatura).

  6. Clique na lista suspensa Escrever Código na barra de ferramentas, e depois clique no link DatadeFatura_Alterada.

  7. No método InvoiceDate_Changed (DatadeFatura_Alterada), adicione o seguinte código para atualizar datas quando o DatadeFatura 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);
    }

  8. No Gerenciador de Soluções, clique duas vezes no nó DetalhedeFatura.

  9. No Designer de Dados selecione o campo Produto, clique na lista suspensa Escrever Código na barra de ferramentas e então clique no link Produto_Alterado.

  10. No Editor de Código, adicione o seguinte código para definir o preço da unidade e a quantidade padrão:

    UnitPrice = Product.CurrentPrice
Quantity = 1

    UnitPrice = Product.CurrentPrice;

Quantity = 1;

  11. Pressione F5 para executar o aplicativo e exibir as alterações.

    Abra a tela Fatura e adicione uma nova fatura. Os campos de data, preço e quantidade são atualizados automaticamente agora.

  12. Clique no botão Salvar para salvar suas alterações.

  13. Clique no botão Fechar no canto superior direito do aplicativo em execução para retornar ao modo de design.

  14. No menu File, clique em Save All para salvar seu trabalho.

Adicionar Mais Campos Computados

Na próxima etapa, você irá adicionar campos computados para o SubTotal, Taxa e Totais às entidades DetalhedeFatura e Faturas.

Para adicionar campos computados

  1. No Gerenciador de Soluções, clique duas vezes no nó da entidade DetalhedaFatura.

  2. No Designer de Dados, clique em <Adicionar Propriedade>. Digite SubTotal, em seguida clique na Guia.

  3. Na coluna Tipo, selecione Dinheiro na lista suspensa.

  4. Na janela Propriedades, embaixo de Propriedades Gerais, marque a caixa de seleção IsComputed.

  5. Clique no link Editar Método.

    O Editor de Código aparece e exibe o método SubTotal_Compute.

  6. Adicione o seguinte código para computar o SubTotal:

    result = Quantity * UnitPrice

    result = Quantity * UnitPrice;

  7. No Gerenciador de Soluções, clique duas vezes no nó da entidade Faturas.

  8. No Designer de Dados, clique em <Adicionar Propriedade>. Digite Taxa e, em seguida, clique na Guia.

  9. Na coluna Tipo, selecione Dinheiro na lista suspensa.

  10. Na janela Propriedades, selecione a caixa de seleção IsComputed.

  11. Clique no link Editar Método.

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

  12. Substitua o método Tax_Compute pelo seguinte código para computar a Tax (Taxa):

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

  13. No Gerenciador de Soluções, clique duas vezes no nó da entidade Faturas.

  14. No Designer de Dados, clique em <Adicionar Propriedade>. Digite Total, depois clique em Guia.

  15. Na coluna Tipo, selecione Dinheiro na lista suspensa.

  16. Na janela Propriedades, selecione a caixa de seleção IsComputed.

  17. Clique no link Editar Método.

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

  18. Adicione o seguinte código para computar a Tax (Taxa):

    result = GetSubTotal() + Tax

    result = GetSubTotal() + Tax;

  19. No menu File, clique em Save All para salvar seu trabalho.

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

Para adicionar campos a uma tela

  1. No Gerenciador de Soluções, clique duas vezes no nó da tela TeladeFatura.

  2. No painel central, selecione e expanda o nó Layout das Linhas | Detalhes da Fatura.

  3. Selecione e expanda a lista suspensa Adicionar e selecione Taxa.

    O campo Taxa é adicionado á seção Pilha Vertical | DetalhedaFatura.

  4. Selecione a lista suspensa Adicionar novamente, e selecione o campo Total.

  5. Pressione F5 para executar o aplicativo e exibir os resultados.

    Abra a tela Tela de Fatura. Os campos Taxa e Total são exibidos para cada linha de fatura agora.

  6. Clique no botão Design de Tela para mudar para o modo de personalização.

  7. No painel esquerdo, selecione o nó Linha da Grade de Dados | Detalhe de Fatura e o expanda.

  8. Clique na lista suspensa Adicionar e selecione SubTotal.

  9. Clique em Salvar para salvar a alteração. Um campo SubTotal é exibido na grade Detalhes de Fatura agora.

    A tela de nota fiscal atualizada

  10. Clique no botão Fechar no canto superior direito do aplicativo em execução para retornar ao modo de design.

  11. No menu File, clique em Save All para salvar seu trabalho.

Implantar o Aplicativo

Na próxima etapa, você implantará o aplicativo como um aplicativo de desktop de 2 camadas.

Para publicar um aplicativo de desktop de 2 camadas

  1. No Gerenciador de Recursos selecione o nó Clínica de Visão, depois, no menu Construir, clique em Publicar Clínica de Visão.

    O Assistente de Publicação de Aplicativos LightSwitch aparece.

  2. Na página Bem-vindo ao Assistente para Publicação LightSwitch verifique que Área de Trabalho está selecionada, em seguida clique em Próximo.

  3. Na página Serviços de Aplicativos, verifique que Local está selecionado, depois clique em Próximo.

  4. Na página Especifique Preferência de Publicação, selecione o campo Onde você deseja que os arquivos do aplicativo sejam colocados? e digite C:\Publicação.

  5. Na seção Como deseja publicar o banco de dados padrão?, selecione Publicar diretamente para o banco de dados agora, depois clique em Próximo.

  6. Na página Banco de Dados de Aplicativo LightSwitch – Conexão de Banco de Dados SQL, aceite os valores padrões de cadeia de caracteres de conexão e, em seguida, clique em Próximo.

  7. Na página Instalar Pré-requisitos, aceite as configurações padrões, depois clique em Próximo.

  8. Na página Outras Informações de Conexão, aceite as configurações padrões e, em seguida, em clique em Publicar.

  9. No File Explorer, localize a pasta C:\Publicação e clique duas vezes no arquivo Setup. exe para instalar o aplicativo no computador local.

    ObservaçãoObservação

    Para instalar o aplicativo em um computador diferente, copie os conteúdos da pasta Publicação e todas as suas subpastas. Antes de instalar, você deve concluir as etapas descritas no arquivo Install.htm, que pode ser encontrado na pasta Publicação.

  10. Se uma caixa de diálogo Instalar o Aplicativo – Aviso de Segurança aparecer, clique em Instalar.

    O aplicativo Clínica de Visão será instalado e iniciado.

    O aplicativo concluído

  11. Insira alguns dados e verifique se o aplicativo funciona conforme o esperado.

    Dica

    Se quiser executar o aplicativo Clínica de Visão novamente, você pode abri-lo pelo menu Iniciar.

Isso conclui o passo-a-passo do Aplicativo Clínica de Visão. Agora você deve ter uma compreensão básica do processo ponta-a-ponta de criação de um aplicativo LightSwitch.

Esta explicação passo-a-passo demonstrou os recursos básicos do LightSwitch, mas pode-se fazer muito mais com o LightSwitch. Enquanto começa a criar seus próprios aplicativos, você pode aprender sobre mais recursos na documentação do produto.

Consulte também

Conceitos

LightSwitch Tour guiado

Visual Studio LightSwitch

Outros recursos

Introdução com LightSwitch