Making a Template

This section of the tutorial describes the requirements, and provides an example of a rudimentary template that is compatible with the PCProfiler program. It assumes that you are comfortable with coding HTML in a standard text editor.

The BODY element

Not much consideration is normally given to the BODY element in an HTML document. But in this case, there is something special you'll need to do if you're making a PCProfiler template. When you normally browse the web with Internet Explorer, if you right click anywhere on the document, you get a context-sensitive menu. Good for web-browsing, bad for PCProfiler. Many of the commands can cause loss of data. If the user clicks the 'back' command, or navigates anywhere else in the PCProfiler window, he/she will be in for a world of hurt. Since PCProfiler uses Explorer to render its data, you need to disable this context menu. You do this with the BODY element:
<BODY oncontextmenu="return false">
So, why isn't the context menu automatically disabled by PCProfiler? Well, as the designer of a template, what happens if you want to implement your own context-menu? Explorer has extended the HTML DOM considerably, and with things like mousecapturing, you can make some pretty sophisticated menus of your own. But menu building is beyond this scope of this tutorial. If you manage to build a menu handler, you simply insert it into the oncontextmenu event handler.
<BODY oncontextmenu="MyContextMenu(); return false">
There are other ways of doing the above, but key to supressing the default Explorer menu is the last return false statement.

Linking external files

As you build a template, you're likely going to want to provide event handling, scripting, style implementations, and the like. Defining all these things in the document's HEAD element becomes very laborious and messy, so most designers usually opt for seperate files. The thing about PCProfiler is, where do you put these files? You have no idea where the program will be on the user's computer, and have no idea what else may be there. Follow these guidelines, and you should always be fine.

Event handling and scripting

Since a PCProfiler template is really just an HTML document in disguise, any normal HTML tricks you use for scripting/handling will work. Note though that we are dealing with Microsoft Internet Explorer exclusively, so you may wish to take advantage of scripting languages, events, or extentions to the HTML DOM that will not work in Netscape or other browsers.

Also note that, since we are really dealing with a browser object, normal security issues apply. If you try to manipulate files on the user's hard disk, a security warning will be generated. You're restricted to the level of security the user will normally use for their browsers.

A sample template

For the record, let's build a simple template that will work with PCProfiler. What will it contain? We'll stick with a form that holds only two things: a character name, and a character age. We'll also handle the age input's onChange event to check that the age is numeric. The following shows the contents of MySampleTemplate.pcpt. Create the file in a text editor, and save it to PCProfiler's Templates directory.
.\MySampleTemplate.pcpt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type
    content="text/html; charset=iso-8859-1">

<SCRIPT language=JavaScript
    src="./MySampleTemplate/MyScript.js">
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Name: <INPUT type=text name=MyName>
<BR>Age: <INPUT type=text name=MyAge onChange="CheckAge()">
</FORM>
</BODY>
</HTML>
You also need to create the script file. In the Templates folder, create a new folder called MySampleTemplate and in the new folder, create the file MyScript.js. The contents are listed below:
.\MySampleTemplate\MyScript.js
function CheckAge()
{
    var age = parseInt(document.all.MyAge.value);
    if (isNaN(age))
        alert("You must enter a numeric age!")
}
With all this done, you should be able to load up PCProfiler, and you'll find MySampleTemplate available in the list of templates. Enter some data, save it, and quit. Then restart PCProfiler, and you should be able to load up your data. It's that easy.

Note that no submit button is created. The main FORM element doesn't even have an action or method member specified. The form itself, is simply a holder for all the elements that make up the template document.