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:
- Blue color is marked for the css which designed by technical
developer using extension points. Functional developers cannot modify
or remove CSS, they can use it by checking the checkbox and apply.
- Black color is marked for the css which is added by functional
developer using “add” button. Functional developers can add a new
CSS file and use it by checking the checkbox. They can also remove
the useless CSS file or modify the CSS file path or description content
by clicking the Edit button.
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:
- Name: the unique name of the style. This property is required.
- Path: the path of the css file. This property is required. The
css file can be local or remote. The local css path is like example:
E:/example.css. The Remote css path is like example: http://localhost:9080/SampleWeb/example.css.
- Description: the detailed information for the css file. This property
is not required.
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:
- Widget default height and width settings in widget definition
- Default CSS support for XUI Editor
- Widget style specified in Properties->Style.
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:
- Open the xui file that contains the widget using text editor.
- 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:
- font-family: indicates the font name of the text used in the widget.
- font-size: indicates the font size of the text used in the widget.
The font size support “px”, ”em” and “pt”.
- font-weight: indicates the weight of the text used in the widgets.
The supported value is: bold.
- font-style: indicates the style of the text used in the widget,
supported value: italic.
- width/height: indicates the default size of the widget. They only
can be defined by “px”. They cannot be defined in default level
style.