More Code

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.

Conclusion

Next we will explore Markdown.