Introdução ao Vinyl 3.3: Aprimorando a Aplicação¶

Metodologia de Desenvolvimento de Aplicativos de Vinyl¶

Construir um aplicativo no Vinyl conduz você pelas camadas de dados, negócios e UI. Seguindo nossa metodologia iterativa do Vinyl para desenvolvimento de aplicativos, construímos rapidamente um aplicativo que é executado primeiro na camada de UI e, em seguida, executamos, testamos, modificamos, testamos novamente e continuamos a iterar conforme necessário.

Construção de Baixo para Cima¶

Até agora, desenvolvemos nosso aplicativo a partir da camada inferior do Vinyl. Começamos na camada de dados e usamos aceleradores de tabela para construir a lógica da camada de negócios e as páginas da camada de UI.

Modificações de Cima para Baixo¶

Agora que temos um aplicativo que podemos executar, a partir de agora mudaremos de marcha e trabalharemos no Vinyl de cima para baixo. De agora em diante trabalharemos na camada de UI do aplicativo para futuras alterações e modificações.

Crie uma Recuperação de Lista para a Página do Pedido¶

Nesta seção, revisaremos a página Pedido e veremos como podemos torná-la mais útil para o usuário. Configuraremos uma List Retrieve, que nos permite preencher automaticamente informações especificadas em uma tela, quando elas estiverem disponíveis em um objeto de negócios subjacente. Em nossa página Pedido, aproveitaremos esta Recuperação de lista para informações padrão da camada de dados sobre nosso registro Cliente.

Tela pop-up do formulário Pedido:

1. Na página inicial do aplicativo UI Layer, clique no link de navegação Pedidos.

2. Clique no botão Criar no painel Pedidos.

3. Selecione o Cliente como Salem Witch Museum.

   Nota

   Nenhuma informação está atualmente padronizada para Endereço, Cidade, Estado, Código Postal, Remetente ou do cliente Data do pedido. Este é um cenário onde podemos criar uma List Retrieve para preencher automaticamente essas informações da camada de dados.

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

5. Selecione o controle Cliente na visualização do aplicativo do lado esquerdo.

6. Clique na aba Opções de lista na visualização de design da página.

7. Clique no botão Recuperações em Painel e Lista de Interações.

8. Clique no botão Automap Colunas na página Recuperações.

9. Confirme se os mapeamentos Coluna do Painel e (Origem da Lista) agora existem para Endereço, Cidade, PostalCode, ShipperID, Instruções de envio e Estado.

10. Clique em X para sair da tela Recuperações.

11. Clique em X para sair da visualização de design da página.

12. Selecione o Cliente como Salem Witch Museum.

13. Confirme se os campos agora estão preenchidos para Endereço, Cidade, Estado e Código Postal quando um registro de Cliente for selecionado.

14. Clique no botão Salvar.

Prática: Adicionar Registros de Pedidos¶

Aqui criaremos registros de Pedidos, para que nosso aplicativo Importações Globais tenha mais dados preenchidos para trabalhar.

Personalize a Página do Pedido¶

Se olharmos para a página Pedido atual, podemos imaginar que seria útil ter informações de Detalhes do pedido aparecendo nesta mesma tela para o usuário do aplicativo. Na próxima seção, passaremos por algumas alterações de personalização para que o processo de Pedido no aplicativo Importações Globais seja mais robusto.

Adicionar Painel de Detalhes do Pedido à Página do Pedido¶

A página Pedido com o painel Detalhes do pedido adicionado:

1. No aplicativo UI Layer, navegue até a página Pedidos.

2. Clique no botão Criar para acessar a página Pedido.

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

4. Clique no botão + Painel.

5. Selecione o fichaGrade.

6. Clique no botão Avançar.

7. Localize OrderDetail (Objeto de Negócio) e marque como Selecionado.

8. Clique no botão Avançar.

9. Selecione Escolher manualmente e clique em Avançar.

10. Selecione os seguintes controles na coluna Selecionar:

    1. ID do produto

    2. UnitOfMeasureID

    3. Preço

    4. Quantidade

11. Clique no botão Avançar.

12. Confirme e clique no botão Concluir.

    Nota

    O pop-up Order exibe os dois painéis adicionando navegação em estilo de aba à região superior esquerda da tela. Um usuário precisaria clicar em Detalhes do pedido para ver as informações correspondentes. Vamos alterar o tamanho da tela para acomodar os dois painéis a serem exibidos.

13. Na visualização de design da página, em Propriedades da página, defina Largura como Extra Grande.

14. Clique no botão Salvar.

15. Clique no painel Detalhes do pedido.

16. Em Propriedades do painel para Detalhes do pedido, defina Tamanho do painel como Grande.

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

18. Selecione Inline como Método de Inserção.

19. Clique no botão Salvar.

20. Clique em X para sair da visualização de design da página e retornar à visualização do aplicativo para a página Order, atualize o navegador e confirme que agora você vê Order e Order Os painéis Detalhes e o painel Detalhes do pedido têm mais largura alocada do que o painel Pedido.

Adicionar Extensão e Detalhes do Produto aos Detalhes do Pedido¶

Observando o painel Detalhes do pedido na página Pedido, seria útil ter um valor de Extensão adicionado a ele que pegue o valor de Preço e o multiplique por Quantidade valor. Nesta seção, veremos como fazer isso, modificando a regra de negócios que o painel está usando e, em seguida, adicionando o novo valor a ser exibido no painel.

1. Na página Order do aplicativo, vá para Action Drawer > Live Designer.

2. Clique para selecionar o painel Detalhes do pedido.

3. Clique no ícone de engrenagem próximo ao objeto de negócios OrderDetail.

4. Renomeie o objeto de negócios para OrderDetail (With Product).

5. Clique no botão + Tabelas.

6. Clique no botão Adicionar para Produto.

7. Marque a caixa de seleção SupplierID na tabela Product.

8. Clique na aba Colunas.

9. Clique no botão + Coluna.

10. No campo Coluna ou Expressão, insira O.Price * O.Quantity.

11. Nomeie o alias como Amount.

12. Confirme se o tipo de dados lógicos é Moeda.

13. Clique no botão Salvar.

14. Clique no botão Resultados.

15. Confirme que você vê uma coluna para Valor nos resultados.

16. Clique no botão Voltar para retornar à visualização do design de regras.

17. Clique no botão Voltar para retornar à visualização de design da página Pedido.

18. Clique para selecionar o painel Detalhes do pedido.

19. Clique no botão + Controle.

20. Defina a coluna como Valor.

21. Defina Tipo de controle como Numérico.

22. Clique no botão Avançar.

23. Confirme e clique no botão Concluir.

24. Clique no botão + Controle.

25. Defina Coluna como SupplierID.

26. Defina Tipo de controle como Lista.

27. Clique no botão Avançar.

28. Defina Origem como Fornecedor (Lista).

    Nota

    Devido à chave primária e ao título serem definidos na tabela Supplier, o Vinyl sabe como padrão SupplierID e Supplier como chave e título.

29. Clique no botão Avançar.

30. Confirme e clique no botão Concluir.

31. Clique na aba Posição e largura na visualização de design da página.

32. Defina o valor da posição de alteração para 5.

33. Clique no botão Salvar.

34. Feche o Live Designer e confirme que agora você vê o painel Detalhes do pedido com o valor Valor exibido.

Prática: Adicionar Registros de Detalhes do Pedido¶

Selecione um dos registros Pedido e adicione os seguintes registros Detalhes do pedido a ele:

Modificar Painel para Usar Edição (excel)¶

Nesta seção, veremos como usar Editar (Excel), uma configuração em nível de painel que exibe o painel de forma que os usuários possam simplesmente clicar e editar todos os campos editáveis para fazer as alterações necessárias. As alterações são salvas ao sair do(s) campo(s). Isso é diferente do estado padrão do painel Editar, que normalmente apresenta aos usuários um ícone de edição de lápis e um ícone de marca de seleção para salvar.

O painel Detalhes do pedido com Edição do Excel:

1. Na página Pedido, vá para Action Drawer > Live Designer.

2. Selecione o painel Detalhes do pedido.

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

4. Selecione Excel como Método de edição.

5. Clique no botão Salvar.

6. Feche o Live Designer.

Adicionar Categoria à Lista de Produtos e Exibir Como Agrupar por¶

Nesta seção, adicionaremos o valor Categoria ao controle Lista de produtos e depois o exibiremos como Agrupar por. Quando configurado, isso permitirá que o menu suspenso Produto exiba tanto o valor de Categoria quanto os Produtos dentro de cada Categoria.

O painel Detalhes do pedido com Lista de produtos modificado:

1. Na página Pedido, vá para Action Drawer > Live Designer.

2. Selecione o controle Produto no painel Detalhes do pedido.

3. Clique na aba Opções de lista.

4. Clique no ícone de engrenagem ao lado de Produto (Lista).

5. Clique no botão + Tabelas.

6. Localize a tabela Categoria e clique no botão Adicionar.

7. Selecione Categoria na tabela Categoria.

8. Clique em Resultados e confirme que não há erros.

9. Clique no botão Voltar do Vinyl até retornar à visualização de controle Lista de produtos.

10. Clique na aba Opções de lista na visualização de design da página.

11. Em Propriedades da lista (adicional), defina Agrupar por (coluna) como Categoria.

12. Clique no botão Salvar.

13. Feche o Live Designer e confirme se o controle Product agora é exibido conforme esperado.

Crie uma Lista de Recuperação para Detalhes do Pedido¶

Se tentarmos criar um registro para Detalhes do pedido selecionando um Produto, veremos que não há padrões preenchidos para a Unidade de medida e o Preço correspondentes. Esta é outra oportunidade de usar List Retrieve para exibir esses valores aos usuários do nosso aplicativo.

1. Na página Order do aplicativo, vá para Action Drawer > Live Designer.

2. Clique para selecionar o controle Produto no painel Detalhes do pedido.

3. Clique na aba Opções de lista.

4. Clique no botão Recuperações em Painel e Lista de Interações.

5. Clique no botão Automap Colunas na página Recuperações.

6. Confirme os mapeamentos Coluna do Painel e (Origem da Lista) para Preço, SupplierID e UnitOfMeasureID.

7. Clique em X para sair da tela Recuperações.

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

Adicionar um Agregado¶

Em seguida, adicionaremos uma Função agregada para somar a coluna Valor no painel Detalhes do pedido.

A página Pedido com um agregado adicionado ao painel Detalhes do pedido:

1. Na página Order do aplicativo, acesse Action Drawer > Live Designer.

2. Clique para selecionar o controle Valor no painel Detalhes do pedido.

3. Selecione Soma como Função Agregada.

4. Clique no botão Salvar.

5. Feche o Live Designer e confirme que agora você vê um agregado exibido que soma os valores de Amount.