UserControl 2.0 na prática

A Genexus lançou o USERCONTROL 2.0 na versão 16 e é uma ótima ferramenta para trazer controles HTML de maneira prática para dentro da aplicação.

Pré-Requisitos:

Neste POST mostraremos uma de suas variadas possibilidades de uso. Importaremos um controle BOOTSTRAP para dentro do Genexus.

1º Passo: Escolher um controle legal para ser utilizado:

Lá é possível capturar o código HTML e CSS.

2º Passo: Criar um UserControl 2.0

Para criar acesse dentro de seu Genexus: File / New / Object / UserInterface / User Control

Copie o CSS e salve em algum arquivo, neste caso de uso chamei de Timeline.css. Não se preocupe em salvar na pasta correta, por enquanto, salve em uma pasta temporária.
Agora vamos importar o CSS para dentro do Genexus usando os seguintes passos:
1. Crie um arquivo .ZIP com o CSS (ficou timeline.zip)
2. Renomeie a extensão .ZIP para gxlibrary (ficou timeline.gxlibrary)
3. Importe o arquivo para o files do Genexus (KBExplorer/customization / Files)
4. Depois de importado, você pode selecionar o CSS em seu UserControl. Para isso, clique nas propriedades do objeto, vá na propriedade “Base CSS” e selecione o arquivo importado.
  Quem quiser saber mais sobre esse processo acesse a documentação do Genexus: https://wiki.genexus.com/commwiki/servlet/wiki?40587,Base+CSS+property+%28User+Control+object%29
Para ver o usercontrol rodando em nossa aplicação:
- Crie uma webpanel;
- No toobox, arraste o objeto Usercontrol para a tela;
- Selecione o UserControl criado (neste caso de uso chamamos de Timeline)
- Rodar aplicação (F5)

3º Passo: Carregar o UserControl com dados de nossa aplicação.

Criei um SDT com a seguinte estrutura:
Estrutura que permite preencher os dados da timeline. Note que o coloquei como collection pois iremos repetir a estrutura abaixo:

Agora é ajustar o código do UserControl:
O funcionamento é bem simples: Tudo que estiver entre a estrutura {{#SDTTimeline}} … {{/SDTTimeline}} será repetida conforme o carregamento do SDT e dentro dessa estrutura você pode colocar os campos que compõem o SDT.
Quando salvar o UserControl, abra novamente a WebPanel de teste (se já estiver aberta, feche e abra novamente), vá ao forms, clique sobre o UserControl e vá em propriedades. Perceba que apareceu uma propriedade com o nome do SDT. Agora basta associar uma variável do tipo do SDT.
Depois, carregue essa variável no evento start ou refresh.
e pronto, já temos um controle HTML integrado com o Genexus.!!

4º Passo: Interagindo com a nossa aplicação.

Agora vamos adicionar um evento CLIQUE ao nosso UserControl de forma que o Genexus entenda essa ação.

No objeto UserControl , coloque o evento clique no local desejado. No nosso caso de uso, coloquei sobre o mês/ano:
Ao salvar o Usercontrol, a webpanel já terá mapeado o evento. Funcionará como um evento Genexus padrão.
Importante: O User Control, devolve o índice clicado para facilitar a identificação dos dados no SDT.
Bom, esse é uma das formas que podemos usar o objeto UserControl. No Próximo post iremos explorar um pouco mais os eventos javascript dentro desse objeto.
AHHH, vou deixar um XPZ para quem quiser baixar e testar o caso de uso.
https://drive.google.com/file/d/1GkzsZhRE7pv23-XBW2Mx9vr39pUSDnTd/view?usp=sharing