sexta-feira, 28 de janeiro de 2011

Drag & Drop's

Antigamente, no escurinho do cinema, na minha cidadezinha lá no interior, entre uma jujuba, uma balinha Banda, um drops Ducora, a coisa rolava solta. Nada tão avançado como hoje, a coisa era somente mão-na-mão, hehehe.... Parece que o único sobrevivente daquela época foi o Hall's, extra-forte, :(.

Então para reviver um pouco o clima do passado, e com a boca cheirando menta, vamos ao Drag & Drop, que na realidade não tem nada a ver com balinhas no cinema. Ou melhor, talvez tenha alguma coisa a ver sim, pois com ele dá pra fazer interfaces do tipo "Guerra nas Estrelas".

Na Web 2.0 um dos recursos badalados é pegar coisas na interface e arrastá-las de um lado pro outro, coisa meio inútil a principio, mas que bem planejada, pode gerar interfaces muito legais. Não é um recurso muito recente, visto que já está a nossa disposição desde o Genexus X, mas acredito que você tem usado muito pouco, e se for por falta de algum exemplo simples pra embalar seu sábado à noite, então lá vai.

Genexus implementa o mecanismo através das propriedades Allow Drag e Allow Drop. e o processo de programação é interessante e muito simples.  Tem algum material disponível na Artech, aqui estaremos apenas simplificando um pouco a coisa.  O processo é simples, pegar um registro em algum lugar e transportar para outro, sendo que para isso ocorrer é necessário ajustar flags e programar alguns eventos.

Existem diversas possibilidades para troca via Drag & Drop, Grid para Grid, Grid para Imagem, e assim por diante, vamos nos limitar, nesse momento ao processo entre Grid's

Grid para Grid

Nesse exemplo, a idéia é pegar (Drag) um registro de um Grid1 e fazer com que o Drop ocorra em segundo Grid2. Nesse exemplo agregamos um complicômetro a mais que consiste em definir o registro no Grid2, que receberá a informação transportada. Isso, quer dizer que estamos buscando arrastar alguma coisa de um Grid para soltá-la em um registro definido em outro Grid.

A primeira coisa a ser feita é definir quem fará o Drag e quem o Drop, no nosso exemplo Grid2 = Drag e Grid1 = Drop, ou seja, pega um registro no Grid2 e solta no Grid1. Em outras palavras, selecionar uma Cidade qualquer, e em seguida atribui-la a um determinado Cliente.


Pelo fato de ser necessário determinar o Cliente que vai receber a Cidade, temos que selecioná-lo no Grid1 (Drop). Para que isso ocorra é necessário que se defina o AllowSelection=True, e que o usuário clique no registro antes de realizar o Drop. Provavelmente o usuário não vai se acostumar com isso, então o truque é obrigá-lo a selecionar um registro no Grid alvo através de um Check Box.

Desta forma, ele poderá selecionar um ou mais registros para receberem a informação arrastada.
Os eventos que controlam o processo são simples, é só seguir o modelo abaixo.


Event Grid1.Drop(&ClienteId)

   for each line in Grid1

      if &selecao = 1

         msg('Inserir '+&ClienteId.ToString()+' em '+&CidadeNome)

      endif

   endfor

EndEvent

Event Grid1.Refresh
   &selecao = 0
EndEvent

Event Grid1.Load
   &CidadeId   = CidadeId
   &CidadeNome = CidadeNome
   load
EndEvent

Event Grid2.Load
   &ClienteId   = ClienteId
   &ClienteNome = ClienteNome
   load
EndEvent

A variável &seleção é Numeric(1.0), simples, e &ClienteId e &ClienteNome seguem o padrão dos respectivos atributos.

O resultado desse simples WebPanel é um programa visualmente complexo e muito interessante sob o ponto de vista do usuário.


Acho que vale apena chupar essa balinha!

Para maiores informações: