O Theme Editor foi incluído na versão 8.0 do GeneXus e lhe garante uma flexibilidade de visual até hoje não disponível.
Montamos um pequeno manual com perguntas freqüentes e que pode tirar a maioria de suas dúvidas em relação ao Theme Editor e seu funcionamento.
O que é o Theme Editor?
O Theme Editor é um editor gráfico de arquivos css. Esta é a explicação mais técnica.
Em uma explicação mais simples, podemos dizer que o Theme Editor é um editor de visuais de páginas Web.
Ele trabalha os objetos GeneXus e permite que você monte vários visuais para cada objeto e dentro do GeneXus, amarrar uma determinada classe ao mesmo, o que faz com que este fique com o visual determinado no Theme Editor.
Como funciona o Theme Editor?
O Theme Editor é um programa a parte, integrado ao GeneXus. A instalação normal do GeneXus o instala por Default.
Quais arquivos o Theme Editor utiliza?
Você deve criar um Objeto Theme em seu kbase e com duplo-clique o Theme Editor é aberto e você pode alterar este facilmente.
O Theme Editor é utilizando somente para objetos novos?
Não. Você deve configurar todo o seu kbase para trabalhar com Theme.
Caso contrário, você não terá controle sobre a formatação.
Como configuro meu kbase para trabalhar com um Theme?
Você deve clicar em:
- Em File / Edit Model / Properties / Web Information / Theme, informe o Theme que você estará utilizando.
- Caso não exista nenhum Theme em seu kbase, você deve criar um novo dentro do GeneXus, utilize Ctrl+N.
(Nota: Mesmo que o Kbase não tenha sido criado na versão 8.0, um Theme Default é criado em seu kbase e você pode utilizar e alterar sem problemas)
Com seu kbase configurado, dê um duplo clique sobre o Theme ou abra utilizando Ctrl+O e em Type coloque Theme ou pesquise pelo Nome.
Será aberto então o Theme Editor.
Com meu kbase configurado e já com o Theme Editor aberto, como utilizo?
Note que do lado esquerdo será mostrado uma árvore e uma chave com nome ?classes?. Dentro você irá encontrar todos os objetos do GeneXus. Para cada objeto, uma ou mais classes se dividem na árvore, podendo ter classes subordinadas umas as outras. Esta subordinação das classes permite que sejam herdadas as propriedades das classes ?superiores?. Para saber se a propriedade da classe realmente possui valor ou se o mesmo é herdado, procure escrito ?Inherited: True? na descrição da propriedade.
Como True, alterando as características da classe superior, esta classe passa a possuir o mesmo valor. Alterando esta propriedade, o valor passa então a ser False e permanece o mesmo, independente da alteração das classes superiores. Para fazer com que o valor volte a ser herdado, clique com o botão direito ou utilize o menu ?Properties / Inherit?.
Como ?amarrar? uma classe a um objeto GeneXus?
Nas propriedades do objeto. Imagine um botão por exemplo. No Theme Editor você tem várias classes dentro da Classe SpecialButtons. Você irá encontrar botões de navegação, cancelar, concluir, help, etc. Em uma transação, por exemplo, os botões criados na transação já estão com estas classes amarradas aos objetos. Para você confirmar, clique com o botão direito sobre um botão destes e em Properties e então procure a propriedade Class, onde você encontrará todas as classes relacionadas a botões.
Trocando de classe, o visual de seu botão será alterado de acordo com a nova classe e alterando as características da classe no Theme Editor, mesmo com a aplicação em execução e já compilado.
Quais os cuidados que eu devo tomar?
Você não deve mais formatar o texto utilizando a Barra de Ferramentas. Esta formatação inclui TAGs de formatação e que tem prioridade sobre as Classes e isso pode atrapalhar o visual de sua aplicação. Para trabalhar com o visual, crie uma nova classe e configure o visual lá.
Eu escrevo um texto direto na WebPanel e não acho a propriedade de classe.
Realmente não existe. Você deve então digitar este texto dentro de um TextBlock para que então seja possível amarrar um formato visual ao mesmo.
Eu quero somente um formato visual em meus botões. Por que utilizar mais de uma classe?
Entenda que você deve montar as classes de forma a permitir uma alteração de visual no futuro de forma simples e descomplicada. Você pode herdar os padrões visuais sem nenhum trabalho e desta forma ter botões ou outros com classes diferentes e com o mesmo visual em um primeiro momento e que no futuro pode ser alterado.
Eu não quero utilizar botões e sim imagens. Como implemento isso nos Themes?
Na verdade você irá continuar trabalhando com Botões. A única alteração que você deve fazer é incluir a imagem como Background do botão.
Uma dica seria não escrever textos na imagem. Como o botão ainda continuará a ter Caption, este ficará sobre a imagem, mantendo um visual de escrita.
Existe como alterar os textos dos botões direto no Theme Editor?
Você pode alterar o formato visual. Não é possível alterar o texto.
Esta alteração deve ser feita no GeneXus.
Interessante tudo isso... Mas quais vantagens terei?
Com esta implementação você não precisará mais alterar sua aplicação para ajustar o layout visual, mesmo que ela já esteja pronta e compilada.
Desta forma um cliente seu pode alterar o layout sem a necessidade de alteração de seu programa no GeneXus e sem a necessidade do cliente ter instalado o GeneXus. O Theme Editor pode ser instalado separadamente e não requer licença.
Onde eu encontro o Theme Editor separado?
No CD da versão 8.0 ou para download no endereço:
Migrei meu kbase de uma versão anterior e esta se encontra completamente desconfigurada. O que eu devo fazer?
Realmente estes problemas ocorreram durante a migração em alguns kbases.
Ocorre que não é um bug ou erro e sim uma implementação da 8.0 que ainda não era suportada na versão 7.5 e que causou algumas incompatibilidades.
Você precisará então limpar as formatações utilizadas pela versão anterior do GeneXus.
A forma mais simples é:
- Distribuir todas as Transações e WebPanels.
- Renomear o .xpz para .zip e descompactar
- Abrir o .xml dentro de um Bloco de Notas
- Procurar e remover todas as TAGs <FONT ALGO> e também as </FONT> (Não remover o conteúdo entre as TAGs)
- Procurar e remover todas as TAGs <STRONG> e </STRONG> (Não remover o conteúdo entre as TAGs)
- Procurar e remover todas as TAGs <EM> e </EM> (Não remover o conteúdo entre as TAGs)
- Procurar e remover todas as TAGs <U> e </U> (Não remover o conteúdo entre as TAGs)
- Salve então este .xml e consolide no GeneXus (Nota: Não é preciso compactar novamente)
------------------------------------
Informações sobre as TAGs: A TAG <FONT> pode conter o nome da forte, tamanho, cor, etc. Todas estas formatações devem ser removidas até o termino da TAG Font, que termina no sinal de >.
As TAGs sempre abrem e fecham e para cada TAG, sempre existe uma outra com o mesmo nome e com um / antes do nome. Desta forma, sempre que remover uma TAG, sempre remova também a TAG que a fecha .
------------------------------------
Este processo irá remover todas as configurações que você utilizou na versão 7.5, deixando tudo sem formatação.
Agora você precisa definir em todos os objetos, quais classes estes devem utilizar.
Notei que se eu colocar as TAGs FONT dentro das tags SPAN, meus TextBlocks funcionam perfeitamente.
Todas as tags font TEM de ser removidas e não podem mais ser utilizadas para formatar texto.
Além disso, esta alteração causa dois problemas: Se o TextBlock estiver com a propriedade para Text, será visualizada as tags e não será formadado e se você fizer TextBlock.Caption = 'ALGO', a formatação será perdida.
Desta forma, não existe outra alternativa ou contorno que não seja a utilização de Themes.
Artech do Brasil