Introdução ao App Builder - Aula 6: Vinculação

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

Nesta aula, vamos aprender sobre um conceito fundamental no App Builder: vinculação. Vamos aprender sobre isso enquanto construímos uma página chave em nossa aplicação Northwinds.

Páginas com múltiplos painéis: A página de Pedidos

Todas as páginas que construímos até agora tiveram apenas um painel. Vamos ver como podemos construir páginas com múltiplos painéis e como fazê-los funcionar juntos usando vinculação.

Para começar, vamos criar uma página chamada Pedidos.

1. Usando os mesmos passos que seguimos nas aulas anteriores, crie a nova página Pedidos. Por enquanto, deve ter um painel de página inteira, adicionaremos mais depois.

2. Assim que o App Builder criar a página, adicione um painel do tipo Grade, usando Pedido (Fonte) como a fonte do painel. Você pode deixar o App Builder construir o painel automaticamente, editaremos os controles nele mais tarde. Se você visitar a prévia da página, verá que ela simplesmente lista todos os Pedidos presentes no banco de dados.

Agora vamos adicionar um segundo painel à página Pedidos. Nosso objetivo é ter um painel inicial listando todos os pedidos, mas os detalhes de cada um sendo mostrados em outros painéis na mesma página. Assim, quando o usuário final clicar em um pedido, os outros painéis mudam automaticamente para mostrar detalhes sobre o pedido selecionado.

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

2. Acesse o designer ao vivo.

3. Quando o designer ao vivo abrir, clique no botão + Painel. A caixa de diálogo Criar um Painel se abre.

4. Selecione Grade como o Tipo de Painel e clique em Próximo.

5. Selecione DetalhePedido (Fonte) como a Fonte do Painel e clique em Próximo.

6. Você pode permitir que o App Builder construa o painel automaticamente, editaremos os controles mais tarde. Clique em Próximo e Concluir.

Como a tabela Pedido tem uma chave estrangeira que se conecta com a tabela DetalhePedido e os dois painéis puxam dados de regras que são baseadas nessas duas tabelas, o App Builder os vincula automaticamente. Isso significa que agora, quando você visitar a prévia da página Pedidos, clicar em uma linha de pedido no painel Pedidos fará com que o painel Detalhes do Pedido seja automaticamente preenchido com os detalhes do pedido que você selecionou.

Adicionar uma ligação manualmente

Quando dois painéis na mesma página puxam dados de regras que têm chaves estrangeiras conectadas, o App Builder irá vinculá-los automaticamente. No entanto, se você precisar vincular dois painéis manualmente, veja como fazer isso:

1. Navegue até a página com os painéis que você deseja vincular.

2. Clique no painel que você deseja preencher automaticamente com os detalhes das seleções do usuário em outro painel.

3. Na aba Painel, encontre o campo Painel Pai & Ligação.

   1. Use o menu para selecionar o painel pai.

   2. Clique no botão com o símbolo de ligação. A caixa de diálogo Colunas de Ligação se abre.

   3. Clique em + Ligação e use os menus para selecionar:

      1. Tipo: O tipo de ligação.

      2. Coluna Filha: Selecione qual coluna da regra base do painel filho deve ser a filha.

      3. Coluna Pai: Selecione qual coluna da regra base do painel pai deve ser o pai.

   4. Clique no ícone de marca de verificação para confirmar e sair da janela.

Clique em Visualizar Página para pré-visualizar a página Pedidos agora que ela tem dois painéis. Para testar, tente selecionar diferentes linhas no painel pai e veja como as informações no painel filho mudam de acordo:

Editar valores de exibição

Observe que o painel Detalhes do Pedido mostra apenas os preços unitários de cada item. No entanto, vários itens foram comprados em grandes quantidades. Além disso, vários deles foram comprados com descontos. Vamos modificar o painel para que ele calcule e mostre os totais dos preços.

1. Em App Workbench > Regras, acesse a regra OrderDetail (Fonte) e clique para editá-la. Na aba Colunas, clique em + Coluna.

2. Para multiplicar o preço unitário pela quantidade e subtrair o desconto, a expressão que precisamos é:

   OD.UnitPrice*OD.Quantity*(1-OD.Discount)

3. No campo Alias, insira Total da Linha. Clique em Salvar.

4. Na tabela de colunas atualizada, use a coluna Lógica para converter o novo campo Total da Linha como Moeda. Aproveite para também converter a coluna Preço Unitário como Moeda e a coluna Desconto como Porcentagem.

