Definindo um Grid
Início  Anterior  Próximo

O WebIntegrator possui uma série de componentes cuja finalidade é a exibição de resultados de consultas feitas a fontes de dados, um desses é o componente Combo, que já vimos anteriormente. Um outro componente, que também tem essa finalidade, é o componente Grid.

Os componentes Grid oferecem ao desenvolvedor do WebIntegrator a possibilidade de processar as informações vinda de uma fonte de dados (consulta a um banco de dados, listagem de um diretório, mensagens em uma caixa postal POP3, etc) e exibí-las, seguindo um modelo de apresentação previamente definido pelo desenvolvedor.

Os modelos de apresentação podem seguir uma estrutura simples (modelo único), usando como base a estrutura de uma tabela HTML, para que os dados sejam exibidos de uma maneira tabular ou através de modelos múltiplos, onde cada parte do grid (cabeçalho, rodapé, células vazias, células válidas, etc) esteja representada em partes distintas.

Quando se usa o modelo simples, uma das definições a ser feita é a linha da tabela HTML desse modelo, que irá ser populada com os dados do resultado da consulta à fonte de dados, feita através do campo Início na Linha. Baseado na definição desse campo, as linhas da tabela anteriores a essa, caso existam, formam o cabeçalho do grid; a linha posterior à linha de detalhe só irá aparecer caso o resultado da consulta não retorne nenhum registro e as linhas logo abaixo dessa formam o rodapé.

A linha de detalhe definida pelo campo Início na Linha além de referenciar os nomes das colunas poderá referenciar outras variáveis que estejam na sessão inclusive referenciar outro grid para criar a visão de mestre-detalhe. As outras células do grid também poderão fazer referência às variáveis do WebIntegrator.

O modelo múltiplo, ao invés de trabalhar com um único modelo, trabalha com a definição das várias partes que compõem o modelo do grid. Essas partes são: o cabeçalho, início do registro, registro válido, registro vazio, fim do registro, sem registros e rodapé. Quando se usa o modelo múltiplo a sequência de processamento das partes é a seguinte: primeiro o WI_Engine processa o modelo relativo ao cabeçalho; em seguida se o resultado da consulta feita ao banco de dados retornou algum registro, então os modelos relativos ao início do registro, registro válido e fim do registro são processados respectivamente e isso se repete até que todos os registros tenham sido processados ou que a contagem da iteração tenha alcançado o valor definido no campo Quantidade, senão se o resultado da consulta não retornar nenhum registro então o modelo "sem registros" é processado; finalmente o modelo relativo ao rodapé é processado.

O WebIntegrator oferece três tipos de grids: o grid HTML, o grid XMLOut e o grid SQL, desses o que vai nos interessar neste tutorial será o grid SQL. Para mostrarmos o funcionamento de um grid SQL vamos definir um grid que irá exibir quais as empresas que estão cadastradas em nossa base de dados exibindo o nome de fantasia, a cidade, o estado e o ramo de atividade.

Para criarmos o grid das empresas siga os passos abaixo:

·No menu Projeto (treeview), clique na opção Combos. Em seguida, clique no submenu Grids SQL que aparece logo abaixo.  

·No campo Descrição entre com uma breve descrição da funcionalidade desse grid, por exemplo: Grid que exibe as empresas cadastradas.  

·No campo Identificador digite empresas. Este campo indica qual o identificador que será criado para esse componente e que irá identificar unicamente esse grid dentro desse projeto, será através desse identificador que nós faremos referência a esse grid em nossas páginas do projeto.  

·No campo SQL digite a instrução de consulta que será enviada ao banco de dados. Para ajudar na construção do comando SQL de consulta vamos utilizar o WIzard SQL identificado pelo ícone wisql que aparece no lado direito do rótulo SQL. O comando SQL que iremos construir deverá retornar todos os possíveis ramos de atividade, ordenados ascendentemente pela descrição.  
·Clique no ícone wisql.  

