CSS Support for XUI Editor

XUI editor is a simulation editor for the executable UI in runtime, such as Dojo pages. There is a gap of widget style between the XUI editor and runtime pages. This gap is because the widget style in XUI editor is mainly based on eclipse SWT and draw2d technology and the look and feel is from operation system, but the executable runtime style is from CSS. To solve this gap, BTT provides one mechanism to apply runtime CSS to XUI editor. Technical developers can also extend the mechanism using the extension point. To see more details, you can refer to CSS Support for XUI Editor Extension

Applying CSS for XUI Editor

In IDE, click Windows->Preferences->BTT->XUI Editor, then there is a preference page to define the CSS which will be applied for current workspace, as following:

In “Style Settings” table, all available CSS will be listed. There are two types of CSS and they can be distinguished from font color:

Note: NOTE: After the CSS file is updated, for example the font-size is changed from 10pt to 20 pt, then you must reopen this Preference page and click the Apply button to activate the change; otherwise, the change will not be applied until the IDE is restarted next time.

To add a new CSS style, you can click Add button, then the Style Settings dialog is opened. You can see the following picture: In this dialog, you should enter the following properties:

To apply a CSS, you can check the checkbox of the css, and click Apply button. The style will be applied to the new-opened xui file. If the xui file is opened previously, you need to re-open the xui file to apply the new style.

To delete a CSS, you can select the css by clicking it, and click Delete button.

To edit a CSS, you can select the css by clicking it, and click Edit button.

Priority for Different Styles

In XUI editor, there are multiple styles, and the priority of these styles is the same as runtime. The sequence is:

Define a supported CSS file

XUI editor CSS format is applying CSS standard, plus naming rules to match them with widgets, here is an example of the naming rule:
button {
	width: 150px;
	height: 29px;
}
In this example, "button" is the name of the widget, and this style will be applied to all the Button widgets. Technical developers can know the name of widget from the widget extension point. Functional developers can know the name by following way:
  1. Open the xui file that contains the widget using text editor.
  2. Check the attribute of the widget name like following code:
    <widget name="Button" id="submit" text="Submit">
Note: The name of the widget used in CSS file is case insensitive.

Pre-defined Styles

BTT provides one pre-defined style named as “claro”. The CSS style is defined as follows:
default {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 0.688em;
}

Supported Styles

The supported style elements are limited to elements layout. Following is the specific supported style list: 