Vista previa del editor

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.

La vista previa del editor se puede personalizar, agregándole “Custom Views”, que son archivos .HTML.  Para eso, agregar una nueva vista a través del menú contextual del nodo Custom Views, o presionando la tecla INS sobre el mismo.

Para eliminar una vista personalizada basta con presionar DEL/SUPR.

La vista consiste de varios tabs (HTML browser, HTML Source y CSS).

Se puede modificar el source y ver los cambios reflejados en el HTML, pero no se salvan dichos cambios en el documento que esté activo.

La siguiente figura muestra un ejemplo en el cual se agregó una vista previa llamada “Transacción”.

Imagen 3-7: Gx Theme Editor.

NOTA:

Si se tienen diferentes clases form definidas (es decir,  distintas clases hijas de la clase predefinida form), el preview para el resto de los controles se ve con un aspecto de fondo correspondiente a la configuración de aquella clase form que sea la default.

EJEMPLO ----------------------------------------------------------------------------------

El siguiente es un ejemplo de los pasos básicos a seguir para trabajar con “Themes”.

Paso 1: Crear un nuevo Theme.

Un nuevo Theme consiste de los siguientes elementos:

q       Un nombre (nombre del nodo raíz)

q       Un conjunto de elementos predefinidos, correspondientes a las clases, dentro del folder “Classes”.

q       Un folder “HTML tags” inicialmente vacío.

Para el ejemplo, crearemos un Theme de nombre “TemaObjeto”.

Paso 2: Configurar las propiedades de las clases.

Sigue un ejemplo en el cual se configuran las propiedades de la clase “Grid”. Es importante señalar en este caso que algunas propiedades solo aplican en el caso en que la grilla tenga 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.

Imagen 3-8: Gx Theme Editor.

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

Imagen 3-9: Gx Theme Editor. 

Crearemos una clase “Grid1” hija de Grid. Esta clase hereda automáticamente las propiedades del padre. Cambiaremos el valor de la propiedad “TitleBakColor” de la clase “Grid1”, para que sea esa propiedad donde difiere de la clase padre:

Imagen 3-10: Gx Theme Editor.

Paso 3: 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, una lista de items con bullets, generada usando el botón “Format” de la toolbar “HTML Formating” de GeneXus de la siguiente forma:

1.      Se seleccionó “Bulleted List”

2.      Se seleccionó “Heading 4”

3.      Se ingresaron los ítems.

Como es de esperar, el código HTML generado será de esta forma:

<UL>

<LI>

<H4>Item1</H4></LI>

<LI>

<H4>Item2</H4></LI>

<LI>

<H4>Item3</H4></LI></UL>

Se puede definir entonces en el Theme 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 ítems 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.

Imagen 3-11: Gx Theme Editor.

Con esto, concluye la creación del Theme.

Paso 4: Asignación de clases a un control

Una vez que un objeto está asociado a un Theme (mediante la Propiedad Theme), los controles de ese objeto quedarán asociados a la clase default compatible con el control, del Theme correspondiente.

Es posible cambiar dicha clase por otra, tanto en diseño como en runtime (Propiedad Class).

Retomando con el ejemplo, dado un grid en el form del webpanel, podemos asociarle la clase “Grid” o “Grid1”, ya sea en diseño (editando las propiedades del control), o en runtime.

NOTA:

Si una propiedad del control se cambia explícitamente, estos valores tienen prioridad sobre el valor de la misma propiedad configurado a nivel del Theme. Es decir, no se toman los valores de las propiedades configuradas a nivel del Theme a menos que el valor de la property en el control propiamente dicho, sea la default.

Por ejemplo, asociemos el control a la clase “Grid1”.

Ahora basta con generar el objeto y ejecutarlo. Cualquier cambio que se quiera hacer a nivel de la configuración del grid, se hará en la clase del Theme, y no será necesario generar nuevamente el objeto.

Paso 5: Cambios en el Theme

Una vez generados los programas, cambios en alguno de los Themes no requieren más que llevar a producción el archivo .CSS correspondiente.

En algunos casos, para ver reflejados los cambios inmediatamente en el browser, es necesario hacer “ctrl-F5” para que el refresh vaya acompañado de una eliminación de las entradas del caché.