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:
[iw-app src="*/.piddler/"]
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.
Select GuessButton in the tree, and then expand the ClientEvents property. Again, as this was done with an early beta, only one event is available but more will be available in the release version.
Once expanded, click the ...
Using the Client Scripts button again:
Then enter this code in the dialog that opens:
() {
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.
