During the preparation of your web page, you can test its performance at any time. Just click on the "Preview" button at the top of the screen.

To make it more interesting, let's build another small app which will demonstrate a simple principle of construction that can be of use to you. Then, we can look at the details of the Preview procedure at the end.

The little app that we are going to build is a bar with 6 buttons on it. If the operator clicks on a button, its ID will appear in a box at the top of the screen.

First, have a look HERE to see the app in practice.

Click HERE if you wish to download the script.

The simple principle of construction employed is that we first design the app's background, and then arrange transparent empty text widgets (DIVs) on it to provide "click spots" that can be identified and actioned.

In fact, the interface (main screen) of webProg3 operates in this way.

Next, create a text widget, and make it the size of a single button.

Give it the class name "button".

We begin in Photoshop or similar app to design a bar.

The exact dimensions are of no importance.

We just need a background with 6 buttons on it.

Now introduce it into webProg3 as a picture on the left of the screen, leaving some space at the top.

Move it into place exactly over the first button image.

Clone the first empty text box, and position the copies over the rest of the button images.

Consequently, all the empty green texts will have the class "button".

Now double-click on each of the text widgets in turn to call the Rich Text Editor.

Simply make the canvas transparent, and Save + Exit.

This is what it looks like when you return to the main grid.

All you can see of the text boxes now is the re-size icons in the bottom right-hand corner.

Finally, create a new text box at the top, and give it an ID of "result".

You can then double-click on it to call the Rich Text Editor once more to make the canvas transparent.

And that's the graphical part done.

Now click on each of the text boxes in turn to identify them, and give them IDs according to the words on the button images underneath.

So the first 5 are "home", "login", "search", "download" and "help". Give the 6th text an ID of "contact".

We are now ready to attach the coding to our little app, so click on the "Code" button and type up the script as shown here.

When you have finished, click on the red "Exit" button at the bottom of the screen.

The final step is to click on the "Preview" button in order to test the performance of our little app in an iframe (browser substitute).

First, you will be presented with a dialogue asking you how high (in pixels) the margin at the bottom of the page should be.

Our button bar app occupies only the upper part of the visible screen, already with a large margin below it, so it is not necessary to enter anything beyond 0 here. Just click on "OK".

However, if the page was high enough to require use of the scrollbar to see it all, you might well wish to enter a value. The margin created at the bottom of the page can be as large (or small) as you wish. This very page has a bottom margin of 100 pixels.

Next, you will be presented with the output script, which can be edited if you wish.

Here, you can make experimental alterations to see how they work subsequently in the Preview, but such alterations will not be permanently saved in any way, at least here in the Preview.

When you have finished viewing (/editing) the output script, click on the red exit button at the bottom.

So now we have our little button-bar app, running in all its glory in an iframe.

If you click on the buttons, they should display their ID in the box at the top.

When you manage to tear yourself away from the magic of its functioning, click on the red "Exit" button at the bottom to return to the webProg3 mainpage grid.