UseThemeeditor

Unofficial Content

Use and functionalities of the Theme Editor

 

 


 

 

Introduction


The editor can be executed from GeneXus and as an independent program.

Both, within GeneXus and as an independent program, the Editor can save files with .css extension (Cascading Style Sheets http://www.w3.org/Style/CSS/).

.css files generated by the Theme Editor inside GeneXus , are called Theme Objects, which are GeneXus objects like webpanels and webtransactions.

The Editor also allows working with .xml files, both inside and outside GeneXus .

This latest feature, (the possibility of working with XML files) is what allows the integration between the Editor as independent application and as GeneXus tool.

From now onwards, .xml files edited within the Theme Editor, will be called
"Templates".

 

 

  • XML Managing


A user will be able to design a site using the Themes editor independently from GeneXus ; the product of which will be .xml files, that another user (possibly whoever develops the application) will integrate to the KB, and save as GeneXus Theme objects (.css files).
It will also be possible to save a Theme with extensión .xml from the KB, so as to edit and modify it from outside of GeneXus .
This way, you achieve independency from the development of the application in designing pages.

A XML format design (a Template created in the Editor from outside GeneXus) can be quickly incorporated to the KB by following these steps:

1. Open the Template using the Editor from within GeneXus (option File -> Open Template)
2. Save the Template as a Theme (option File -> save as)

 

 

 

 

  • CSS Managing


It is possible to generate a CSS within the Editor outside GeneXus , and take it to production, avoiding to import the XML in the GeneXus KB as a previous step.
Note that if new classes are added, you need to import the .xml into the KB, because the new classes have to be associated to GeneXus controls, and this is the only way to do it.

So, generating the CSS outside GeneXus will be useful when only minor changes are done, and not structural changes, like adding or renaming classes.

 

 

Editor Options for the Use of Themes and Templates


Menu on the treeview items


By clicking the right button on the treeview items that are not predefined, the following menu can be visualized:

· New Class
· Delete
· Rename
· Set as GeneXus Default

This is identical to the Editor's "Theme" menu, which allows performing the same operations on the selected class.

Upon the predefined classes, the menu is as follows:

· New Class
· Set as GeneXus Default

File -> New Theme


It is possible to create a GeneXus Theme object using the Themes Editor when it's executed within GeneXus .
Through the following dialog, (menu "File->New" of the Editor) a new Theme based on any of the Templates can be created. They are incorporated through the dialog "Options->Customize Templates".



By default, the new object will be based on the Default Template.
Through the "Based on" combo box, a Template can be selected. (The Templates in this list are the ones incorporated through the dialog: "Options->Customize Templates")

Notes:

1. You can choose between creating a XML or a Theme GeneXus object. If the "GeneXus" check is selected, a Theme object will be created, if not, a Template will be created.

2. GeneXus distributes Templates (files with .XML extension) that can be optionally used as default. They are available under KBTDataTemplates folder, in the GeneXus installation.

Save As Option


When the Editor is executed from within GeneXus , through the menu option: File -> Save As it is possible to:

1. Save a Template as a GeneXus Theme object
2. Save a Template as another Template
3. Save a Theme as another Theme
4. Save a Theme as a Template

If the GeneXus check is enabled, it is saved as a Theme object.



Otherwise (if the checkbox is disabled), the File Name option is enabled to enter the name to be given to the generated XML file.



If the Editor is executed from outside GeneXus , the only "save as" option is to save a Template as another Template.

Merge Option


It is possible to merge two Themes, to obtain one Theme with the classes of both of them.
A Theme or Template has to be opened, and by selecting File -> Merge it appears a dialog where a Template has to be chosen. A merge will be done between this Template and the opened Theme or Template.
If there are different values assigned to the same property in both of them, the value which is taken is that of the xml selected by the dialog to merge with the opened Theme.

Generate CSS Option


When the Editor is executed from outside GeneXus , a Template can be generated as a CSS. By doing this, the designer does the modifications to the style, and the css can be taken directly to production without the need to import it in the knowledge base.

Note that if new classes are added, you need to import the .xml into the KB, because the new classes have to be associated to GeneXus controls, and this is the only way to do it.

Options -> Customize -> Templates


In the Menu Options -> Customize of the Theme Editor, the following dialog is displayed:




XML files are incorporated to the Editor through this dialog, and one of them is determined as "Default Template".
The Template default is used to:

1. Initialize the Theme that is automatically created every time a new KB is created.
2. To initialize a Theme if this is created from the GeneXus menu (File -> New Theme).

Options -> Customize ->Editors


Through the editor menu Options->Customize->Editors, it is possible to select the type of dialog for the colors.
This configuration is kept by the user.
The options are:
1. Default
2. Designer
If the "Designer" dialog is used, and the "Custom Colors" are defined, ("Add to Custom Color" button) these values are stored with the Theme.



This way, a group of basic colors is defined for the Theme, these colors will be available every time you want to edit.
E.g.: If a Gold Theme is created (a combination of yellows and oranges) the colors will be defined as custom in the custom colors.

Workspace of Theme Editor

 


 

The Editor as an independent application

Theme Editor Preview