Ir para o conteúdo

Introdução ao Vinyl 3.3: Melhorias na UI e Relatórios

Melhorias de UI / UX

Nesta seção, revisaremos alguns métodos que podem ser usados para melhorar a aparência geral de um aplicativo. O primeiro recurso que analisamos são os conjuntos de controle, que são grupos (ou contêineres) que podem ser usados para agrupar informações semelhantes para torná-las mais facilmente compreendidas ou interpretadas pelo usuário.

Adicione um Conjunto de Controles à Página do Produto

Primeiro, criamos um conjunto de controles na página Produto para Preço e Unidade de medida. Em seguida, você adicionará um conjunto de controles semelhante à página Produtos.

Uma imagem mostrando o conjunto de controles criado na página Produto:

controle de preço uom definido na página do produto

  1. Navegue até a página de visualização do aplicativo Produto.

  2. Vá para Gaveta de ação > Live Designer.

  3. Selecione o botão Controles para o painel Produto.

  4. Clique no botão + Controle.

  5. Defina Tipo de controle como Grupo.

  6. Atribua o Nome como Price / UOM.

  7. Defina Tipo de layout como Lado a lado.

  8. Confirme se Sizing Method está definido como Compress.

  9. Clique no botão Avançar.

  10. Confirme e clique no botão Concluir.

  11. Clique na aba Todos os controles.

  12. Defina o valor Parent para Price como Price / UOM (Group).

  13. Defina o valor Pai para Unidade de medida como Preço / UOM (Grupo).

  14. Altere o valor de Ordem de Unidade de medida para 35, para que Price seja exibido antes de UOM.

  15. Altere o valor Order de Is Active para 80, para que Is Active seja exibido após Price / UOM.

  16. Feche o Live Designer e confirme as atualizações.

Prática: Adicionar um Conjunto de Controles à Página de Produtos

Seguindo o processo usado para adicionar um conjunto de controle à página Produto, adicione um Conjunto de controle de preço/UM à página Produtos.

Configure os Controles Conforme Necessário

Nesta seção, veremos como você pode definir manualmente um controle como Obrigatório para que um registro seja salvo. Os controles obrigatórios são indicados no Vinyl pelo aparecimento de uma barra vertical azul no lado esquerdo do campo correspondente. Para este exercício usaremos a página Produto.

A página Produto com controles definidos como Obrigatório:

página do produto com controles definidos como obrigatórios

  1. Navegue até a página Produto.

  2. Vá para Gaveta de Ação > Live Designer.

  3. Selecione o painel Produto.

  4. Clique na aba Todos os controles.

  5. Abra os detalhes do controle Produto.

  6. Clique na aba Posição e largura.

  7. Defina Opções de edição como Obrigatório.

  8. Clique no botão Salvar.

  9. Repita as etapas para definir todos os controles no painel Produto como Obrigatório.

  10. Feche o Live Designer e confirme as atualizações clicando no botão Editar e revisando a aparência do controle.

Adicionar Conjuntos de Controle à Página Clientes

Nesta seção, moveremos os controles Cidade, Estado e Código Postal para um conjunto de controles para a página Clientes.

  1. Navegue até a página Clientes.

  2. Vá para Gaveta de ação > Live Designer.

  3. Selecione o painel Clientes.

  4. Clique na aba Todos os controles.

  5. Clique no botão + Controle.

  6. Defina Tipo de controle como Grupo.

  7. Atribua o Nome como City State Postal Code.

  8. Clique no botão Avançar.

  9. Confirme e clique em Concluir.

  10. Defina o valor Parent para City como City State Postal Code (Group).

  11. Defina o valor Parent para State como City State Postal Code (Group).

  12. Defina o valor Parent para Postal Code como City State Postal Code (Group).

  13. Abra o detalhe de Cidade e defina o valor de Largura como 20.

  14. Abra o detalhe de Estado e defina o valor de Largura como 6.

  15. Abra o detalhe de Postal e defina o valor de Largura como 9.

  16. Altere o valor Order do controle City State Postal Code definido como 35, para que as informações sigam o Address na camada de UI do aplicativo.

  17. Feche o Live Designer e confirme as atualizações.

Prática: Adicionar Conjuntos de Controle Adicionais

