Imagem como Botão no CDE com RequireJS Habilitado

Quem, assim como eu, tinha o hábito de usar uma imagem, através de uma tag <img> para simular o comportamento de um botão, ao invés de usar um Button da perspectiva “Components” do CDE, teve uma surpresa ao tentar implementar isso na versão mais recente das CTools, onde o suporte ao “RequireJS” vem habilitado por default.

requirejs

botao ou imagem

O RequireJS foi implementado no CDE para dar mais performance e segurança para os painéis desenvolvidos nesta ferramenta, porém com isso o escopo dos componentes/parâmetros ficou restrito a elementos de sua perspectiva ou teve sua “chamada” alterada. Trocando em miúdos, os parâmetros e declarações de funções javascript não são mais globais.

Antes eu conseguia, através de uma chamada na perspectiva “Layout”, acessar funções javascript declaradas na perspectiva “Components”, porém com a mudança do escopo, isso não era mais tão trivial.

Para manter a compatibilidade com dashs desenvolvidos dessa forma, o pessoal da WebDetails tornou facultativa a opção de usar ou não a versão com RequireJS, então bastaria eu desmarcar essa opção e tudo funcionaria da forma com a qual eu já sou habituado. Porém se há duas coisas que eu não gosto, são:
1- Ficar na zona de conforto
2- Andar para trás

Então decidi buscar uma solução para isso, mas meu tempo era curto para passar por toda curva de aprendizado de como criar um módulo RequireJS…e nem é muito minha praia o desenvolvimento para web. Tentei algumas soluções, mas todas frustradas, até que resolvi pedir auxílio a um grande amigo.

Isto posto, faço questão de deixar registrado que a solução aqui apresentada não é minha, mas sim do Marcello Pontes da OnCase, autoridade em Pentaho no Brasil…ou deveria dizer na Eslovênia?emojipensativo

Vamos a implementação da solução

Primeiro você deve ter normalmente uma tag <img> fazendo referência para a imagem que quer utilizar como “botão” de filtrar (ou qualquer outra ação).

tag_img

No meu caso coloquei um elemento HTML na minha perspectiva de “Layout” e dentro inseri o seguinte:

<img src =”https://www.shareicon.net/data/128×128/2016/09/16/829879_filter_512x512.png&#8221; height=”42″ width=”42″ class=”minhaImagem”> </img>

A grande sacada aí está em usar a classe “minhaImagem” que depois será referenciada via jQuery em um script na Perspectiva “Components”.

Então na Perspectiva Components, eu insiro um componente do tipo “Function” dentro do grupo “Scripts”.

Dou o nome “btn” para o componente e insiro minha função em javascript code conforme a figura abaixo:

 

funcaojquery

 

O código inserido foi o seguinte:

$(function() {
$(“.minhaImagem”).off(“click”).click(function(){
console.log(“Alguem clicou no botão”);
dashboard.fireChange(“pFiltrar”,’pFiltrar’);
});
});

Onde pFiltrar é meu “parameter” que está sendo ouvido (listeners) por todos os componentes do meu painel, assim ao clicar sobre a imagem, todos os componentes são atualizados.

Por quais valores eles são atualizados?

Pelos parâmetros indicados em suas propriedades “parameters” ora. 🙂

 

Espero ter ajudado!

 

Até a próxima!

 

 

 

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s