Code

So far we have built only a static page. To add interactivity we can use data binding or code. In this section we will add some code. In IntraWeb code and IWML are discrete, however code can be embedded into IWML as page properties to reduce the number of files requested to load a page. Normally it is better to keep the code in a separate file and that is what we will do here.

Control Names

To facilitate easy access to our controls from code, we need to give them names. Modify Index.iwml as follows:

ACORN 1.0 IWML 1.0
Page[]
  SimpleStack[]
    Edit:Guess;
    Text:TryCount Guess #
    Gap;
    Button:GuessButton Guess
  ]
]

Not all controls require names. Only the ones that we want to interact with in code have been given names. Thus we did not give names to the SimpleStack or Gap.

Adding Code

In your HelloWorld folder, create a file named Index.js and give it these contents:

var Guess;
(function (Guess) {
    class Index extends IntraWeb.Code {
    }
    Guess.Index = Index;
})(Guess || (Guess = {}));

This is the boiler plate code required as a starting point for code behind of an IWML document. There are two things that need to be changed for each code behind: The namespace and the class name.

Guess is the namespace we are using for our application and normally all pages in an application will share the same namespace, although it is not required.

Index is our class name and usually matches the name of the corresponding IWML file, in our example Index.iwml.

Because of the syntax of JavaScript, both the Guess and Index identifiers appear multiple times in the code and must be updated for every page. Since pages usually share the same namespace, only the class name (Guess in this example) needs to be changed.

Now we have the boiler plate code and we are ready to add specific code for our page.

Control Names

To be able to reference the control names we added in our IWML, we need to add a little bit of code. In the future there will be automated tools to generate both the boiler plate as well as the names, and even update names as IWWL changes while leaving existing code in tact. Such tools already exist for some of our other languages. But even now, its a very simple manual task.

Change Index.js again:

var Guess;
(function (Guess) {
    class Index extends IntraWeb.Code {

        constructor() {
            super(...arguments);
            this.Guess = null;
            this.TryCount = null;
            this.GuessButton = null;
        }
       
    }
    Guess.Index = Index;
})(Guess || (Guess = {}));

This code creates properties that IntraWeb will fill in with references to our controls when it loads the code. The names must match the names we used in our IWML file.

As a test run the application and see if there are any errors. It still won’t do anything more than before yet. If there are errors, please retrace your steps before proceeding.

Enable Code Loading

Our IWML uses a plain Page tag and does not load code. To enable automatic code loading, we need to make a small change. Change Index.iwml to these contents:

ACORN 1.0 IWML 1.0
Guess.Index[]
  SimpleStack[]
    Edit:Guess;
    Text:TryCount Guess #
    Gap;
    Button:GuessButton Guess
  ]
]

Here we replaced the Page tag with Guess.Index, the namespace and class name that we used in Index.js. These must match in order for IntraWeb to properly load our code.

Events

Now we are ready to add some real user code and begin to make our application do something. As a first step we will add something very simple and then build up after that.

Modify Index.js:

var Guess;
(function (Guess) {
    class Index extends IntraWeb.Code {

        constructor() {
            super(...arguments);
            this.Guess = null;
            this.TryCount = null;
            this.GuessButton = null;
        }
        
        Event_GuessButton_Click(aSender, e) {
            window.alert('Hey there!');
        }
    }
    Guess.Index = Index;
})(Guess || (Guess = {}));

If you run and click the Guess button, you should see this:

Events take form using three parts, separated by an underscore (_):

  1. Event prefix (Event)
  2. Control name (GuessButton)
  3. Event name (Click)

That is all we need to create an event. Now let’s create some actual application code.