Example 1: Single split view application

This application uses a minimum amount of code to describe a typical implementation of parallel dialogs that result in a split view application, with a list in the left pane and the detail for the selected row in the right pane. It uses only one split view.

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