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:
Crie um novo estilo do tipo HTML NODE no objeto Theme (Add Class), chamando-o por exemplo de borda.- Defina as propriedades border nesse estilo, como por exemplo, essa ai ao lado.
- 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.
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.
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;
}
overflow-x: scroll;
}
Para quebrar texto dentro de um bloco DIV.
.quebratexto{
word-wrap: break-word;
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 */
}
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.
