330

Os elementos das web panels são:

Web Form: Cada web panel contem um form Web, o qual deve ser desenhado pelo analista agregandovariáveis, atributos, assim como outros controles, para que o usuário possa interagir com o mesmo.

Regras: As regras de uma web panel permitem definir certos comportamentos pontuais de dito objeto. Porexemplo, declarar quais parâmetros recebe, definir quais va�����is não queremos que sejam aceitas no formmas utilizadas para mostrar informação, etc.

Condições: É para definir as condições que devem cumprir os dados a ser recuperados (filtros).

Subrotinas: São rotinas locais na web panel.

Eventos: As web panels empregam a programação orientada a eventos. Este tipo de programação permitedefinir c�digo ocioso, que se ativa em resposta a certas ações provocadas pelo usuário ou pelo sistema. Nestaseção de uma web panel é onde se define o c�digo ocioso associado aos eventos que podem ocorrer durantea execução da web panel.

Propriedades: São caracter�sticas a serem configuradas para definir certos detalhes referentes aocomportamento geral da web panel.

Ajuda: Permite a inclusão de texto de ajuda, que os usuários podem consultar em tempo de execução da webpanel.

Documentação: Permite a inclusão de texto t�cnico como documentação para os desenvolvedores.

No exemplo, a web panel contem duas variáveis &StartDate e &EndDate como se mostra acima. Em tempo deexecução, o usuário pode ingressar valores nas variáveis &StartDate e &EndDate visto que nas web panels asvariáveis por default são de entrada.

No evento Enter da web panel (associado ao botão Billing Generation), se obtêm e gravam as faturas cujasdatas se encontrem na faixa especificada.

De modo que a definição desta web panel é para que o usuário ingresse a faixa de datas, e ao selecionar obotão Billing Generation, se execute o processamento das faturas.

A web panel mostrada acima foi criada para exibir os dados de um cliente. Precisa ser chamada a partir de outro objeto,passando por parâmetro o código do cliente do qual se quer mostrar a informação.

Uma web panel é um objeto tipicamente utilizado para mostrar informação. Então, quando GeneXus encontra atributos noform, qual intenção do programador ao ter colocado isso? Pois, o que está pedindo implicitamente é que se busque osdados correspondentes a base de dados para mostrá-los.

Com a web panel anterior, GeneXus vai a tabela CUSTOMER e filtra pelo atributo recebido por parâmetro, CustomerId,mostrará a informação do registro encontrado. Que informação? A que reside nos atributos que figuram no form. Mas oatributo CountryName não se encontra na tabela CUSTOMER. Pois acontece o mesmo que com um for each, um grupo degrupo de Data Providers, etc., isto é, desde o registro da tabela base, se acessa o registro relacionado da tabela estendidanecessária, para obter o valor do atributo requerido (em nosso caso acessa a tabela COUNTRY para recuperar o valor deCountryName).

As inferências que GeneXus realiza são as seguintes:

Ao se tratar de uma web panel, os atributos que figurem serão de consulta1. Então GeneXus deve acessar a base de dadospara recuperar seus valores. De quais tabelas? Vai depender se a Web panel possui grids ou não:

• Web panel plana (sem grid): os atributos estão “soltos” no form, como no caso que estamos mostrando. Se isso acontece,é porque o analista necessita acessar a informação de um registro de uma tabela (e eventualmente dos registrosrelacionados pela tabela estendida), como é o caso do exemplo. Neste caso, a web panel estará bem programada se alémdisso se agregar um filtro que determine “esse” registro a ser mostrado. Em nosso caso, temos a regra parm que ao receberno atributo PK da tabela somente vai recuperar um registro. GeneXus determina uma tabela base da web panel, assimcomo faz para um for each. Como? Buscando a mínima tabela estendida que contenha os atributos..

• Web panel com um ou mais grids: veremos em seguida, mas já podemos pensar... Qual o sentido de colocar um grid?Mostrar informação repetitiva. No caso geral: cada grid mostra muitos registros de uma tabela (e sua informação associada).

____________________________________________________________________________________________1 Ao contrário do que acontece com os atributos nas transações (exceto os inferidos ou os que tem regra noaccept ou propriedade Enableddesabilitada).

O que diferencia está web panel da anterior é que ela não é plana.

Quando se incluiu um grid num form, se está indicando que vai mostrar uma quantidade indefinida de dados(neste caso, clientes).

