Introdução ao App Builder - Aula 5: Controles

Esta é a quinta aula da série de tutoriais Introdução ao App Builder.

Controles de lista

Quando aprendemos sobre objetos de negócios, ou regras, na Aula 3, discutimos dois tipos: objetos de negócios e objetos de lista. Para recapitular brevemente, aprendemos que os objetos de negócios são destinados a mostrar o conteúdo de uma determinada tabela na camada de dados. Os objetos de lista, por outro lado, são usados para criar menus suspensos em nossas aplicações. Agora que criamos várias páginas, vamos usar os objetos de lista que temos para adicionar menus a elas.

1. Em App Workbench > Páginas, encontre Produto, uma das páginas pop-up que criamos na aula anterior. Clique no ícone de caneta para editá-la.

2. No painel Layout do Painel da Página, clique em Controles.

3. Aqui, você pode ver uma lista de todos os controles que estão atualmente mostrados neste pop-up. Quando deixamos o App Builder escolher automaticamente as colunas do objeto de negócios que usaria para esta página, ele escolheu todas as colunas, exceto aquelas criadas pelo audit lite e aquelas no formato UUID, que não é legível por humanos. Vamos adicionar outro controle. Clique em + Controle. O diálogo Adicionar um Controle aparece:

   

4. No menu Coluna, selecione SupplierID. Um novo campo, Nome, aparece automaticamente abaixo dele, já contendo o nome Supplier. O campo Tipo de Controle seleciona automaticamente Lista.

5. Clique em Próximo.

6. Na próxima etapa do assistente, use o menu Fonte para selecionar Fornecedor (Lista), o objeto de lista que criamos anteriormente. Se os campos Tipo de Uso do objeto de lista foram selecionados corretamente, os dois campos seguintes serão preenchidos automaticamente e você pode pular as Etapas 7 e 8.

7. Use o menu Chave (Coluna) para selecionar ID do Fornecedor (PK).

8. Use o menu Título (Coluna) para selecionar Fornecedor.

9. Clique em Próximo e depois em Concluir.

10. Navegue até a página Produtos e clique em Ver Página. Escolha qualquer uma das entradas na lista e clique no botão no final da linha. Observe que a página pop-up do Produto agora possui um novo campo Fornecedor. Se você clicar no botão Editar, verá que é um dropdown.

Hora da prática: Adicione outro controle de lista

Repita o mesmo processo que fizemos acima para adicionar uma lista de Categoria à página Produto. Nossa aplicação Northwinds precisará de ambas as listas.

Selecionável pelo Usuário

O tipo de uso Selecionável pelo Usuário, introduzido na Aula 2, determina quais valores estão disponíveis para seleção nos controles de lista. Quando você aprimorou as tabelas na Aula 2, o recurso Audit lite criou automaticamente a coluna IsActive com esse tipo de uso. Isso significa que os controles de lista em sua aplicação mostrarão apenas registros onde IsActive é verdadeiro, filtrando entradas inativas das opções que um usuário vê ao editar ou criar registros.

Adicionar relacionamentos entre tabelas

Na Aula 2, criamos uma tabela chamada Região. No entanto, ela está atualmente isolada, o que significa que não se conecta a nenhuma de nossas outras tabelas, então não podemos usar as informações que contém. Vamos corrigir isso criando um relacionamento entre ela e a tabela Funcionário. Assim, poderemos acompanhar onde cada funcionário trabalha.

Primeiro, precisamos adicionar uma nova coluna à tabela Funcionário.

1. Em App Workbench > Tabelas, encontre a tabela Funcionário e abra-a.

2. Clique em + Coluna.

3. Dê à nova coluna o nome RegionID. No painel Tipos de Dados, certifique-se de que o menu Lógico tenha ID Único selecionado e o menu Físico será automaticamente definido como UUID.

4. Clique em Salvar.

5. Como uma boa prática, clique em Resultados para verificar se a coluna RegionID foi adicionada.

6. A nova coluna RegionID agora aparece na lista. O App Builder a identificou como uma chave estrangeira com base na análise do esquema de dados, e é uma boa prática impor essa restrição clicando no símbolo + que aparece na coluna FK. Uma mensagem de confirmação aparecerá. Clique em Prosseguir.

O próximo passo é garantir que a nova coluna também seja adicionada à regra que construímos com base nesta tabela.

1. Em App Workbench > Regras, encontre a regra Funcionário (Fonte) e abra-a.

