Theme for Web applications

Official Content
This documentation is valid for:

Web applications need a more sophisticated look feel than Winform applications and us developers have neither the skills nor the time to achieve a design of those characteristics. For that reason, we usually hire design services, which is why it is necessary to later integrate that design with the GeneXus application. This integration is achieved through "Themes."

For graphic design we count on the 'Themes Editor,' a free distribution tool that can be executed separately from GeneXus or inside it.

Whereas in previous versions of the "html forms," (Web Panels and html forms of transactions) control properties had to be configured in the controls, today through "Themes,", it is possible to define "Classes" for the different types of controls and assign properties to these classes.

Later, the controls are associated with these classes, and they inherit the properties configured there, thus making it no longer necessary to establish the values of these properties for each control in the form. The properties of these controls are configured in only one place: the Theme Classes.

Any design change that might be needed will be done in the Theme (with no need to generate/compile absolutely anything), this way the aesthetic uniformity of the site is achieved at a low maintenance cost (it is not required to change each object), and as a consequence higher productivity in the development of Web applications is gained.

Overview

The Themes Editor is a free distribution tool that can be executed separately1 from GeneXus or inside it. The reason for this is to make it possible that the tool be used by the Graphic Designer, and the development of the application become independent, and even parallel to its design.

The goal of the tool is to create and give easy maintenance to CSS (Cascading Style Sheets).

Usability

Assignment of Themes to Objects

The objects to which Themes can be assigned are Web Panels and Web Transactions.

The Themes are associated with a GeneXus object in this way:

  • Directly to the object, through its Theme property (or F4 on selected object from the Folder View, inside Knowledgebase Navigator).
  • Configuring the property "Default Theme" at version level in the knowledge base.

    Note: The Themes heritage is at Object-Version level. The default value of an object Theme property is the value of the Default Theme property at version level.

Assignment of Classes to a Control

Once an object is associated with a Theme (through the Theme property), the controls of that object will remain associated with the default class compatible with the control of the corresponding Theme.

It is possible to replace such class with another, in both design and runtime (Class Property).

Note: If a control property is explicitly changed, these values have priority over the value of the same property configured at Theme level. I.e.: the values of properties configured at Theme level will not be taken, unless the value of the property in the control itself is default.

Changes of the theme

Once the programs have been generated, the only requirement to make changes in some of the themes is to take the .CSS files corresponding to the theme to production (one by language).

The Editor

Examples

Tips

Considerations

Theme Editor FAQ

Subcribe to this category's changes
Sub CategoriesAdd a new subcategory in this category
PagesAdd a new page in this category
Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.