Visto que nesta web panel tem envolvidos atributos, GeneXus infere que deseja acessar a base de dados.Simplesmente dizendo quais atributos deseja mostrar, sem necessidade de mais informação. Existe um grid,tem atributos, então, necessariamente terá tabela base, isto é, a tabela da base de dados navegada em buscada informação requerida.

Se ao invés de mostra esta informação em tela, quisermos uma listagem, vamos criar um procedimento comum print block ‘customer’ com os atributos CustomerName e CountryName e no source programaríamos:

for eachprint customer

endfor

Isto é a análogo, somente que o for each está implícito, não tem que especificá-lo. Cada linha do grid que secarrega, é como o print que se executa em cada iteração do for each da listagem.

Das tabelas CUSTOMER e COUNTRY e da relação entre ambas é Na1, GeneXus determina a tabela basedesta web panel (sendo que a tabela base seja a mínima que contenha todos os atributos referidos). Observeque este exemplo difere do anterior, que os atributos aparecem num grid, e portanto, não precisa ser realizadoo filtro, fica somente registros de CUSTOMER. Nesta web panel não tem a regra parm que estabeleça filtroalgum.Também vamos ver que conseguimos que esta web panel além de mostrar os clientes da base de dados nogrid, podem realizar filtros para os clientes que se quer ver em cada oportunidade, seja por nome do cliente,endereço ou por ambos. Por isso as variáveis aparecem no form.

������� ������

335

Quando GeneXus pode determinar automaticamente uma tabela para carregar as linhas do grid, o faz, e nessecaso não precisa dessa informação. É por isso que falamos que nesse caso tem um for each ‘implícito’. Depoisveremos casos em que isso não acontece (grids sem tabela base).

Observe o exemplo, existindo 4 registros na tabela, são carregados um de cada vez, um a um dos quatro.

Se agora queremos que o usuário possa filtrar os clientes que deseja ver...entra em questão as variáveis quedefinimos na parte fixa do form, como veremos na página seguinte.

336

Observe como na janela de propriedade do control Grid, aparece un de nome ‘Conditions’. Clicando no comboabre um editor para especificar as condições booleanas que devem cumprir os registros para ser carregadoscomo linhas do grid.

É por essa razão que foi agregado as variáveis &CustomerName e &CountryName no form da web panel, paraque o usuário possa ingressar ali valores que operem como filtros sobre os dados a mostrar. Em nosso caso,estabelecemos filtros com o operador like. As variáveis na parte plana do form de web panels são por defaultde entrada. Depois veremos que se estiverem em grids são por default de saída.

Observe que as condições (separadas com “;”) equivalem as que apareciam nas cláusulas where de um foreach (ou grupo repetitivo de data provider).

Da mesma maneira, por questões de otimização, pode determinar, igual se fazia com um for each, critério deordenação da tabela percorrida, como se mostra acima no exemplo.

Nota: Assim mesmo, da mesma forma que num procedimento, as condições locais podem ser realizadas nogrid (for each), mas também podem ser gerais, mediante o selector Conditions. Isto tem sentido quando tivermais de um grid (for each), para não ter que repetir cada vez a mesma condição.

337

A propriedade Automatic Refresh que se encontra a nível da Web Panel pode ter os seguintes valores:• When variables in conditions change (valor por default): depois de chamar automaticamente o refresh, se dispara oevento Load carregando o grid segundo os novos valores das variáveis.• No

Dependendo do tipo de dados do filtro, e do control web utilizado para filtrar, a condição será aplicada quando se estádigitando ou ao abandonar o campo.No caso de filtros em controles edit, para tipo de dados Character, são aplicados quando o usuário vai digitando. Para tipode dados Date, DateTime e Numeric, as condições são avaliadas ao sair do campo.No caso de filtros combo boxes ou dynamic combos, as condições são avaliadas quando se abandona o campo. ParaCheck boxes e Radio buttons, as condições são avaliadas quando o valor é alterado.

Execução: o que acontece no cliente e no servidor ao ter a propriedade por default e um grid com tabela base?

1ª execução (variáveis vazias):For each CUSTOMER

guardar em memória CustomerNameacessar o registro de COUNTRY relacionado

guardar em memória CountryNamecarregar (load) linha no grid com ambos valores

N-ésima execução (altera o valor da variável das conditions):Automaticamente no browser do cliente se detecta a mudança � refresh no servidor para voltar a carregar o grid com osregistros que cumpram as condições (com os novos valores das variáveis) � load para cada linha.

