quarta-feira, 6 de março de 2013

Interface com Abas

(revisado em 25/03/2013)
Existe algum controle que gera abas as quais possamos vincular componentes em uma mesma interface web, e que possa ser compatível com GeneXus? a resposta positiva não poderia ser melhor, pois tal recurso já se encontra nativo na própria ferramenta, tava meio oculto, mas agora, revelamos o 'mistério!!'

Existem vários User Controls que fazem isso, alguns muito bons, mas optamos aqui por apresentar o próprio pattern Work With, que quando aplicado em uma transação, gera esse recurso na interface chamada View. Não é tão automático quanto um user control, mas o resultado é muito favorável.

Aplique o Work With

Passo 1) Comece por ai, aplicando o pattern WorkWith em uma transação qualquer, para que o Genexus possa criar um web component chamado TabbedView, que é o 'cara' que mostra as abas.  Esse controle é o responsável por apresentar abas formatadas com bordas que podem ser substituídas.

Passo 2) Para utilizar esse recurso na sua própria interface, basta criar um WebPanel, por exemplo, e incluir um WebComponent que renomeei para chamar TabbedView.



Passo 3) Em seguida para incluir o controle de abas em sua interface programe no evento Refresh:

Event Refresh 
  &Tabs = Carga_DP()
   TabbedView.Object = TabbedView.Create(&Tabs,&TabCode)
EndEvent

Sendo que as variáveis envolvidas devem ser do tipo:

Data Provider


Passo 4) A carga das abas é simples, e para facilitar você pode criar um Data Provider que carrega os dados de forma fixa ou por meio de uma tabela.


TabOptions
{
TabOptionsItem
{
Code      = '1'
Description  = 'opcao 1'
WebComponent = opcao1.Link()
  Link      = Abas.Link('1')
}
TabOptionsItem
{
Code       = '2'
Description  = 'opcao 2'
WebComponent = opcao2.Link()
  Link       = Abas.Link('2')
}}


Passo 5) opcao1 e opcao2 são webcomponents que serão carregados pelo TabbedView quando o usuário pressionar a aba.


E Abas é o nome do primeiro WebPanel que criamos no passo 2.

é o controle que será apresentado quando a aba for clicada e WebPanel3 é a página em que foi incluído o componente TabbedView.


Configurações


Passo 6) Aqui a coisa pega um pouco, porque a configuração deve ser feita por meio de troca de imagens e ajustes nas classes Css. Para facilitar um pouco o pessoal da Artech nomeou as imagens com um prefixo Tab, que ao ser filtrado, mostra todas que podem ser ajustadas. Abaixo as mudanças que eu fiz.


Passo 7) Quanto às classes de estilo temos várias que podem ser manipuladas e ajustadas conforme nosso interesse:





Conclusão

Esse recurso possui a compatibilidade e a segurança de não ficaremos na mão, pois é nativo do próprio Genexus, mas claro não é um mar de rosas, precisamos intervir manualmente para ajustá-lo conforme nosso interesse, exigindo um pouco de esforço.

Exemplo


Para facilitar a vida, e atendendo a pedido, inclui um exemplo prático contendo o que foi apresentado, que pode ser baixado em:


Atenção! não inclua o exemplo na sua kb de desenvolvimento, crie uma própria para testes, pois o XPZ inclui algumas mudanças no theme GeneXusX que podem afetar o visual do seu sistema. (não me culpe depois por isso, eu avisei, rs)

O exemplo necessita de alguns ajustes nas classes CSS que não foram realizados, pois o visual depende da sua própria aplicação. Abaixo o resultado.


Maiores informações: