Example 1: Single split view application

main.4gl

The code in the MAIN block creates the left pane/window and the right pane/window by specifiying the TYPE attribute in OPEN WINDOW.

The left window will display a form comprised of a table view of all records (a1_list_view), the other window contains a form with the detail view of a single record from the array (a1_detail_view)

The START DIALOG statements, along with the WHILE fgl_eventLoop() loop, creates the parallel dialog on which a split view depends.

DEFINE arr DYNAMIC ARRAY OF RECORD
            id INTEGER,
            name VARCHAR(15),
            date DATE,
            comment VARCHAR(30)
  END RECORD
DEFINE curr_pa SMALLINT

MAIN
  CLOSE WINDOW SCREEN
  CALL populate_array()

  OPEN WINDOW w_left WITH FORM "list_view"
       ATTRIBUTES(TYPE=LEFT)
  START DIALOG d_list_view

  OPEN WINDOW w_right WITH FORM "detail_view"
       ATTRIBUTES(TYPE=RIGHT)
  START DIALOG d_detail_view

  WHILE fgl_eventLoop()
  END WHILE

END MAIN

DIALOG d_list_view()
  DISPLAY ARRAY arr TO sr.*
                ATTRIBUTES(ACCESSORYTYPE=DISCLOSUREINDICATOR)
      BEFORE ROW -- in BEFORE ROW, we restart the details view
        CURRENT WINDOW IS w_right
        TERMINATE DIALOG d_detail_view
        LET curr_pa = arr_curr()
        DISPLAY BY NAME arr[curr_pa].*
        DISPLAY SFMT("tapped row %1",arr_curr()) TO info
        START DIALOG d_detail_view
        CURRENT WINDOW IS w_left
  END DISPLAY
END DIALOG

DIALOG d_detail_view()
  MENU
    ON ACTION an_action
      MESSAGE "The action an_action was selected!"
    ON ACTION details
      IF edit_details() THEN
         DISPLAY BY NAME arr[curr_pa].*
      END IF
  END MENU
END DIALOG

FUNCTION edit_details()
  -- A modal dialog disables all parallel dialogs
  OPEN WINDOW w_details WITH FORM "details"
       ATTRIBUTES(TYPE=POPUP, STYLE="popup")
  LET int_flag=FALSE
  INPUT BY NAME
        arr[curr_pa].name,
        arr[curr_pa].comment
      WITHOUT DEFAULTS
  CLOSE WINDOW w_details
  RETURN (int_flag==FALSE)
END FUNCTION

FUNCTION populate_array()
  DEFINE i INT
  FOR i=1 TO 40
    LET arr[i].id=i
    LET arr[i].name="item "||i
    LET arr[i].date=TODAY
    LET arr[i].comment="item-detail "||i
  END FOR
END FUNCTION

Left form definition file (list_view.per)

This form definition file provides the table, or list, of records in the array. Even though four table columns are defined, only two display.

LAYOUT (TEXT="Items")
TABLE
{
[c1    |c2              ]
}
END
END
ATTRIBUTES
PHANTOM FORMONLY.id;
EDIT c1=FORMONLY.name;
PHANTOM FORMONLY.date;
EDIT c2=FORMONLY.comment;
END
INSTRUCTIONS
SCREEN RECORD sr(FORMONLY.*);
END

Right form definition file (detail_view.per)

This form definition file displays the details for a single record in the array.

LAYOUT (TEXT="Details")
GRID
{
Id      [f01               ]
Name    [f02               ]
Date    [f03               ]
Comment [f04               ]
Info    [f05               ]
        [b1_details        ]
}
END
END
ATTRIBUTES
EDIT f01=FORMONLY.id;
EDIT f02=FORMONLY.name, SCROLL;
EDIT f03=FORMONLY.date;
EDIT f04=FORMONLY.comment, SCROLL;
EDIT f05=FORMONLY.info;
BUTTON b1_details:details,TEXT="Modify details";
END

Detail form definition file (details.per)

This is a simple form containing a two fields that will be used in the program by the edit_details() function to modify item details.

LAYOUT (TEXT="Edit details")
GRID
{
Name:    [f01                   ]
Comment: [f02                   ]
         [                      ]
}
END
END
ATTRIBUTES
EDIT f01=FORMONLY.name, SCROLL;
TEXTEDIT f02=FORMONLY.comment, STRETCH=BOTH;
END