Adicione um controle Código postal do estado da cidade definido às páginas Cliente, Pedidos e Pedido.

Alterar Tipo de Painel de Produtos para Bloco

  1. Navegue até a página Produtos.

  2. Vá para Gaveta de ação > Live Designer.

  3. Selecione o painel Produtos.

  4. Defina Tipo de painel como Tile.

  5. Clique no botão Salvar.

  6. Clique na aba Todos os controles.

  7. Abra o detalhe do conjunto de controle Preço / UDM.

  8. Defina Bordas do grupo como Oculto.

  9. Abra o detalhe de Preço.

  10. Selecione a aba Etiqueta.

  11. Defina Visibilidade do rótulo como Oculto.

  12. Clique no botão Salvar.

  13. Abra o detalhe de Unidade de medida.

  14. Selecione a aba Etiqueta.

  15. Defina Visibilidade do rótulo como Oculto.

  16. Clique no botão Salvar.

  17. Feche o Live Designer e confirme as atualizações.

Adicione uma Direção de Classificação em Ordem Crescente

Nesta seção, explicamos como aplicar Sort em um controle. Aqui, classificaremos em ordem crescente no controle Produto para que os Produtos exibidos sejam classificados em ordem alfabética de A a Z, com base no valor de Produto.

A página Produtos agora é classificada em ordem alfabética por Produto:

página de produtos agora classificada em ordem alfabética por produto

  1. Na página Produtos, navegue até Action Drawer > Live Designer.

  2. Selecione o controle Produto no painel Produtos.

  3. Clique na aba Posição e largura.

  4. Defina Direção de classificação como ASC.

  5. Clique no botão Salvar.

  6. Feche o Live Designer e confirme as atualizações.

Adicione um Mapa do Google ao Cliente

Nesta seção, adicionaremos um mapa do Google à página Cliente para aprimorar as informações exibidas ao usuário do aplicativo.

Nota

O Google Maps exige informações de endereço válidas para exibir o mapa corretamente.

  1. Navegue até a página de visualização do aplicativo Cliente.

  2. Vá para Gaveta de ação > Live Designer.

  3. Clique no botão + Painel.

  4. Selecione o fichaFormulário.

  5. Clique no botão Avançar.

  6. Selecione Cliente (Objeto de Negócio).

  7. Clique no botão Avançar.

  8. Selecione Escolher manualmente.

  9. Clique no botão Avançar.

  10. Revise e clique em Concluir.

  11. Selecione o novo painel Customer2.

  12. Modifique o Nome do painel para ser Map.

  13. Clique no botão Salvar.

  14. Clique no botão + Controle.

  15. Defina Tipo de controle como Modelo.

  16. Atribua o nome como Map.

  17. Defina o modelo como Visualização de mapa do Google Maps por endereço interativo.

  18. Clique no botão Avançar.

  19. Revise e clique em Concluir.

  20. Clique no botão Encadernação.

  21. Confirme se há registros de ligação que mapeiam Endereço, Cidade e Estado do Parâmetro do modelo para Valor ou Nome.

  22. Clique no X para sair da tela Bindings.

  23. Selecione o painel Cliente.

  24. Defina o valor do tamanho da página Largura como Grande.

  25. Clique no botão Salvar.

  26. Feche o Live Designer e confirme as atualizações.

Melhorias Adicionais de UI / UX

Nesta seção, veremos algumas melhorias adicionais de UI / UX que podem ser feitas em nosso aplicativo Importações globais. Primeiro, reordenaremos o controle Está ativo na página Produto. Esse controle normalmente deve ser exibido como o último valor em uma tela. Em segundo lugar, veremos como usar o tipo de controle AutoComplete, que oferece aos usuários a opção de completar sintaxe, texto ou valores selecionando em um menu suspenso.

  1. Navegue até a página de visualização do aplicativo Cliente.

  2. Vá para Gaveta de Ação > Live Designer.

  3. Selecione o painel Cliente.

  4. Selecione a aba Todos os controles.

  5. Abra os detalhes do controle Estado.

  6. Altere o valor Tipo de controle para AutoCompletar.

  7. Clique no botão Salvar.

  8. Feche o Live Designer e confirme as atualizações testando a adição de um novo registro Cliente.

Comunicando

