Tips & Tricks

Custom Fonts

Wisej.NET can use any web font, including woff, woff2, eot, svg, ttf, depending on the browser. Usually woff or woff2 are compatible with all browsers.

However, if the web font is not available to .NET code also on the server, Wisej.NET cannot use it to calculate the size for auto-sized controls correctly and you may end up with truncated labels and wrong auto-sized controls.

In this case, you also need to download and install the ttf version of the font and make it part of your server installation.

Wisej.NET will automatically match the web font to the ttf version to make sure that auto sizing works properly. Just make sure that both font formats are available to avoid wrong sizing of text in controls.

Starting with Wisej.NET a font does not need to be installed on the server anymore to be used. See https://docs.wisej.com/docs/releases/whats-new-in-3.2/enhanced-font-support

Complex CSS

Sometimes you may need to add some complex additional CSS style that is not directly supported by the Wisej.NET theme system. In this case you can add a CSS string of almost any complexity in relation to a state, including adding :after and :before pseudo elements.

A very good example is in the Material-3 theme under the inputElement shared appearance key:

Theme JSON

"default": {
	"styles": {
		"css": "{\":after\":{\"content\":\"''\",\"display\":\"block\",\"position\":\"absolute\",\"left\":\"0px\",\"bottom\":\"0px\",\"width\":\"100%\",\"height\":\"2px\",\"background-color\":\"focusFrame\",\"transform\":\"scaleX(0)\",\"transition\":\"all 0.3s\"}}"
	}
},
"focused": {
	"styles": {
		"css": "{\":after\":{\"content\":\"''\",\"display\":\"block\",\"position\":\"absolute\",\"left\":\"0px\",\"bottom\":\"0px\",\"width\":\"100%\",\"height\":\"2px\",\"background-color\":\"focusFrame\",\"transform\":\"scaleX(1)\",\"transition\":\"all 0.3s\"}}"
	}
}

Equivalent CSS

// default
:after {
	content: '';
	display: block;
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 2px;
	background-color: focusFrame,
	transform: scaleX(0);
	transition: all 0.3s;
}
// focused
:after {
	content: '';
	display: block;
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 2px;
	background-color: focusFrame,
	transform: scaleX(1);
	transition: all 0.3s;
}	

Wisej.NET will convert the CSS definition (which is JSON in the theme file) to the equivalent style sheet properties in the browser when the state is applied to the widget.

Colors

You can use themed colors in the custom CSS as long as the CSS property ends with "color". For example, you can set "background-color": "buttonFace" (or "backgroundColor": "buttonFace" since Wisej supports both notations) and the theme system will replace "buttonFace" with the corresponding CSS color set in the theme before generating the style sheet in the browser.

Images

You can use themed images in the custom CSS as long as the CSS property ends with "image". For example, you can set "background-image": "icon-print" (or "backgroundImage": "icon-print" since Wisej.NET supports both notations) and the theme system will replace "icon-print" with the corresponding image source set in the theme before generating the style sheet in the browser.

Animations

Wisej.NET applications can add all sorts of animations to its components using the Animation extender. However, you can also add simple animations to a theme or a mixing by using the transform, transition and css styles.

You can find an example of a simple animation in all the built-in themes under the button appearance:

"pressed": {
  "styles": {
		"transform": "translate(1px, 1px)"
	}
}

By applying a transformation or transition to a widget in conjunction with a state you can add some "functional" animations to all the widgets in your app.

Inheritance

The theme system supports the inheritance of appearances allowing a theme creator to consolidate common styles in shared appearances. You can find an example of this feature in the built-in themes for the icon-dark, icon-light, scrollbar, scrollarea, datechooser, and inputElement (in Material-3) appearances.

You can also refer to a child component appearance using the forward slash: i.e. inherit: "window/title" inherits the styles and properties from the title component in the window appearance.

Source Code

You can use the Wisej JavaScript source code and qooxdoo source code to inspect the appearances and child components used by a widget. Usually the appearance key is set either by refining the appearance property or in code:

Property

properties: {

  appearance: { init: "textbox", refine: true }
}

Code

construct: function () {

  this.base(arguments);
  
  this.setAppearance("textbox");
}

All the child components are named and created in the _createChildControlImpl method:

// overridden
_createChildControlImpl: function (id, hash) {
  var control;

  switch (id) {
	  case "textfield":

The number of styles, states and properties, in conjunction with child components, with their own states, styles, properties and child components makes it a virtually unlimited system. Therefore, if you need to implement very advanced widgets and themes, dealing with the source code is a necessity.

The name of the child component is also the name of the child appearance. For example, the appearance of the drop down button in a combobox is "combobox/button", and in the theme definition it's under the appearances/button/components/button branch.

Debugging

When using the new Edge/Chrome viewer in the Theme Builder preview panels you can press F12 or press the button to open the Developer Tools window and inspect the preview.

Theme Builder with Dev Tools