Example 3: Split view using an HBox

Styles definition file (mystyles.4st)

For this example, we start with the style file. The style file specifies the splitViewRendering attribute for the HBox container when the style is set to mysplitview.

<?xml version="1.0" encoding="ANSI_X3.4-1968"?>
<StyleList>
  <Style name="HBox.mysplitview">
     <StyleAttribute name="splitViewRendering" value="yes" />
  </Style>
</StyleList>

Form definition file (splitview.per)

The form definition file defines a HBOX container using the mysplitview style. It contains a TABLE followed by a GRID. The table will become the left pane of the split view app, and the grid will become the right pane of the split view app.

LAYOUT
  HBOX (STYLE="mysplitview")
    TABLE
    {
    [c1            |c2                            ]
    [c1            |c2                            ]
    [c1            |c2                            ]
    [c1            |c2                            ]
    }
    END
    GRID
    {
    <GROUP g1                                      >
      Name:          [lb_name             :lb_id  ]
      E-mail:        [lb_email                    ]
      Address:       [lb_address                  ]
      City:          [lb_city                     ]
    <                                              >
    <GROUP g2                                      >
      Phone:         [lb_phone                    ]
      Mobile:        [lb_mobile                   ]
    <                                              >
    }
    END
  END
END

ATTRIBUTES

PHANTOM FORMONLY.id;
EDIT c1 = FORMONLY.name;
EDIT c2 = FORMONLY.address;
PHANTOM FORMONLY.city;
PHANTOM FORMONLY.phone;
PHANTOM FORMONLY.mobile;
PHANTOM FORMONLY.email;
GROUP g1: group1, TEXT="Contact";
EDIT lb_id = FORMONLY.cont_id;
EDIT lb_name = FORMONLY.cont_name;
EDIT lb_address = FORMONLY.cont_address;
EDIT lb_city = FORMONLY.cont_city;
GROUP g2: group2, TEXT="Numbers";
EDIT lb_phone = FORMONLY.cont_phone;
EDIT lb_mobile = FORMONLY.cont_mobile;
EDIT lb_email = FORMONLY.cont_email;
END

INSTRUCTIONS
SCREEN RECORD sr(id, name, address, city,
                 phone, mobile, email);
END

Application (main.4gl)

The application starts by loading the splitview.4st style file.

After populating the array with our sample data, the splitview.per form is loaded and displayed in the default SCREEN window.

Then, a DISPLAY ARRAY statement takes control, and fills the fields in the grid in the BEFORE ROW trigger, when a new row is selected by the user.

DEFINE carr DYNAMIC ARRAY OF RECORD
    cont_id INTEGER,
    cont_name VARCHAR(40),
    cont_address VARCHAR(100),
    cont_city VARCHAR(50),
    cont_phone VARCHAR(20),
    cont_mobile VARCHAR(20),
    cont_email VARCHAR(30)
END RECORD

MAIN
  CALL ui.Interface.loadStyles("splitview")
  CALL load_samples()
  OPEN FORM f FROM "splitview"
  DISPLAY FORM f
  DISPLAY ARRAY carr TO sr.* ATTRIBUTES(UNBUFFERED)
    BEFORE ROW
      DISPLAY BY NAME carr[arr_curr()].*
  END DISPLAY
END MAIN

FUNCTION load_samples()
  DEFINE i INTEGER
  LET i=0
  LET carr[i:=i+1].cont_id = 982
  LET carr[i].cont_name = "Mike Stanford"
  LET carr[i].cont_address = "5 Marbel St."
  LET carr[i].cont_city = "Balmberg"
  LET carr[i].cont_phone = "8723847234"
  LET carr[i].cont_mobile= "8732487833"
  LET carr[i].cont_email = "mikest@xyz.com"
  LET carr[i:=i+1].cont_id = 8234
  LET carr[i].cont_name = "Phil Karlmon"
  LET carr[i].cont_address = "341 Merlo Bld"
  LET carr[i].cont_city = "Clerckmont"
  LET carr[i].cont_phone = "9823498234"
  LET carr[i].cont_mobile= "9999991213"
  LET carr[i].cont_email = "pkarl@yoioyoio.com"
  LET carr[i:=i+1].cont_id = 1045
  LET carr[i].cont_name = "Clark Gambello"
  LET carr[i].cont_address = "35 Straw St."
  LET carr[i].cont_city = "Bringstone"
  LET carr[i].cont_phone = "9823498234"
  LET carr[i].cont_mobile= "8234981111"
  LET carr[i].cont_email = "cgamb@youhoowha.com"
END FUNCTION