Telas do cliente HTML para aplicativos do LightSwitch

Usando Atualização 2 do Microsoft LightSwitch para Visual Studio, você pode criar as telas de cliente HTML que são otimizadas para exibição em dispositivos móveis.Este tópico apresenta os modelos que você pode usar para criar as telas que são baseadas em HTML5, as ferramentas que você pode usar para criar telas, e algumas das tarefas que você pode executar para criar as melhores telas para seu aplicativo de LightSwitch.

Para um exemplo de ponta a ponta de um cliente que utiliza telas HTML, consulte Instruções passo a passo: criando um cliente do LightSwitch para usuários móveis.

Clientes HTML.

Você pode adicionar um ou mais clientes HTML em um aplicativo existente de LightSwitch , ou você pode criar um aplicativo de Atualização 2 do Microsoft LightSwitch para Visual Studio que contém somente um cliente HTML.Cada cliente HTML está contido no seu próprio projeto na solução de LightSwitch .

Observação

Quando você adiciona um projeto de Cliente de HTML a uma solução de LightSwitch , atualizar a Atualização 2 do Microsoft LightSwitch para Visual Studio.A estrutura de arquivo de solução é alterada, e você não pode abrir a solução em um computador que não tenha Atualização 2 do Microsoft LightSwitch para Visual Studio instalar o. Para obter mais informações, consulte Como criar ou adicionar um projeto de cliente HTML.

Modelos de Tela

Para começar, crie uma tela usando um dos seguintes modelos de tela:

• Procure a tela

• Tela dos detalhes de exibição

• Adicionar/detalhes de edição tela

Para obter informações sobre como escolher um modelo, consulte Escolhendo um tipo de tela para um cliente HTML para um aplicativo do LightSwitch.

Para obter informações sobre como localizar esses modelos, consulte Como criar uma tela do cliente HTML.

Designer de Tela

Você pode alterar o design de uma tela utilizando o designer da tela.O designer de tela mostra itens como campos de dados e comandos, e a árvore de conteúdo da tela, que é uma representação hierárquica de seus dados.Você pode arrastar itens para a árvore de conteúdo da tela e organizá-los na ordem que você deseja.

Para obter mais informações sobre o designer da tela, consulte Tour do Editor de tela.

Para obter mais informações sobre como executar tarefas específicas no designer da tela, consulte Como criar uma tela HTML usando o Designer de Tela.

Tarefas de Design de Tela

Para modificar o design de uma tela, você pode executar as seguintes tarefas:

• Modificar a aparência de uma tela

• Adicionar campos e comandos para uma tela

• Filtrar os dados que aparecem em uma tela

• Adicionar dados a uma tela

• Personalizar navegação entre telas

• Modificar uma tela usando código

Modificar a Aparência de uma Tela

Você pode alterar como os dados aparecem em uma tela.Por exemplo, você pode configurar uma recolher de informações para aparecer como uma lista plana ou uma lista agrupada.Você pode alterar a ordem em que aparecem os campos ou agrupar campos juntos.

Para obter mais informações, consulte Como criar uma tela HTML usando o Designer de Tela.

Adicionar Campos e Comandos para uma Tela

As telas de HTML em LightSwitch internos fornecem comandos para que os usuários podem exibir, atualizar, excluir, ou salvar dados.Você também pode adicionar comandos e campos personalizados.

Adicione um comando personalizado se você deseja adicionar lógica de negócio na tela.Por exemplo, você pode adicionar um botão para que um usuário possa exibir uma lista de clientes com base em massa de ordem de venda.Para obter mais informações, consulte Como adicionar um botão a um cliente móvel para LightSwitch.

Você pode adicionar campos de propriedades locais personalizados para coletar ou exibir informações.Por exemplo, você pode adicionar uma caixa de texto ao lado do botão de volume-vendas de modo que o usuário possa especificar quantos clientes eles querem que apareçam na lista.Para obter mais informações, consulte Como adicionar uma propriedade local a uma tela HTML.

Adicionar Controles Personalizados a uma tela