2. No painel Tabelas, você verá a lista de colunas da tabela Funcionário usadas pela regra. Encontre a coluna RegionID que você criou recentemente e selecione sua caixa de seleção para incluí-la.

Agora, podemos adicionar um controle de lista à página pop-up do Funcionário para indicar onde cada funcionário trabalha.

1. Em App Workbench > Páginas, encontre a página Funcionário e abra-a.

2. No painel Layout do Painel da Página, clique em Controles.

3. Clique em + Controle.

4. No menu Coluna, selecione RegionID e clique em Próximo.

5. Em Fonte, selecione Região (Lista). A seleção Chave (Coluna) deve ser RegionID (PK) e o Título (Coluna) deve ser Região.

6. Clique em Próximo e depois em Concluir.

7. Quando o App Builder terminar de criar o novo controle, você será retornado à lista de controles. Altere a coluna Ordem para que o novo controle seja exibido antes das informações de localização do funcionário:

   

8. Para começar a usar o novo controle, navegue até a página Funcionários, clique em Ver Página e abra os detalhes de qualquer funcionário. Certifique-se de que o campo Região está mostrando onde você espera que esteja. Os campos devem estar vazios, então passe por vários funcionários e atribua a eles uma região, escolhendo Região da Costa Leste para alguns e Região da Costa Oeste para outros. Isso será importante quando avançarmos para tópicos mais avançados adiante.

Controles HTML

Se você navegar novamente para a página Funcionários e clicar no botão para ver os detalhes sobre a funcionária chamada Laura Callahan, note que o campo Notas está exibindo texto HTML bruto. Vamos revisar os passos para que o HTML seja exibido corretamente.

1. Navegue até a página Funcionários e clique em Ver Página.

2. Clique no botão que exibe detalhes sobre um funcionário e aguarde o popup Funcionário aparecer.

3. Clique no ícone de hambúrguer no canto superior direito da página para abrir o painel de ações e clique em Designer Ao Vivo.

4. Quando o menu lateral do designer ao vivo abrir, clique no campo Notas para destacá-lo. Isso fará com que o designer ao vivo mostre opções de edição para esse campo.

5. Na aba Propriedades do Controle, o menu Tipo de Controle atualmente mostra Texto. Isso significa que o App Builder está simplesmente exibindo o que está na coluna sem alterações. Selecione HTML em vez disso. Isso fará com que o App Builder trate o conteúdo corretamente, interpretando o código HTML.

6. Clique em Salvar. O campo Notas agora mostra texto estilizado e formatado:

   

Criar, Atualizar e Excluir controles

Os painéis no App Builder oferecem a opção de criar, atualizar ou excluir registros. No entanto, você nem sempre quer dar aos usuários todas essas opções. Outras vezes, há restrições de espaço e você deseja remover algumas das opções porque seus ícones estão ocupando espaço nas telas do seu aplicativo. Vamos aprender como fazer alterações nessas funcionalidades.

Editar as opções de criar e atualizar

O App Builder permite que você altere a forma como os ícones de criar e atualizar funcionam, especificamente quais áreas se tornam disponíveis para edição ao clicar em um dos ícones. Vamos aprender como modificando o funcionamento das opções na nossa página Clientes.

1. Navegue até a página Clientes e clique em Ver Página para visualizá-la.

2. Clique no ícone de hambúrguer no canto superior direito da página para abrir o painel de ações e clique em Designer Ao Vivo.

3. Clique no painel Clientes para fazer com que o designer ao vivo mostre opções de edição para ele.

4. Na aba Métodos de Atualização, mude as opções Método de Edição e Método de Inserção para Link Para Página. Isso significa que, quando um usuário tentar editar uma entrada ou adicionar uma nova, ele será vinculado a uma página de sua escolha, em vez da interface de edição inline que é exibida por padrão. Escolha a página pop-up Cliente que já criamos:

   

5. Clique em Salvar. Assim que o App Builder salvar, saia do designer ao vivo e teste suas alterações. Tente clicar em Criar ou no ícone de edição e verifique se a página pop-up Cliente é exibida.

Hora da prática: Edite as opções de criação e atualização para outras páginas

Repita o processo que fizemos acima na página Clientes para as páginas Funcionários e Produtos, usando suas respectivas páginas pop-up. As páginas Fornecedores e Transportadoras foram criadas pelo acelerador na Aula 4, que já configura o Método de Edição e o Método de Inserção para Link Para Página.