Conclusão: Existem dois eventos do sistema que ocorrem no momento da carga do form (Refresh) e da carga de cadalinha do grid (Load). Como veremos, estes eventos podem ter códigos associados para serem executados nos momentosespecíficos...

338

Ampliaremos a funcionalidade de nossa web panel, permitindo ver o estado de cada cliente, e para aquelesque estiverem ‘On Hold’, brindando a possibilidade de os passar para o estado ‘Active’.

Para fazer isto, agregaremos ao grid o atributo CustomerStatus que mostra o estado, e uma variável booleana&Select, que permitirá ao usuário selecionar aqueles clientes que deseja ‘ativar’. Além disso um botão paraefetivamente ativar todos os clientes marcados. Mas isto o faremos num segundo momento.

Observe que se o tipo de dados da variável &select booleano, por default aparece no grid como um check box.Para assegurar que o usuário somente tente ‘ativar’ clientes ‘On Hold’, desejamos que somente apareçahabilitado este check box quando corresponde... para ele necessitaremos programar a carga de cada linha, istoé, o evento Load...

339

Na seção Events da web panel, programamos o evento Load do grid que vemos acima. No exemplo,customerGrid é o nome que demos ao control grid no form.

Ao se tratar de uma web panel com um único grid, também poderíamos ter programado o evento Load:

Event Loadif CustomerStatus = Status.OnHold

&select.Enabled = 1

else&select.Enabled = 0

endifendevent

Isto é, no caso de uma web panel com um único grid, não é necessário qualificar o evento com o nome do grid.Igualmente recomendamos fazer, antecipando a possibilidade futura de agregar outro grid no form da webpanel.

O evento Load é disparado para cada linha que vai carregar no grid, encontrando este comando ou não. O quefazemos no exemplo é aproveitar este momento imediatamente anterior a carga, para efetuar uma ação. Eesse é o código que incluímos no evento.

Agora sim, estamos em condições de implementar a ‘activate’, para isso precisamos associar ao botão umevento, que poderá ser o evento Enter ou um de usuário...

340

No exemplo, quando o usuário pressiona o botão ‘Confirm’, necessitamos percorrer todas as linhas do grid, epara cada uma delas, se o usuário marcou a variável boleana &Select f (check box), devemos alterar o estadodo cliente correspondetne, de ‘On Hold’ a ‘Active’.

Ao inserir o botão no form da web panel, e editar suas propriedades, por default se pode observar que o botaoesta associado ao evento Enter (ver propiedad OnClickEvent).

O Entrr será um evento do sistema, executado quando o usuário faz clique no controle associado, assim comoquando ele pressiona a tecla Enter.

Neste exemplo veremos na 1a vez:

• Possibilidade de definir eventos de usuário e associar os controles ou utilizar o evento Enter do sistema.• Comando For each line, para percorrer as linhas já carregadas no grid.

• Variáveis num grid passam a ser Read only (de saída) por default, a serem de entrada, quando é utilizado umcomando for each line nesse grid (também quando é programado os eventos OnClickEvent, Click, etc., emalguma coluna do grid).

Observe que a única coisa em comum no comando For each line e comando For each estudado antes, o fatode representar um estrutura repetitiva. A diferença mais importante: enquanto o for each percorre registros deuma tabela (base) da base de dados, o for each line percorre as linhas de um grid.Em nosso exemplo definimos uma variável &customer, Business Component Customer, trocaremos o estadopara ‘Active’ de todas as linhas do grid que o usuário marcou. Para isso utilizamos o comando for each linepara percorremos o grid.

341

Outra possibilidade, ao invés de utilizar o evento do sistema Enter, é definir um evento de usuário. Isso érealizado seguindo os passos que estão acima.

Como podemos ver, a maioria dos controles presentes em um form tem a propriedade OnClickEventassociada. Essa propriedade permite especificar um evento a ser disparado quando o usuário faz clique sobreo controle. Poderá ser um evento do sistema (Refresh, Enter) ou um evento definido pelo usuário.

342

A parte fixa da web panel por default é de entrada, como já vimos anteriormente para as variáveis utilizadaspara filtrar os clientes (customers) mostrados no grid.

Como mostrar dados no gridPor default todo atributo e variável que está dentro de um grid se mostra em execução como texto, porque é

unicamente de leitura e por consequencia não pode ser alterado.

Como aceitar dados em um gridÉ possível aceitar dados nas variáveis de um grid dependendo da programação dos eventos existentes no

objeto:

