De la versión Olimar de GeneXus: Editor de Temas

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.