Widget Support

What is a DdsSelectionField?

As of version 8.0 Monarch and Wings have added support for the PSHBTNFLD, SNGCHCFLD, and MLTCHCFLD widgets. This has been implemented with controls generically referred to as "DdsSelectionFields", which can refer to any one of three controls (and their required child controls):

• MultipleChoiceSelectionField
• SingleChoiceSelectionField
  • SelectionFieldChoice
• PushButtonField
  • PushButtonFieldChoice

SelectionFieldChoice is used by both MultipleChoiceSelectionField and SingleChoiceSelectionField.

The Mechanics of a DdsSelection Field

Selection fields are designed to smoothly take the green-screen MLTCHCFLD, SNGCHCFLD, and PSHBTNFLD keywords and migrate or modernize them one-for-one into .NET controls. Each widget is migrated to a selection field, and each option within those widgets is converted to a "Choice" control. From there the controls can be readily styled by the developer.

The VirtualRowCol property is the Monarch mechanism by which the Display file (ASPX) reports the "legacy" cursor position to the "legacy" RPG code. During migration, Monarch Cocoon saves the legacy cursor location where DDS keywords were specified. Even if the Web control is repositioned (in the graphical world), this property may remain unchanged with its row, column green-screen positions, so that when the page submits, the "Displayfile Controller" may "simulate" that the input element was at a particular (row, col) "cursor" position, and the RPG logic may test for it.

The "green-screen" display file controller, can report the real "cursor position", independent of how things were designed in DDS (the video hardware has the precise row, col or the cursor when Enter of FKey was pressed). For Monarch is more challenging, it can determine which HTML element had the "pointer" (mouse, caret or Tap), and from there it can retrieve the stored legacy row, col (VirtualRowCol).

To ensure the proper placement of the controls, the VirtualRowCol property is associated with each SelectionFieldChoice or PushButtonFieldChoice. It is more precise to have one VirtualRowCol per choice in the group than one for the entire group. Note that Monarch Displayfile Migration Agent will "estimate" the VirtualRowCol values: The developer may need to adjust these values. This manual "remediation" will only be required if the RPG is using the "feedback" area, where the cursor position is reported back to the RPG program. It is uncommon that developers use cursor position information alongside these Widgets, since they provide a better mechanism (the "choice-number" value), but the VirtualRowCol is introduced to account for those scenarios.

Styling DdsPushButtonField

There are various ways to improve the style of DdsPushButtonFieldChoice(s), for example by going from the default:

To a better looking rendering:

You can set the "cssClass" property of the DdsPushButtonFieldChoice(s) to a particular style, like "TwelveButtons":

1. Define a new CSS style in: <my website path>\Themes\Current\Styles\Theme.css, like:

      .TwelveButtons {
         width: 100px;
         margin-bottom: 5px;
         cursor: pointer;
         background-color: white;
         border-style: solid;
         border-color: antiquewhite;
      }

2. Set the property "CssClass" of each of the DdsPushButtonFieldChoice web control instances (for example, notice highlight)

<mdf:DdsPushButtonField id="DdsPushButtonField2" runat="server" style="position: absolute; left: 20px; top: 360px; width: 19px"
   CssClass="DdsPushButtonField"
   Alias="FUNKEY3" 
   Usage="Both" 
   TabIndex="6" 
   Gutter="20px"
   Rows="3"
   EnabledChoiceColor="Orange"
   EnabledChoiceStyle="Bold"
>
   <mdf:DdsPushButtonFieldChoice id="TWELVE_001" runat="server" 
      ChoiceNumber="1"
      ChoiceText="One"
      CssClass="TwelveButtons"
   />
   <mdf:DdsPushButtonFieldChoice id="TWELVE_002" runat="server" 
      ChoiceNumber="2"
      ChoiceText="Two"
      CssClass="TwelveButtons"
   />
   .
   . 
   . 

Styling DdsSingle or MultipleChoiceSelectionFields

As with DdsPushButtonFieldChoice there are numerous ways to improve on the default appearance of a selection field.

One CSS style that works here is:

.TwelveRadioButtons, .TwelveCheckboxes {
   line-height: 30px;
   cursor: pointer;
}

Note: In these cases we want to increase the "line-height" as opposed to changing the "margin-bottom"

SingleChoice Before:

After:

MultipleChoice Before:

After: