Several improvements to graphical user interface components have been implemented in this release, providing the ability to use drag-and-drop actions on GUI controls, enhancing the grid control with new properties and events and additional capabilities in images integration.

In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. The basic sequence involved in drag and drop is:

isCOBOL compiler now supports a new property on most controls named drag-mode that allows you to specify which kind of action is enabled. If the property is not set, the default value 0 is assumed, and no actions are enabled. To enable actions the following values can be used:

1 = dragging action is enabled

2 = dropping action is enabled

3 = both dragging and dropping actions are enabled

When the drag action is enabled, the control receives a new event named MSG-DRAG and when the drop action is enabled, the control receives a new event named MSG-DROP.

Currently the controls that fully support this property are: BITMAP, CHECK-BOX, COMBO-BOX, DATE-ENTRY, ENTRY-FIELD, GRID, LABEL, LIST-BOX, PUSH-BUTTON, RADIO-BUTTON, TREE-VIEW. 

For example, a screen section defined as:

contains 2 grids with drag and drop enabled, an entry-field with just dragging enabled and a push-button with just dropping enabled. In this example, a row from a grid can be moved to another grid by dragging it from one grid to the other, and the number in the Quantity column can be increased when dropping an existing row into the target grid.

The event procedure shown below handles the logic of these actions by managing the two new events:

As shown in Figure 1, Drag allowed, the mouse shows the plus icon to inform the user that it’s possible to drop the content being dragged. In Figure 2, Drag prohibited, the mouse shows the deny icon to imply that it’s not possible to drop the dragged content on the control. Both screenshots were taken from running the installed sample for this new feature that contains the code shown in the previous snippets.

 

Figure 1. Drag allowed.

Figure 2. Drag prohibited.

The grid control has been enhanced in 2023 R2 to support the load-on-demand feature used to dynamically load content as the user scrolls down in the grid. This approach is beneficial when a grid contains a large number of rows by loading a smaller amount at a time thus reducing the time and resources required to fetch the data.

A grid loaded with the load-on-demand feature is initially filled with a given number of records for fast initial loading, and as the user scrolls down in the grid the new event MSG-LOAD-ON-DEMAND is fired and the application can respond by loading additional rows seamlessly, reducing the application load and delivering a smoother experience for the user.

A specific example is installed in the sample\issamples\s-gui folder, and the following code is a snippet taken from GRID-ON-DEMAND.cbl source:

This grid definition shows the new property lod-threshold (Load-On-Demand threshold) used to specify the percentage of scrolling in the grid that triggers the MSG-LOAD-ON-DEMAND event. When the user scrolls past 80% of the initially loaded records, the event is fired.

The code snippet below shows the event procedure paragraph that manages the response logic for the new event:

In Figure 3, Load on demand feature, the program in execution shows the grid loaded during scroll-down.

Figure 3. Load on demand feature.

A new filter type has been added to enable editing the value for filters in selected columns. Using an entry field instead of a check list-box for a filter can be beneficial when the content of a column contains many different values, making a list too long to prove useful. The new filter is declared using the value 3 in the existing property FILTER-TYPES. It can be also mixed with previous types, making it possible to have specific filter types for each column. The panel with the filters’ entry-fields is shown between the heading line and the first grid line when the user clicks on the funnel icon.

There are also two new properties that can be used with the inquire or modify statements:

The following snippet shows how the properties can be used:

The following code snippet:

declares a grid with the new filter type used on columns 2, 4, 5 and 7. The result of the program in execution is shown in Figure 4, New filter type in grid.

Figure 4. New filter type in grid

A new property named CELL-SECURE can now be used in MODIFY and INQUIRE statements to manage the data in the cell as an entry-field with SECURE style. This is necessary in password fields that need to have the “hide/show” behavior dynamically. When the property is set to 1, the cell identified by Y and X coordinates assume the secure feature, making the column shown as asterisks “*****”.

This is a code snippet to set the cell-secure in the cell of row 3 and column 2 and inquire the same property in the cell of row 5 and column 2:

The bitmap control now supports two new properties that can be used with the INQUIRE statement to retrieve the raw image dimensions:

These values are also returned by W$IMAGESIZE routine, but instead of passing the handle of an image loaded with W$BITMAP they can be inquired directly from the bitmap control.

This is a code snippet that shows how to use the new properties:

These properties are useful when images are loaded dynamically into fixed-size controls. The program can check to see if the loaded image is larger than the control’s size, and apply scaling accordingly to ensure that the whole image is visible.

The W$SCALE routine has been improved by supporting a new value named WSCALE-RESIZE-NONE in the scaleMode parameter, allowing the program to create a new image with different dimensions from the original one, but without scaling it. In conjunction with the scaleAlign parameter, it can be used to align the resulting image as needed.

This is a code snippet that uses the new parameter value in the routine: