English|Português|Español
UserPasswordLogin

HOME
SESSIONS
INFO
Imagen6240E

From GeneXus Olimar version: Theme editor (II)

The theme editor enables the creation of a GeneXus Theme object and its modification through class definition and through the properties of HTML tags. In this issue: HTML Tags and the theme editor in practice.

HTML Tags
By using the HTML Tags, users create a new HTML Tags structure and define its properties. This procedure includes the corresponding selectors in the CSS, as well as the hierarchy with which they are defined in the editor. For instance, if an LI tag, son of the UL tag to which the Font and ForeColor properties are configured, is defined, it will appear as a result in the CSS:

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

The hierarchical relation for HTML tags corresponds to an offspring type of relation from the selectors involved. An A element is a descendant of a B element if A is a son of B or A is a son of a C element that descends from B. That is to say that if the A B generic tags are defined (B son of A in the hierarchy), the settings of B will be adopted in the web page, for all the cases in which the HTML contains a structure like the one that follows:

1. B son of A:
 A &.
B ... /B & /A   
2.
B descendant of A:
 A ...  C ...  B .... 
/B .... /C .... /A

This means that the father-son relationship in the HTML Tags tree represents the nesting of the involved tags. For instance, if a structure is defined in which the father node is "Table", and it has two sons: "A:link" and "H2". This means that all the type-two headings from a table, and on the other hand all the links within a table will adopt the settings defined in the theme.
Settings to the tags defined in the editor are reflected in the web page only if those same tags are included in the html of the page, and in the same order established by the defined hierarchy, always keeping in mind the precedents declared in the published CSS specifications:
http://www.w3.org/TR/REC-CSS2/

Basically, when the HTML is graphed, the engine follows this order: the values of the inheritable properties, the values of the properties defined in the CSS (associated through the CLASS attribute), and the values of the attributes specifically defined for the tag.
Concerning point 1, the selectors that are nested among selectors will inherit the values of the properties from the most external selector, unless they are modified. For instance, the color defined for the BODY is applied to the text in a paragraph. There are cases in which properties are not inheritable. The margin-top property, for instance, is not inherited in our example. A paragraph would not intuitively have the same "top-margin" as the body of the document. The following is an example of the priority order: if a "SPAN" tag is defined, the attributes/variables (radio buttons and checkboxes) will be seen according to that particular tag's settings.
The HTML tags may be incorporated in the web page HTML by simply including one control in GeneXus, by defining the format of a line through the "Format" button from the GeneXus toolbar or by any action that causes a tag to be generated (for instance, by editing the HTML code).
The tag properties configured in the theme will be reflected under design in the objects linked to the theme, and in the generated web pages in runtime.

Using the editor
The editor may be used within GeneXus, and/or as an independent program. It may be called from outside GeneXus, by making a double click in the executable (GXThemeEditor.exe) or from the commands line running as a parameter, if so desired, a file with a .xml extension.
The theme editor (working either outside or inside GeneXus) enables saving the themes in files with XML extension. This way, work on themes created from GeneXus will be possible, by using the editor in an independent way, and vice-versa.
A list of files with XML extension, which are valid themes, may be impacted in the editor's application through the "Options Customize" menu's item. These themes will serve as the basis for the creation of new themes (in XML format). Within the list of files impacted in the application, one will be assigned as "default". When creating a new theme, this theme is created having the default as a basis.

The editor's aspect
The editor decides the space that is required in order to work with several themes simultaneously and in a comfortable way.
It is possible to place the themes vertically, horizontally or in a cascade. The following figure shows how the editor is seen when two themes are displayed vertically.

It is displayed as a hierarchical structure (a tree). Going down the structure, there is a "Classes" node and an "HTML tags" node on the first level of the tree. The properties of the classes and the HTML tags are visualized in the editor, in order to be modified, and they can be organized in alphabetical order or per category. In the editor's right vertical bar there is a Preview button through which a preview may be shown, if so desired, of how a control associated to that particular class may be visualized.

Example
1.
Creating a new theme
For creating a new theme from inside GeneXus, you have to go to the option: Object   New Object   Theme.
The following elements are included in a new theme:
- A name (name of the root node)
- A set of pre-defined elements, corresponding to the classes, within the "Classes" folder.

- An "HTML tags" folder that is initially empty.
If there is a pre-determined theme, the new theme is initialized with the characteristics of that particular theme.

2. Assigning values to class and HTML tags properties
2.1 Configuring class properties
The following is an example in which the properties for the "Grid" class are configured. Please note that in this case some properties only apply when the grid has the BackColorStyle property in a certain value. This means that unless the BackColorStyle property is configured in "Header" at the control level, the LinesBackColor and the TitleBackColor will not be seen, as expected. It is also necessary for the grid property to be Report in order to adopt the settings of LinesBackColor, LinesBackColorEven, y TitleBackColor.

For creating a new class based on another class (derived classes), "New Class" has to be selected with right button on the father class. 

Properties of the derived class are configured in a way analogous to the one in the previous example.

2.2 Configuring HTML Tags properties
For creating a new HTML tag, make a right-button click on the "HTML Tags" folder or on another HTML tag that has already been defined, and select "Add HTML Tag." A dialogue with a combo box will open with a set of HTML tags to choose from. Although this combo box is editable, a new HTML tag cannot be defined. It is presented in this way so that users may write the Tag that they wish to include without having to look for it on the list, provided that that particular Tag is part of the list. 

Next, we offer a very simple example in which a list of bulleted items has been defined within the form of a GeneXus web panel. This list has been generated by using the "Format" button from the GeneXus "HTML Formatting" toolbar as follows:
1.      "Bulleted List" was selected
2.      "Heading 4" was selected
3.      The items were entered.

The generated HTML code will be:
 UL
 LI
 H4 Item1 /H4  /LI
 LI
 H4 Item2 /H4  /LI
 LI
 H4 Item3 /H4  /LI  /UL

An H4 tag, son of a UL tag, may then be defined in the theme. The properties of the H4 tag may also be configured if there is a particular interest in seeing the items, which are type-four headings within the list, with certain characteristics.

If you wish to differentiate the font of those headings by using the type-four headings that do not belong to any list, an independent H4 tag will be defined with its own properties, as shown in the figure.

This concludes the creation of a style sheet.

In our next issue:
- Class assignment to a control
- Theme assignment to objects
- Changes in the theme
- Requirements
- Security
- Registration

Related
From GeneXus Olimar version: Theme Object (I)
From the GeneXus Olimar version: Theme Object (II)
From GeneXus' Olimar version: Theme (III) Object
From the GeneXus Olimar version: Theme editor (III)
GeneXus Olimar version: conditional orders and filters
Material from the XIV GeneXus International Meeting