Desativar exclusão e criação em uma página

Vamos desativar as funções de exclusão e criação na página Parâmetro, que você criou no final da Aula 4. Este é um bom exemplo a ser usado, pois os parâmetros que governam toda a aplicação nunca devem ser excluídos, nem deve haver mais de um conjunto.

1. Navegue até a página Parâmetro e clique em Visualizar Página para pré-visualizá-la.

2. Clique no ícone de hambúrguer no canto superior direito da página para abrir o painel de ações e clique em Designer Ao Vivo.

3. Clique no painel Parâmetro para fazer o designer ao vivo mostrar opções de edição para ele.

4. Na aba Métodos de Atualização, encontre a opção Método de Inserção. Selecione Não, pois não queremos que novos conjuntos de parâmetros sejam adicionados.

5. Na mesma aba, encontre a opção Excluir Suportado. Se Sim estiver destacado, um botão Excluir ficará visível no popup. Clique em Não para garantir que o botão não seja exibido.

   

6. Quando o App Builder salvar as alterações, observe que o botão Excluir desaparece.

Use um controle de moeda

Dê uma olhada na página Produtos. A coluna Preço Unitário está exibindo valores como números brutos, mas eles devem ser valores monetários. Vamos editar esse controle para formatar os valores da maneira que esperamos. Existem várias maneiras de fazer isso, mas faremos a partir da camada de negócios.

1. Em App Workbench > Regras, encontre a regra Produto (Fonte), pois essa é a base da página Produtos, e clique para editá-la.

2. Na aba Colunas, localize a linha que direciona a coluna UnitPrice e clique no ícone de edição .

3. Na seção Opções de Conversão, use o campo Tipo de Dado Lógico para selecionar Moeda. Clique em Salvar:

   

   Nota

   Você também pode editar o campo sem o popup, clicando no ícone de lápis ou clicando diretamente no campo sob Lógico inline.

4. Retorne à pré-visualização da página Produtos. Os preços devem estar exibindo corretamente agora.

Configurações adicionais de controle

Existem configurações adicionais que você pode usar para personalizar a aparência e o funcionamento dos seus controles. As seções abaixo as descrevem.

Prioridade da grade

Prioridade da grade é um recurso no App Builder que permite aos desenvolvedores substituir o comportamento responsivo padrão de uma página. Enquanto o App Builder escala automaticamente o conteúdo para se ajustar a diferentes dispositivos, a prioridade da grade oferece controle manual sobre quais pontos de dados específicos permanecem visíveis quando o espaço na tela é limitado.

Para demonstrar a prioridade da grade, vamos mostrar como selecionar os controles mais importantes em um dos painéis na página Clientes.

1. Vá para App Workbench > Páginas e abra a tela de edição da página Clientes. Alternativamente, navegue até a página Clientes na visualização do aplicativo.

2. Na tela de edição da página Clientes, no painel Layout do Painel da Página, clique em Controles no painel Clientes. A lista de controles no painel aparece, e a coluna Prioridade é onde você configura a prioridade da grade. Alternativamente, se você estiver na visualização da página Clientes, abra a gaveta de ações , selecione o Designer Ao Vivo e clique em uma das colunas (por exemplo, Cliente) no painel Clientes. Assim que o designer ao vivo mostrar as configurações para esse controle, clique na aba Posição & Largura e localize o campo Prioridade da Grade (veja a captura de tela).

   

Agora, para cada um dos controles, clique para selecionar um valor de prioridade entre 1 e 4. Quanto menor o número, maior a prioridade. Normalmente, um telefone em modo Retrato consegue exibir três campos, enquanto um telefone em modo Paisagem ou um tablet conseguem mostrar cinco campos. Portanto, decida quais três campos são os mais importantes e atribua a eles a prioridade 1. Em seguida, selecione dois outros campos e atribua a eles a prioridade 2.

É uma boa prática recomendada atribuir prioridades de grade em todos os painéis que possuem vários controles.

Classificação de colunas

Classificação de colunas é como o App Builder classifica as entradas nas listas mostradas na camada de UI. Normalmente, o App Builder classifica uma lista em ordem crescente do controle com a maior Ordem, ou seja, o menor valor numérico. No exemplo abaixo, o controle Cliente tem a maior Ordem (primeira captura de tela), portanto, a UI (segunda captura de tela) usa isso para listar as entradas na tabela.

