|
Visual Classes |
|
Themes and Visual Classes provide the easiest way in NOMADS and iNomads to define and maintain a unified look and feel to panel controls within your application. With the Theme Maintenance and Visual Classes Maintenance utilities, you can define default settings for various display properties based on a selected control type and then save each definition with a unique name so that they can be applied or modified when needed.
Visual Classes are used to define a set of display properties for applying to specific controls on selected panels (i.e. all buttons with text only).
Themes are used to define a set of display properties for all controls based on the control type (i.e. all "Button" types), which can then be applied at different hierarchical levels that cascade to lower levels.
Since Visual Classes apply to specific controls, they override Theme settings. Visual Classes are particularly useful in cases where unique settings are required (i.e. that do not conform to the applied Theme). For example, you can define a Visual Class to set the Hover Background Color property to "Light Yellow" and apply it only to buttons with text on Panel_A. As a result, hovering over any button with text on Panel_A displays a "Light Yellow" background, while hovering over a bitmap button on the same panel does not.
Visual Classes can be defined for the following Control Types:
|
|
|||||
|
|
|||||
|
|
|||||
|
|
(The ability to define Themes and Visual Classes for Shapes (Circles, Lines, Rectangles) and Menus was added in PxPlus 2024.)
To apply a Visual Class, see Applying a Visual Class to Your Application.
In addition, the Copy Theme utility provides the ability to copy Themes and related Visual Classes from one directory to another. This utility can also be used to create new Themes and Visual Classes.
The Visual Classes Maintenance Utility is used to define the display properties for creating a Visual Class. Visual Classes created with this utility are stored in the providex.ccl file.
To invoke this utility, use one of the following methods:
|
Location |
Method |
|
From the PxPlus IDE Main Launcher |
Expand the Graphical Application Builder (NOMADS) category. Then expand the Setup category and select Visual Classes. |
|
Select Visual Class Maintenance from the Utilities menu. (Visual Class Maintenance was added to the Library Object Selection Utilities menu in PxPlus 2019.) | |
|
From the NOMADS Session Manager |
From the Options menu, select Visual Classes. |
The Visual Classes Maintenance Utility is displayed below with a sample entry:
This window consists of the following:
|
Class Name |
Name of the Visual Class. Maximum 30 characters. Create a new Class Name to be associated with current values. To select an existing Visual Class to modify, click the Query button (binoculars) or use the Browse buttons. If any unsaved changes are detected, you will be prompted to save the changes. Class names are not case sensitive. This allows a different case to be used when typing the same Class name to refer to the same record (providing that the Control Type also matches). When an existing Visual Class is recalled, the name will be in the case that was entered when the Visual Class was first created. Example: Suppose that a Visual Class named "ButtonRed" exists for Button controls. Other case variations of this name can be entered to refer to the same Visual Class; e.g. "BUTTONRED", "buttonred" or "BUTTONred". (Support for case insensitive Class Name was added in PxPlus 2020.) |
|
Copy Visual Class Record |
(Available when an existing Visual Class is selected) Button used to copy settings from an existing Visual Class/Control Type to a new Visual Class. Once it is created, the new Visual Class must be saved, as the Copy process does not do this. (The Copy Visual Class button was added in PxPlus 2020.) |
|
Optional Theme with which this class definition is associated. By specifying a Theme, you can have a different definition for a particular Visual Class for each Theme. See Themes. (Themes support was added in PxPlus 2016.) | |
|
Control type to be associated with the name of the Visual Class. Click the drop-down arrow for a list of available control types: Default, Button, Chart, Check_Box, Drop_Box, Folder, Fonted_Text, Frame, Grid, List_Box, Menu_Bar, Multi_Line, Popup_Menu, Radio_Button, Shape-Circle, Shape-Line, Shape-Rectangle, Tristate_Box, VarDrop_Box and VarList_Box. The control type Default is used to set basic overall properties (Background and Foreground colors, Font) for any control types that do not have these properties defined under their own control record in the current Visual Class. (The ability to define Visual Classes for Circle, Line and Rectangle shapes was added in PxPlus 2024.) | |
|
Description |
Description of the Visual Class. |
|
Property |
A two-column table that lists a sub-set of the properties normally displayed in the design window for a control type, as well as selected properties that are not available in the design window. The list of properties varies depending on the Control Type selected. The properties are grouped into categories (i.e. Attributes, Colors, Font, etc.) and sorted alphabetically within each group by default. These categories can be expanded/collapsed by clicking the + (plus) or - (minus) button adjacent to the category name. Only the categories that apply to the selected Control Type are displayed. The method for entering or displaying property values is dependent on the property type. Some fields are intended for entering free-form values; e.g. for height and width. Drop box style cells are identified by a down arrow button, which indicates that pre-set selections are available. Query style cells are identified by a three-dotted button. These cells are often associated with more than one field, and clicking the button invokes a separate dialog for entering/changing field values. The dialog that is invoked varies depending on the property. Double clicking inside the cell either invokes the same dialog as the dotted button or allows values to be entered directly into the cell. (The ability to double click inside a Query style cell was added in PxPlus 2023.) |
|
Write |
Adds/updates the current record. |
|
Delete |
Removes the current record. |
|
Clear |
Clears the current record. |
|
Exit |
Closes the Visual Classes window. If any unsaved changes are detected, you will be prompted to save the changes. (Same applies when using the X (Close) button.) |
Once Visual Classes have been defined, they can be applied to specific panel controls by using any of the methods in the table below.
Applying a Theme does not impact the Toolkit Theme, which is the Theme used by the development system, but it does impact the following user facing applications: Report Writer, Views, Query and Customizer.
|
Location |
Method |
|
Assign a Visual Class from the library level by selecting Visual Class Assignment from the Utilities menu. | |
|
From the NOMADS Panel Designer |
Assign a Visual Class from the panel level by selecting Visual Class Assignment from the Utilities menu. |
|
From the NOMADS Panel Designer |
Assign a Visual Class to a specific control by accessing that control's properties window and selecting the Font/Color tab. |
|
This utility can be used to apply a Visual Class simultaneously to controls in multiple panels either in a single library or in multiple libraries within a specified directory. | |
|
This utility can be used to apply a Visual Class simultaneously to more than one control in the current panel. |