View visibility options for platform windows

Starting in version 28, there are several options that you can set to control the display of window contents when users manipulate windows and views, for windows created using the Platform API. The new options supersede showBackgroundImages, which continues to apply when the view visibility options are false or undefined.

The view visibility options control whether the contents of views in a window are shown during the following user actions:

• Moving a splitter between two views
• Dragging a view to a new location in a window
• Resizing the whole window

It is often desirable to continue to display the view or window contents during these actions, especially if they contain continuously-updated information. However, the default behavior remains that the views are blanked out until the user finishes the action.

You can set the options independently, depending on your priorities for user experience and performance.

You can define viewVisibility options as part of a WindowOptions object, such as within a snapshot, or as defaultWindowOptions for an application.

Example window options for view visibility:

{
 "platform": {
   "uuid": "example_platform"
 },
 "snapshot": {
   "windows": [
     {
       "viewVisibility": {
         "showViewsOnTabDrag": {
           "enabled": true
         },
         "showViewsOnSplitterDrag": {
           "enabled": true
         },
         "showViewsOnWindowResize": {
           "enabled": true,
           "paintIntervalMs": 10
         }
       },

Dragging a splitter

For the option showViewsOnSplitterDrag.enabled, when true, the size and shape of the views are not actually changed until the user drops the splitter in the new location. The view continues to be displayed at its old size, including updating content, during this drag operation.

Dragging a view

For the option showViewsOnTabDrag.enabled, when true, the dragged view is removed from the layout as before, but the content in all other views continue to display and update content as the user decides on a new location for the dragged view using the semi-transparent drop-zones. Once the view is dropped, the layout resizes in order to fit all views.

Resizing windows

The third member of viewVisibility, showViewsOnWindowResize, might have a greater effect on UI performance than the first two members. While a web browser has to do live resizing only on the currently active tab, when showViewsOnWindowsResize.enabled is set to true, OpenFin Runtime continuously renders all views in a platform window while the window changes size. To do this smoothly on an average or lower-end computer is a challenge.

For this reason, you must explicitly enable the live resize feature. By default, it is disabled, and windows do not redraw their contents until the resizing operation is finished.

📘

Note

This option was available in version 25 to 27 as an experimental feature with the name showViewsOnResize. In version 28, showViewsOnWindowResize replaces that option, while the member property paintIntervalMs replaces the previous delayMs.

Factors that affect performance of live window resizing

Performance of live window resizing has many variables. When the variables are tuned carefully, users have a smooth experience when resizing a platform window. When the variables are tuned poorly, users have a slow-moving, stuttering experience which many may find frustrating. Experiment with the factors described in the following sections, to arrive at a configuration that is acceptably smooth for users of your application.

What variables can be tuned?

Increase the paint interval

By increasing the value of the paintIntervalMs property, you can decrease the frequency of updates that the OpenFin Runtime must render.

Reduce the number of views

The largest burden on the render process is the number of views in the window. Each view must be rendered every time the window changes size by as little as one pixel. Multiply that by a large number of views, and that can be too much for medium to lower-end hardware to keep up.

Reducing the number of views in the window being resized gives the user a smoother experience in resizing windows.

Use process affinity on view objects

By default, each render process is a single-threaded process. If numerous views share a single render process, even CPUs with a large number of cores can struggle to render views at an adequate speed. When using different processAffinity values for each view, each view is rendered with a different CPU core, making the resize process smoother.

Alternatively, the viewProcessAffinityStrategyin PlatformOptions allows you to change the default thread assignment for views. By changing the viewProcessAffinityStrategy property, from the default of 'same' to 'different', each view will be given its own process affinity, spreading the rendering workload more evenly across the CPU cores.

More details on process affinity strategies can be found at Process affinity in Container overview, PlatformOptions, and ProcessAffinityStrategy.

Complexity of responsive design

The more complex the responsive design of your views, the more CPU and memory are required to render the view at an acceptable rate. Complex React interfaces, large tables or grids, numerous large resizable images, and similar factors can all place a burden on the render process. Reducing the complexity of the responsive design in views can smooth out the user experience of live resizing.

Available memory

If there is not enough available memory to resize the views in a window, the consequence can be a poor, stuttering experience for users. Reducing the use of programs that use large amounts of memory can free up OpenFin Runtime to perform smoother live resize actions. And adding more RAM to the computer can also improve live resize performance.

Virtual machines

Virtualizing a computer display is computationally intensive, and can significantly reduce display performance. If you must keep your OpenFin platform in a virtual machine, it may be beneficial to increase the available memory, the available video memory, or the number of CPUs available to the virtual machine. Additionally, you can improve performance by enabling the 2D acceleration feature of the virtual machine and reducing the use of programs that use large amounts of memory within the virtual machine.

Computer hardware

Fast CPUs and performant graphics cards can significantly increase display speed, though they do come at a budgetary cost.

Windows 10 performance settings

The Windows 10 OS has its set of options that can be used to change the appearance and performance of all the applications windows on a machine. To find these settings search for "Adjust the appearance and performance of windows" in the search box on the Windows start bar and select the relevant search result. One option in particular that could stop you from seeing the view and window contents while resizing is the "Show window contents while dragging" option. Make sure this is ticked and apply the option.