The REGION tag

You can further define the areas of your panel, and how you want the information in the areas arranged, with the REGION tag. Using one or more regions within a PANEL definition provides an easy way of arranging the elements on a panel. Like the PANEL and AREA tags, the REGION end tag is required.

The DIR (direction) attribute of the REGION tag specifies how the elements within a region are arranged, either horizontally or vertically. The default value is VERT, which arranges the elements within the region vertically. This means that if you do not specify a horizontal region (DIR=HORIZ), or if you do not define a region at all, the panel elements are arranged vertically by default.

In this example, the selection fields are arranged vertically, because no DIR value is defined for the REGION tag.

<!doctype dm system>
<panel name=fields2>Selections
  <area>
    <region>
      <dtacol selwidth=24 pmtwidth=15>
      <selfld name=item>Pick an item:
        <choice>Widget
        <choice>Doohickey
        <choice>Gizmo
      </selfld>
      <divider>
      <selfld name=color>Pick a color:
        <choice>Red
        <choice>Green
      </selfld>
      <divider type=solid gap=no>
      <selfld name=size>Pick a size:
        <choice>Minuscule
        <choice>Behemoth
      </selfld>
      </dtacol>
    </region>
  </area>
  <botinst>To exit the application, press F3.
</panel>

Figure 1. Vertical region

                                 Selections
 
 Pick an item:
 __  1.  Widget
     2.  Doohickey
     3.  Gizmo
 
 Pick a color:
 __  1.  Red
     2.  Green
 -------------------------------------------------------------------------

 Pick a size:
 __  1.  Minuscule
     2.  Behemoth
 
 To exit the application, press F3.

We'll specify the HORIZ value for the region to change the layout of the selection fields to horizontal. Figure 2 shows the result.

<!doctype dm system>
<panel name=fields3>Selections
  <area>
    <region dir=horiz>
      <dtacol selwidth=20 pmtwidth=15>
      <selfld name=item>Pick an item:
        <choice>Widget
        <choice>Doohickey
        <choice>Gizmo
      </selfld>
      <divider type=solid gutter=5>
      <selfld name=color>Pick a color:
        <choice>Red
        <choice>Green
      </selfld>
      <divider type=solid gutter=5>
      <selfld name=size>Pick a size:
        <choice>Minuscule
        <choice>Behemoth
      </selfld>
      </dtacol>
    </region>
  </area>
  <botinst>To exit the application, press F3.
</panel>

Figure 2. Horizontal region

                                 Selections

 Pick an item:        |   Pick a color:        |   Pick a size:
 __  1.  Widget       |   __  1.  Red          |   __  1.  Minuscule
     2.  Doohickey    |       2.  Green        |       2.  Behemoth
     3.  Gizmo        |                        |

 To exit the application, press F3.

In the markup for this example, we also changed the format of the DIVIDER tags to provide additional space and a visible line between the selection fields. We did this by specifying TYPE=SOLID and GUTTER=5 on each of the DIVIDER tags. Also the divider lines are now vertical. That's because of the way DTL handles dividers within regions. DTL adheres to these formatting rules for DIVIDER tags within regions:

A DIVIDER tag coded within a vertical region formats horizontally.
A DIVIDER tag coded within a horizontal region formats vertically.

Here is markup to show how REGION and DIVIDER tags format under different circumstances. This example shows both horizontal and vertical regions, as well as solid and blank dividers.

<!doctype dm system>
<panel name=mainpan8>Application
 <topinst>Complete the information below and press Enter.
 <area>
   <dtafld datavar=name entwidth=25 pmtwidth=9>Name
   <dtafld datavar=addr entwidth=25 pmtwidth=9>Address
   <region dir=horiz>
     <dtafld datavar=city pmtwidth=9 entwidth=25>City
     <dtafld datavar=stat pmtwidth=5 entwidth=2>State
     <dtafld datavar=zip pmtwidth=8 entwidth=5>Zip code
   </region>
   <divider type=solid gutter=3>
   <region dir=horiz>
     <selfld name=grade pmtwidth=32 selwidth=33>Highest education level
       <choice>Some high school
       <choice>High school graduate
       <choice>Some college
       <choice>College graduate
       <choice>Some post-graduate work
       <choice>Post graduate degree
     </selfld>
     <divider gutter=5>
     <region>
       <info width=30>
         <p compact>Complete if applicable:
       </info>
       <dtafld datavar=grad pmtwidth=10 entwidth=11>Date of graduation
       <dtafld datavar=field pmtwidth=10 entwidth=11>Field of study
     </region>
   </region>
 </area>
</panel>

Figure 3 shows how the preceding markup formats.

Figure 3. Horizontal region

                                Application

 Complete the information below and press Enter.

 Name  . . _________________________
 Address   _________________________
 City  . . _________________________  State __  Zip code _____

  ------------------------------------------------------------------------

                                        Complete if applicable:
 Highest education level                Date of
 __  1.  Some high school               graduation ___________
     2.  High school graduate           Field of
     3.  Some college                   study  . . ___________
     4.  College graduate
     5.  Some post-graduate work
     6.  Post graduate degree

This is an example of nesting regions. The data fields for entering the graduation date and field of study are arranged in a vertical region that is nested within a horizontal region.

The ALIGN, DEPTH, EXTEND, INDENT, LOCATION, WIDTH, GRPBOX, and GRPWIDTH attributes allow additional formatting control. The DEPTH and EXTEND attributes are used with scrollable regions. ALIGN, INDENT, LOCATION, and WIDTH affect the placement of fields within the region and the placement of the region within the panel. GRPBOX and GRPWIDTH specify that the region should be displayed as a group box in GUI mode. The optional group box title is supplied as text following the REGION tag ending delimiter. When displayed on a host terminal, a panel defined with a group box contains the group box title, but does not have a group box border.