Understanding what additional features provided by the
theme
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.
|
1 2 3 4 5 6 7 8 9 |
"toolbar": { "border-color":"#CCCCCC", "background-color":"#E6E6E6", "grabbar-color":"#999999", "separator-color":"#BFBFBF", "arrow-color":"#666666", "<span><strong>bitmap-background-color</strong></span>":"#E6E6E6", ...... |