1. Se dentro de um evento da web panel ter o comando For each line, todas as variáveis que estão dentro dogrid passam a ser de entrada. É possível indicar neste caso quais são as variáveis que não podem sermodificadas através da propriedade ReadOnly.

2. Se dentro da fila tem algum controle com um evento click, dblClick, etc.. associado (ou evento de usuárioespecificado na propriedade OnClickEvent), acontecerá o mesmo.

343

Continuamos ampliando nosso exemplo; agora queremos que o usuário possa selecionar uma linha do grid(um cliente) e pressionando botão ‘Select customer’ para chamar a web panel que havíamos implementadoanteriormente.

Neste exemplo vemos duas funcionalidades:

• A necessidade de colocar uma coluna no grid oculta (não visível).• Permitir que o usuário selecione uma linha do grid para fazer algo com ela.

Por que colocar a coluna correspondente a CustomerId e ocultá-la, ao invés de não agregar o atributo? Faça aseguinte reflexão: o atributo CustomerId enviado por parâmetro ao executar o evento ‘Select customer’, deonde é extraído? Da base de dados? Não, é o que está carregado no grid. Mais especificamente, para cadagrid existirá um arquivo temporário que contem a quantidade de colunas que o grid possuir, visíveis e ocultas.Quando o usuário seleciona no grid a segunda linha, e pressiona o botão ‘Select customer’, está posicionadonesse arquivo temporário, correspondente a essa linha (e nunca na base de dados!). É por esta razão que senão colocarmos nenhuma coluna correspondente a CustomerId no grid, não estaríamos passando valor alguma CustomerView.

Para que o usuário possa selecionar uma linha do grid, é suficiente ‘prender’ a propriedade ‘AllowSelection’ dogrid.

344

Como GeneXus determina uma tabela base para percorrer automaticamente para carregar o grid da webpanel?

Se existir algum atributo em pelo menos um dos 3 lugares mencionados, GeneXus poderá encontrar a tabelabase. Para determinar a tabela base, ele extrai os atributos encontrados ali (parte fixa do Form, no Grid, tantonas colunas como nas propriedades Order, Conditions ou using Data Selector, e nos eventos programaprogramados no selector de Eventos, somente os atributos que estejam ‘soltos’ dentro do evento, isto é, forade um comando for each de acesso a base de dados), e determina a mínima tabela estendida que oscontenha. A tabela base dessa estendida, será a percorrida automaticamente e carregada com o Load.

Observe que somente programamos o evento Load para tomar a decisão para cada línea que vai sercarregada no grid, que habilitará ou não para a mesma variável &select que permitirá ao usuário marcar ocheck box.

Importante: A forma de determinação da tabela base de um grid dependerá se existir outro grid na web panelou se é o único. O resumo apresentado aqui corresponde a um único grid. Neste caso se diz que a própriaWeb panel tem tabela base. É a do grid. Quando existir mais de um grid na web panel, isto não vai tersentido, e cada grid passará a ter cada grid passará a ter ou não tabela base. Veremos a forma dedeterminação das tabelas bases nesse caso, quando tratemos o caso de múltiplos grids em uma web panel.

345

Estamos apresentando aqui outro exemplo, para que possamos observar um caso que surge a necessidadenatural de implementar um grid sem tabela base.

O caso de implementação natural de um grid com tabela base, é quando deseja que seja carregado para cadaregistro de uma tabela, uma linha do grid (1 registro – 1 linha). No caso que se quer carregar uma linha do gridcomo produto a ser lido de vários registros da base de dados (N registros – 1 linha), como produtos decálculos, etc., é mais natural implementar o grid sem tabela base.

O caso do exemplo: não queremos carregar para cada fatura uma linha, mas sim queremos agrupar as faturaspor data, e para cada grupo, carregar uma linha que some seus valores. Estamos falando de um controle decorte. Se tivéssemos que implementar uma listagem PDF ao invés de uma web panel, saberíamos comoprogramar (como o fazemos acima) . Vejamos como implementar com uma web panel...

346

O objetivo do comando LOAD é agregar um linha num grid. É necessário quando o grid não tem tabela base,visto que nesse caso não será agregado nenhuma linha de forma automática. O evento Load vai ocorrer umavez, e o grid retornará vazio caso não seja programado. Portanto neste caso é imprescindível que sejaprogramado, de acordo com a lógica correspondente. Uma vez que for atribuído a cada variável seu valor, e sedeseja agredar uma linha ao grid, o comando LOAD deverá ser programado.

O comando LOAD somente pode ser especificado dentro do evento Load do grid de uma web panel.