Agora que desenvolvemos a base de nosso aplicativo, veremos algumas opções de relatórios. O Vinyl possui opções intuitivas e atalhos disponíveis para disponibilizar relatórios rapidamente em um aplicativo.

Crie um Gráfico de Produtos por Categoria

Um gráfico mostrando Produtos por Categoria:

gráfico de produtos por categoria

  1. No aplicativo, navegue até Action Drawer > Design Center.

  2. Clique no botão + Página.

  3. Insira um Nome para a página. Por exemplo: Products by Category.

  4. Clique no botão Avançar.

  5. Selecione Relatórios no menu.

  6. Clique no botão Avançar.

  7. Selecione Página inteira como layout.

  8. Clique no botão Avançar.

  9. Confirme e clique no botão Concluir.

  10. Clique no botão Continuar.

  11. Selecione a opção de relatório Gráfico.

  12. Clique no botão Avançar.

  13. Clique no botão + Nova fonte.

  14. Atribua o Nome como Product (Count By Category).

  15. Defina Tipo de gráfico como Coluna.

  16. Defina Alvo como Produto.

  17. Clique no botão Criar.

  18. Selecione CategoryID e ProductID na tabela Product.

  19. Clique na aba Colunas.

  20. Confirme se CategoryID tem Usage Type definido como Category.

  21. No campo Coluna ou Expressão para ProductID, envolva o ID do produto com a expressão Count() para que apareça como Count(ProductID):

    contar expressão em torno da coluna de ID do produto

  22. Clique no botão Continuar.

  23. Confirme se Count(ProductID) tem Usage Type definido como Value e Alias é Products.

  24. Clique no botão Continuar.

  25. Selecione Produto (Contagem por categoria).

  26. Clique no botão Avançar.

  27. Confirme e clique no botão Concluir.

Prático: Crie um Gráfico de Clientes por Estado

Seguindo o processo usado para criar o gráfico Produtos por categoria, crie um gráfico Clientes por estado:

gráfico de clientes por estado

Crie um Mapa do Cliente

Nesta etapa, crie uma página chamada Mapa de Clientes que se conecta ao menu Relatórios. As instruções para preencher o painel Mapa estão abaixo.

mapa do cliente

  1. No aplicativo, navegue até Action Drawer > Design Center.

  2. Clique no botão + Página.

  3. Insira um nome para a página. Por exemplo: Customer Count By State.

  4. Clique no botão Avançar.

  5. Selecione Relatórios como Menu.

  6. Clique no botão Avançar.

  7. Selecione Página inteira como layout.

  8. Clique no botão Avançar.

  9. Confirme e clique no botão Concluir.

  10. Clique no botão Continuar.

  11. Selecione o tipo de painel Mapa.

  12. Clique no botão Avançar.

  13. Clique no botão + Nova fonte.

  14. Atribua o nome como Cliente (Contagem por Estado).

  15. Defina a finalidade como Mapa.

  16. Defina a meta como Cliente.

  17. Selecione Estado e, em seguida, CustomerID na tabela Cliente.

  18. Clique na aba Colunas.

  19. Confirme se o controle Estado tem Tipo de uso definido como Categoria.

  20. No campo Coluna ou Expressão para CustomerID, envolva o ID do cliente com a expressão Count() para que apareça como Count(“C.”CustomerID ).

  21. Clique no botão Continuar.

  22. Confirme se Count(“C.”CustomerID) tem Usage Type definido como Value e Alias como Customers.

  23. Clique no botão Continuar.

  24. Selecione a regra de negócio Cliente (Mapa).

  25. Clique no botão Avançar.

  26. Clique no botão Concluir.

  27. Confirme que agora você vê uma página Mapa do cliente com um painel de mapa exibindo a contagem de clientes por estado.

Painel

Nesta seção, criaremos uma página Dashboard em nosso aplicativo Global Imports. Os painéis são frequentemente usados em aplicativos Vinyl para transmitir dados de indicadores-chave de desempenho (KPI) para gerenciamento e executivos. O painel que construímos exibirá o mapa do cliente vinculado a uma lista de clientes, uma lista correspondente de pedidos abaixo da lista de clientes e produtos por categoria.

Nota

Neste cenário estamos reaproveitando gráficos que já foram construídos e validados.

