De la versión Olimar de GeneXus: Editor de temas (II)

El editor de temas permite crear un objeto GeneXus Theme y modificarlo por medio de la definición de clases y de las propiedades de los HTML tags. En esta edición: HTML Tags y el editor de temas en la práctica.

HTML Tags

Utilizando los HTML Tags el usuario crea una estructura de Tags HTML y define sus propiedades. Con este procedimiento se incluye a los selectores correspondientes en el CSS, y con la jerarquía con la cual se definen en el editor. Por ejemplo, si se define un tag LI hijo del tag UL al cual se le configuran las propiedades Font, y ForeColor, se tendrá como resultado en el CSS:

UL LI
{
          font-family : Microsoft Sans Serif;
          font-size : 8.25pt;
          color : rgb(255, 0, 0);
}

La relación jerárquica en el caso de los HTML tags corresponde a una relación de descendencia de los selectores involucrados. Un elemento A es descendiente de un elemento B si A es hijo de B, o A es hijo de un elemento C descendiente de B. Es decir, si se definen los tags genéricos A -> B (B hijo de A en la jerarquía), se tomaran los settings de B en la página web, para todos los casos en que el HTML contenga una estructura como la siguiente:

1. B hijo de A:

2. B descendiente de A:

Esto significa que, la relación padres-hijos en el árbol de Tags HTML representa el anidamiento de los tags involucrados. Por ejemplo, si se define una estructura en la que el nodo padre es "Table" y tiene dos hijos :"A:link" y "H2". Significa que todos los headings de tipo dos dentro de una tabla, y por otro lado todos los links dentro de una tabla tomarán los settings definidos en el tema.
Los settings a los tags definidos en el editor, se ven reflejados en la página web solo si esos mismos tags están incluídos en el html de la página, y en el mismo orden que establece la jerarquía definida, siempre teniendo en cuenta las precedencias que están declaradas en las especificaciones de CSS publicadas: http://www.w3.org/TR/REC-CSS2/

Básicamente, cuando se grafica el HTML, el navegador considera el siguiente orden:

los valores de las propiedades heredables
los valores de las propiedades definidas en el CSS (asociadas a través del atributo CLASS)
los valores de atributos definidos especificamente para el tag.

Respecto al punto 1, los selectores que están anidados entre selectores heredarán los valores de las propiedades del selector más externo, a menos que sean modificados. Por ejemplo, el color definido para el BODY se aplica al texto de un párrafo. Hay casos en que las propiedades no son heredables, por ejemplo, la propiedad margin-top no se hereda en el caso del ejemplo, intuitivamente un párrafo no tendría el mismo "top margin" que el body del documento.
Un ejemplo del orden de prioridades es: si se define un tag "SPAN", los atributos/variables (radio buttons y checkboxes) se ven segun los settings de ese tag.
Si se define una clase "attribute" y se asigna a esos controles, sobrescribe los settings del tag.
Los tags HTML pueden ser incorporados en el HTML de la página web simplemente incluyendo un control en GeneXus, definiendo el formato de una línea mediante el botón "Format" de la toolbar de GeneXus, o cualquier acción que provoque que se genere un tag (por ejemplo, editando el código HTML).
Las propiedades de los tags configuradas en el theme, se verán reflejadas en diseño en los objetos vinculados al theme, y en runtime en las páginas web generadas.

Uso del editor

El editor podrá ser usado dentro GeneXus y/o como un programa independiente.

Se puede llamar desde fuera de GeneXus, haciendo doble click en el ejecutable (GXThemeEditor.exe) o desde línea de comandos pasando como parámetro, si se quiere, un archivo con extensión .xml.

El editor de temas (ya sea trabajando por fuera o dentro de GeneXus), permite salvar los temas en archivos con extensión XML. De esta forma se podrá trabajar con temas creados desde GeneXus, usando el editor en forma independiente, y viceversa.

