Genexando...: Efeito Click em Botão

quinta-feira, 9 de maio de 2013

Efeito Click em Botão

Uma interface Web ganha contornos profissionais quando nos preocupamos com pequenos 'detalhes', e detalhes não faltam nas interfaces construídas com HTML 5, CSS3, e as novas tendências tecnológicas. As interfaces web estão ficando mais precisas, interessantes e claro mais atraentes para os usuários, quer por questões puramente estéticas, apelos de marketing ou mesmo para melhorar a usabilidade. Sendo assim, convém um pequeno esforço para tornar nossos programas mais atrativos.

No caso de 'usabilidade', por exemplo, o efeito de uma imagem que simula um botão pressionado gera uma sensação mais positiva no usuário, pois dá a impressão que a operação foi de fato solicitada, e ajuda no desempenho da aplicação, pois faz com que o mesmo evite pressionar várias vezes uma imagem estática, já que ela não responde imediatamente. Então para resumir, podemos dizer que não é frescura, detalhes como esses melhoram a vida das pessoas.

Antigamente precisávamos recorrer a várias imagens, javascript, html, e mais um montão de coisas para provocar tal efeito, nos dias atuais basta duas classes CSS e uma imagem projetada para esta finalidade e pronto. Um conceito interessante é apresentado no site do Kyle Schaeffer (Pure CSS Image Hover) que tomamos a liberdade de utilizar para resolver nosso problema, e também site do Dmitry Fadeyev (Pressed Button State With CSS), que nos ensina o conceito de uma imagem 'active', ou seja, pressionada.

Portanto, apesar de parecer tão complicado, apresentamos uma estratégia simples para gerar esse efeito em GeneXus, não é a única, entenda apenas como um ponto de partida neste processo de aprendizagem.

Design do Botão

Pra começo de conversa precisamos de uma imagem diferenciada para realizar esta operação, que é composta por duas imagens distintas e em sequencia, na mesma imagem. Primeiro na sequencia incluimos a imagem que gera o efeito pressionado e em seguida a que deve ser apresentada como normal.

A imagem a seguir representa um botão do tipo Filtrar com as duas representações: clicada primeiro e normal em seguida.

As dimensões são importantes e deve representar uma proporcionalidade, e observe que utilizamos uma sombra para melhorar o aspecto do efeito de pressionamento da imagem. Na primeria imagem a sombra aparece internamente e na representação da imagem normal externamente ao botão.

Efeito Click em TextBlock

O conceito do pressionamento definido pelo Kyle Schaeffer é feito mediante uma classe CSS, que trazendo para o Genexus, poderia ser embutida em um controle Textblock, como apresentado a seguir.

Event Start
    Textblock1.Caption = '<style>'
    Textblock1.Caption += '.myButtonLink {'
    Textblock1.Caption += ' display: block;'
    Textblock1.Caption += ' width: 32px;'
    Textblock1.Caption += ' height: 32px;'
    Textblock1.Caption += " background: url('"+filter.Link()+"') bottom;"
    Textblock1.Caption += ' text-indent: -99999px;'
    Textblock1.Caption += '}'
    Textblock1.Caption += '.myButtonLink:active{'
    Textblock1.Caption += ' background-position: 0 0;'
    Textblock1.Caption += '}'
    Textblock1.Caption += '</style>'
    Textblock1.Caption += '<a class="myButtonLink" href="#LinkURL">Leaf</a>'
EndEvent

Observe que a incorporação no código fonte da interface da classe CSS pode ser realizada em um controle Textblock, isso caso a propriedade Format deste controle for determinada como HTML.

Finalmente, para conectar uma imagem ao botão, utilizamos o modelo de importa-la primeiramente ao Genexus (Image - New Image - filter.png) e em seguida a utilização de sua referência, filter.link().

Textblock1.Caption += " background: url('"+filter.link()+"') bottom;"

Para definirmos o Click na imagem programamos um link para conectar a um objeto Genexus ou URL.

Textblock1.Caption += '<a class="myButtonLink" href="#LinkURL">Leaf</a>'

Onde #LinkURL everá ser substituído pelo link desejado, algo do tipo:

Textblock1.Caption += '<a class="myButtonLink" href="'+ objetoGx.Link() +'">Leaf</a>'

CSS Externo

Outra possibilidade, para minimizar o efeito da programação direta do estilo, é incorporar a classe em um arquivo CSS externo, incluindo o mesmo através

form.HeaderRawHTML = '<link rel="stylesheet" type="text/css" href="botao/botao.css" >'

Desta forma simplificariamos o evento Start com.

Event Start
form.HeaderRawHTML = '<link rel="stylesheet" type="text/css" href="botao/botao.css" >'
Textblock1.Caption += '<a class="myButtonLink" href="#LinkURL">Leaf</a>'
EndEvent

Bastando programar no arquivo botaopressionado.css o texto a seguir.

.myButtonLink {
display: block;
width: 32px;
height: 32px;
background: url('filter.png') bottom;
text-indent: -99999px;
}
.myButtonLink:active{
background-position: 0 0;
}

Conclusão

Esse recurso é muito interessante e simples, mas esse formato tem sua limitação, pois ficaria mais complicado para chamar um evento em um objeto Gx, por exemplo. É possível realizar isso, mas deixemos esse tema para uma próxima postagem.

Portanto, feliz usabilidade para seus sistemas.