SweetAlert

Previously we used window.alert() for our dialogs. window.alert() is quite minimal and raw, so let’s replace it with SweetAlert.

Add Alert.Notification Control

Add an Alert.Notification control to our page. To do this, select the root SimpleStack. Right click and select add:

Select Alert.Notification:

Now change these three properties:

For reference, the resulting IWML is:

ACORN 1.0 IWML 1.0
TUnit1:Unit1
  Cells[]
    SimpleStack[]
      JQUI.AccordionGroup[]
        JQUI.Accordion[] Play
          SimpleStack[]
            Edit:GuessEdit;
            Text:MsgText;
            Text:CountText;
            EOL;
            BS.Button:GuessButton
              ServerEvents:
                Click
              ]
              Text: Guess
            ]
          ]
        ]
        JQUI.Accordion[] Instructions
          Text Enter a number and click Guess.
        ]
        JQUI.Accordion[] About
          Text Where would we be without the Guess demo?
        ]
      ]
      Alert.Notification:MsgBox
        Title: Guess Demo
        AlertType: success
      ]
    ]
  ]
]

Client Code

There are ways to use SweetAlert from Delphi, but let’s revisit a feature we touched on earlier, client code. Using client code for validations and other simple functions reduces network traffic and increases the responsiveness of the user experience. Using the Client Scripts button again:

Then enter this code in the dialog that opens:

Event_GuessButton_Click() {
  this.MsgText.Text.Value = '';
  let xGuess = Number(this.GuessEdit.Text.Value);
  if (isNaN(xGuess)) {
    this.MsgBox.Show(this.GuessEdit.Text.Value + ' is not a valid number.');
    this.GuessEdit.Value = '';
  } else if (xGuess < 1 || xGuess > 100) {
    this.GuessEdit.Value = '';
    this.MsgBox.Show(xGuess + ' is not in the range of 1 to 100.');
  } else {
    this.CallServerEvent();
  }
}

The code is very straightforward, but take note of the this.CallServerEvent() call. This allows client code to determine if processing should continue on the server or not. In the case of validations as here, there is no need to waste time calling the server.

Pruning

Because we now validate in client code, you can optionally remove this code:

In secure applications, input from the client must always be revalidated on the server. If someone hacks our Guess application though, we simply are not that bothered.

Run

We can run or preview. Remember that with preview, client code executes but server code does not. Actions triggering calls to server code in preview may produce errors.

Conclusion

Next we will introduce markdown.