ThemeEditorFeat2

Unofficial Content

Theme Editor Version 2.0 Features

 

Scope

Objects: WEB objects
 

Introduction


The Theme Editor provides facilities for the creation and modification of GeneXus Theme objects (wich are generated as Cascade Style Sheets). Thanks to Themes, WEB pages look&feel is standardized quite easily and the site maintenance is swiftly performed.
 

Description


GeneXus 9.0 introduces a new version of the Theme Editor, which adds functionalities to its previous version, which are detailed as follow:

I. From now on, users can define "Custom Classes" so they aren`t restricted to those derived from the GeneXus predefined classes.
In that way, there will be an increase in the current use of CSS.
  • It will be possible for the users to handle html manually and
  • to define other classes in addition to the ones used within GeneXus for their code.

For example, a very common feature that you could not achieved was giving a hovering effect over the links (and even setup different hovering colours within the screen).

In previous versions this was achieved by directly adding information to the web object header through the GeneXus functions that accessed the web object header (Form.HeaderRawHTML) . This implied a maintenance cost that is no longer necessary.

As from Theme Editor 2.0 version, adding user classes or "Custom Classes" is possible.

How to do it:

By right clicking in the "HTML Nodes", you have the option to add a new class.
Example:
1. Right click in the "HTML Nodes", and press "New Class"




2. Name the class as you desire (take into account the "." before the name of the class).
In the example, we create a ".ColorLinks" class and configure its properties.




And it´s done! You have a new class to add to your HTML code!

Example 2.

You can make a hierarchy of Custom Classes and HTML tags. For example, imagine you want to set the hovering color and visited color of links, and those links are textblocks in GeneXus . If the textblocks are associated to the "ColorLinks" class (which you have already defined under the Textblock class), you should:

1. Define a custom class named ".ColorLinks" under the HTMLNodes node of the Editor.
2. Define a A:ACTIVE, A:HOVER, A:VISITED HTML tag under the ".ColorLinks" class just created:







And that´s all! You have in the CSS:

.ColorLinks a:active
{
color: #C000C0;
}

.ColorLinks a:hover
{
color: #80FF80;
}

.ColorLinks a:visited
{
color: #FF8000;
}

So, every time a textblock appears in the HTML associated to the ".ColorLinks" class, and it is generated as a link, it takes those settings.


II. The scope of available properties within Themes Editor can be widen. In addition to the default properties, the user can add new ones if required (in case they are not available in the Editor).

How to do it:

The properties definitions of the Theme Editor are inside .XML files located in KBTDataProperties under the GeneXus installation. This way, you can incorporate new properties to the Editor (which will apply to all the classes).

So, you have to save the file CSS1.xml (in KBTDataProperties directory) with another name, and afterwards, edit the new file saved to make the changes.

For example, if you want to add a property "Cursor", under the "Classification" category, add this under the <Properties> TAG:

<Property id="cursor">
<Name>Cursor</Name>
<Description>Specifies the type of cursor to be displayed.</Description>
<Category>Classification</Category>
<Type>
<Name>enum</Name>
<Default idref='71'/>
<Values>
<Value idref='71'/>
<Value idref='72'/>
<Value idref='73'/>

</Values>
</Type>
</Property>

Note that in this case you also need to add values under the <Values> TAG:

<Value id='71'>url</Value>
<Value id='72'>auto</Value>
<Value id='73'>hand</Value>


III. Special Classes are added to customize the look & feel of BLOB control, Web Calendar (Datepicker) and Web Client Side Validation messages.
Web Client Side Validation messages:
Messages
ErrorMessages (All "error" rules are associated with this class)
WarningMessages (All "msg" rules are associated with this class)

How to use it:

You have to configure the class properties, as well as any other class. The difference is that you haven´t any GeneXus control to associate to these classes. The association to ErrorMessages and WarningMessages is automatic (to the error and rules messages respectively).

More Information:

New Classes for blob control in web form:
SAC # 18475

Web Calendar and Suggestions configuration in the Theme
SAC # 18508

IV.Improvements are introduced to cover a wider scope of value properties.

Property values and formats supported by the CSS standard (Cascading Style Sheet) are included in the Theme Editor.
E.g.:
 
  • Color type properties format is changed

The following format was used by default:
color : rgb(0,0,0);
This one will be still supported, but we will start using the following nomenclature:
color : #rrggbb;

The Transparent value is also supported.
 
  • Defining more than one font type is supported.
The format of the font-family property is the following:
font-family: (<font-name>|<font-family>) <font-family>) ,...
The spaces in properties values in CSS determine different values. Therefore, if the Font name is made up by more than one Word, you must use quotation marks to specify it:
font-family: verdana, "times new roman";
 
  • Each property implying a size is specified with the corresponding unit.

By default it is the pixel, except for the Font Size property that has pt(dots) as unit value by default.
 
  • New Colours are supported: 'aqua', 'white', 'buttonface', etc
Now, name of colours are supported as value properties.
 
SVG (http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color)
E.g: AliceBlue, Chocolate, DarkOrchid, etc.

System Colours (http://www.w3.org/TR/2003/CR-css3-color-20030514/#css2-system)
E.g: Background, ButtonFace, InactiveBorder, etc.
 
  • Height of Textblocks in Mozzilla/FireFox
New properties have been added to the Theme Editor, in order to achieve compatibility between FireFox and the Height of Textblock controls.
 The new properties are:
  • box-sizing and -moz-box-sizing = border-box
  • display = block
  • height = <value>


V. Changes in Editor usability
 
  • Now, the workspace is saved.
  • Now, moving the window with the preview is allowed.
  • Customized toolbars can be defined.


How to do it:





This creates a floating toolbar (you can select whether you want it at the top, bottom, left or rigth)



You can add button to the toll using drag&drop:



This opens the Customize dialog. In the Commands tab, you can select a command to drag and drop.



Then you can place it where you want inside the workspace.

VI. Facilities in CSS maintenance
 
  • It is possible to do a Themes merge.
Now, It is possible to do a Themes merge to incorporate in only one Theme the information centralized in 2 of them.

How to it:
1. Go to the menu option File -> merge
2. Select a Template (.XML) to merge with the Theme currently open.
 
  • Besides, it is also possible to save a Theme as CSS by running the Editor from outside GeneXus .
Previously, by using the Editor independently, Themes (better called as Templates) were saved only in XML format. The advantage of being able to save a Theme in CSS format is that the graphic designer can interact directly with the developer by giving him a CSS.

Moreover, now you can select where to save the CSS (by running the Theme Editor inside GeneXus). Previously, by executing the Editor inside GeneXus , a Theme was always saved as CSS in the dataXweb directory; now you can select where to save it.

How to do it:
1. Go to the option File-> Generate CSS
2. Select the folder where to save the CSS


 

Download an example:

http://www.gxopen.com/gxopen/servlet/projectinformation?488
 

Notes:

· The folder "Themes" does no longer exist. A folder KBTData is created under the GeneXus installation.
 

More functionalities..


Default Classes for numeric fields:
SAC # 18328

HTML Class with the same name as GeneXus class
SAC # 18514

 

Appendix I - Theme Editor FAQ


For more information see
Theme Editor Manual