STEP 3

Move the mouse into the bottom right-hand corner of the text widget, and the E-S resize icon will appear.

Press down on this resize icon with the left mouse button and drag the corner of the widget at 45° (East + South) until it has a size of 240px X 136px.

The aim of this Walkthrough is to show you how to make a fairly simple browser application using webProg3, with a little JQuery/Javascript.

Click HERE first to see the application we are going to make.

This is the Rich Text Editor.

See this Help for full instructions on how to use it.

STEP 4

As it stands, the text widget is empty.

Double-click on it to call the Rich Text Editor.

(It will open in a new browser tab.)

On return to the main screen, the text widget displays the rich text.

Now we need to create another rich text, exactly like the first one, except that the text is different.

STEP 6

We could, of course, start from scratch and prepare this second rich text just like the first. However, we are going to use a slightly faster method by cloning the first widget.

Click on the first text to identify it. Then type Ctrl+C to copy it. Next, click on the grid at the point 800x80 px to locate the position of the clone. When you now type Ctrl+V, the cloned text will appear.

STEP 7

Now all you have to do is change the text of the cloned widget. Double-click on it to call the Rich Text Editor again, change the text and save.

STEP 8

Let's include the picture.

Click on the "New Picture" button, and a new picture widget will appear in the top left-hand corner of the grid.

STEP 10

Initially, you are presented with a screen that has a single "Open" button on it. Click on the button and navigate to the folder where you have the picture stored.

See the top of this page to download the picture. It is called "beach_huts.png".

Once the picture has been uploaded, you will note that its dimensions are 1000x562 pixels. Note also that the default ratio for an uploaded picture is "1" - which is its full size - and that you could save it directly, by the presence of the "Save" button, to webProg3 if you wanted to.

But you don't want to because it is too big! You need an image that is 240px wide, the same as the text boxes.

Of course, you could go to your Photoshop or whatever and re-size the picture before uploading it into the WP3 Picture Chooser, but you don't need to do that. It can be re-sized in the Picture Chooser itself.

STEP 9

Right-click on it to make it movable, and drag it with the left mouse button to the position shown on the left.

Then, to insert its image, double-click on it.

This will call the Picture Chooser in a new browser tab.

STEP 11

Click on the "Set width:" button which will turn blue. Then type in the required width, which is 240.

Note that the "Save" button has disappeared and that a "Re-size" button has appeared instead.

Click on the "Re-size" button.

You will then get a preview of the re-sized image,

240px wide, just as required.

Click on the big "X" in the top left-hand corner to close the preview.

Upon return to the Picture Chooser's main screen, the "Save" button will re-appear.

Click on "Save" to transfer the image to WP3 and close the Picture Chooser.

Great! Ther's our re-sized picture, exactly 240px wide.

Or is it? The picture is correct, but if you look closely you will see that the text boxes are a bit too high in comparison.

This happens when you use the Rich Text Editor to include borders, padding and so on. The text box can get fatter.

But no worry, the next step solves the problem.

STEP 5

Type up the text using the CURSIVE font "Architects Daughter" , size 24px. Change the canvas colour from green to white, give it a solid, thin border (black), and hit the "Save + Exit" button.

STEP 12