5. Clique em Resultados para ver os valores sendo exibidos. Agora volte para a tela de edição da página Pedidos e adicione o novo controle Total da Linha ao painel Detalhes do Pedido, dando a ele o nome Total. Após fazer isso, volte à pré-visualização da página Pedidos. O painel Detalhes do Pedido agora mostra totais no final de cada linha:

   

Agora que temos um total para cada item individual, vamos também adicionar outro controle para mostrar o preço total de um pedido inteiro:

1. Vá para a pré-visualização da página Pedidos e acesse o designer ao vivo.

2. Selecione o controle Total no painel Detalhes do Pedido para que o designer ao vivo mostre opções de edição para ele.

3. Na aba Propriedades do Controle, encontre o campo Função Agregada e clique em Soma.

4. Clique em Salvar.

Agora o painel Detalhes do Pedido mostra o preço total de um pedido inteiro na parte inferior da coluna Total:

Tornar um controle somente leitura

Não queremos permitir que os usuários finais editem todos os controles em uma página. Por exemplo, na página Pedidos que estamos construindo, não podemos permitir que os usuários editem o preço de um item. Siga estes passos:

1. Navegue até a pré-visualização da página Pedidos e acesse o designer ao vivo.

2. Clique no controle Preço Unitário no painel Detalhes do Pedido para que o designer ao vivo mostre opções de edição para ele.

3. Na aba Posição e Largura, encontre o campo Opções de Edição e clique em Somente leitura.

4. Clique em Salvar.

Quando você retornar à pré-visualização da página, note que clicar no ícone de edição em qualquer uma das linhas do painel Detalhes do Pedido não permite mais editar a coluna Preço Unitário.

Melhorias na página de Pedidos

Apesar das melhorias que já fizemos, a página Pedidos ainda não é muito amigável para o usuário. O painel Pedidos tem mais controles do que pode ser lido confortavelmente na tela, e algumas informações importantes que os usuários finais gostariam de saber não podem ser encontradas na página. Vamos continuar trabalhando nesta página.

Painel de Informações de Envio

O painel de Pedidos tem controles demais. Dê uma olhada na pré-visualização da página de Pedidos. Há tantos controles que não cabem na tela e não é possível ler tudo confortavelmente.

Para tornar nosso aplicativo mais amigável, adicionaremos mais painéis à página para distribuir melhor as informações.

1. Navegue até a tela de edição da página de Pedidos e clique em + Adicionar Painel.

2. Assim que aparecer, clique em + Escolher Tipo de Painel.

3. Desta vez, o tipo de painel deve ser Formulário. A fonte do painel deve ser Pedido (Fonte), assim como o painel principal de Pedidos. No entanto, desta vez, opte por Escolher Manualmente os controles do novo painel. Quando a tela Escolher Colunas aparecer, selecione todas as colunas, exceto NúmeroDoPedido e DataDoPedido.

4. Clique em Próximo e Publicar.

5. Quando o App Builder atualizar a página, mude o nome do novo painel para Informações de Envio e clique em Salvar.

O App Builder irá automaticamente vincular este novo painel ao painel de Pedidos usando a coluna IDDoPedido. Agora que temos um novo painel para exibir os detalhes de envio, o painel principal de Pedidos não precisa ter todos aqueles controles. Visite a tela de edição do painel de Pedidos e reduza o número de controles lá, deixando apenas NúmeroDoPedido e DataDoPedido, os dois que também não estão presentes no painel de Informações de Envio.

No entanto, o novo painel de Informações de Envio ainda tem muitos controles, então vamos organizá-los um pouco melhor:

1. Na tela de edição da página Pedidos, selecione o painel Informações de Envio e clique em Controles.

2. Observando todos os controles disponíveis, podemos separá-los em dois grupos, então faremos isso. Clique em + Controle.

3. Ignore o campo Coluna, pois não precisamos de novos controles, apenas organizaremos os existentes. No campo Tipo de Controle, selecione Acordeão. No campo Nome, insira Informações de Envio.

4. Clique em Próximo e Concluir.

5. Repita os Passos 2 a 4 e crie outro grupo chamado Datas & Custo.

Quando o App Builder retornar à lista de controles, você verá que os dois grupos agora estão listados. Revise todos os controles e decida qual deles deve ir para cada grupo, alterando seu Pai para ser um dos dois. Quando você terminar e retornar à pré-visualização da página Pedidos, o painel Informações de Envio deve estar muito mais organizado:

Painel de Informações do Cliente

