The aim of this section is to give you an idea of the kinds of things you can produce using webProg3, and to provide you with some potentially useful materials for incorporation into your own web pages.

For static web pages, you already have all the information you need in the Full Help (see

the link on the left-hand side of the screen). This entire website gives you many examples of static pages. So far though, there has not been much discussion of "dynamic" web pages which represent computer applications run in a browser. The webProg3 Semi-IDE itself (the tool you use to make static web pages) is an excellent example of a browser app, albeit a rather complex one. However, in this section, we will see some much simpler examples which hopefully will help you along the path towards making you own browser apps.

If you wish to create browser apps, there is an important caveat to observe. WebProg3 can always be of great help in making the basic static design using pictures, texts and hotspots. It can also enable you to include a great deal of dynamic responses (responses to mouse clicks for example) using the "Code" section provided in the output web page. However, there are many things which cannot be achieved without extending or altering the HTML content of the page, and if you do this it becomes incompatible for subsequent upload into webProg3. You must continue with a text editor.

Single Selection List

Multiple Selection List

You can, of course, create a simple list box with text using the Rich Text Editor. However, because of the internal complexity of the HTML, you may not find it easy to retrieve line data if it is required in your app. Instead, create a text widget and use the Rich Text editor to include background colour, border and padding, but leave it empty of text. Then, populate the widget with line data on-the-fly using JQuery.

The fact that your simple list box was created in the HTML of the basic script (and not on the fly) means that you can automatically set the width and height of the box appropriately once it has been populated with text.

If you alter the number of lines (and the actual lengths of the lines) in the data added on the fly, the text box will adjust to it correctly:

textBoxHTML = "apples pears bananas melons kiwis peaches oranges lemons";

The Single Selection List makes it unnecessary to create radio buttons in HTML. All you have to do is click on the item (line of text) of your choice, and the line's background is highlighted. If you click on another line, this line becomes highlighted, and the other lines are made un-highlighted.

However, instead of a single container box for the data as in the Simple List box above, this widget creates a stack of single-line DIVs by cloning (on the fly) the first DIV cited in the HTML of the original script.

If you alter the number of lines (and the actual lengths of the lines) in the data added on the fly, the DIVs will present themselves correctly:

data = "apples\npears\nbananas\nmelons\nkiwis\npeaches\noranges\nlemons";

The Multiple Selection List makes it unnecessary to create check boxes in HTML. If you click on an item (line of text), it will be selected (highlighted). If you click on the same item again, it will be deselected and the highlighting will be removed. Any number of items in the list can be selected.

Like the Single Selection List above, a stack of single-line DIVs is created according to the input data provided.

If you alter the number of lines (and the actual lengths of the lines) in the data added on the fly, the DIVs will present themselves correctly:

data = "apples\npears\nbananas\nmelons\nkiwis\npeaches\noranges\nlemons";

This menu is based on the Simple List Box above, with a separate heading box at the top.

Clicking on the heading will display a list of items from which a single choice can be made.

Once a choice is made by clicking on an item, the menu list is hidden, and your choice will be reported.

However, if you click on the heading again, or move the mouse off the list without selecting anything, the list box will also be hidden.

If you alter the number of lines (and the actual lengths of the lines) in the data added on the fly, the menu text box will adjust to it correctly:

textBoxHTML = "apples pears bananas melons kiwis peaches oranges lemons";

In the following, please click on the first three icons referring to the items on the left 1) for a demo of its operation, 2) to see the relevant code of the widget or app, and 3) to download the full code.

The two icons on the right, indicating 4) that the use of a server (either on the Internet, or locally) is required, or that 5) alterations to the HTML code in the script make it no longer compatible with WP3, are either visible or absent as appropriate.

When you try the demo, you might be fooled into thinking that it is exactly the same as the previous button demo. It doesn't look like it, but it is different. It uses a single picture of all 4 buttons in the background. Then, I put what I call "click spots" on top of the images of each individual button. A "click spot" is nothing more than an empty text widget with a transparent canvas. So when you click on the transparent empty texts, it is these which enable a Javascript (JQuery) response.

This little demo illustrates a technique which assists you in the design of your web app. It was used for the main page of webProg3 itself. What I did was to design the entire page in Photoshop, including all the button images, text areas, etc. Then I created lots of empty (but coloured) texts to put on top of the relevant background areas. Once I had finished creating all these "click spots", I then went through and made them all transparent.

Personally, I find this to be a much more practical way of designing my apps than trying to deal with little bits (widgets) that I I need to move around all the time in order to eventually see the "big picture". You can create the "big picture" first!

Buttons are quite easy to make using picture widgets. All you need to do is create the empty widgets and populate them with images of your choice. After naming them (giving them more meaningful IDs), it remains to make them potentially responsive to mouse clicks using JQuery. Once you have downloaded the ZIP file provided and extracted the HTML file from it onto your HD, it can be opened (uploaded) in webProg3. Then click on the "Code" button to see the coding which demonstrates the buttons' JQuery responses to "mouseUps" (releasing the left button of the mouse after clicking down with it). This demo uses simple alerts as responses, but of course you can replace the alerts with different coding of you own.

If you don't mind square corners instead of rounded ones, you can quickly knock up your buttons using the Text Editor (see the demo).