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 origem e objetos de lista. Para recapitular brevemente, aprendemos que os objetos de origem são destinados a mostrar o conteúdo de uma tabela específica 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. A caixa de diálogo Adicionar um Controle aparece:

   

4. No menu Coluna, selecione SupplierID. Um novo campo, Nome, aparece automaticamente abaixo dele, já contendo o nome Fornecedor. 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 a seguir 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, 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. Note que a página pop-up de Produto agora tem 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.

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 usada 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 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 até a página Funcionários e clicar no botão para ver 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 pop-up Funcionário aparecer.

3. Clique no ícone de hambúrguer no canto superior direito da página para abrir a gaveta 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 nenhuma alteração. 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 a todos os 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 Visualizar Página para pré-visualizá-la.

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

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

4. Na aba Métodos de Atualização, altere tanto as opções Método de Edição quanto 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 criar e atualizar para outras páginas

Repita o processo que fizemos acima na página Clientes para as páginas Funcionários, Fornecedores, Transportadoras e Produtos, usando suas respectivas páginas pop-up.

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 utilizado, 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 menu hambúrguer no canto superior direito da página para abrir a gaveta 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 Exclusão Suportada. Se Sim estiver destacado, um botão Excluir será visível na pop-up. 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.

Usar 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 figuras monetárias. 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. No 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 para 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.

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

Configurações de controle adicionais

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 da 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 pré-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 pré-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 exibidas 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.

A partir da UI, 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 classificaçã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 classificação padrão, siga estas etapas:

• Para fazer a alteração a partir de 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 em seu ícone .

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

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

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

  2. Abra o painel 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 de Ordenação, clique em ASC para ordem crescente ou DESC para 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é-visualização da página que você deseja configurar.

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

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

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, arquivo, 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. Prossiga para Lição 6: Vinculação.