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:

  • Noções básicas de Genexus
  • Noções básicas de HTML e CSS

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:

Vamos importar a timeline acima. Podemos ve-la no endereço: https://www.bootdey.com/snippets/view/bs4-my-experience-timeline.

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 código HTML para a tela aba Screen Template
  • 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
0 Views
2021-10-02T19:39:08-03:00 By |Uncategorized|0 Comentários

Sobre o Autor:

Trabalha na AGL Solutions e é entusiasta de Tecnologia e métodos ágeis, sua forma de interação e resultados que proporcionam.

Deixar Um Comentário