Alternate Panel Layouts |
|
Alternate panels are interchangeable panels that contain the same controls but have different layouts. The controls on the panels differ only in size, location and resizing attributes. The purpose of alternate panel layouts is to offer differing layouts that can be switched dynamically at run time. The various alternate panels can be switched either programmatically by setting up special variables to trigger the switch (see Switching Panels Programmatically below) or automatically when the panel is resized, based on conditions that have been pre-set (see Switching Panels Automatically on a Resize Event below).
Example:
In this example, two views are available for the Invoice Header maintenance panel.
The first is the main panel that is initially processed:
The second is an alternate wider panel with a different layout:
Both panels and, in this case, the corresponding sub-panels, are identical except for the panel size, as well as the size, placement and resizing attributes of the controls. (See Designing Alternate Panel Layouts below for exceptions.)
In this example, a Change View button added to the panel allows the user to toggle between the original panel and the wider layout. This is accomplished programmatically through the button's OnChange logic. Alternatively, the Change View button could be removed, and the view changed automatically when the panel is resized by pre-setting conditions for the main and alternate panels to be displayed.
In the simplest scenario where no folder controls are involved, two or more panels are created in the Panel Designer with identical controls whose sizes and locations may be different. However, if there are folder controls, the main (parent) panel and sub-panels may require corresponding alternate panels to be created as well. It is also possible to have an alternate sub-panel without switching the main panel, but this is only supported when switching panels programmatically. The original and alternate panels must be in the same library.
As for the controls being identical, there are certain exceptions. The text value of Fonted Text and Frame controls can be different on the various panels, with the text of the panel currently in use being displayed, allowing you to shorten/lengthen the text displayed based on available space. In addition, various Shapes and their attributes and static (i.e. non-dynamic) Images may be different on the various panels. All other controls will maintain their current values.
An event trigger, such as a button click, is required to invoke logic to switch the panels. In the corresponding event logic, two variables, ALTERNATE_PANEL$ and ALTERNATE_PANEL_TYPE$ must be set. If set correctly, NOMADS will switch to the alternate panel and place all the controls at their new location. If the alternate panel does not exist, then the current panel will remain.
ALTERNATE_PANEL$ contains the name(s) of the panel(s) to be displayed, which must be in the same library as the original parent. ALTERNATE_PANEL_TYPE$ describes the panel type, either "M" (main level), "F" (folder control), or "MF" (both). The syntax is described below.
The alternate for a typical main level panel is defined as follows:
ALTERNATE_PANEL$="AltMain"
ALTERNATE_PANEL_TYPE$="M"
If the alternate panel is a sub-panel inside a folder control, it would be defined as follows:
ALTERNATE_PANEL$="AltFold"
ALTERNATE_PANEL_TYPE$="F"
However, if the alternate panel does not fit in the designated folder region of the parent panel, then you must also recreate the main level panel to accommodate the size of the folder inside; i.e. an Error #29 will occur if the control's new coordinates are outside of the folder region. This requires the definition of two alternate panels separated by a semi-colon, a parent panel and a sub-panel within a folder control:
ALTERNATE_PANEL$="AltMain;AltFold"
ALTERNATE_PANEL_TYPE$="MF"
Example:
The following is sample OnChange logic for switching panel layouts when the Change View button is selected:
Change_View:
! Main panel is INV_MNT with subpanels INV_MNT.1, INV_MNT.2 and INV_MNT.3
! Alternates are INV_MNT.A with subpanels INV_MNT.1A, INV_MNT.2A and INV_MNT.2A
IF STP(UCS(MAIN_SCRN_K$),2)="INV_MNT"
THEN ALTERNATE_PANEL$="INV_MNT.A;"+UCS(FOLDER_ID$)+"A"
ELSE ALTERNATE_PANEL$="INV_MNT;"+MID(UCS(FOLDER_ID$),1,LEN(FOLDER_ID$)-1)
LET ALTERNATE_PANEL_TYPE$="MF" ! Switch main and folder subpanel
RETURN
To take advantage of this feature, the panels involved must be defined as Resizable/Custom or Resizable/Auto Size. (See Panel Resizing.)
When a panel is resized, a check is performed to see if there are any pre-set conditions assigned to it to determine if an alternate panel should be displayed. These conditions are set up for a panel using the Alternate Panel Maintenance utility in the NOMADS Panel Designer when the panel is being edited. If conditions do exist, they are evaluated at run time in the order in which they appear in the definition. When a condition is evaluated as true, then no more conditions are evaluated, and the associated alternate panel is displayed. If no conditions are true, then the panel that was originally being processed is displayed.
When setting up alternate panels, only the original panel that is being processed needs to have alternate panels assigned in Alternate Panel Maintenance. When the original panel is processed, the names of the original and alternate panels, sub-panels and alternate sub-panels, as well as the conditions associated with them, are automatically loaded into memory for subsequent processing.
The Alternate Panel Maintenance utility allows you to specify conditions to apply when resizing the panel currently being defined in the NOMADS Panel Designer and the alternate panel to display when a condition is true. To invoke this utility, select Assign Alternate Panels from the Utilities menu in the NOMADS Panel Designer.
This dialog consists of the following:
Condition |
Specifies the condition to be evaluated in determining if an alternate panel will be displayed when the panel is resized. For the test, three generic conditions may be specified, as well as an entry that allows you to supply custom logic for testing your own criteria.
| ||||||||
Alternate Panel |
The names of the panel to be displayed in the NOMADS desktop environment and/or the iNomads browser environment after a resizing event has occurred and the associated condition is true. The drop-down list contains all the panels in the library, or you can type the panel name. If the panel does not currently exist, a warning is displayed, but the panel is considered valid. If the Logic condition has been selected, this is set to Alternate_Panel$. You can specify an alternate panel for a single environment by leaving the selection blank. | ||||||||
Clear Row |
Select this button to clear the settings for the currently selected row. | ||||||||
Move Row Up |
Select these buttons to change the order of the conditions and their associated alternate panels. Important Note: |
One of the most widespread uses for automatically switched alternate panels is to provide a different view (Portrait versus Landscape) when displayed on a rotatable hand-held device such as a tablet.
For example, in a NOMADS environment, when a device is rotated, the display can rotate 90 degrees without the panel being resized. The panel will remain the same size and simply extend beyond the display area. If, however, the panel has been maximized, then the rotation will result in the panel being maximized based on the different orientation (i.e. different size), and this can trigger the display of an alternate panel, depending on the conditions you have set. Therefore, if the panel is being displayed on a hand-held device, you may want to include logic to maximize the panel.
In an iNomads environment, whether the rotation causes a resizing event depends on the viewport setting, i.e. the visible area of a Web page. Sometimes, when you rotate a small device from a Landscape to a Portrait orientation (and vice versa), the scale of the display changes; therefore, the number of rows/columns does not change and there is no resize. To get a resize event, the device needs to maintain a constant row/column size so that the number of rows/columns changes when rotated and the panel is resized to fit. This is accomplished with an HTML meta tag that you can insert into your iNomads template using the Template Configuration Maintenance utility. Click the HTML tab, and under the Additional header META tags to be included in the HTML option, enter the following:
<meta name="viewport" content="width=device-width"/>
Another point to keep in mind when in iNomads is that if you are using the Resized panel shape: Portrait (or Landscape) condition (see Alternate Panel Maintenance above) to trigger the display of an alternate panel, be aware that the shape of the panel itself within the iNomads template will be tested. If the iNomads template you are using has header/footer areas and may look like a Portrait display, the panel itself between those areas may still have a Landscape shape when rotated to a Portrait orientation, and no trigger will occur.