Compartilhar via

Como criar uma tela HTML usando o Designer de Tela

  • Artigo

Usando o designer da tela, você pode alterar a aparência de telas em um cliente HTML para um aplicativo Visual Studio LightSwitch.Por exemplo, você pode usar o designer para realizar as seguintes tarefas.

Campos e comandos

  • Adicionar um grupo de informações em uma tela.

  • Modificar o layout de um grupo.

  • Adicione um botão.

  • Adicionar um item.

  • Remover um item.

  • Mover um item.

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

  • Alterar a posição do rótulo de um item.

  • Alterar o tamanho de um item.

  • Mostrar ou esconder um item.

  • Mudar o tipo de controle de um item .

  • Adicionar um controle personalizado a uma tela.

  • Desfazer alterações.

Coleção de dados

  • Escolher se uma coleção exibe dados quando a tela carregar pela primeira vez.

  • Ativar ou desativar paginação.

  • Ativar ou desativar ordenação.

  • Ativar ou desativar pesquisa.

Adicionar um Grupo de Informações em uma Tela.

  1. Em Árvore de Conteúdo da Tela, escolha o nó para o qual você deseja adicionar um grupo de informações.

  2. Na barra de ferramentas Selecione o designer , abra a lista de Adicionar o item de layout , escolha Grupo.

    Um novo grupo aparece.

  3. Na janela de Propriedades , na caixa de texto Nome , digite um nome para o grupo.

  4. Em Árvore de Conteúdo da Tela, escolha o novo grupo, abra a lista de Adicionar , escolha os itens que você deseja exibir no grupo.

Modificar o Layout de um Grupo.

  1. Em Árvore de Conteúdo da Tela, abra a lista para um grupo que você deseja alterar.

    A lista a seguir mostra todos os tipos de controle que estão disponíveis para o grupo.

  2. Na lista, escolha um tipo de controle.

    O tipo de controle que você escolher afeta o layout de grupo.Para obter mais informações sobre cada tipo de controle, consulte Referência: Propriedades de Designer de tela.

Adicione um botão

  1. Em Árvore de Conteúdo da Tela, escolha o nó onde você deseja que o botão apareça.

  2. Na barra de ferramentas Selecione o designer , escolha Adicionar o item de layout, escolha Botão.

    A caixa de diálogo Adicionar Botão aparece.

Adicionar um item

  • Na Lista de membros de tela do Designer de tela, arraste um item (por exemplo, um campo ou um comando) para o local apropriado em Árvore de Conteúdo da Tela.

    Quando você arrasta o item, o ponteiro indica se você pode mover o item para um local especificado.Se o ponteiro se altera a um círculo com uma barra por ele, você não pode soltar o item naquele local.

    Para obter informações sobre como adicionar campos personalizados a uma tela, consulte Como adicionar uma propriedade local a uma tela HTML.

Remover um item

  1. Em Árvore de Conteúdo da Tela, escolha o item (por exemplo, um campo ou um comando) que você deseja remover.

  2. Na barra de ferramentas Selecione o designer , escolha o botão de Excluir .

Mover um item

  • Em Árvore de Conteúdo da Tela, arraste um item (por exemplo, um campo ou um comando) para um local diferente.

    Por exemplo, arraste o campo de PostalCode de modo que aparece no campo de Country , ou arraste o botão de Editar de modo que aparece sobre o botão de Excluir .

    ObservaçãoObservação

    Quando você arrasta um campo, o ponteiro indica se você pode mover o item para um local especificado.Se o ponteiro se altera a um círculo com uma barra por ele, você não pode mover o item para esse local.

Alterar o Nome de Exibição de um Item

  1. Em Árvore de Conteúdo da Tela, escolha o item (por exemplo, um campo ou um comando).

  2. Na janela de Propriedades , na caixa de texto em Nome para Exibição, digite um nome diferente para o item.

    Se você alterar o nome para exibição de um item, você altera somente o nome que aparece na tela.A propriedade de Name de item permanece o mesmo.