Vamos adicionar outro painel à página Pedidos, porque atualmente não nos mostra nenhuma informação sobre quem fez os pedidos. Ele nos mostra o que foi comprado, mas não quem comprou.

1. Navegue até a tela de edição da página Pedidos e clique em + Adicionar Painel.

2. Assim que aparecer, clique em + Escolher Tipo de Painel.

3. O tipo de painel deve ser Formulário novamente. A fonte do painel deve ser Cliente (Fonte), já que queremos informações sobre quem está fazendo o pedido. Você pode deixar o App Builder selecionar automaticamente todos os controles, pois organizaremos eles nós mesmos nos próximos passos.

4. Clique em Próximo e Publicar. O App Builder irá automaticamente vincular este novo painel ao painel principal Pedidos usando CustomerID como critério de vinculação.

5. Quando o App Builder atualizar a página, altere o nome do novo painel para Informações do Cliente e clique em Salvar.

6. Agora, vamos organizar os controles no novo painel. Vá para sua tela de edição e clique em + Controle.

7. Desta vez, no entanto, vamos escolher um tipo diferente de organizador. No campo Tipo de Controle, selecione Aba. Dê a esta primeira aba o nome Cliente.

8. Repita as Etapas 6 e 7 para criar outra aba com o nome Contato.

9. Quando as novas abas estiverem prontas, revise os controles e distribua-os nas duas abas. Quais controles você acha que se encaixariam melhor em cada uma? Quando terminar, volte à pré-visualização da página Pedidos e o painel Informações do Cliente terá as duas abas que você criou:

   

Use grupos de painéis para organizar sua página

Embora tenhamos conseguido usar painéis vinculados para dividir as informações na nossa página Pedidos, agora temos um novo problema porque os quatro painéis estão competindo por espaço na tela e não está muito legível neste momento. Vamos resolver esse problema usando grupos de painéis, com os quais podemos organizar painéis em nossas páginas para melhorar a aparência.

1. Na tela de edição da página Pedidos, clique no botão Grupos sob o painel Layout do Painel da Página.

2. Clique em + Grupo.

3. No campo Pai, selecione Pedidos (Página), a página que estamos construindo. Dê ao grupo o nome Linha superior.

4. No campo Layout, selecione Lado a lado.

5. Clique no ícone para salvar.

Em seguida, saia da caixa de diálogo de criação de grupo e selecione o painel Pedidos. Queremos que ele fique na linha superior, então na aba Painel, encontre a propriedade Posição e selecione Linha superior no campo Pai. Clique em Salvar. Também queremos os painéis Informações de Envio e Informações do Cliente na linha superior, então repita o processo para eles. Use os números no campo Ordem para determinar qual painel vem primeiro.

Agora, crie um segundo grupo, mas desta vez dê a ele o nome Linha inferior. Ele conterá o painel Detalhes do Pedido, que queremos que ocupe toda a parte inferior da tela. Portanto, certifique-se de que o número no campo Ordem seja maior do que o campo correspondente no primeiro grupo. Depois de criar o novo grupo, certifique-se de atribuí-lo como o Pai do painel Detalhes do Pedido.

Finalmente, na tela de edição da página Pedido, mude o Layout para Empilhado. O App Builder então empilhará os dois grupos seguindo a ordem numérica dos dois grupos. Quando você atualizar a página, o Layout do Painel da Página deve parecer assim:

E a pré-visualização da página Pedidos deve estar assim:

Quais outras melhorias você pode fazer na página Pedidos? Por exemplo, na captura de tela acima, adicionamos um controle de Funcionário ao painel Pedidos, para que os usuários possam ver com qual funcionário um cliente conversou ao fazer seu pedido. Como você adicionaria esse controle ao seu painel Pedidos? Aqui estão algumas outras ideias para melhorias:

• Todos os preços estão sendo exibidos corretamente, como moedas?

• Todos os descontos estão sendo mostrados como porcentagens?

• Como você pode adicionar um controle de Categoria ao painel Detalhes do Pedido, como na captura de tela acima?

• Você deve permitir que os usuários finais excluam as entradas nos painéis de Informações de Envio e Informações do Cliente? Como você pode impedi-los de fazer isso?

Revisão e conclusão

Nesta lição, usamos o conceito de vinculação para tornar nossas páginas mais responsivas e completas. Nas próximas lições, continuaremos a aprimorar nossa compreensão dos conceitos de desenvolvimento no App Builder. Prossiga para Lição 7: Mais sobre regras.