To demonstrate some other features, we will add a little more functionality to our application.
Index.iwml
Modify Index.iwml:
ACORN 1.0 IWML 1.0 Guess.Index FocusControl: GuessEdit ActionControl: GuessButton Cells[] SimpleStack[] JQUI.AccordionGroup[] JQUI.Accordion[] Play SimpleStack[] Edit:GuessEdit =this.Guess Text Guess #[=this.Count] Gap; BS.Button:GuessButton Text: Guess Face: Info ButtonSize: Large ] ] ] 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 ] ] ] ]
Cells[]
Previously we never used any page properties so we used a shorter tag syntax:
Page[] ... ]
The [] suffix means that there are no properties for this tag, and only contained controls. If we need to set properties of this tag, we must change to a longer declaration syntax:
Page PropName: Value Cells[] ... ] ]
This form allows us to specify properties.
FocusControl
FocusControl: GuessEdit
The FocusControl property defines a control that will be given the focus after a page is loaded. In our case, it puts the focus on the edit control so the user can begin typing a number immediately without needing to focus on it manually.
ActionControl
ActionControl: GuessButton
The ActionControl property specifies the control to handle a default action when the user presses the Enter key on the keyboard. Some controls can intercept the Enter key for their own purposes such as a multi line edit control. In our case we have a standard single line edit control.
Specifying an ActionControl allows the user to type a number, press enter, and repeat. No mouse or finger movement is necessary.
Index.js
Modify Index.js:
var Guess; (function (Guess) { class Index extends IntraWeb.Code { constructor() { super(...arguments); this.GuessEdit = null; this.GuessButton = null; this.MsgBox = null; this.Count = 0; this.MagicNo = Math.floor((Math.random() * 100) + 1); this.Guess = NaN; } Page_AfterLoad() { const xMagicNo = this._Page.WebParam('MagicNo'); if (xMagicNo) this.MagicNo = parseInt(xMagicNo, 10); } Event_GuessButton_Click(aSender, e) { this.GuessEdit.Focus(); if (e && e.shiftKey) { this.MsgBox.Show('The magic number is: ' + this.MagicNo); return; } if (isNaN(this.Guess)) { this.MsgBox.Show('Not a valid number.'); } else if (this.Guess < 1 || this.Guess > 100) { this.MsgBox.Show('Not in the range of 1 to 100.'); } else { this.Count++; if (this.Guess < this.MagicNo) { this.MsgBox.Show('Too low.'); } else if (this.Guess > this.MagicNo) { this.MsgBox.Show('Too high.'); } else if (this.Guess === this.MagicNo) { this.MsgBox.Show('Congratulations! You guessed the magic number.'); this.GuessButton.Enabled.Value = false; } } this.Guess = NaN; } } Guess.Index = Index; })(Guess || (Guess = {}));
Page_AfterLoad
Page_After load is a page level event. Page level events are not prefixed with Event_ like other events, and are not matched by name. The prefix is always Page_. This event occurs after the page has been loaded and is ready for full interaction.
In this case we look for a URL parameter. We can now add it to our URL to force the magic number to be a specified value:
http://127.0.0.1/HelloWorld/Index.html?MagicNo=22
In this case, the magic number will always be 22.
Focus
this.GuessEdit.Focus();
When the user presses the Guess button, the focus changes to the button. The user then must click into the edit control to guess again. By calling the .Focus() method of the Edit control we put the focus back into the edit after every guess attempt saving the user a manual step.
Shift Key
We have also installed a cheat option. If the shift key on the keyboard is pressed when the Guess button is clicked, instead of checking our guess, it will display the magic number in a dialog.