Comenzaremos a conocer los Cascade Style Sheet y las clases, y en la siguiente edición continuaremos con los HTML tags para luego adentrarnos en el funcionamiento del nuevo editor de temas.
Introducción
Hasta la versión 7.5 (inclusive) de GeneXus, las propiedades de los controles en los "html forms" (web panels y forms html de las transacciones) debían ser configuradas en dichos controles.
En la versión Olimar, GeneXus introduce un nuevo objeto "Theme" en el cual se pueden definir clases para los diferentes tipos de controles y asignarles propiedades a esas clases. Luego, los controles basados en esas clases heredarán esas propiedades y no es necesario establecer los valores de dichas propiedades para cada control en el form. Estos objetos (Themes) se basan en la inclusión de CSS (Cascading Style Sheets) a las páginas web generadas por GeneXus.
Alcance
Objetos: Themes
Lenguajes: .NET, C/SQL, Visual Basic, Java.
Interfaces: Web
Descripción
El editor de temas brinda al usuario GeneXus una interfaz gráfica para crear y modificar un objeto GeneXus Theme, el cual se salva automáticamente como un CSS (Cascading Style Sheet) en el directorio web del modelo.
La creación y modificación de estos CSS se realiza por medio de la definición de clases (que se corresponden a los controles básicos usados en una aplicación web GeneXus), y la definición de las propiedades de los HTML tags.
Generalidades
Un style sheet es un documento que contiene las especificaciones que definen el aspecto de las páginas Web, y que permite separar el contenido de un documento HTML de su presentación. El HTML hace referencia a los styles sheets que contienen los detalles estéticos de la página, los cuales se transfieren al cliente e incluso, se almacenan en su caché para agilizar la navegación.
Con las facilidades que brinda el editor de temas para la creación y modificación de objetos Themes (styles sheet) se logra uniformizar con total facilidad el aspecto de las páginas web y realizar un ágil mantenimiento del sitio.
Como se dijo, un style sheet básicamente es un conjunto de reglas que especifican la presentación de un documento. Cada regla se compone de un selector y un estilo que aplica al selector, de esta forma por ejemplo:
P { text-indent: 3em } En este caso el selector es P.
En especial, los selectores denominados clases permiten que a un mismo elemento HTML se le asocien diferentes estilos por medio del atributo CLASS, de esta manera:
.center {text-align: center}
<h1 class="center"> Aquí a h1 se le asignan las propiedades de la clase "center".
Existen numerosas propiedades que pueden ser definidas para un elemento, cada propiedad toma un valor, que determina como se visualiza el resultado en la página web. En el ejemplo, text-align es una propiedad, que toma el valor center.
Más información de style sheets:
http://www.w3.org/Style/CSS/
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/REC-CSS2/
Clases
Cuando se edita un tema, se ven las clases predefinidas por GeneXus contenidas en un treeview.
Las clases predefinidas son:
Attribute
Button
FreeStyleGrid
Grid
Hyperlink
Image
Table
TextBlock
Vale aclarar que la clase "Attribute" sirve para definir propiedades no sólo de atributos, sino también de controles edit, radio buttons, list boxes, check boxes y combo boxes.
Existen clases específicas de botones, correspondientes a los botones
generados en forma automática por GeneXus en WebTransactions y WebPrompts. Estas clases son descendientes directas de la clase "GXSpecialButtons" que es hija de la clase "Button" y son:
GXBTnCancel- GXBtnCheck-GXBtnDelete-GXBtnEnter-GXBtnFirst-GXBtnGet-GXBtnHelp-GXBtnLast-GXBtnNext-GXBtnPrevious-GXBtnSelect
Cuando se crea una Web Transaction, por default los botones se asocian a las clases correspondientes. Lo mismo sucede con los Web Prompts.
En el editor de temas, cada clase tiene asociado un conjunto de propiedades.
Luego en diseño se podrá asociar a un control alguna clase compatible con ese control. Por ejemplo, a una grilla (control) se le puede asignar sólo la clase grid o alguna de las clases derivadas de ella.
Como consecuencia, en ejecución (e incluso en diseño) ese control tomará los settings de la clase correspondiente, reduciendo así el costo de programación (ya que el usuario no tuvo que asignar una por una las propiedades del control).
Las propiedades de las clases son un superconjunto de las propiedades del control, esto amplia el espectro de propiedades configurables a los controles GeneXus, si bien no serán vistas en diseño, estarán definidas cuando el objeto se encuentre en producción.
Se pueden crear clases derivadas a partir de las clases predefinidas; el proceso de definir una clase significa para el desarrollador asignarle un nombre y configurar las propiedades que le corresponden a esa clase.
Las clases hijas o derivadas quedan implícitamente vinculadas en una relación de herencia con las clases de las cuales derivan. Como consecuencia de esto, las modificaciones en éstas se verán reflejadas en aquellas, con algunas excepciones.
Las modificaciones consisten en cambiar los valores de alguna de las propiedades de la clase.
La jerarquía de clases en el editor de temas, no se vincula conceptualmente con las relaciones de clases a nivel del CSS. Se trata de una relación de "herencia" que busca brindarle al usuario mayores facilidades en la tarea del mantenimiento.
La parte inferior del editor muestra el nombre de la propiedad, junto con una descripción de la misma. Además dirá "Inherited: True" o "Inherited: False" según corresponda.
"Inherited: True", significa que el valor de la propiedad es un reflejo del valor de dicha propiedad en el padre. Es decir, cualquier cambio en clase padre se traduce en un cambio en la misma propiedad en el hijo.
En cambio, "Inherited: False" implica que un cambio en la propiedad en la clase padre no se se reflejarán en la clase hija. La herencia en el valor de las propiedades se pierde cuando éstas son alteradas en las clases hijas.
Si se busca conceptualmente crear en el CSS una descendencia de clases de este estilo:
.FreeStyleGrid .Attribute
Con el objetivo de cambiar el color y font de los atributos y variables dentro de unFree Style Grid; con el esquema del editor, la forma de hacer esto es crear una nueva clase hija de la clase "Attribute" (AttributeInFreeStyleGrid por ejemplo) y setearle el color y font que se desee; luego asociar esa clase a los atributos o variables en el Free Style Grid. En vez de tener en el CSS: .FreeStyleGrid .Attribute se tendrá (con los mismos efectos) una entrada para el nombre de la clase
.AttributeInFreeStyleGrid{
background-color : rgb(255, 192, 192);
color : rgb(192, 64, 0);
font-family : Comic Sans MS;
font-size : 8.25pt;}
GeneXus se encarga de que el resultado sea el esperado.
Por otro lado, es posible cambiar en run-time la clase de un control, o cambiar directamente el CSS haciendo uso del editor y mover el archivo .css al directorio donde se encuentran los ejecutables. Bastará con refrescar la página para ver los cambios de estética en los controles.
Herencia de las propiedades de una clase
En el caso de que una propiedad de una clase esté marcada como "Inherited:False", es posible revertir la situación.
Haciendo click con botón derecho sobre la propiedad correspondiente, aparece un menú "Inherit Value". Seleccionando dicha opción, la propiedad pasará a heredar el valor de la misma propiedad del padre.
Menú sobre los items de treeview
Haciendo click con el botón derecho, sobre los items no predefinidos del treeview, se puede visualizar el siuiente menú:
New Class
Delete Class
Rename Class
Set as GeneXus Default
Esto es idéntico al menú "Class" del editor que permite realizar las mismas operaciones sobre la clase seleccionada.
Clases Default
Es posible definir una clase como default, por lo cual cuando en GeneXus se asocia un "theme" a un objeto, a cada control definido en el objeto se le asocia una clase por defecto, aquella que se definió con el "Set as GeneXus Default".
En el caso en que no se indique explícitamente cuál es la clase default, la misma será la clase predefinida por GeneXus.
Una clase default en el editor de temas se identifica por un triángulo azul en la esquina superior derecha del ícono de la clase.
En la próxima edición: HTML Tags y el nuevo editor de temas en práctica.