Difference between Styles and Properties

Hi Jens,

There is some info here: https://docs.wisej.com/theme-builder/

The main difference between the styles and the properties in a wisej theme is that the styles generate css style rules, while properties assign values to widget properties. The widget (the class) must have the property declare, you can’t se values to properties that don’t exist.

It’s similar to the difference between css classes and css inline values. A css class (rule) applies to all the elements that use that class or match the rule. Inline css applies only to that specific element.

For example, when you set the backgroundColor in appearances/button/focused/styles/backgroundColor, wisej (qooxdoo) creates a css class qx-buttton-focused { background-color: “red”; }. All the widgets using the appearance key “button” and that have the “focused” state will have “class=”qx-buttton-focused” in their rendered dom element.

However, widgets happen to also have a property named backgroundColor which has nothing to do with the style. When you set the property backgroundColor (by code or by theme), the value you set will be rendered as inline css (in the style attribute) and can override the css rules.

The styles are limited by what can be placed in a css rule. So wisej (qooxdoo) has a set of decorator classes that process the styles set in the theme and generate the dynamic css rules.

The properties are not limited by anything. You can have a property of any type, including complex objects. How the property is rendered is entirely up to the code behind it. Some of it can become css, some can be in the layout, etc. For example, a property like:

myProperty: {apply:”_applyMyProperty”, themeable: true}

Simply calls _applyMyProperty: function(value, old) when it’s set by code or by theme. The code in it can change the inline css, add/remove dom elements, change size, position, fire events, do just about anything.

For a property to be set by the theme, it must have the “themeable:true” attribute.

Properties can also be inherited “inheritable: true”. When a property is inherited, when you set it to a widget, all the child widgets are receive the setting, unless they have their own value.

When you declare a property (like above), wisej (qooxdoo) generates all the setters, getters, evetsm on first use (it’s like a compile on demand system).

getMyProperty, setMyProperty, resetMyProperty, setThemedMyProperty (there is no getThemedMyProperty, it’s resetMyProperty).

It’s a very flexible system which allows a lot more than sass or css alone.

Some more docs here: http://www.qooxdoo.org/current/pages/core/understanding_properties.html

HTH

/Luca