The new UI Theme allows you to configure much more visual elements of the controls than before. For example, you can configure the grid line in the CrossTab and Grid DataWindows, or change the image for the box (of CheckBox), arrow (of DropDownListBox, EditMask etc.) etc. The following lists the additional UI properties which you can set in the theme file.
RibbonBar:
-
Configure the background color, border color, font color of the RibbonBar control and ribbon item controls (JSON node: "ribbonbar").
Menu and status bar:
-
Configure the menu (including menubar, popup menu, toolbar) and status bar of the window and user object (JSON node: "menu" and "statusbar").
Grid line:
-
Configure the line and color for the grid line of CrossTab and Grid DataWindow (JSON node: "datawindow"->"cross-style" and "datawindow"->"grid-style").
Border color:
-
Configure the border color of controls (JSON node: "border-color" under each control).
Background transparency:
-
Configure a transparent background for GroupBox, StaticText, and StaticHyperLink (JSON node: "background-transparent" under the control).
Graph:
-
Configure the color for a graph (JSON node: "graph-colors").
Select row:
-
Configure the text color and background color for the selected row in the DropDown edit-style column in DataWindow (JSON node: "datawindow"->"dwo-column"->"dropdown-type").
-
Configure the text color and background color for the detail band of CrossTab and Grid DataWindow (JSON node: "datawindow"->"cross-style" and "datawindow"->"grid-style").
Images:
-
Configure the box for the CheckBox control and the CheckBox edit-style column in DataWindow (JSON node: "checkbox" and "datawindow"->"dwo-column"->"checkbox-type").
-
Configure the radio for the RadioButton control and the RadioButton edit-style column in DataWindow (JSON node: "radiobutton" and "datawindow"->"dwo-column"->"radiobuttons-type").
-
Configure the arrow for the DropDown edit-style column in DataWindow (JSON node: "datawindow"->"dwo-column"->"dropdown-type").
-
Configure the arrow for the DatePicker, DropDownListBox, and DropDownPictureListBox controls (JSON node: "datepicker", "dropdownlistbox", and "dropdownpicturelistbox").
-
Configure the arrow (up, down, and dropdown) for the EditMask control and the EditMask edit-style column in DataWindow (JSON node: "editmask" and "datawindow" -> "dwo-column" -> "editmask-type").
-
Configure the left and right buttons for the HScrollBar control (JSON node: "hscrollbar").
-
Configure the top and bottom buttons for the VScrollBar control (JSON node: "vscrollbar").
-
Configure the left, right, top, and bottom buttons for the Tab control (JSON node: "tab").
-
Configure the foreground and background color for the slider and the image for thumb in the HTrackBar and VTrackBar control (JSON node: "htrackbar" and "vtrackbar").
-
Configure the image for the check box and the expanded and collapsed buttons in TreeView (JSON node: "treeview").
-
Configure the background color of toolbar (JSON node: "toolbar").
Example
PowerBuilder IDE provides no options for you to set the background color of toolbar; but the theme file allows you to do that. In the theme file, find the "bitmap-background-color" property under "toolbar" to set the background color of toolbar.
"toolbar":
{
"border-color":"#CCCCCC",
"background-color":"#E6E6E6",
"grabbar-color":"#999999",
"separator-color":"#BFBFBF",
"arrow-color":"#666666",
"bitmap-background-color":"#E6E6E6",
......