·Dessa vez nós usremos duas tabelas: a tabela ramosatividade e a tabela empresas. Na primeira tela do WIzard SQL são exibidas todas as tabelas que fazem parte do banco de dados com o qual estamos trabalhando. Certifique-se que nenhum checkbox de tabela esteja selecionado. Clicando no botão Nova, para criar uma nova seleção SQL, todas as marcações de tabelas serão removidas, então maque as duas tabelas correspondentes.  

·Como estamos usando duas tabelas clique na opção Relacionamentos que aparece na janela do WIzard SQL. Nessa opção nós definimos como será feito o relacionamento entre as tabelas selecionadas anteriormente, para recuperar as informações de relacionamentos entre as tabelas para o banco de dados clique no ícone rel.  
·Caso o SGBD tenha suporte à definição de chave estrangeira e o banco de dados também tenha usado essa definição basta clicar no botão "Atualizar" que o WI_Builder irá recuperar todas as definições. Mesmo que o SGBD não ofereça suporte ao conceito de chave estrangeira e/ou o banco de dados não tenha usado tal definição o desenvolvedor poderá definir esses relacionamentos internamente no WI_Builder.  

·No campo Chave primária escolha a opção ramosatividade e no campo Chava estrangeira escolha a opção empresas.  

·Abaixo do campo Chave primária escolha a opção codigo e abaixo do campo Chave estrangeira escolha a opção ramoatividade.  

·Clique no botão "Gerar" para que seja salva a definição de que a tabela empresas se relaciona com a chave primária codigo da tabela ramosatividade através da coluna ramoatividade.  

·Feche a janela de definição de relacionamentos.  

·Clique novamente na opção Relacionamentos da barra superior, perceba que dessa vez já apareceu o relacionamento entre as tabelas. Clicando em um das opções do relacionamento entre as tabelas o desenvolvedor define se será feita um inner join identificado pelo símbolo innerjoin, um right join identificado por rightjoin ou um left join identificado por leftjoin indica que será feito um inner join entre as tabelas. No nosso caso deixe a opção marcada para a realização de um inner join (innerjoin).  

·Clique na opção Campos da barra superior, que aparece na janela do WIzard SQL, para a tabela empresas escolha as colunas nomefantasia, cidade e uf e para a tabela ramosatividade escolha a coluna descricao.  

·Clique na opção Filtros da barra superior, que aparece na janela do WIzard SQL. Nessa parte vamos pedir para que o nome das colunas sejam substituídos por títulos mais explicativos quando vierem do resultado da consulta. Em Campos escolha a opção "empresas.NomeFantasia", no campo Título digite "Nome de Fantasia" sem as aspas e clique no botão "gravar".  

·Ainda em Filtros escolha a opção "ramosatividade.Descricao", no campo Título digite "Ramo de Atividade" sem as aspas e clique no botão "gravar".  

·Clique na opção SQL da barra superior, que aparece na janela do WIzard SQL, para visualizar o comando gerado e o resultado obtido com a execução dele. Se tudo estiver correto clique no botão "copiar" para que o comando SQL gerado seja copiado para o campo SQL da definição do grid.  

·Clicando no botão "gravar" a janela do WIzard SQL fechará automáticamente salvando as definições do grid SQL empresas.  

Perceba que o campo Início na Linha foi preenchido automaticamente com o valor 2, isso indica que a segunda linha da tabela definida no modelo simples é a linha que será populada com os valores dos registros oriundos do resultado da consulta. Perceba também que a caixa da opção Gerar, fica marcada a partir da primeira vez que acessamos a página para gerar um novo grid. Portanto, neste momento você deverá clicar no botão "gravar".

Para visualizar o grid, clique no ícone view16 ou, se preferir, visualize e até mesmo edite o modelo que foi gerado automaticamente pelo WI_Builder, basta clicar no ícone prop da sessão Modelo.

Após termos definido um grid, para fazermos referência a ele numa página WSP basta usarmos a seguinte sintaxe: |grid.<identificador-do-grid>|, onde <identificador-do-grid> seria o identificador dado a um grid definido para o projeto.

A figura abaixo ilustra a visualização do grid definido anteriormente.

bld_grid