Observe que neste caso a implementação fica por conta do analista. Frente ao caso do grid com tabela base,neste GeneXus realiza menos inferências.

347

No caso de um grid sem tabela base, os filtros dos dados são programados dentro do código implementadopara carga (o do Load). Aqui não tem o refresh automático. Isto é, quando o usuário modifica os valores dasvariáveis que intervém nos filtros, GeneXus não sabe que tem que voltar a carregar o grid.

Para isso deverá, por exemplo, agregar um botão associado ao evento Enter, ou a um evento de usuário, semcódigo, devido ao fato que somente precisamos dele para que um Refresh seja realizado, ou seja, para que oservidor volte a carregar a web panel.

Sobre os eventos disponíveis e a ordem em que são disparados, estudaremos em seguida.

348

Em toda Web panel existem eventos do sistema que podem ser programados. Alguns ocorrem sempre, emcada execução da web panel (como o Start, Refresh, Load), outros se forem declarados e o usuáriosrealiza as ações necessárias para provocá-los (Enter, definidos pelo usuário, TrackContext).

Assim mesmo, quase todos os controles que aparecem no form brindam a possibilidade de disparar um eventoquanto o usuário faz clic com o mouse (os hiper-links aparecem em execução); de duas maneirasdiferentes:

1. Editando as propriedades do controle (F4), e definindo um evento de usuário na propriedadeOnClickEvent, ou associando o evento Enter ou o Refresh.

2. Dando um nome ao controle e na seção de Eventos programando:

Event nomeControl.click…

Endevent

Com esta última alternativa não teremos que definir um evento de usuário, mas sim teremos queprogramar o evento click do controle. O mesmo ocorre com os eventos DblClick, RightClick, IsValid...(quando fizer duplo clique, botão direito, etc.).

Sobre os eventos associados as ações sobre os controles (click, dblclick, drag, drop, etc.) não veremos nocurso presente. Em nosso wiki tem informação detalhada, assim como no Help de GeneXus.

Sobre o evento TrackContext somente mencionaremos que é possível detectar mudanças no valor de um dadocontrole (grid, variável, etc.) e nesse caso disparar este evento baseado ao valor modificado, tomar umaação.

350

Quando a web panel é com tabela base, ao produzir-se o evento Refresh se acessa a base de dados, a essatabela base (associada a web panel), e se percorre carregando os registros que cumpram as condições(conditions do grid e gerais). Vai ocorrer nesse processo um evento Load para cada registro em que estiverposicionado, imediatamente antes de carregá-lo. Isto nos permite realizar alguma operação que requeiradesse registro ( e de sua estendida), antes de efetivamente carregá-lo no grid. Imediatamente depois deexecutado o código associado ao evento Load, será carregado a linha do grid e o ponteiro é passado aoseguinte registro da tabela base, para realizar o mesmo (evento Load, carga da linha). Este processo serepetirá até carregar todas as linhas do grid.

Se uma web panel é sem tabela base, GeneXus não pode determinar automaticamente uma tabela da base dedados a percorrer para mostrar a informação que se apresenta no form. Neste caso no form somenteaparecem variáveis (e não atributos) e também vão ocorrer os eventos Refresh e Load, somente que o eventoLoad é executado uma única vez, visto que não estará posicionado em nenhum registro de nenhuma tabela.Dentro desse evento a carga terá que ser codificada, que pode ser que precise acessar a base de dados (ex:comando for each) o não (vamos supor que seq queira carregar o grid com informação obtida ao percorrer umSDT collection, efetuar alguma transformação sobre seus itens ... ou carregar linhas no grid produto decálculos). O controle da carga do grid, neste caso fica nas mãos do analista, utilizando o comando Load. Estecomando somente é válido dentro do evento com o mesmo nome. Note como no caso do grid com tabela base,este comando não é necessário.

351

A propriedade Automatic Refresh que se encontra a nível da Web Panel pode tomar os seguintes valores:

• When variáveis in conditions change (valor por default): automaticamente provocam o refresh, se disparao evento Load carregando-se o grid segundo os novos valores das variáveis.

• No: para que o conteúdo do grid se renove depois de alterar os filtros, o usuário deve realizar uma ação:

Se o grid é com tabela base:• As alterações nas variáveis dos filtros se detectam automaticamente.

