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.

Control Names

To facilitate easy access to our controls from code, we need to give them names.  This can easily be done using the object inspector, but it is faster to simply 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

With Delphi code can be added server side (Delphi) or client side (JavaScript) in an integrated manner. We will start by adding very simple code and then will return and modify it later into useful application logic.

Server Code

Select the button in the tree. Open the Object Inspector. Select Events:

Once events is selected, double click the OnClick event value:

Note that there is only one event available? This is because the screenshot was taken from a beta version. More events will exist on button in the release version of IntraWeb 17.

After you double click the event value, a server side event will be created for you:

In our new event add this code:

procedure TUnit1.GuessButtonClick(aSender: T17Renderer);
begin
  Guess.Text := 'Hello World!';
end;

Since server code does not run in preview, we have to run the application and then launch a browser. After launching and clicking the button it will look like this:

Just as in earlier versions of IntraWeb, you can fully debug your code using watches, breakpoints and more.

Client Code

You can also easily add client code in IntraWeb 17. This is much easier than it was in previous IntraWeb versions. To add client code, click Client Events:

A new dialog will appear:

As with the IWML editor, preview buttons are available on this dialog. This is very useful because unlike server code, client code does function during preview.

Now lets add some code. Enter this code into the dialog:

Event_GuessButton_Click() {
  window.alert('Hey there!');
}

If we preview it and press the Guess button:

We just ran our first bit of client code, without even compiling the application.

Client Event Syntax

Events take form using three parts, separated by an underscore (_). Thus the identifier Event_GuessButton_Click is comprised of:

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

Conclusion

Now let’s create some actual application code.