Themes are a type of GeneXus object. In a Theme you define the standard look and feel of the different Web Controls included in your web pages. Using Themes allows you to reduce maintenance costs (as changes done in one place are taken into account throughout the whole application), and it standardizes the look and feel of your application (as, for example, all buttons appear in the same color).
In a Theme, you can define classes for the different GeneXus control types and assign properties to these classes. In addition, you can set up the HTML Tags that appear on the HTML page.
There are three ways to associate a theme to GeneXus objects: at the Knowledge Base level, at the Environment level, or specifically at the object level. This is also the order of precedence: if it is assigned at the object level, this value is the value that will be considered. The same happens when it is assigned at the model or knowledge base level.
To associate it with the object you need to set the Theme object property. To associate it with the model, set the Default Theme property that is available in the Environment. Lastly, to associate it with the knowledge base, set the Default Theme model property. The following images show each one of these settings.
This same order of precedence is used to determine the default values of the Theme property: the default value of an object property is that of the model property and, in turn, the default value of the model property is that of the same property in the knowledge base.
By default, the Theme model property is associated to the Modern Theme; thus, the knowledge base objects are associated to the same Theme by default.
To associate a Theme Class to a control, the Class property is used. It is a control property that can be changed at runtime. In the following example, the class property is assigned to a “Grid1” grid control. The class assigned to the grid is conditioned to the &Import variable value. GreenGrid and BlueGrid are two classes derived from the “Grid” predefined class. These classes are defined in the theme associated to the object that contains the control.
If &Import > 0
Themes are changed by using the configuration tree from the Customization/Themes node in the Folder View of the Knowledgebase Navigator. The following figure shows the configuration tree of the Modern theme. To the right, there is a preview of the object setting.
The tree in the middle shows that going down the hierarchical structure, a Classes and an HTMLNodes node are displayed. On the right we have the properties corresponding to each one of the Classes and HTML Nodes; to the left, there is a runtime preview of a control associated with the corresponding class.
The “Classes” node displays a set of predefined classes corresponding to GeneXus controls (except for the "Messages" Class, which does not correspond to a GeneXus control, but is used for warning and error messages shown to the end-user in forms, as a result of Client Side Validation).
Each class has a set of properties that may be set by the designer and is a design for a GeneXus control type.
A class can be assigned to a control at design time and at runtime through the Class property of the control (control.Class = value).
Derived classes can be created from predefined classes. When defining a class, the developer has to give it a name (by right-clicking on the parent class and selecting Add Class), and set the properties corresponding to that class. By default, children classes have an inheritance relationship with parent classes, in the sense that the property values of children classes are the same as those of their parent's classes (and any change to the parent is applied to the child, unless the child is explicitly changed, losing the inheritance). This helps to keep the web site design consistent.
They complement the functionality of Themes by allowing you to define the features of an HTML Tag in a given context. That is to say, a Tag can always be configured in a context by editing the Theme. For example, setting the properties of links inside a table to display them in a certain color (Forecolor property).
The HTML Tags configuration that is provided in the editor is seen on the Web page, if the Tags are present in the page's HTML, in the same context that they were defined in the editor. The context is determined by the hierarchy with which Tags are defined.
For example, the case that we mentioned about defining the properties of table links would be done as shown in the figure below:
A Tag A is defined as a child of a Tag TD. That is to say, every time that a Tag A is nested in a TD Tag in the generated HTML, the forecolor defined in the example will be taken.
Another example would be to define a body tag and its Forecolor property, so the free text of the page will take that color.
Themes can have their own images so developers can quickly enhance their applications. The figure below shows a theme created by a developer, to which he attached his own images.
After saving and specifying a theme, a group of files with .CSS (Cascading Style Sheet) extension is created (one for each language selected in the Knowledge Base) and located in the web directory of the model (i.e. C:\Models\TravelAgency\CSharpModel\web\Resources\). At runtime, these .CSS files (containing the class definitions) are referenced in the Header of the generated pages and have to be moved to the client machine and cached. So, every time we change the Theme associated with an object, all we have to do is put the Resource directory in production for the end-user to view the esthetic changes made (no need to compile or generate).
In sum, any design change required will be made in the Theme. In this way, website design consistency is achieved with low maintenance costs (as there is no need to change each object), thus increasing the productivity of Web application development.