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 servem para 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. Observe que a página pop-up de Produto agora possui um novo campo Fornecedor. Se você clicar no botão Editar, verá que é um menu suspenso.

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 das 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 para 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ê quer 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 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 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.

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