Adicionar controles personalizados a uma tela HTML, você pode exibir ou colete informações sobre as maneiras que vai além dos recursos dos controles que são compilados a LightSwitch.Você também pode usar um controle personalizado para substituir qualquer controle interno de LightSwitch que aparecem na tela.Para obter mais informações, consulte Como adicionar um controle personalizado a uma tela HTML para um aplicativo do LightSwitch.

Filtrar os Dados que Aparecem em uma Tela

Você pode filtrar os dados que aparecem em uma tela alterando as condições de consultas da tela.

Cada grupo de dados que aparece no painel esquerdo do designer é baseado em uma consulta.As visualizações ópticas apenas as informações que é retornada por essas consultas.Para alterar as informações que aparece para um grupo de dados, altere sua consulta.

Para obter mais informações, consulte Como filtrar dados em um cliente HTML para um aplicativo do LightSwitch.

Adicionar Dados a uma Tela

Você pode adicionar outros tipos de dados para uma tela.Por exemplo, em uma tela que exibe clientes, você pode adicionar uma grade de dados que mostra uma lista de pedidos.Para obter mais informações, consulte Como: adicionar dados a uma tela.

Personalizar navegação entre telas

Em um cliente HTML, somente uma tela está ativa a qualquer momento.Você pode especificar como o usuário abre uma tela da outra e o que acontece quando uma tela se tornou inativo.

Para obter mais informações, consulte Como controlar a navegação entre telas HTML em um aplicativo do LightSwitch.

Modificar uma Tela Usando Código

Você pode adicionar o código para os métodos parciais que LightSwitch chama para que, quando determinados eventos ocorrem em tempo de execução, a tela é alterado apropriadamente.Por exemplo, você pode adicionar código que oculta o nome de uma empresa que deseja permanecer anônima para os usuários do seu aplicativo.Esse código examinaria os nomes de empresa clientes e, quando encontra uma correspondência, definir a propriedade de IsVisible do campo de CompanyName a False antes de informações aparecem na tela.

Para obter mais informações sobre onde escrever seu código, consulte Como tratar eventos de tela em um cliente móvel para um aplicativo do LightSwitch.

Para obter mais informações sobre como adicionar código que modifica uma tela, consulte How to: Modify an HTML Screen by Using Code.

Tópicos relacionados

Nome	Descrição
Escolhendo um tipo de tela para um cliente HTML para um aplicativo do LightSwitch	Descreve os modelos que você pode usar como ponto de partida para criar telas.
Como criar uma tela do cliente HTML	Mostra como adicionar telas ao seu aplicativo.
Tour do Editor de tela	Ilustra as partes do designer e suas funções.
Como criar uma tela HTML usando o Designer de Tela	Mostra como utilizar o designer de tela.
Como adicionar uma propriedade local a uma tela HTML	Mostra como adicionar um campo de propriedade personalizado para o local para uma tela.
Como adicionar um botão a um cliente móvel para LightSwitch	Mostra como adicionar um botão ou um link que executa o código personalizado em uma tela.
Como adicionar um controle personalizado a uma tela HTML para um aplicativo do LightSwitch	Mostra como usar um controle personalizado HTML em uma tela de LightSwitch .
Como: adicionar dados a uma tela	Mostra como adicionar dados de outras consultas em uma tela.
Como: Filtrar dados em uma tela HTML	Mostra como usar consultas para controlar quais os dados que aparecem na tela.
Como tratar eventos de tela em um cliente móvel para um aplicativo do LightSwitch	Descreve como personalizar seu aplicativo escrever código que executa quando determinados eventos ocorrem.
How to: Modify an HTML Screen by Using Code	Descreve como usar código para alterar controles e interagir com itens em uma tela.
Referência: Propriedades de Designer de tela	Descreve as propriedades de itens que aparecem na lista de membros da tela e na árvore de conteúdo na tela do designer da tela.Você pode alterar a aparência e o comportamento de itens usando a janela de Propriedades para definir o valor das propriedades.
Como controlar a navegação entre telas HTML em um aplicativo do LightSwitch	Descreve o modelo de navegação de tela para um cliente HTML de um aplicativo de LightSwitch.