XUI editor is a simulation editor for the executable UI in runtime, such as Dojo pages. The widget styles for the XUI editor and runtime pages are different. This difference is caused by the technologies that support the different styles. The widget style in XUI editor is based on eclipse SWT and draw2d technology, so the style design is from operating system. However, the executable runtime style is from CSS. To solve this problem, UDTT provides a mechanism to apply runtime CSS to XUI editor. Technical developers can also extend the mechanism by using the extension point. See CSS Support for XUI Editor Extension for more details.
In IDE, click Windows > Preferences > BTT > XUI Editor. The following preference page to define the appearance of XUI Editor is displayed.
In Style Settings table, all available CSS is listed. There are the following two types of CSS in different font colors in this table:
▪ Blue indicates that the css is designed by technical developer using extension points. Functional developers can not modify or remove CSS. They can use it by checking the checkbox and apply.
▪ Black indicates that css 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.
After the CSS file is updated, for example, the font-size is changed from 10 pt to 20 pt, you must reopen this Preference page and click the Apply button to activate the change; otherwise, the change is not applied until the IDE is restarted.
To add a new CSS style
Click Add.
Enter the values for the following properties in the Style Settings window:
▪ 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
Select the CSS, and then click Apply. The style is applied to the xui file that opens after the CSS is applied.
To delete a CSS
Select the CSS, and then click Delete.
To edit a CSS
Select the CSS, and then click Edit.
To select whether to generate the div block for CSS
Click one of the following options in the "Generate div for css" section:
Always
The div block is generated for all CSS. Code example:
Note After you configure whether to generate the div block for CSS, you need to define the structure of your CSS files according to the option that you selected.
XUI editor CSS format (Option 1) 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
UDTT provides one pre-defined style; it is called “claro”. The CSS style is defined as follows:
To edit the appearance of the widgets on a user interface, you need to prepare a CSS file. You can use CSS samples that are in <BTT Project>\WebContent\CSS\dijit and <BTT Project>\WebContent\js\dijit\themes. For more information about widget styles, see Setting CSS style to widgets.
You must first add all the CSS files you use to the first XUI file of your project, index.xui and then add each of them to the corresponding XUI file.
To import CSS files, do the following steps:
1 Open index.xui file and click the blanket area in the Editing area.
2 In the Properties view, click the Add icon in the CSS Files panel.
The Please select a CSS file from your workspace window opens.
3 In the Please select a CSS file from you workspace window, select a CSS file. Click OK. Repeat this step to add all the CSS files your project needs.
4 Add the corresponding CSS file to a specific XUI file as the previous steps. One XUI page can link to more then one CSS files.
After importing CSS files into your project, set styles to specific widgets. You could select multiple CSS classes for one widget.
5 Click the widget you want to set CSS styles.
6 In the Style view, check the CSS style you want to use. Its details are shown on the right Details section.
The Current Style field is editable and the child CSS elements can be shown in the Details section. To use the child element, you can input the name of child style into the Current Style field manually. For the XUI Editor, the visual effect of the iconClass is not displayed in real-time.
Result
Finally, the CSS styles would be displayed on the XUI editor. And the CSS file imported will be generated into runtime JSP page.
This table describes supported styles in Option 2CSS files for all the widgets. The value of length can be specified in px, pt, em, ex, cm, mm, and inch.
Style
Description
Color
the color property is used to set the color of the text. The value can be:
This page introduces some CSS sample files of special functions, such as setting vertical alignment and scrollbar. You could use these samples to create your own CSS files.
buttonTextVerticalAlign.css
set vertical alignment of the text on the button widget
Classes:
▪ .buttonTextVerticalAlignTop
▪ .buttonTextVerticalAlignMiddle
▪ .buttonTextVerticalAlignBottom
tableScrollbar.css
enable/disable Horizontal and Vertical Scrollbar of table widget
You can assign CSS styles to specified rows and cells by using conditions that are available in the Apply To Rows section when you edit the properties of a table.
To assign styles to specified rows in the whole table
1 Select the table that you want to edit.
2 Select the Style tab of the widget.
3 Select a style in the Styles section.
4 Select one or more conditions in the Apply To Rows section. For more information on how these conditions work, see Conditions in the Apply To Rows section.
If multiple conditions are used, the selected style is applied to the rows that meet at least one of the conditions.
5 If you want to change the conditions settings, click Clear and repeat step 4 to select conditions again.
6 Click Apply to assign the selected style to the rows that meet the conditions.
To assign styles to specified cells in a certain column
1 Select the table that you want to edit.
2 Select the Columns tab of the widget.
3 Select a column in the Columns section.
4 Select the Style tab in the Details section.
5 Select a style in the Styles list.
6 Select one or more conditions in the Apply To Rows section. For more information on how these conditions work, see Conditions in the Apply To Rows section.
If multiple conditions are used, the selected style is applied to the cells that meet at least one of the conditions.
7 If you want to change the conditions settings, click Clear and repeat step 6 to select conditions again.
8 Click Apply to assign the selected style to the cells that meet the conditions.
When you assign CSS styles to tables, you can use the conditions in the Apply To Rows section to filter out the rows and cells that you want to assign the styles to. When you edit a table, you can use the Apply To Rows section under the Style tab for the whole table, or use the Apply To Rows section under Columns > Style tab for s specific column.
The following table includes the description for each option in the Apply To Rows section.
Note If multiple conditions are used, the selected style is applied to the cells that meet at least one of the conditions.
Conditions in the Apply To Rows section
Condition
Description
Only Header
Headers of the table or column are assigned with the selected style.
Odd Row
Odd rows of the table or column are assigned with the selected style.
Even Row
Even rows of the table or column are assigned with the selected style.
Only Cell Row
Body of the table or column is assigned with the selected style.
Header And Cell Row
Headers and Body of the table or column are assigned with the selected style.
Only Row Number
One or more specified rows are assigned with the selected style.
When this condition is selected, the field Row No. appears in the Apply To Rows section for you to specify the row numbers. Multiple row numbers are separated by commas. For example, if you fill the field with value 1,10, it means every cell in row 1 and row 10 is assigned with the selected style.
By Cell Value
▪ If you are assigning styles to the whole table, any row with the cell that meets the expression that you configure for this condition is assigned with the selected style.
▪ If you are assigning styles to a column, any cell that meets the expression that you configure for this condition is assigned with the selected style.
See also “To create an expression for By Cell Value” below.
To create an expression for By Cell Value
You must create an expression for this condition to take effect. An expression editor is provided for you to set up this condition for different cases. The following instruction is an example to use the values in an expression:
1 Select By Cell Value in the Apply To Rows section. The field Cell value appears.
2 Click the button next to the Cell value field to call out the editor, and then click Expression.
3 Click the button next to the Left field to call out the editor, and then click Cell.
4 In the middle section, select a value to use. The following values can be used to set up the expression for cells.
txtCellV
The text value of the current cell. The type of the value is string.
objCellV
The value of the current cell, such as a Number and a Date. The type of the value is object.
curRowIndex
The row index of the current cell. The type of the value is int.
txtCellV(column)
The text value of the cell of the specified column in the current row. The type of the value is string.
objCellV(column)
The value of the cell of the specified column in the current row, such as a Number and a Date. The type of the value is object.
widgetV(widgetID)
The value of widget with specified ID. The type of the value is object.
Note The complexity of the expression affects the performance of table. Among of the types of values, StringValue has the best performance.
5 For some values, you must specify the column ID or widget ID in the right section.
6 Click OK.
7 Specify the Operator and the target value to complete the expression, and then click OK.