Crie os Painéis do Painel

  1. No aplicativo, navegue até Action Drawer > Design Center.

  2. Clique no botão + Página.

  3. Atribua o Nome da página como Dashboard.

  4. Clique no botão Avançar.

  5. Selecione Início como menu.

  6. Clique no botão Avançar.

  7. Selecione o ficha 2x2 como a opção Layout de painel múltiplo.

  8. Clique no botão Avançar.

    Painel de grade 2 por 2 para selecionar o layout da página

  9. Confirme e clique no botão Concluir.

  10. Clique no botão Continuar na grade superior esquerda.

  11. Clique para selecionar o fichaMapa.

  12. Clique no botão Avançar.

  13. Selecione a regra de negócio Cliente (Mapa).

  14. Clique no botão Avançar.

  15. Confirme e clique no botão Concluir.

  16. Renomeie o Nome do painel para Map.

  17. Clique no botão Continuar na grade superior direita.

  18. Clique para selecionar o layout do painel Tile.

  19. Clique no botão Avançar.

  20. Selecione o objeto de negócios Cliente.

  21. Clique no botão Avançar.

  22. Selecione Escolher manualmente.

  23. Clique no botão Avançar.

  24. Selecione os seguintes controles para adicionar:

    1. Cliente

    2. Endereço

    3. Cidade

    4. Estado

    5. Código Postal

  25. Clique no botão Avançar.

  26. Confirme e clique no botão Concluir.

  27. Para que este painel esteja conectado ao mapa do cliente, precisamos adicionar informações vinculativas. Abra o Live Designer e selecione o painel Clientes.

  28. Clique no botão Bindings em Painel pai e vinculação.

  29. Clique no botão + Vinculação.

  30. Defina Coluna Filho como Estado.

  31. Defina Coluna Pai como Estado.

  32. Clique no ícone da marca de seleção para salvar.

  33. Clique no X para sair da tela Binding Columns.

  34. Clique no botão Continuar na grade inferior direita.

  35. Selecione o fichaGrade.

  36. Clique no botão Avançar.

  37. Selecione Pedido (Objeto de Negócio).

  38. Clique no botão Avançar.

  39. Selecione Escolher manualmente.

  40. Clique no botão Avançar.

  41. Selecione os controles Endereço e OrderDate.

  42. Clique no botão Avançar.

  43. Confirme e clique no botão Concluir.

  44. Confirme se Painel pai e vinculação está definido como Clientes (bloco).

  45. Clique no botão Vinculações.

  46. Confirme se existe um registro de ligação mapeando CustomerID para CustomerID.

  47. Clique no X para sair da tela Binding Columns.

  48. Clique no botão Continuar na grade inferior esquerda.

  49. Selecione o tipo de painel Gráfico.

  50. Clique no botão Avançar.

  51. Selecione Produto (Contagem por categoria).

  52. Clique no botão Avançar.

  53. Confirme e clique no botão Concluir.

  54. Revise a página Painel.

Melhorias no Painel

Olhando para a página atual do Painel, há algumas melhorias que podemos fazer:

  • Remova recursos de edição, exclusão e criação para que as informações sejam somente leitura.

  • Reposicione o botão Painel para ficar na parte superior.

Página Painel do aplicativo Global Imports:

página do painel do aplicativo de importações globais

  1. Na visualização de design da página Painel, clique para selecionar o painel Pedidos.

  2. Clique na aba Métodos de atualização.

  3. Defina o método Edit como No.

  4. Defina o método Insert como No.

  5. Defina o método Delete Compatível como Não.

  6. Clique no botão Salvar.

  7. Retorne à página inicial do aplicativo, atualize o navegador e confirme as atualizações.

  8. Retorne à visualização do design da página Painel.

  9. Clique para selecionar o painel Pedidos.

  10. Clique na aba Métodos de atualização.

  11. Defina Link para página como Pedido.

  12. Clique no botão Salvar.

  13. Na página inicial da visualização do aplicativo, vá para Action Drawer > Design Center.

  14. Clique no botão Menus.

  15. Clique no ícone de edição de lápis no menu da página inicial.

  16. Altere Ordem de Painel para 5.

  17. Retorne à página inicial do aplicativo, atualize o navegador e confirme as atualizações.