Se puede impactar en la aplicación del editor una lista de archivos con extensión XML que sean temas válidos, mediante el item del menú "Options -> Customize". Estos temas servirán como base para la creación de nuevos temas (en formato XML).

Entre la lista de archivos impactados en la aplicación, uno será asignado como "default". Al crear un nuevo tema, éste se crea en base al default.

Aspecto del editor

El editor dispone el espacio de tal forma de que se puede trabajar en forma cómoda con varios temas simultáneamente.

Es posible disponerlos en forma vertical, horizontal, o en cascada. La siguiente es una figura que muestra cómo se ve el editor al desplegar dos temas en forma vertical.

Se despliega como una estructura jerárquica (un árbol). Descendiendo en esa estructura, se presentan un nodo "Classes" y un nodo "HTML tags" en el primer nivel del árbol. Las propiedades de las clases y tags HTML se visualizan en el editor, para ser modificadas, y se puede ordenarlas alfabéticamente o por categorías. En la barra vertical derecha del editor, hay un botón Preview mediante el cual se puede mostrar o no, una vista previa de cómo se visualizaría un control asociado a dicha clase.

Ejemplo

1. Crear un nuevo tema
Para crear un nuevo tema desde dentro de GeneXus, se debe ir a la opción Object > New Object > Theme.
Un nuevo tema incluye los siguientes elementos:
- Un nombre (nombre del nodo raíz)
- Un conjunto de elementos predefinidos, correspondientes a las clases, dentro del folder "Classes".
- Un folder "HTML tags" inicialmente vacío.
Si existe un tema predeterminado, el nuevo tema se inicializa con las características de dicho tema.

2. Asignar valores a las propiedades de clases y HTML tags

2.1 Configurar las propiedades de las clases
El siguiente es un ejemplo en el cual se configuran las propiedades de la clase "Grid". Es importante señalar en este caso que algunas propiedades sólo aplican cuando la grilla tiene la propiedad BackColorStyle con determinado valor. Es decir, a menos que a nivel del control se configure la propiedad BackColorStyle en "Header" no se verá el LinesBackColor y el TitleBackColor, como es de esperar. Igualmente es necesario que la propiedad de la grilla sea Report para que se tomen los settings de LinesBackColor, LinesBackColorEven, y TitleBackColor.

Para crear una nueva clase a partir de otra (clases derivadas), se selecciona "New Class" con botón derecho sobre la clase padre.

Y en forma análoga a como se explicó anteriormente , se configuran las propiedades de la clase derivada.

2.2 Configurar las propiedades de los HTML Tags

Para crear un nuevo HTML tag, se debe hacer click con el botón derecho del mouse sobre la carpeta "HTML Tags" o sobre otro HTML tag ya definido y elegir "Add HTML Tag..". Se abrirá un diálogo con un combo box en el cual se podrá elegir entre un conjunto de HTML tags. El combo box es editable, sin embargo, no se puede definir un nuevo HTML Tag, sino que se presenta de esa forma para que el usuario pueda escribir el Tag que desea incluir sin buscarlo en la lista, siempre y cuando ese Tag efectivamente se encuentre en la lista.

A continuación presentamos un ejemplo muy sencillo, en el que se tiene definido en el form de un web panel GeneXus, una lista de items con bullets, generada usando el botón "Format" de la toolbar "HTML Formatting" de GeneXus de la siguiente forma:

1. Se seleccionó "Bulleted List"

2. Se seleccionó "Heading 4"

3. Se ingresaron los items.

El código HTML generado será:

<UL>

<LI>

<LI>

<LI>

Se puede definir entonces en el tema un tag H4 hijo de un tag UL, Y configurar en particular, las propiedades del tag H4, si el interés radica en que los items que son headings de tipo cuatro dentro de la lista, se vean con ciertas características.

Si se busca diferenciar el font de aquellos headings, con los headings cuatro que no pertenecen a ninguna lista, se definirá un tag H4 independiente con sus propiedades, tal como se muestra en la figura.