A scriptlet preserves the same structure as an HTML page, has an <HTML> signature, a <HEAD> section for the title, a <BODY> for the user interface and the actual content, and—above all—one, or more, <SCRIPT> tags. As explained earlier, at the moment there are no tools available to offer a predefined infrastructure, so you need to write them manually—tag after tag.
In the next chapter, however, we will build a special stand-alone wizard that lets you specify a few options and produce a perfectly functional scriptlet in a mere moment. A first example of such a wizard is available from:
http://www.microsoft.com/mind
with the source code for the January 1998 issue of the Microsoft Interactive Developer magazine. I wrote that wizard as a companion application for the Cutting Edge column, which was dedicated to scriptlets that month.
The wizard we'll see next is a big improvement on that one and, since it's a stand-alone executable module, you can use it outside the Developer Studio 97 environment.
In the rest of this section, you will learn about setting up a bare-bones scriptlet and hosting it in an HTML page. From then on all our efforts will address every possible way of writing smart and commercially sound scriptlets.
The first tag you meet is <HTML>. Usually, there is no need to add any attributes to it. For scriptlets, however, we recommend you always add an ID property so that you can refer to the entire page if necessary.
A skeleton scriptlet looks like this:
<html id=MyPage>
<head>
<title>Our First Scriptlet</title>
</head>
<script language="JavaScript">
public_description = new CreateFirstScriptlet;
function CreateFirstScriptlet() {
this.TellMeSomething = HelloWorld;
}
function HelloWorld() {
alert( "Hello, World!" );
}
</script>
<body>
</body>
</html>
As you can see, the <HEAD> section includes a title string and at the bottom of the code there's an empty body. If you don't need them, feel free to remove them. Your scriptlet won't suffer as a result of this. The scriptlet outlined above has just one method called TellMeSomething. This method is implemented via a JavaScript function called HelloWorld.
That's all, at least for this very basic sample. To show some other features in action, a straightforward enhancement we could do consists of adding a property to set and retrieve the background color of the scriptlet's area. In this way, we'll make use of properties, global variables and one-time initialization. We've also added the simplest body in the world. Let's see now how our previous code changes.
<html id=MyPage>
<head>
<title>Our First Scriptlet</title>
</head><SCRIPT language=VBScript for=window event=onload>
document.bgColor = mBackColor
</SCRIPT>
<script language="Javascript">
public_description = new CreateFirstScriptlet;
var mBackColor = "lightcyan";
function CreateFirstScriptlet() {
this.get_BackColor = get_BackColor;
this.put_BackColor = put_BackColor;
this.TellMeSomething = HelloWorld;
}
function get_BackColor() {
return mBackColor;
}
function put_BackColor( cBackColor ) {
mBackColor = cBackColor;
document.bgColor = mBackColor;
return 1;
}
function HelloWorld() {
alert( "Hello, World!" );
}
</script>
<body>
Hello, World!
</body>
</html>
mBackColor is a global variable we use to keep track of the corresponding BackColor property. Each property, in fact, needs a storage support that makes it persistent, at least through the current session. This is always true if the property is available for reading. It's not necessarily true if the property is write-only. mBackColor is initialized with an HTML color string, say "lightcyan". Of course, global variables must be declared outside of any function's body. The var keyword is just good programming practice.
To make BackColor public and, therefore, callable outside the Scriptlet, we need to add a couple of lines to the scriptlet's constructor.
function CreateFirstScriptlet() {
this.get_BackColor = get_BackColor;
this.put_BackColor = put_BackColor;
this.TellMeSomething = HelloWorld;
}As stated before, if you want a read-only property then you need only cut off the Put function.
this.put_BackColor = put_BackColor;You can do the opposite if you, for example, want a write-only attribute.
Let's take a look at how those Get/Put functions are implemented. The code for get_BackColor is self-explanatory. put_BackColor is, however, worth a few words.
function put_BackColor( cBackColor ) {
mBackColor = cBackColor;
document.bgColor = mBackColor;
return 1;
}
It saves the new color setting into the global variable mBackColor and applies the changes immediately.
document.bgColor = mBackColor;
The above line just sets the background color for the scriptlet, through the standard bgColor property of the scriptlet's document object.
A scriptlet almost always needs a one-time initialization—a series of tasks carried out while the scriptlet itself is loading. A reasonable way of doing this is via the window.onload event.
<SCRIPT language=VBScript for=window event=onload>
document.bgColor = mBackColor
</SCRIPT>
In this way, we set the document background color from the beginning. At the time of this call, mBackColor already holds its value.
What we've seen so far is a simple, and basically useless, scriptlet that does, however, involve almost all of the features you need to know about. In particular, it lends itself very well to demonstrating the ideal skeleton of any scriptlet. A few things are still missing. Among them, we can list the event handling and the ambient properties—that is the environment the container exposes to the scriptlets. Both of these topics will be the subject of detailed chapters to follow.
For now, let's consider a third missing topic: how a scriptlet can make its own DHTML object model public.
As mentioned earlier, a scriptlet is viewed through a special container. This container recreates a DHTML object model on top of the scriptlet's source code. This means that a scriptlet holds its own document object, which is different from the document object of the hosting page.
A scriptlet can expose custom properties and methods that relate to its specific activity. In addition, it may also expose the standard object model, or a portion of it.
For example, a scriptlet can make its document public through the following code:
function CreateFirstScriptlet() {
this.get_BackColor = get_BackColor;
this.put_BackColor = put_BackColor;
this.TellMeSomething = HelloWorld;
this.MyDocument = window.document;
}
MyDocument is a read/write property that, in this case, evaluates to an object. Through it you can navigate the scriptlet's internal document object model and, say, change its title or its background color.
You can download or run this sample (first.zip) from our Web site:
http://rapid.wrox.uk.co/books/138X