Na interface, os usuários finais podem clicar no título de qualquer coluna para reordenar a lista com base na coluna clicada. Clicar no título novamente reverte a direção da ordenação.

Os desenvolvedores podem substituir ou personalizar o comportamento padrão. Para alterar a coluna de ordenação padrão, atribua a outra controle a maior ordem. Para reverter a direção da ordenação padrão, siga estas etapas:

• Para fazer a alteração a partir do App Workbench > Páginas:

  1. Localize e abra a tela de edição da página com o painel que você deseja reordenar.

  2. Em Layout do Painel da Página, localize o painel contendo os itens que você deseja reordenar e clique em Controles.

  3. Encontre o controle com a maior ordem e clique no ícone .

  4. Vá para a aba Posição & Largura e no campo Direção da Ordenação, clique em ASC para ordem crescente ou DESC para ordem decrescente.

• Para fazer a alteração a partir da pré-visualização do aplicativo:

  1. Abra a página com os painéis que você deseja reordenar.

  2. Abra a gaveta de ações e selecione o Designer Ao Vivo.

  3. Selecione o controle que é usado como a coluna de ordenação padrão e seus detalhes aparecerão no designer. Clique na aba Posição & Largura e no campo Direção da Ordenação, clique em ASC para ordem crescente ou DESC para ordem decrescente.

Você também pode aplicar a ordenação por múltiplas colunas definindo um Índice de Ordenação em dois ou mais controles. O App Builder ordena primeiro pelo controle com o menor valor de índice de ordenação, depois pelo próximo menor, e assim por diante. Usar valores de índice em incrementos de 10 (por exemplo, 10, 20, 30) é uma boa prática, pois deixa espaço para inserir critérios de ordenação adicionais mais tarde sem precisar renumerar os controles existentes.

Para demonstrar, vamos configurar a página Clientes para ordenar primeiro por Estado, e depois permitir que você pratique adicionando uma segunda coluna de ordenação.

1. Vá para App Workbench > Páginas, abra a tela de edição da página Clientes e clique em Controles no painel Clientes.

2. Encontre o controle Estado e clique no ícone .

3. Vá para a aba Posição e Largura.

4. No campo Índice de Classificação, insira 10.

5. No campo Direção de Classificação, clique em ASC.

6. Clique em Salvar.

Quando você visitar a prévia da página Clientes, a lista agora será classificada alfabeticamente por estado em ordem crescente.

Hora da prática: Adicione uma segunda coluna de classificação

Seguindo os mesmos passos, configure o controle Cidade para atuar como a classificação secundária:

• Defina seu Índice de Classificação como 20.

• Defina sua Direção de Classificação como DESC.

Após salvar, a lista de Clientes será classificada principalmente por estado (crescente) e, dentro de cada estado, por cidade em ordem decrescente.

Largura

Largura é um recurso que permite aos desenvolvedores determinar quão grande um determinado controle aparecerá na interface do usuário do aplicativo. O campo Largura permite que você insira um valor numérico. No entanto, esses valores são tratados pelo App Builder como relativos, não absolutos. Por exemplo, se um controle tem uma Largura de 10 e outro tem 20, o segundo sempre será duas vezes mais largo que o primeiro, mas o tamanho específico variará com base no dispositivo e no espaço disponível na tela. O App Builder calcula o total de todos os números na coluna de largura e divide o espaço da tela de acordo.

1. Navegue até a prévia da página que você deseja configurar.

2. Abra o Painel de Ação e selecione Projetar esta página.

3. Selecione o painel com os controles que você deseja ajustar. Seus detalhes serão mostrados no Painel de Ação.

4. Localize a coluna Largura na seção Controles.

   Insira valores numéricos:

   • Atribua números mais altos às colunas que precisam de mais espaço.

   • Atribua números mais baixos às colunas que precisam de menos espaço (por exemplo, números de ID ou abreviações de Estado).

5. Salve e atualize o navegador para visualizar as alterações na interface do usuário.

Revisão e conclusão

Nesta lição, aprendemos sobre vários tipos diferentes de controles. Trabalhamos com controles de lista, HTML, criar, atualizar, excluir e moeda. Também criamos relacionamentos entre tabelas. Continuaremos explorando os recursos do App Builder para melhorar nosso aplicativo nas próximas lições. Avance para Lição 6: Vinculação.