• Ao pressionar a tecla Enter, se dispara o Refresh da página (não o código do evento Enter, aindaque esteja programado).• Ao fazer click num botão ou numa imagem associados a um evento de usuário, imediatamentedepois de alterar o valor de uma variável das conditions do grid, se executa este evento e atualizaimediatamente depois a página. Se o evento for o Enter, este evento NÃO se executa.

Se o grid é sem tabela base:• As alterações nas variáveis dos filtros NÃO se detectam automaticamente• O usuário deve fazer click no botão ou na imagem associados a um evento Refresh ou a umevento de usuário que chame um Refresh.

352

Os eventos disparados e sua ordem depende se a web panel está sendo aberta (Get) ou se já estava aberta eestá efetuando uma ação posterior a um botão (Post).

Acima mostramos com exemplos o caso geral.

1a. vez: Start + Refresh + Load

N-ésima vez: Start + Leitura de variáveis da tela + Evento que produziu o Post + Refresh + Load.

Este é o caso geral... existe uma exceção...

353

Internamente GeneXus determina as entradas e saídas de cada evento. Se em suas entradas, se requeremque ações sejam executadas no Server, então o evento é executado no Server. Por exemplo, se entre asentradas de um evento de usuário X, se encontra alguma das saídas do evento Start (do server), então oevento de usuário é executado no Server.

Se o código do evento não requer que seja executado no servidor, então por performance, será executado nocliente, como código javascript.

De todas as maneiras o analista GeneXus não deve se preocupar com estes assuntos, visto que em todo casoserá o GeneXus que terá a inteligência de resolver onde vai executar o evento.

354

Aqui apresentaremos um exemplo que reúne os dois casos que viemos estudando: a web panel mostrada emexecução tem dois grids paralelos: um que mostra informação dos clientes do sistema, e outro que mostrafaturas, totalizadas por dia.

No nosso caso, queremos além disso relacionar os dados, de tal maneira que quando o usuário seleciona umcliente, sejam mostradas somente as faturas desse cliente. Incluso ao estabelecer filtros de datas, tambémqueremos que vá para o cliente selecionado (e não para todos os clientes).

Quando uma web panel contem mais de um grid em seu form, GeneXus não determina uma única tabelabase associada para web panel, mas sim uma tabela base associada a cada grid.

Atributos que participam na determinação da tabela base de cada grid:

• Os incluídos no grid (são levados em consideração os atributos visíveis como os não visíveis,ocultos/hidden)• Os referenciados na Order e Conditions locais do grid

A diferença do que acontecia para uma web panel com somente um grid, no caso de múltiplos grids osatributos da parte fixa da web panel não participam na determinação da tabela base de nenhum deles, masdeverão pertencer a tabela estendida de algum (para que seja possível inferir seus valores).Caso isso não sejarespeitado, ao especificar a web panel, se mostra na listagem de navegação resultante, um warning advertindodesta situação.

Os atributos utilizados nos eventos da web panel tampouco participam na determinação da tabela base denenhum dos grids. Os atributos que se inclui nos eventos fora de comandos for each, deverão pertencer atabela estendida de algum dos grids (da mesma forma como da parte fixa).

355

Esta web panel poderia ter sido implementada de diferentes formas e obtendo o mesmo resultado naexecução.

Acima podemos ver a implementação mais natural: o primeiro grid tem tabela base e o segundo não tem. Maspoderia ter sido implementada de forma contrária, com variáveis no primeiro grid e tendo que realizar a cargados clientes a mão no Load, e atributos no segundo grid, e algumas coisas a mais para obter o controle decorte, sendo um grid com tabela base. Ou qualquer combinação (ambos grids com tabela base, ou nenhumcom tabela base).

O importante é, uma vez escolhida a implementação mais natural ao caso, realizá-la corretamente.

Em qualquer dos casos, ainda que a informação a ser carregada em mais de um grid se encontre relacionadana base de dados, GeneXus não assume nenhuma relação entre os dados na hora de carregar um grid e ooutro. É análogo o caso de um par de for eachs paralelos no Source de um procedimento.

Acima podemos ver a web panel que temos o grid com os grids, agregamos a parte de visualização de faturaspor data que implementamos na web panel. Mas não basta simplesmente unir as duas web panels... parapoder relacionar as cargas dos grids, a lógica deve ser agregada. Em nosso caso desejamos que uma vez queselecionarmos um cliente do primeiro grid, certa lógica precisa ser agregada. Em nosso caso desejamos queuma vez um cliente for selecionado no primeiro grid, as faturas carregadas no segundo grid não sejam detodos os clientes, mas somente do selecionado.

