From the GeneXus Olimar version: Theme Editor

The theme editor allows creating a GeneXus Theme object -that saves automatically, like a Cascade Style Sheet (CSS) in the model's web directory- and modifying it by means of the classes definition and the HTML tags' properties.

We will become familiar with the Cascade Style Sheet and the classes and, in the following issue, we will continue with the HTML tags. Then, we will tackle the new theme editor operation. 

Introduction
Until GeneXus 7.5 version (inclusive), it was necessary to configure control properties in "html forms" (web panels and transactions html forms) in these controls.  
In the Olimar version, GeneXus introduces a new object, "Theme", where we can define classes for the different types of controls and assign properties to these classes. Then, controls based on these classes will inherit these properties and it will be no longer necessary to establish the values of these properties for each control in the form. These objects (Themes) are based on the inclusion of CSS  (Cascading Style Sheets) in the web pages generated by GeneXus.  

Scope
Objects: Themes
Languages: .NET, C/SQL, Visual Basic, Java.
Interfaces: Web
 
Description
The theme editor provides the GeneXus user with a graphic interface to create and modify a GeneXus Theme object, which is automatically saved as a CSS  (Cascading Style Sheet) in the model's web directory. 
These CSS are generated and modified by means of the classes definition (corresponding to the basic controls used in a GeneXus web application), and the HTML tags properties definition.

Overview
A style sheet is a document containing the specifications that define the Web pages appearance. It allows separating the contents of an HTML document from its presentation. The HTML makes a reference to the styles sheets containing the page aesthetic details, which are transferred to the client and even stored in a cache to speed up the navigation.

With the facilities provided by the theme editor for the generation and modification of  Theme objects (style sheets) we succeed in obtaining uniform web pages very easily and make the site maintenance swiftly and easily. 

As it was already said, a style sheet is basically a set of rules that specify a document presentation. Each rule is made up by a selector and a style that applies to the selector. Let us see an example of this: 

P { text-indent: 3em } In this case, the selector is P.

Specifically, the selectors called classes make it possible to associate different styles to the same HTML element by means of the CLASS attribute. Therefore: 

 .center {text-align: center}
 
 h1 class="center"  Here, the properties of the "center" class are assigned to h1. 

There are several properties that can be defined for an element. Each property takes a value that determines how the result is visualized on the web page. In the example, text-align is a property that takes the value "center".  

For more information on style sheets please refer to:
http://www.w3.org/Style/CSS/
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/REC-CSS2/
 
Classes
When a theme is edited, we can see the classes predefined by GeneXus in a treeview.
The predefined classes are the following:  

Attribute
Button
FreeStyleGrid
Grid
Hyperlink
Image
Table
TextBlock
 
It should be taken into account that the class "Attribute" is not only useful to define properties of attributes but also properties of edit controls, radio buttons, list boxes, check boxes and combo boxes.
There are specific classes of buttons corresponding to buttons automatically generated by GeneXus in WebTransactions and WebPrompts. These classes are the ones listed below, and are direct descendants of the class "GXSpecialButtons" that is the child of the class "Button":

GXBTnCancel- GXBtnCheck-GXBtnDelete-GXBtnEnter-GXBtnFirst-GXBtnGet-GXBtnHelp-GXBtnLast-GXBtnNext-GXBtnPrevious-GXBtnSelect
 
When a Web Transaction is created, buttons are associated to the corresponding classes by default. The same happens with the Web Prompts.
In the theme editor, each class have an associated set of properties. 
Then, in design, it will be possible to associate a class compatible with a control to this control. E.g.: a grid (control) can be only assigned the grid class or some of the classes derived from it.
As a consequence, in runtime (and even in design), this control will take the settings of the corresponding class, thus reducing programming cost (since the user did not have to assign the control's properties one by one).

The classes' properties are a super group of the control properties. This widens the scope of properties configurable to GeneXus controls. Although they will not  be seen in design, they will be already defined when the object is in production.
We can create classes deriving from predefined ones. The process of defining a class implies for the developer to assign a name to this class and configure the properties corresponding to it. 
Child or derived classes remain implicitly linked to the classes they derive from by an inheriting relationship. As a consequence, modifications made to the latter will be reflected in the former, with some exceptions. 
Modifications consist in changing the values of some of the classes' properties. 

Classes' hierarchy in the theme editor is not conceptually linked to the classes' relationship at CSS level. It is an "inheriting" relationship aimed at providing the user with more facilities at the time of carrying out the maintenance tasks. 
The lower part of the editor shows the property name and a description of it. Besides, it will say  "Inherited: True" or "Inherited: False", accordingly.  "Inherited: True", means that the property's value reflects the value of this property in the parent. I.e.: any change made to the parent's class property will be reflected in a change in the same child's property. On the other hand, "Inherited: False" implies that a change made in the parent's class property will not be reflected in the child's class. Inheritance in properties' value is lost when these are changed in child classes.  
If we want to create a class descendants relationship of the following style in the CSS: 

.FreeStyleGrid .Attribute
 
With the objective of changing the color and font of attributes and variables within a  Free Style Grid; with the editor scheme, we must create a new child class from the "Attribute" class  (e.g.:AttributeInFreeStyleGrid) and set it with the color and font we want. Then, we must associate this class to the attributes or variables in the Free Style Grid. Therefore, instead of having in the CSS: FreeStyleGrid .Attribute, we will have an entry for the class name (with the same effect):

.AttributeInFreeStyleGrid{
          background-color : rgb(255, 192, 192);
          color : rgb(192, 64, 0);
          font-family : Comic Sans MS;
          font-size : 8.25pt;}
 
GeneXus will ensure that the result is the expected one. 

Besides, it is possible to change a control's class in runtime, or directly change the CSS using the editor and moving the .css file to the directory where the executables are located. Just by refreshing  the page, we will be able to see the aesthetic changes made to the controls.

Inheritance of classes' properties 
If the property of a class is identified as "Inherited:False", it is possible to revert the situation. 

Clicking with the right button on the corresponding property, the "Inherit Value" menu will appear. If we select this option, the property will inherit the value of the same parent's property.  



 

Menu on the treeview items
Clicking with the right button on the treeview items that are not predefined, we can visualize the following menu: 

New Class
Delete Class
Rename Class
Set as GeneXus Default
 
This is identical to the editor's  "Class" menu, which allows making the same operations on the selected class.  
 
Default Classes
We can define a class as default. Therefore, when in GeneXus we associate a "theme" to an object, each control defined in the object is associated a default class; i.e.: the class that was defined with the "Set as GeneXus Default".
If the default class is not explicitly indicated, it will be the class predefined by GeneXus. 

A default class in the theme editor is identified by a blue triangle in the top right hand corner of the class icon.  

In the next issue: HTML Tags and the new theme editor in practice. 

Related News
GeneXus Olimar version beta 3 has been released
From GeneXus Olimar version: Theme Object (I)
From the GeneXus Olimar version: Theme Object (II)
From GeneXus' Olimar version: Theme (III) Object
From GeneXus Olimar version: Theme editor (II)