Passo a passo: Criando uma tela

Este passo-a-passo mostra como usar o designer de tela LightSwitch para criar uma tela que exiba dados de cliente a partir do banco de dados Northwind fornecido como exemplo.O designer de tela é uma espaço de design visual que você pode usar para alterar a aparência de uma tela.

Essa explicação passo a passo mostra como realizar as seguintes tarefas:

• Criar uma tela

• Alterar o layout de uma tela

• Remover campos de uma tela

• Alterar a ordem de itens

• Alterar o nome de exibição de um item

• Mudar o tipo de controle de um item

• Personalizar uma tela de um aplicativo em execução

Pré-requisitos

Este passo-a-passo pressupõe que o banco de dados Northwind fornecido como exemplo esteja instalado em seu computador e que você o tenha adicionado como uma fonte de dados em seu projeto.

• Para obter informações sobre como configurar o banco de dados Northwind fornecido como exemplo, consulte Instalando o banco de dados de exemplo Northwind.

• Para obter informações sobre como adicionar o banco de dados Northwind fornecido como exemplo como uma fonte de dados em seu projeto, consulte Conectando-se a dados.

Criando uma Tela

Esta seção mostra como criar uma tela para exibir os dados dos cliente a partir do banco de dados Northwind fornecido como exemplo.Esta tela é dividida em duas partes.A primeira parte exibe uma lista-resumo de todos os clientes; a outra parte exibe detalhes sobre o cliente que está selecionado..

Para criar uma tela

1. No Gerenciador de Soluções, selecione Telas.

2. No menu Projeto, clique em Adicionar Tela.

   A caixa de diálogo Adicionar nova tela aparece.

3. Na caixa de diálogo Adicionar Nova Tela, em Selecionar um Modelo de Tela, selecione Tela de Lista e Detalhes.

4. Em Nome de Teladigite Clientes.

5. Na lista suspensa em Dados de Tela, <DataSourceName>.selecione Clientes.

6. Em Dados Adicionais a Incluir, selecione Detalhes de Cliente e selecione Pedidos do Cliente.

   Isto adiciona os campos da entidade Cliente à seção de detalhes da tela, juntamente com uma lista de pedidos feitos pelo cliente.

   O exemplo a seguir mostra a aparência da caixa de diálogo depois de executar as tarefas desta seção.

   

7. Clique em OK para criar a tela.

   O Designer de Tela aparece.

Alterar o layout da tela

A tela de Lista e Detalhes possui duas colunas.A coluna da esquerda é uma lista de clientes.A coluna da direita contém duas linhas.A linha superior contém os detalhes do cliente selecionado e a linha inferior contém os pedidos relacionados ao cliente selecionado.A árvore de conteúdo de tela do designer de tela mostra como essa lista é composta.

Esta seção mostra como alterar o layout da tela de modo que a tela contenha duas linhas em vez de duas colunas.A primeira linha conterá a lista de clientes.A linha inferior conterá duas colunas.A coluna da esquerda conterá os detalhes do cliente selecionado e a coluna da direita conterá os pedidos relacionados ao cliente selecionado.

Para alterar o layout da lista

1. Na Árvore de Conteúdo de Tela do Designer de tela, altere o layout do nó Clientes no nó Layout de Colunas para Layout de Linhas.Para fazer isso, clique na seta para baixo que aparece ao lado do nó Clientes.Em seguida, na lista suspensa, clique em Layout de Linhas.

2. Alterare o layout de Coluna de Detalhes de Layout de Linhas para Layout de Colunas.Para fazer isso, clique na seta para baixo que aparece ao lado do nó Detalhes de coluna, e então clique em Layout de Colunas.

Removendo Campos de uma Tela

Por padrão, a área da tela que exibe os detalhes de um cliente, chamada de Coluna de Detalhes, mostra todos os campos da fonte de dados.Se você não desejar que todos os campos apareçam, você pode remover aqueles que não deseja.Por exemplo, as etapas a seguir mostram como remover o campo País.

Para remover campos de uma tela

1. Na Árvore de Conteúdo da Tela, expanda o nó Detalhes de Cliente se ele ainda não estiver expandido.

2. Clique no campo País e, em seguida, na barra de comandos do Designer de tela, clique em Excluir.

Alterando a Ordem dos Campos

As etapas a seguir mostram como alterar a ordem dos campos, por exemplo, o campo CustomerID e o campo Postal Code.

Para alterar a ordem de campos

1. Na Árvore de Conteúdo da Tela, expanda o nó Detalhes de Cliente se ele ainda não estiver expandido.

2. Para mover o campo Identificação do Cliente para a parte inferior da coluna de detalhes, arraste-o para abaixo do campo Fax.

3. Para mover o campo CEP para a posição logo acima de Identificação do Cliente, arraste-o para entre os campos Fax e Identificação do Cliente.

Alterar o Tipo de Controle de um Campo

Você pode personalizar como um campo é exibido para o usuário.Por exemplo, você pode definir um campo de texto para aparecer como TextBox ou como Label.As etapas a seguir mostram como alterar um campo de exibição para um campo Label de modo que o usuário não possa alterar seu valor.

Para alterar o tipo de controle de um campo

1. Na Árvore de Conteúdo da Tela, expanda o nó Detalhes de Cliente se ele ainda não estiver expandido.

2. Selecione o campo Identificação do cliente e, na lista suspensa, selecione Rótulo

   Você pode repetir esta etapa para alterar outros campos.

3. Para testar as alterações, pressione F5 para executar o aplicativo.

Personalizando uma tela em um aplicativo em execução

Você também pode personalizar uma tela enquanto o aplicativo está sendo executado.Por exemplo, você pode remover campos, alterar a ordem dos campos, e alterar propriedades tais como o tipo de controle ou o alinhamento de rótulos.

Para personalizar uma tela em um aplicativo em execução

1. Se seu aplicativo já não estiver em execução, pressione F5 para iniciá-lo.

2. Em a barra de comandos da tela, clique em Criar Tela.

3. Na tela do Modo de Personalização, remova o campo Identificação do cliente da coluna de detalhes selecionando-o no nó Detalhes de Cliente clicando no botão Deletar ().

4. Mova o campo Fax no campo de CEP selecionando-o no nóDetalhes de Cliente e clicando no botão Mover para Baixo (.)

5. Altere o nome do campo Telefone para Número de telefone selecionando-o no nó Detalhes de cliente e em seguida, na janelaPropriedades, altere o valor da propriedade Nome de Exibição para Número de telefone.

6. Altere o tipo de exibição do campo Número de Telefone para Label selecionando o campo no nó Detalhes de Cliente e em seguida, na janela Propriedades, clicando na propriedade Tipo de Controle e selecionando o valor Rótulo.

7. Altere o alinhamento de rótulos na coluna de detalhes.Selecione o primeiro campo no nó Detalhes de Cliente, neste caso, o campo Nome da Empresa.Na janela de Propriedades, clique na propriedade Posição do Rótulo e selecione o valor Alinhado à direita.Repita esta etapa para todos os campos no nó Detalhes de cliente.

8. Para salvar suas alterações, clique em Salvar.Seu aplicativo agora exibe as alterações que você fez.

Próximas etapas

Por padrão, quando você seleciona uma fonte de dados para uma tela, todos os dados da fonte são exibidos.Se você desejar somente exibir um subconjunto dos dados, você pode criar uma consulta para definir os dados a exibir.Para obter mais informações, consulte Como: criar uma consulta usando o criador de consultas.

Consulte também

Outros recursos

Telas: A Interface do usuário do seu aplicativo.