quinta-feira, 4 de abril de 2013

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.

Genexus 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):

Genexus Botao CSS

Por fim o resultado será igual ao abaixo:

Genexus Botao CSS


3 comentários:

  1. Olá Eduardo;

    Você por acaso, já desenvolveu alguma situação onde seria possível alterar no genexus o theme dinamicamente?

    O que estou procurando é uma forma de o usuário alterar as cores do sistema, entre outros.

    Tens alguma ideia de como fazer isso?

    Obrigado!

    Marlon.

    ResponderExcluir
    Respostas
    1. Oi Marlon, nunca desenvolvi, mas acredito ser possível adicionando o "style" direto na Master page através do Form.HeaderRawHTML. Assim:
      Você cria as opções de cores, e as salva a escolha de cada usuário no Banco do Dados. Após, quando o usuário efetuar o login, o sistema busca a cor definida e salva em uma websession ou no próprio &context.
      Ai na Master Page, você pode adicionar um código parecido com este:
      Form.HeaderRawHTML = 'style>.fundo{background-color:'+&CorDinamica+';}</style'
      Eu tentaria assim, não cheguei a testar, mas acredito que não aja problemas.
      Até logo, obrigado pela visita, Eduardo

      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir