Genexus - Gerando Botões em CSS

Neste tópico irei fugir um pouco sobre exemplos, lógicas e funções do Genexus. Irei falar de algo simples, mas que insere um "plus" a mais em nossas aplicações.  Querendo ou não, quando focamos no layout das aplicações geradas, passamos por muitos sufocos. Isso, porque geralmente trabalhamos com tabelas e mais tabelas, criando e recriando classes no nosso tema e aplicando às células, linhas, text blocks, enfim a tudo que aparece em uma web panel...

Vou compartilhar algo que testei a pouco, a geração de estilos em css para aplicar a todos os botões que desejarmos. Estes códigos permitem diferenciar a "cara" dos botões em 3 diferentes momentos, default, mouse over e em cliques, e isso tudo sem utilizar imagem alguma!

Gerando o estilo css

O gerador de css que iremos utilizar é o site www.cssbuttongenerator.com. Neste, podemos configurar as cores, nome da classe, fonte, tamanho desta, sombras, bordas, praticamente cada detalhe do botão.

Bom, não irei dar um passo a passo sobre cada elemento das propriedades, mas é muito simples. Ao irem alterando-as já há como detectar cada uma aplicada ao botão.

Após definirmos o nosso estilo, é só clicarmos sobre o botão gerado que o código css irá aparecer logo abaixo.

Como exemplo irei criar três tipos diferentes de botões, um Azul (classAzul), Vermelho (classVermelho) e por último um Amarelo (classAmarelo).

Cada uma destas classes eu irei salvar em um arquivo chamado "botoesCss.css", e este arquivo estará presente dentro da pasta web da aplicação.

Porém, ao copiar cada uma destas classes para o arquivo, não serão necessárias a primeira e a última tag.

1ª Tag (eliminar): <style type="text/css">

Última Tag (eliminar): </style>

Aplicando ao Genexus

Agora, já com os nossos estilos copiados para o arquivo, iremos aplicar a uma web panel qualquer.

Primeiro, precisamos adicionar ao <header> da página o link do nosso arquivo css, para isso dentro do evento start digitaremos:

Event Start
Form.HeaderRawHTML = '<link href="botaoCss.css" rel="stylesheet" type="text/css" />'
EndEvent

Agora irei incluir três botões na web panel, e na propriedade "class" de cada um destes, irei informar (digitar, não há como selecionar) o nome das classes criadas. Veja um exemplo para a classe do botão Azul (classAzul):

Por fim o resultado será igual ao abaixo: