Telas do cliente HTML para aplicativos do LightSwitch

Usando o LightSwitch, você pode criar telas de cliente HTML otimizadas para exibição em dispositivos móveis. Este tópico apresenta os modelos que é possível usar para criar telas com base em HTML5, as ferramentas que é possível usar para criar telas e algumas das tarefas que é possível realizar para criar as melhores telas para o aplicativo LightSwitch.

Para obter 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

É possível adicionar um ou mais clientes HTML a um aplicativo do LightSwitch existente ou criar um aplicativo do LightSwitch que contém apenas um cliente HTML. Cada cliente HTML está contido em seu próprio projeto na solução do LightSwitch.

Modelos de Tela

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

• Conjunto de Telas Comum

• Tela de Navegação

• Tela Exibir Detalhes

• Tela Adicionar/Editar Detalhes

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 encontrar esses modelos, consulte Como criar uma tela do cliente HTML.

Designer de Tela

É possível modificar o design de uma tela usando-se o designer de tela. O designer de tela exibe itens como campos de dados e comandos, além da árvore de conteúdo da tela, que é uma representação hierárquica dos dados. É possível arrastar itens para a árvore de conteúdo da tela e organizá-los na ordem desejada.

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

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

Tarefas de Design de Tela

Para modificar o design de uma tela, é possível realizar as seguintes tarefas:

• Modificar a aparência de uma tela

• Adicionar campos e comandos a uma tela

• Filtrar os dados exibidos 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

É possível modificar como os dados são exibidos em uma tela. Por exemplo, é possível configurar uma coleção de informações que serão exibidas como uma lista plana ou lado a lado. É possível alterar a ordem na qual os campos são exibidos ou agrupar campos.

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

Adicionar Campos e Comandos a uma Tela

As telas HTML no LightSwitch oferecem comandos internos para que os usuários possam exibir, atualizar, excluir ou salvar dados. Também é possível adicionar comandos e campos personalizados.

Adicione um comando personalizado caso você queira adicionar lógica de negócios à tela. Por exemplo, é possível adicionar um botão de forma que um usuário possa exibir uma lista de clientes com base no volume da ordem de venda. Para obter mais informações, consulte Como adicionar um botão a um cliente móvel para LightSwitch.

É possível adicionar campos de propriedades locais personalizados para coletar ou exibir informações. Por exemplo, é possível adicionar uma caixa de texto próxima do botão de volume das vendas de forma que o usuário possa especificar quantos clientes eles querem exibir na lista. Para obter mais informações, consulte Como adicionar uma propriedade local a uma tela HTML.

Adicionar Controles Personalizados a uma Tela

Adicionando-se controles personalizados a uma tela HTML, é possível exibir ou coletar informações de maneira que vá além dos recursos dos controles integrados ao LightSwitch. Também é possível usar um controle personalizado para substituir qualquer controle interno do LightSwitch exibido 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 exibidos em uma tela

É possível filtrar os dados exibidos em uma tela modificando-se as condições de consultas da tela.

Cada grupo de dados exibido no painel à esquerda do designer se baseia em uma consulta. A tela só exibe as informações retornadas por essas consultas. Para alterar informações exibidas para um grupo de dados, modifique a consulta.

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

Adicionar dados a uma tela

É possível adicionar outros tipos de dados a uma tela. Por exemplo, em uma tela que exibe clientes, é possível adicionar uma grade de dados que mostre 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, apenas uma tela permanece ativa em um dado momento. É possível especificar como o usuário abre uma tela em outra e o que acontece quando uma tela se torna inativa.

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

É possível adicionar código a métodos parciais chamados pelo LightSwitch, de forma que quando determinados eventos ocorrem no tempo de execução, a tela é modificada de maneira apropriada. Por exemplo, é possível adicionar o código que oculta o nome de uma empresa que deseja permanecer anônima para os usuários do aplicativo. Esse código examinaria os nomes de empresa dos clientes e, quando encontrasse uma correspondência, definiria a propriedade IsVisible do campo CompanyName como False antes das informações serem exibidas na tela.

Para obter mais informações sobre onde gravar o 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 um código que modifica uma tela, consulte Como modificar uma tela HTML usando código.

Para uma listagem das APIs do Cliente HTML LightSwitch, consulte Cliente HTML com referência API.

Tópicos relacionados

Título	Descrição
Escolhendo um tipo de tela para um cliente HTML para um aplicativo do LightSwitch	Descreve os modelos que é possível usar como ponto de partida para criar telas.
Como criar uma tela do cliente HTML	Mostra como adicionar telas para o aplicativo.
Tour do Designer de Tela	Ilustra as partes do designer e suas funções.
Como criar uma tela HTML usando o Designer de Tela	Mostra como usar o designer de tela.
Como adicionar uma propriedade local a uma tela HTML	Mostra como adicionar um campo de propriedade local personalizado a uma tela.
Como adicionar um botão a um cliente móvel para LightSwitch	Mostra como adicionar um botão ou link que executa um 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 HTML personalizado em uma tela do LightSwitch.
Como adicionar dados a uma tela	Mostra como adicionar dados de outras consultas a uma tela.
Como Filtrar Dados em uma Tela HTML	Mostra como usar consultas para controlar quais dados são exibidos na tela.
Como tratar eventos de tela em um cliente móvel para um aplicativo do LightSwitch	Descreve como personalizar o aplicativo gravando o código executado quando determinados eventos ocorrem.
Como modificar uma tela HTML usando código	Descreve como usar código para modificar controles e interagir com itens em uma tela.
Referência: propriedades do Designer de Tela	Descreve as propriedades de itens exibidos na lista de membros da tela e na árvore de conteúdo da tela do designer de tela. É possível modificar a aparência e o comportamento de itens usando-se a janela 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 do LightSwitch.