Tutorial

The main window of the VAC is divided in three parts: the list of applets in the HTML file ("Applets in this HTML-file:"); the category tree with supported applets ("Available applets:") and the HTML-code text field ("Current HTML-file:"). When you first start Visual Applet Configurator it looks like this:

The main window of Visual Applet Configurator.

Now you will begin to create your first HTML-file with the applet WaterMessager2 inserted.

• Go to the File menu and choose the "New HTML-file" option.

You will see that the text in the HTML-code field has been replaced with HTML-code. Also the name of the project has been renamed to "untitled.html". The next step is to decide where to insert the code for the applet.

There are four points in the HTML-code where you may insert the applet:

The applets MUST always be inserted within a BODY-statement. And you may NOT insert applet code within the applet code of another applet.

• Click in the HTML-code text field to define where the applet will be inserted.

• From the "Available applets" tree, double click the Free-Applet icon.

• Insert the WaterMessager2 applet by double clicking its icon or single clicking it and then press the "Insert" button.

You will see that the program has inserted a lot of HTML code into the text field. The name of the applet has been inserted into the "Applets in this HTML-file" field, with the number 1 (the first applet of this type). A configuration dialog for WaterMessager2 will now automatically appear.

The applet configuration dialog for WaterMessager2.

All applets require some parameters in order to make them work. This was not done to make the insertion of applet more difficult, but to make the applets more customizable to make them look the way you want.

If you are inexperienced with HTML coding you should always configure your applets through these dialogs and not directly in the HTML text editor. Also with Demicron's applets it is not possible to edit the applets through the HTML text editor.

The general parameters of the applet should now be visible. Note that if you move the mouse across a field you get a help message at the bottom of the dialog.

Probably the most important parameters in an applet are the width and height parameters. Three not-so-important parameters are the codebase, applet ID and applet Name parameters. These are for advanced users only. More information about these HTML parameters can be found in an ordinary HTML manual. These parameters are always required by an applet and without them the applet will not work. These parameters are automatic and you never have to change them. The VAC-file field ("VAC parameter filename") specifies the filename where the parameter values will be written. You generally do not have to worry much about this since the VAC will handle these VAC-files automatically. You do not have to change anything here in the General parameters section, except for the width and height if desired.

• If desired, change the width and height parameters, leave the rest as they are.
• Click on the Color section and then on the Text color button.

You will see the following dialog:

The color section in the configuration dialog of WaterMessager2.

This section has the color parameters of the WaterMessager applet (text-, background- and select-colors). When you clicked on the color button the button enlarged itself.

• Choose your colors for the different parameters.
• Click on the Image section.

The dialog will change to the following:

The Text section of the WaterMessager2 configuration dialog.

This section shows all the text related parameters for the WaterMesssager applet. The number of applet fonts are limited due to Java's limited supply of platform independent fonts. In the "Enter texts" field, you can write the text that will appear in the WaterMessager2 applet. Simply write every message you want the applet to display, each in its own row.

• Change the font to, "Helvetica" for example, and the "demicron" text item to your name.
• Add the text "Java is the best" as the last message.

Go to the URL parameters section:

The section of URL parameters in the WaterMessager2 applet.

At this point, you can enter the URLs that will be implemented when you click on a message. Note, they must always be specified with the "http://" part or as a relative link"../[folder]/[file.html]".

It is now time to test the applet.

• Click on the "Test Applet" button.

After a short period of time, you will see the following window appear in your browser, but with your parameters instead:

The WaterMessager2.

The next step is to confirm your changes:

• Click on the "Ok" button to confirm your changes.

The dialog will disappear and you will be back in the main window again. Note that the applet HTML code has been changed to your settings. The final stage is to save the code.

• Go to the File menu and select the "Dependent Files..." option.

You will see that this HTML file is dependent on the files watermessager2.class and untitled_watermessager2.vac. The applet parameters and settings are stored in the VAC file.

• Go to the menu and choose "Save As...".
• Choose or create a suitable catalog in the files dialog.
• Write your filename and press the save button on the files dialog.
• When the HTML file is named and saved you can press the "Run in browser" button to see how the end result will look in your favorite browser.