Specifying a theme for the application UI – PB Docs 2018

Contents

Understanding what can and cannot be set by the theme

• Flat Design Blue — this theme is evolved from the Windows
  10 style, featuring a flat design style in contrasting to a
  prominent UI content. The window style is similar to that of
  Windows 10. The controls are flattened, and the color is gray in
  the normal state, and blue in the default state, making a more
  visually appealing and recognizable UI.

• Flat Design Grey — this theme is based on the original
  PowerBuilder style. It retains most of the color matching of the
  controls, and removes their 3D effect so they are flattened; the
  window is displayed in a gray background, making the UI convenient
  for users to read the improves user experience.

• Flat Design Silver — this theme is a combination of the
  modern designs. The theme removes the control border, and divides
  controls by shallow color blocks, making the UI more concise and
  focused.

To select a theme:

1. In the Application painter, select the General tab
   page.

2. On the General tab page, click the Additional Properties
   button to display the Application properties dialog box.

3. In the Application properties dialog box, select the Themes
   tab, and then select a theme from the list.

   Three system themes are provided by default. You can
   customize these system themes or use your own themes.

4. Preview how UI will look like after a theme is
   applied.

5. Click OK.

To customize or create a theme:

1. Locate the “theme180” folder in the
   “AppeonSharedPowerBuilder” directory.

   There are by default three sub-folders; each represents one
   type of UI theme: Flat Design Blue, Flat Design Grey, and Flat
   Design Silver. You can add your own themes here.

2. Open the sub-folder for the type of the UI theme you want to
   customize.

   Each sub-folder contains a bunch of image files which
   represent the state (checked, unchecked, indeterminate, enabled,
   disabled, hover, pressed etc.) of the controls, DataWindow and
   window and a “theme.json” file which is configurable for the theme
   settings (such as color, state, border, text etc).

3. In the “theme.json” file, adjust the UI theme settings for
   the controls, DataWindow and window.

   If you want to permanently keep your settings, it is
   recommended that you add a sub-folder that contains the image
   files and the “theme.json” file. The sub-folder name will be
   automatically recognized as a custom theme and listed for
   selection in the Themes tab.

   If you directly make changes to the system theme and
   unpredictable problem occurs, you can click the Restore button to
   restore the system theme.

To make the theme effective:

• Click the Run or Select and Run button on the PowerBar to
  run the application and see the UI effect of the selected
  theme.

  The UI theme only takes effect at runtime, not at the
  development stage or under preview.

  Note

  When you build the application, you should not check the
  “Windows classic style” option. If “Windows classic style” is
  selected, the application UI will be rendered in the Windows
  classic style instead of the selected theme. The “Windows
  classic style” option takes precedence over the selected
  theme.

  Note

  When creating the application installation package, the
  “theme180” folder (just like the other resource files) must be
  manually copied to the root of the application installation
  directory.