Project

General

Profile

Dynamic Layout

Introduction

The OpenEdge GUI implementation is based on code that strongly maps to character units and fixed/absolute positioning. Since sizes are calculated based on characters, the fonts being used define the size and position of widgets/frames/windows. The problem is that there are no facilities for handling layout on a dynamic basis. For example, when a user resizes a window the widgets in that window have no built-in way to deal with the additional space. This means that 4GL GUI screens tend to be quite static.

Some customers have implemented very complex hacks to get some kind of re-layout to occur. It is typically quite fragile, slow and takes a great deal of code.

In FWD we have reworked the UI infrastructure to provide a dynamic layout capability, without requiring a fragile/slow/bespoke 4GL code implementation. Phase 1 of the dynamic layout is already available. It was implemented in #3269. The core idea is that windows, frames and browse were updated to take advantage of additional space (re-layout) when the user resizes the window. Since browse is the most common control which needs more space to display data, it was reworked first.

Phase 2 will be implemented in #3875, where all widgets will be reworked to support this mode AND where we will implement the ability to provide 4GL options to choose layout strategies for specific frames and windows.

How it Works

When dynamic layout mode is enabled, the algorithm scans the window screen for widgets and divides it in sections. When it finds a resizable (aka dynamic) widget (currently only browse or frame containing browse) it will do its magic, otherwise it will keep the section intact. As a corollary, when no browse widget appears on the screen, no dynamic layout will happen on the screen.

When dynamic layout is on, the browse columns will always stretch to take the available width.

The dynamic layout is performed after the standard legacy layout is performed. The points where this happens are:

  • frame is realized
  • window is resized

Please note that a window can only be resized by the end user if the <window>:RESIZE attribute is set to TRUE. Enabling dynamic layout mode will not change the RESIZE attribute value.

Samples

In the Hotel GUI sample application, add the following node to ./deploy/server/directory.xml:

  <node class="container" name="">
    <node class="container" name="server">
      <node class="container" name="default">
        <node class="container" name="runtime">
          <node class="container" name="default">
            <node class="container" name="dynamic-layout">
              <node class="container" name="desktop">
                <node class="boolean" name="enabled">
                  <node-attribute name="value" value="TRUE"/>
                </node>
                <node class="boolean" name="optimal-size">
                  <node-attribute name="value" value="FALSE"/>
                </node>
              </node>
              <node class="container" name="embedded">
                <node class="boolean" name="enabled">
                  <node-attribute name="value" value="TRUE"/>
                </node>
                <node class="boolean" name="window-maximize">
                  <node-attribute name="value" value="TRUE"/>
                </node>
                <node class="boolean" name="optimal-size">
                  <node-attribute name="value" value="FALSE"/>
                </node>
              </node>
            </node>

When you see the Guests tab in the Virtual Desktop Mode before sizing, it will look like:

and after sizing to a size that you prefer:

The same process for the Embedded Mode before sizing:

and after:

Videos are also attached.

Activation

To enable the dynamic layout feature, it must be turned on in the directory. The feature is turned globally for all top-level windows (regular windows as well as modal windows).

Add the following to the directory under /server/default/runtime/default (or other supported nodes, see below) to enable the feature:

<node class="container" name="dynamic-layout">
  <node class="boolean" name="enabled">
    <node-attribute name="value" value="TRUE"/>
  </node>
</node>

The layout options are read from the following directory nodes, in the order given:

/server/<serverID>/runtime/<account_or_group>/dynamic-layout
/server/<serverID>/runtime/default/dynamic-layout
/server/<serverID>/runtime/dynamic-layout
/server/default/runtime/<account_or_group>/dynamic-layout
/server/default/runtime/default/dynamic-layout

Here are the available configuration values:

Value Name Type Default Meaning
enable boolean false Enables dynamic layout feature. This value is ignored in ChUI, dynamic layout is only supported in GUI.
frame-padding-pixels int 2 The padding in pixels between the individual sections on the screen. I.e. this is the space between browse and surrounding widgets.
window-padding-pixels int 0 The padding in pixels between the widgets and window edges.
min-column-width-ratio double 0.5 This is the minimal ratio for the browse column widths. The minimal column width is determined as the product of this value and the column data width.
optimal-size boolean false Enables the optimal size feature. When true, the algorithm will calculate the optimal screen size and resize the top-level window accordingly. Note that this only works for non-modal windows.

© 2017-2021 Golden Code Development Corporation. ALL RIGHTS RESERVED.

hotel-gui_guests_unsized_em.png (1.25 MB) Roger Borrello, 06/02/2021 12:25 PM

hotel-gui_guests_resized_em.png (1.26 MB) Roger Borrello, 06/02/2021 12:25 PM

hotel-gui_guests_sizing_em.mkv (2.28 MB) Roger Borrello, 06/02/2021 12:28 PM

hotel-gui_guests_sizing_desk.mkv (718 KB) Roger Borrello, 06/02/2021 12:59 PM

hotel-gui_guests_unsized_desk.png (218 KB) Roger Borrello, 06/02/2021 12:59 PM

hotel-gui_guests_resized_desk.png (381 KB) Roger Borrello, 06/02/2021 01:00 PM