Para isso devemos ter duas coisas: agregar uma variável &CustomerId para armazenar o id do clienteselecionado ao pressionar ‘Select customer’, e depois agregar um filtro pelo valor dessa variável quando secarrega o grid de Invoices. Assim mesmo precisa obrigatoriamente colocar essa variável no form para que tudofuncione corretamente ... como esperamos... e na análise abaixo encontraremos a razão.

356

Vamos analisar o que acontece quando a web panel é executada pela primeira vez.

Primeiro o evento Start é executado, em nosso caso a variável &CustomerId é ocultada.

Podemos ver na imagem, que um evento Refresh genérico é produzido, depois serão produzidos as cargas detodos e cada um dos grids encontrados na web panel, da esquerda para a direita de cima para baixo.

Um evento Refresh próprio ocorre e o evento Load (se possuir tabela base são N vezes e se não tiver tabelabase somente 1 vez).

Observe que nosso caso, o grid de cliente tem condições para serem carregadas, pelas variáveis de filtro&customerName e &countryName, não são aplicadas se estiverem vazias (visto que ambas cláusulascondicionais tem when not &var.IsEmpty())

O segundo grid é sem tabela base, mas como já vimos, o evento Load era executado um for each comcláusulas where, serão carregadas somente aquelas linhas que as condições são cumpridas. São três:

where InvoiceDate >= &startDate when not &startDate.IsEmpty()where InvoiceDate <= &endDate when not &endDate.IsEmpty()

where CustomerId = &customerId when not &customerId.IsEmpty()

Observe que nesta primeira execução &customerId está vazio, o filtro não é aplicado e todas as faturas do diaé carregada, de todos os clientes.

357

O usuário seleciona o cliente do grid o cliente correspondente da linha e pressiona o botão ‘Select customer’.

Uma ação é detectada e ocorre um post ao servidor, quem executa o Start (ocultando a variável), depois asvariáveis da tela são lidas (&customerId no momento está vazia, são consideradas não somente as variáveisda tela, as que são definidas, mas também a informação completa da linha selecionada pelo usuário com omouse, entre ela, o valor de CustomerId, coluna do grid), depois o código do evento que produziu o post éexecutado, no nosso caso, ‘Select customer’. Aqui a variável &customerId toma o valor do CustomerId da linhaescolhida. Depois ocorre o evento Refresh geral que dispara o Refresh e Load de cada grid.

Portanto, cada grid é executado executando as conditions. O primeiro se carregado como antes, porquenenhuma de suas conditions variou. O segundo, agora se tiver um valor para &customerId, somente serámostrado as faturas do cliente.

Você poderia se perguntar porque precise colocar a variável oculta no form. Simplesmente porque não se podeusar como variável dentro do programa, se não estiver no form e torná-la invisível. Todavia com esta segundaexecução não podemos responder a pergunta. De fato, se analisarmos, pode ser visto facilmente que teríamoso mesmo comportamento se somente fosse atribuído valor a variável no ‘Select Customer’ sem colocá-la noform.

Vamos ver o motivo com a execução seguinte....

358

Agora o usuário já selecionou o segundo cliente, e o que deseja fazer é filtrar suas faturas por data (não quervisualizar todas).

Para isso especifica os filtros de data, e pressiona o botão ‘Search’, que produzirá um post no servidor.Então o código do Start é executado, depois são lidas as variáveis da tela: aqui está o motivo de ter colocado&customerId no form. O valor de &customerId é lido, permanecendo até que o usuário não selecione outrocliente do grid e pressionar o botão ‘Select customer’... esta variável presente no form, é a forma de manter amemória em execuções.Lembre que cada vez que se faz um post ao servidor, é uma nova execução da web panel, já que as variáveiscomeçam novamente vazias. Por isso que o segundo passo: “Leitura de variáveis da tela” é fundamental.Agora sim, seguindo o exemplo, as variáveis da tela são lidas &customerId invisível (visible=0), junto com asvariáveis &startDate e &endDate.E depois, como sempre, a carga é executada (Refresh genérico + Refresh e Load de cada grid).Alterando as condições do for each que carrega o segundo grid, agora aparece somente as faturas do segundocliente, entre as datas estipuladas pelo usuário.

Se agora o usuário quiser alterar o cliente, para ver suas faturas, será feito a seleção no grid de clientes e aopressionar ‘Select Customer’, o processo começa novamente como vimos na 2da. execução.

E como fazemos para voltar a trabalhar com as faturas de todos os clientes e não de um?O que acontece se o usuário não selecionar nenhum cliente do grid com o mouse e pressionar ‘SelectCustomer’. O valor da variável &CustomerId fica vazio, pois CustomerId não vai ter valor.

Por este motivo, o botão ‘Select Customer’ poderíamos chamar ‘Select/Unselect’.

359

Os botões inseridos dependem da quantidade de registros e da quantidade de linhas do grid.

360

361

Dois tipos de grid:

• Grid padrão: que vimos até agora, em Transações e Web Panels• Grid Free Style

Estes grids, agregam potência ao desenho de aplicações web, permitindo ao desenvolvedor maior liberdade nahora do desenho.

O grid Free Style permite ao usuário definir o formato dos dados a serem mostrados de uma forma menosestruturada que o grid padrão.

O grid Freestyle é basicamente uma tabela que podem inserir os atributos/variáveis, text blocks, imagens,botões, web components, embedded pages, grids freestyle e/ou grids que serão mostrados posteriormente natela. Neste caso para poder visualizar as propriedades tem que selecionar a tabela onde se encontram osatributos/variáveis.

No exemplo apresentado acima queremos mostrar alguma informação dos países. O atributo CountryFlag foiincluído na transação “Country” para armazenar a foto da bandeira de cada país (é um atributo de tipo Blob).Mas não queremos mostrar a informação como o faríamos em um grid padrão, cada elemento de informaçãoem uma coluna diferente do grid. Aqui queremos mostrar a foto e abaixo o identificador e nome do país.

O comportamento das variáveis dentro de um grid Free Style é análogo ao apresentado dentro de um gridpadrão, portanto também são de ingresso se existe um For each line ou For each line in <grid> dentro dealgum evento, ou se associa um evento a qualquer controle da fila. Novamente este comportamento pode sermodificado, agregando a regra noaccept ou alterando a propriedade Read Only.

362

Este caso de grids aninhados é igual o de for each aninhados em um procedimento: ou seja, aqui as cargasestão relacionadas, e no Grid2 é carregado todos os clientes pertencentes ao país carregado no Grid1.

A ordem de execução dos eventos estará aninhada:

Refresh (genérico)

Grid1.RefreshGrid1.Load� carga de um país

Grid2.RefreshGrid2.Load � carga de cliente do país

Grid2.Load� carga de cliente do paísGrid2.Load� carga de cliente do país

Grid1.Load� carga do país seguinteGrid2.RefreshGrid2.Load � carga de cliente do paísGrid2.Load� carga de cliente do país

Grid2.Load� carga de cliente do país.....

363

364

Os objetos web podem ser definidos com três tipos diferentes, configurável na propriedade Type do objeto.Para uma web panel poderá ter um dos valores:

• Component: (transação ou web panel, que a partir daqui poderá ser incluído em outro web object)

• Web Page (isto é, o objeto será uma transação ou web panel tal como temos trabalhado até o momento)• Master Page

Em seguida introduziremos a Web Panel tipo: Component”, “Master Page” e sua utilização.

365

366

367

368

369

Ter um look&feel consistente é hoje em dia um dever de toda aplicação Web.

Criar e manter cada página de uma aplicação Web assegurando a consistência com o resto do site leva grande tempode programação.

Ao criar uma base de conhecimento GeneXus X criará também dois objetos de tipo Mastet Page:• ApplMasterPage: Para a aplicação

• PromptMasterPage: Para os prompts

Uma web panel, AppMasterPager categorizado como “Master Page” será criada com tudo, ou seja, o Layout ecomportamento comum a todas as páginas do site, e no mesmo se deixa um espaço para carregar a páginacorrespondente (o conteúdo variável do site). Corresponde ao controle especial ContentPlaceholder. As páginas webque implementam o conteúdo variável, se implementam como Web Panels ou Web Transactions comuns e correntes(é do tipo “Web Page”, ver página anterior), e se associam a Master Page, de maneira que cada vez que se executem,são carregadas com esse “contexto”. Agora faça o seguinte, abra qualquer objeto GeneXus com form (transação ouweb panel) criada na KB, e veja o valor da propriedade Master Page.

As Master Pages fornecem uma forma de centralizar o layout e o comportamento comum em somente um objeto ereutilizá-lo em todo outro objeto sem ter que programar. Isto significa que a modificação de alguma parte do layout oudo comportamento comum é tão fácil como modificá-la num único objeto e pronto!.

Numa mesma base de conhecimento podem ser definidas tantas Master Pages quanto desejar.