Modal Dialog Processing in Web Applications

Styling Web Applications
Search Dialogs in Prompt Lists

To call a modal panel, you send Popup to the modal dialog, passing the callback object. Upon completion, it will send the message OnCloseModalDialog to the callback object, where you can process the result. You usually process the result by sending another message to the modal dialog to get information about it.

Modal dialogs work best with desktop-style applications and are best avoided when creating mobile/touch style applications. With mobile/touch applications, the same functionality can be obtained by view-to-view forward navigation.

To create a modal panel, you will:

Augment Popup (to initialize).
Create buttons to send Ok and Cancel.
Augment OnSubmit to send Ok.
Augment OnCancel to send Cancel.
Create a method that returns information about the selections made in the panel.

Use cWebModalDialog.pkg
Use cWebPanel.pkg
Use cWebButton.pkg
Use cWebForm.pkg

Object oWebCalculator is a cWebModalDialog
    Set piWidth to 300
    Set piHeight to 125
    Set pbResizable to False
    Set psCaption to "Web Calculator"

    Object oMainPanel is a cWebPanel
        Set piColumnCount to 2

        Object oNum1 is a cWebForm
            Set peDataType to typeNumber
            Set piPrecision to 4
            Set psLabel to "First Number"
            Set piColumnSpan to 0
        End_Object

        Object oNum2 is a cWebForm
            Set peDataType to typeNumber
            Set piPrecision to 4
            Set psLabel to "Second Number"
            Set piColumnSpan to 0
        End_Object

        Object oOkButton is a cWebButton
            Set psCaption to C_$OK
            Set piColumnIndex to 0

            Procedure OnClick
                Send Ok
            End_Procedure
        End_Object

        Object oCancelButton is a cWebButton
            Set psCaption to C_$Cancel
            Set piColumnIndex to 1

            Procedure OnClick
                Send Cancel
            End_Procedure
        End_Object
    End_Object

    // Used to initialize the popup
    Procedure Popup
        Handle hoReturnObject
        WebSet psValue of oNum1 to 0
        WebSet psValue of oNum2 to 0
        Forward Send Popup hoReturnObject
    End_Procedure

    Procedure OnSubmit
        Send Ok
    End_Procedure

    // After completion, call this from the invoking object to get data from the dialog
    Procedure GetResultValues Number ByRef N1 Number ByRef N2 Number ByRef nTotal
        WebGet psValue of oNum1 to N1
        WebGet psValue of oNum2 to N2
        Move (N1 + N2) to nTotal
    End_Procedure
End_Object

Usage Example

This is used elsewhere as follows:

Object oCalc_btn is a cWebButton
    Set psCaption to "Calculate"

    Procedure OnClick
        // Popup is the standard modal panel invocation
        Send Popup of oWebCalculator (Self)
    End_Procedure

    // Standard callback method when modal dialog is invoked using Popup
    Procedure OnCloseModalDialog Handle hoModalDialog
        Number n1 n2 nTotal
        // Assume that this function no longer returns bCanceled.
        Send GetResultValues of hoModalDialog (&n1) (&n2) (&nTotal)
        Send ShowInfoBox (String(n1) + "+" + String(n2) + "=" + String(nTotal)) "Calculation Complete"
    End_Procedure
End_Object

Notice that the callback is only called upon success. If you want the callback to be called every time, you make the following changes in the modal dialog:

Object oWebCalculator is a cWebModalDialog
    :
    Procedure GetResultValues Boolean ByRef bCanceled Number ByRef N1 Number ByRef N2 Number ByRef nTotal
        WebGet pbCanceled to bCanceled
        WebGet psValue of oNum1 to N1
        WebGet psValue of oNum2 to N2
        Move (N1 + N2) to nTotal
    End_Procedure

    Procedure OnCancel
        Send Cancel
    End_Procedure

    // Tell client to send OnCancel to the server when Esc or "x" is pressed.
    Set pbServerOnCancel to True
End_Object

And the callback method will now see if the dialog was canceled.

// Standard callback method when modal dialog is invoked using Popup
// Now we also test to see if the dialog was canceled
Procedure OnCloseModalDialog Handle hoModalDialog
    Boolean bCanceled
    Number n1 n2 nTotal
    Send GetResultValues of hoModalDialog (&bCanceled) (&n1) (&n2) (&nTotal)

    If bCanceled Begin
        Send ShowInfoBox "You canceled this popup" "Calculation Complete"
    End
    Else Begin
        Send ShowInfoBox (String(n1) + "+" + String(n2) + "=" + String(nTotal)) "Calculation Complete"
    End
End_Procedure

Previous Topic

Styling Web Applications

Next Topic

Search Dialogs in Prompt Lists

Modal Dialog Processing in Web Applications