CSS

CSS é um tema antigo, muito explorado, bastante esclarecido para todos nós, mas nem por isso perdeu sua importância. Talvez você nem se dê conta, mas convive com ele diariamente, basta abrir o browser. 

Lembro-me das primeiras navegações na internet com o browser Netscape, e naquela época como as coisas eram absurdamente simples, para não dizer extremamente pobres, somente textos, hyperlinks (o que era isso?), imagens (GIF Animados para dar um ar de importância), e claro tabelas!. Quando abri uma página, logo quis conhecer seu conteúdo e ai nasceu o interesse pelo HTML, Javascript, e somente após algum tempo o tal CSS, que claro, persiste até hoje.

Os padrões evoluíram e atualmente temos no CSS um aliado poderoso para transmitirmos nossa informação para o usuário. Para os menos esclarecidos no assunto, trata-se do estilo com que os elementos são apresentados na interface, tipo a fonte, dimensões, posicionamentos, cores, e por ai vai.

Esse post não busca explorar a fundo os conceitos desse recurso, apenas dar uma luz sobre o CSS e o Genexus, ou seja, algumas pequenas dicas.

CSS E Genexus

O Genexus possui uma galeria de estilos aplicada às interfaces (transações, webpanels, components, master pages) nos objetos Theme.  Nesse local você poderá incluir novos estilos ou modificar os existentes.

Nos controles o que temos é uma associação ao estilo definido no Theme, através da propriedade class, que confunde a cabeça um pouco dos aficionados por programação orientada a objetos.

Dois em Um
A primeira dica: você sabia que pode associar mais que uma classe a um elemento? Isso porque o próprio nome do recurso é folha de estilo em cascata, ou seja, um estilo pode estar vinculado a outro, e a outro. E melhor dá pra fazer isso fácil no Genexus.

Receitinha básica:

1. Crie um novo estilo do tipo HTML NODE no objeto Theme (Add Class), chamando-o por exemplo de borda.
2. Defina as propriedades border nesse estilo, como por exemplo, essa ai ao lado.
3. Insira um controle textblock na interface e na propriedade Class desse controle inclua a classe borda, recém criada.  O detalhe aqui é que você não precisa substituir a class corrente do controle (Textblock), apenas inclua a classe na sequencia, conforme apresentado na imagem a seguir.

O resultado será a soma das propriedades de estilo da classe Textblock já designada com a classe borda que você criou.  Abaixo o resultado com e sem a borda.

Não Achei
O Genexus mostra no seu editor Theme as classes CSS mais conhecidas, mas temos muito mais. Como fazemos então para acrescentar classes que não estão na lista? Simples: Custom CSS Properties, que aparece em qualquer classe de estilo.

Inclua ai o texto completo do estilo que queira vincular.


Incluindo Externos
Tenho meu arquivo de estilos gravado em disco, como faço para incluir no objeto Genexus? Simples também, utilize o comando Form.HeaderRawHTML no evento Start.

Nesse comando inclua o texto que inclui um CSS em uma pagina HML

Event Start
form.HeaderRawHTML = <link rel="stylesheet" type="text/css" href="meuestilo.css">
 EndEvent

Alguns Estilos Legais

Alguns estilos me chamam a atenção, devido a sua simplicidade e recursos, muitos já são bem antiguinhos, mas continuam legais. Dai conforme as dicas anteriores, você poderá incluí-los facilmente em seus objetos.

Scroll-Bar:
Caso você utilize um controle tipo DIV em sua interface, poderá apresentar uma dimensão fixa para o mesmo e rolar o conteúdo horizontal e verticalmente com o overflow.

.rolamento{
  overflow-x: scroll;
}

Text-Wrapping:
Para quebrar texto dentro de um bloco DIV.

.quebratexto{
   word-wrap: break-word;

   width: 400px;
   display: inline-block;
   white-space: pre-wrap; /* css3 */
   white-space: -moz-pre-wrap; /* firefox */
   white-space: -pre-wrap; /* opera */
   white-space: -o-pre-wrap; /* opera */
}

Chega por hoje!

Pois é, esse assunto vai longe, e esse post ta ficando muito grande, e olha que nem entrei no CSS3. Prometo que algum dia volto a esse assunto.

O que recomendo a você:, atualize seu Windows 3.1 ou 95, remova o Netscape da sua máquina, e pare de utilizar o Altavista. (brincadeira hein!)

Ah, tava me esquecendo, atualize o Genexus 1.0 também.