Entendendo o Grid do MVC

Quando falamos de MVC tem dois componente muito importantes que você precisa conhecer muito bem: o Field e o Grid. O field foi apresentado no post Hello Word e agora eu quero te apresentar o Grid.

O Grid é um componente que permite a manipulação de vários registros de uma única vez,  pra ficar mais claro, sempre que você possui um relacionamento do tipo 1:N a tabela que possui N registros será representada por um grid no MVC.

O Grid existe no Model e também existe na View, no Model ele é um componente capaz de armazenar em memória vários registros com várias colunas e na View ele exibe um browse com os registros armazenados no Model. Se você já fez uma GetDados em AdvPL, o grid é a representação da GetDados. Independente se você conhece uma GetDados ou não, o grid na View tem a seguinte aparência (na versão 12 do Protheus):

grid

Agora vamos para a parte divertida do post, colocar a mão na massa.

 

Criando o Grid no Model

Eu falei que o grid representa o “N” do relacionamento 1:N, logo se o grid é o “N”, então eu preciso relacionar o grid com um componente que represente o “1” do relacionamento, com isso eu quero te dizer que um grid sempre precisa de um componente pai, ou como falamos no dia a dia, um Owner.

O Owner do grid pode ser um Field ou outro Grid, dependendo da modelagem da sua aplicação.

Para criar o grid usamos o método AddGrid do Model, esse método recebe alguns parâmetros, mas o importante nesse momento são os três primeiros:

1. cID : Identificação do grid no model. O MVC usa ID para todos os componentes e esses IDs são usados em diversos momentos. Não há uma regra para compor o ID, mas é convencionado usar Alias da Tabela+”DETAIL”, ou seja, se for um grid para a tabela SC6, o ID seria “SC6DETAIL“. Claro que nada impede você de chamar seu ID de “BOLINHA”, você quem decide qual nome será dado.

2. cOwner : ID do componente pai, esse parâmetro define quem será o Owner do grid. O ID passado deve ser igual ao ID que foi usado na criação do field ou do grid pai. Falei na linha de cima que vamos usar os IDs em diversos momentos, esse é um deles.

3. oStruct: Estrutura de Dados do tipo FWFormModelStruct, essa estrutura pode ser criada com a função FWFormStruct igual ao que foi mostrado para a estrutura do Field no outro post.

Exemplo:

oModel:AddGrid("ZB6DETAIL", "ZB5MASTER", FWFormStruct(1,"ZB6"))

 

Opa! Ta pronto o grid então? Quase!

O grid tem um relacionamento com o Owner e é preciso definir para o MVC como esse relacionamento funciona, ou seja, quais campos são as chaves do relacionamento. Baseado nesse relacionamento o MVC fará a gravação das chaves e numa operação diferente de inclusão, usará o relacionamento para obter os registros que devem ser carregados para o Model. Isso significa que se sua aplicação está com problemas na gravação dos campos chaves, reveja o relacionamento, grandes chances do problema estar aí.

Para definir o relacionamento usamos o método SetRelation do model, ele recebe três parâmetros:

1. cID: ID do grid que estamos definindo o relacionamento

2. aRelation: Array de relacionamento dos campos. Esse array deve conter duas colunas, a primeira é o ID do campo do grid e a segunda o ID do campo do Owner que o grid está relacionado
3. cIndexKey: Chave de índice que deverá ser usada para ordenar os dados no grid

Exemplo:

oModel:SetRelation(“DETAILZB6”, ; 
                  {{“ZB6_FILIAL”,xFilial(“ZB6”)},; 
                  {“ZB6_CODTUR”,”ZB5_CODTUR”  }}, ; 
                  ZB6->(IndexKey(1)))

Agora sim, com esses dois métodos você tem um grid no Model.

Criando o Grid na View

Na View o grid é um componente de formulário, ele é exibido na tela como uma tabela com varias colunas, cada linha da tabela é um registro e cada coluna um campo da estrutura de dados. O usuário adiciona quantos registros ele desejar.

O Grid na View é componente de formulário que está relacionado com um grid do Model, como os dados e o controle do relacionamento estão no Model, na View não é necessário relacionar o Grid com um um Owner, na View vamos criar apenas a interface para exibir os dados do Model.

Para criar o componente usamos o método AddGrid da View, ele recebe três parâmetros:

1. cID: Identificação do formulário do grid na View

2. oStruct: Estrutura de Dados do tipo FWFormViewStruct, essa estrutura pode ser criada com a função FWFormStruct igual ao que foi mostrado para a estrutura do Field no outro post.

3. cIDModel: ID do grid do Model que se relacionará com a View, esse ID é o ID do grid que criamos no Model, nesse parâmetro definimos qual componente do Model conterá os dados que serão exibidos na interface gráfica do grid

Exemplo:

oView:AddGrid('FORM_ALUNOS' , FWFormStruct(2,"ZB6","ZB6DETAIL")

Todo formulário na View precisa de um box para ser exibido na tela, no exemplo do Hello Word tínhamos apenas um box que ocupava 100% do espaço da tela e exibia o Field. Quando temos mais de um formulário, então precisamos de mais boxes, um para cada formulário. O box é criado por percentual, então se um box ocupa 100%, dois boxes precisam ser divididos para que, somados ocupem 100%. Então, um pode ter 20 e outro 80, um 30 e o outro 70, um 50 e o outro 50, depende da sua necessidade, o importante é que no total, a soma do percentual dos boxes seja igual a 100.

Lembrando que o método para criar box horizontal é o createHorizontalBox:

oView:createHorizontalBox(cIdBox, nPercentual)

E o método para acoplar o formulário no box é o setOwnerView:

oView:SetOwnerView(cIDFormulario,cIDBox)

Futuramente quero criar um post apenas para falar de box, acho que esse é um tema interessante e que gera algumas duvidas.

 

Pronto, com esses métodos você consegue criar um grid para uma aplicação. Não existe limite de grids para seu programa, já vi um com 12 grids, o importante é sempre que criar um grid, criar um relacionamento para ele.

No próximo post pretendo abordar as validações que o grid e o field permitem fazer e como usar os métodos getValue e setValue para obter e atribuir valor ao modelo de dados.

Deixei no gitHub um fonte completo com grid, no exemplo tem um Field representando a tabela de Turmas e um grid representando a tabela de Alunos, você pode obter o exemplo aqui.

Espero que o conteúdo seja útil!

[]s, Juliane

Anúncios

3 comentários em “Entendendo o Grid do MVC

  1. Muito boa a postagem!
    Bem detalhada e simples de entender…
    Apenas uma observação, no trecho abaixo faltou um parenteses depois de “ZB6″.

    oView:AddGrid(‘FORM_ALUNOS’ , FWFormStruct(2,”ZB6″,”ZB6DETAIL”)

    Ótimo trabalho!

    Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s