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:
- Crie um arquivo .ZIP com o CSS (ficou timeline.zip)
- Renomeie a extensão .ZIP para gxlibrary (ficou timeline.gxlibrary)
- Importe o arquivo para o files do Genexus (KBExplorer/customization / Files)
- 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
Deixar Um Comentário