Click on one of the text boxes to identify it. Then use the nudger to adjust the height. (The width seems OK, so you don't need to adjust it.) The nudger can move the entire widget, or any one of its sides, 1 pixel at a time. We only need to move the bottom edge upwards, so click on the little arrow button which does this (the red arrow points towards it).

As you will see if you look closely, the widgets are now nicely lined up thanks to the nudger, and we are ready to go on to the next step.

STEP 13

We have only one more widget to create, and that is a hotspot. It will be placed on top of the picture so that when clicked, it will open a new browser tab and navigate to the website where the user can hire a beach hut.

Click on the "New Hotspot" button and the widget will appear in the top left-hand corner of the grid as usual.

Right-click on it to set move mode, and drag it with the left mouse button to the top left-hand corner of the picture.

Move the mouse cursor into the bottom right-hand corner of the hotspot, press down with the left mouse button and drag the corner until the widget's size is exactly the same as that of the picture.

Fill in the URL (i.e. the path to the website) required.

We want the web page to open in a new browser tab, so leave this default setting as it is.

Click on the OK button to dismiss the dialogue.

The details of the navigation are now stored together with the hotspot.

STEP 14

Double-click on the hotspot. This will present you with a dialogue to enter details of the navigation required.

STEP 15

We have already set up the navigation of the browser when the user clicks on the picture, via the hotspot on top of it. However, we also want to allow the user to navigate to the same website when clicking on the first text on the left, specifically on the capitalised, underlined word "HERE". If you click on this text widget, webProg3 will recognise that it has underlined text in it and display a blue "link" icon at the bottom of the screen, on the right. This is to show that optionally, you can attach a navigational link to the underlined word(s) if you wish. You DO wish, so click on the blue link icon indicated by the big red arrow.

Your text widget has now opened in the Link Editor, in a new browser tab.

Full instructions for use of the Link Editor can be found elsewhere in this HELP.

However, for the current task, all you need to do is follow the tip given at the top of the screen, which is to click on the underlined text highlighted in yellow.

You are now presented with a dialogue similar to that of the hotspot.

Note that the highlighted underlined text of your widget has changed from yellow to cyan, to indicate that the link for it is being edited.

Fill in the URL (path to the webpage).

Then click on the "Add" button to associate the link to the underlined text.

That's all, so just save and exit.

STEP 16

The next step is to adjust the IDs of the widgets for convenience of usage in the programming part of the webpage, in JQuery/Javascript.

Click on the first text widget on the left to identify it. Then change the ID in the typing box at the bottom from "widget_1" to "text1".

Now change the IDs of the other widgets, as required for the mini-app that we are building:

text2 the text on the right

poolePic the picture

hireLink the hotspot

Be careful to observe upper/lower cases letters for the IDs.

This is important in Javascript, which would consider for example "NAME" to be entirely different to "name".

Before you can change the ID of a widget, you have to be able to click on it to identify it. But you cannot do this with the picture because it is covered entirely by the hotspot!

No problem. Just click on the Show/Hide Hotspots button at the bottom of the screen. The hotspot in your mini-app will then be hidden and you can subsequently click on the picture to identify it and type in its ID.

After, just click on the Show/Hide Hotspots button again, and the hotspot will re-appear, once again covering the picture.

STEP 17

Now that the layout of our mini-app has been completed, we can put in the little bit of JQuery coding required to move the picture when the user clicks on text2.

Click on the "Code" button as indicated.

This is the Code Editor.

Add and remove coding as you wish here, but as everything in it is editable, be careful not to alter or remove the lines as shown on the left.

Now type up the coding you see in the next screenshot.

Here is a brief explanation of the coding for those of you who are not yet familiar with JQuery. However, it is fairly self-evident I think.

When the mouse cursor is moved over text2, a kind of hand with a pointing finger indicates that if it is clicked upon, something will happen in response.

The programming of the response is in the following function. Clicking on text2 and releasing the mouse button causes it to be executed.

First, the current left-hand position of the picture is determined. If the position of the left edge is 320px, it will be moved to the 560px position. Conversely, if the position of the left edge is 560px, it will be moved back to the 320px position. In other words, clicking successively on the text will move the picture forwards and backwards.

Note that the hotspot (which later will be invisible) is moved together with the picture. This is so that the browser will always navigate to another webpage as required. The user thinks he is clicking on the picture, but really he is clicking on the hotspot.

When you have finished typing up the code, click on the red "Exit" button that is on the right of the bottom toolbar.

STEP 18

You have designed the layout of your mini-app and inserted JQuery coding in it. Now is the time to test whether it actually works!

Click on the "Preview" button.

Immediately, you are asked to declare what margin, if any, you would like at the bottom of your web page, above and beyond what is required to actually display the widgets completely.

Our little app occupies only a small portion of the upper part of the screen and there is a large space (the rest of the screen) below the widgets already. There would be no point in entering a value above zero here. Frequently though, when it is necessary to use the scrollbar to view the lower part of the page, you might indeed want to create a bottom margin. It can be of any value.

Next comes the HTML Editor with the output script of your mini-app.

Here, you can make changes to the script if you wish, and the preview of your web page to follow will include whatever changes you make in the HTML Editor, including experimental ones if you want.

When you are satisfied with the script, click on the red "Exit" button at the bottom.

And there is your mini-app displayed in an iframe, exactly as it would be in a browser.

It is "live", so the coding you have inserted in JQuery should work as well, and of course the navigational links should navigate, in this case to the website where you can hire a beach hut.

When you have finished viewing and/or interacting with the preview page, clicking on the red "Exit" button at the bottom will return you to the original work grid.

STEP 19

Finally, you are ready to save your work.

Just as in the preview, you will be asked to set the bottom margin of your web page, followed by the opportunity to edit the output script.

However, this time the output script (with or without your manual changes) is definitive. This is what will be saved to file.

Now, clicking on the red "Exit" button at the bottom will take you to a "SaveAs" dialogue.

CONCLUSION

And that concludes our not-so-little Walkthrough.

The idea of "walking" suggests an important principle. If you were asked to describe every little detail of your behaviour when you walk, you would either be unable to do it (because it is automatic), or you would produce a description that was extremely complicated!

So it is here. In the final analysis, all you do to be able to walk is put one foot in front of the other. Once you get a little bit used to working with webProg3, you will hopefully find its operation reasonably intuitive.

As a contrasting complement to this detailed Walkthrough, I suggest you just take a look at the "Mini-Help" (which can also be viewed from the Grid Manager itself by clicking on the yellow question-mark icon at the top of the screen on the right) and then play around making widgets and doing stuff with them.