Alterar a Posição do Rótulo de um Item.

  1. Em Árvore de Conteúdo da Tela, escolha o campo.

  2. Na janela de Propriedades , abra a lista em Posição do Rótulo, e escolha a posição que você deseja.

    A tabela a seguir descreve cada opção.

    Posição do rótulo

    Descrição

    Alinhado à esquerda

    O rótulo aparece próximo ao lado esquerdo do controle.

    Alinhado à direita

    O rótulo aparece próximo do lado direito do controle.

    Superior

    O rótulo aparece acima do controle.

    Oculto

    Nenhum rótulo aparece para o controle.

    Nenhum

    Nenhum rótulo aparece para o controle, e alinhou onde o rótulo estaria.

Alterar o Tamanho de um Item

  1. Em Árvore de Conteúdo da Tela, escolha o item (por exemplo, um campo ou um comando).

  2. Na janela de Propriedades , em Redimensionamento, escolha um tamanho diferente para a largura e a altura do controle.

    ObservaçãoObservação

    Alguns tipos de controles não suportam as propriedades de altura.

    Para obter informações sobre cada configuração, consulte Referência: Propriedades de Designer de tela.

Mostrar ou Esconder um Item

  1. Em Árvore de Conteúdo da Tela, escolha o item (por exemplo, um campo ou um comando).

  2. Na janela de Propriedades , marque ou desmarque a caixa de seleção para a propriedade de É Visível .

    ObservaçãoObservação

    O rótulo (Não visível) aparece no designer ao lado dos itens que não são visíveis quando o aplicativo é executado.

Mudar o Tipo de Controle de um Item

Adicionar um Controle Personalizado a uma Tela.

  1. Em Árvore de Conteúdo da Tela, escolha qualquer grupo.

  2. Na barra de ferramentas do Designer de tela , abra a lista de Adicionar o item de layout , escolha Controle Personalizado.

    Para obter mais informações, consulte Como adicionar um controle personalizado a uma tela HTML para um aplicativo do LightSwitch.

Desfazer Alterações

  • Na barra de menus, escolha Editar, Desfazer.

    DicaDica

    Se você desfizer acidentalmente uma edição no Designer de Tela, na barra de menus, escolha Editar, Refazer.

Escolher Se uma Coleção Exibe Dados Quando a Tela Carregar pela Primeira Vez.

  1. Na Lista de membros de tela do Designer de tela, escolha o nó pai de uma coleção (por exemplo, OrderCollection que dirige).

  2. Na janela de Propriedades, desmarque a caixa de seleção Consulta Automaticamente Executada se você não deseja que a coleção mostre algum dado quando a tela aparecer.Selecione a caixa de seleção Consulta Automaticamente Executada se você deseja que a coleção mostre dados quando a tela aparecer.

Ativar ou Desativar Paginação

  1. Na Lista de membros de tela do Designer de tela, escolha o nó pai de uma coleção (por exemplo, OrderCollection que dirige).

  2. Na janela de Propriedades , desmarque a caixa de seleção Paginação de suporte se você deseja exibir quaisquer linhas que uma consulta retorna, mesmo se a coleção de linhas é grande.Selecione a caixa de seleção se você desejar limitar o número de registros que aparecem, e então especifica o número de itens para exibir em cada página.

    ObservaçãoObservação

    Os usuários podem exibir cada página de resultados escolhendo um link na tela.

Ativar ou Desativar Ordenação

  1. Na Lista de membros de tela do Designer de tela, escolha o nó pai de uma coleção (por exemplo, OrderCollection que dirige).

  2. Na janela de Propriedades , marque ou desmarque a caixa de seleção Classificação de suporte .

Ativar ou Desativar Pesquisa

  1. Na Lista de membros de tela do Designer de tela, escolha o nó pai de uma coleção (por exemplo, OrderCollection que dirige).

  2. Na janela de Propriedades , marque ou desmarque a caixa de seleção de Pesquisa de suporte .

    Se você marcar a caixa de seleção, uma caixa de pesquisa aparece acima da coleção.

Consulte também

Tarefas

Como controlar a navegação entre telas HTML em um aplicativo do LightSwitch

Como adicionar um botão a um cliente móvel para LightSwitch

Como adicionar um controle personalizado a uma tela HTML para um aplicativo do LightSwitch

Conceitos

Referência: Propriedades de Designer de tela

Outros recursos

Telas do cliente HTML para aplicativos do LightSwitch