All Answers

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

Ciao Massimo,

Thank you for your follow up answer!

• We can’t change the dropdown part of the combobox control. Our controls are all based on equivalent javascript widgets in wisej.js extending qooxdoo components. But we can certainly add a new extension control, probably named UserDropDownControl or similar, which will be a lot more consistent than overriding the combobox.
• We will add the DropDownWidth property (logged as a task). It won’t be needed for the custom drop down since we can make the drop down popup adapt to the custom child control.
• The TabPage has the ToolTipText property to be consistent with WinForms.
• I don’t know why FirstDisplayedCell is read-only, will log a task to make it writable.
• We have the ColumnHeadersHeight, in general we tried to adhere to WinForms classes.
• Border widths and other style related settings are handled only by the theme engine. The code can set the border style enum (which is then applied as a state and rendered by the theme engine), colors and fonts. Other visual aspects are all themed. You can change parts of a theme in an app simply with a theme mixin file, which is basically a partial theme that overrides the current theme whatever it is. This technical doc (https://docs.wisej.com/theme-builder/) explains the structure of the theme system.
• SelectedCells will be available at some point. At the moment we don’t handle cell selection, only row selection. We also have to add column selection.
• Wisej can handle deep linking (https://wisej.com/examples) using the hash property of the URL. Navigation between pages occurs simply by making a page visible or assigning to Application.MainPage. Wisej also handles invisible forms (VWG closed the form when setting Visible to false).
• You can find all the info regarding the client browser in Application.Browser. It exposes Size and ScreenSize, the difference is that Size is the current size of the browser, while ScreenSize is the physical size.
• We also have the Screen class which exposes Bounds (equivalent to Browser.Size) and WorkingArea (I just spotted a bug for this one, it’s not static so not visible) which returns either the size of the current Application.Desktop or the ScreenSize of the browser.

I hope this helps.

Ciao,

Luca