by Shamir Dasgupta
Scripting languages such as Visual Basic Script and JavaScript have transformed the Web into a dynamic environment that now supports sophisticated client/server applications. If you’re a developer who uses a lot of scripting on your Web site, you know that the best code you can write for your application is the code you won’t have to rewrite. The “scriplet” technology lets you reuse script that you’ve already written and add even more functionality to it—without altering the original code.
Internet Explorer 4.0 currently supports scriptlets on all platforms. In this article, we’ll show you how to write and implement scriptlets for your Web site. First, though, let’s explore the underlying technology behind scriptlets.
In a nutshell, a scriptlet is a Web component that you can write using HTML and scripting, which takes full advantage of the capabilities of Dynamic HTML (DHTML). Scriptlets are based on Win32 Component Object Model (COM), so you can use them to interact with other applications that support COM. On any platform, a scriptlet is just a Web page created with HTML; however, on a Win32 platform, a scriptlet becomes a COM object as well.
As a Web author, you’ll find some definite advantages to using scriptlets. In the past, for example, to reuse code you’d have to cut and paste your code and then customize it for each implementation. With scriptlets, you can create your code once and then reuse it or let others reuse it in multiple Web pages. And since scriptlets are just HTML and scripts, they’re lightweight and quick to download.
A scriptlet exposes only the global variables, procedures, and functions you want exposed. To expose any variable or function, all you have to do is use a prefix of “public_” on it . Any global variable with the “public_” prefix becomes a readable and writeable property of the scriptlet.
When it comes to event-handling, a scriptlet has an onscriptletevent in addition to the normal Windows events. onscriptletevent also has two parameters: a string and an arbitrary object. An event handler can select how to respond based on the string being passed. You can include additional detail about the event itself in the object parameter.
You name your scriptlets with an HTM (normal HTML page) or an ASP (Active Server Page) extension and then implement the scriptlet on a page with an <OBJECT> tag just like you would an ActiveX Control. However, unlike ActiveX Controls, scriptlets don’t use a CLSID (Class ID), but instead rely on a simple MIME entry like this:
<OBJECT ID="MyScriptlet" type="text/x-scriptlet" data="MyScriptlet.htm">
</OBJECT>Now that we’ve explained how they work, let’s create and implement a simple scriptlet.
For our example, we’ll implement a simple marquee scriptlet within a sample Web page. First we’ll write the marquee scriptlet using simple HTML and JavaScript. Our scriptlet will display a scrolling block of text moving from left to right. Once we’ve completed the scriptlet, we’ll implement it on a sample Web page using the <OBJECT> tag.
When we’re finished, our sample page will look like the one in Figure A. Let’s start by creating the scriptlet.
Figure A
Our marquee scriptlet displays a scrolling message.
Using an HTML editor, begin a new HTML document. Start the JavaScript with the <SCRIPT> tag on the <HEAD> section as we have here:
<html> <head>
<title>Scrolling scriptlet</title>
<script language="JavaScript">
<!--Then, declare the variables and the Public description as shown here:
var maxLeft = 700;
var currentLeft;
var startLeft = 200;
public_description = new MyScriptlet;Notice that we’ve used a “public_” prefix to describe the function MyScriptlet() since we want its properties exposed. Next, create the MyScriptlet() function that defines the marquee style, with the lines:
function MyScriptlet(){
this.put_foreColor = put_foreColor;
this.put_font = put_font;
this.put_fontSize = put_fontSize;
this.put_fontStyle = put_fontStyle;
this.put_text = put_text;
this.put_farPoint = put_farPoint;
this.put_startPoint = put_startPoint;
}Now define the functions for each attribute in the MyScriptlet() function asfollows:
function put_foreColor(sCol){
theDiv.style.color = sCol;
}
function put_font(sfont){
theDiv.style.fontFamily = sfont;
}
function put_fontSize(ssize){
theDiv.style.fontSize = ssize;
}
function put_fontStyle(sstyle){
theDiv.style.fontStyle = sstyle;
}
function put_text(text){
theDiv.innerText = text;
}
function put_farPoint(farLeft){
maxLeft = farLeft;
}
function put_startPoint(startPoint){
startLeft = startPoint;
}At this point we need to create the main scrolling function with the lines
function scrollMessage()
{
if (currentLeft >= maxLeft)
{
theDiv.style.left = -startLeft;
}
currentLeft = theDiv.style.posLeft;
currentLeft += 1;
theDiv.style.left = currentLeft;
window.setTimeout('scrollMessage()', 10);
}We’re now finished with the marquee function and are ready to define the container theDiv that will hold our text message. But first, close out the <SCRIPT> tag with the following lines of code:
// -->
</script>
</head>To create the container, we’ll simply use the Dynamic HTML <DIV> tag and define the style attribute necessary in the MyScriptlet() function we created earlier. The following lines of code will do the trick:
<div id=theDiv style="position:absolute; font-color: green; size: 14; font-family: Trebuchet, Arial; font-weight: bold; width:100%">
Hello Microsoft Web Builder Visitors!
<br>
<a href="http://mswebbuilder.com">
Click here
</a> to go to our site!<br>
</div>As you can see, we’ve created a fairly simple container with text and a text link. We have one more task left to do: Provide a way to load the scrolling function when the page loads. For this final step, simply modify the <BODY> tag, so it reads
<body onload="scrollMessage()" bgcolor="white">That’s it! We’re finished with this document. You’ve just created your first scriptlet! Next, we’ll create a sample Web page and implement our scriptlet—but first save this document as MARQUEE.htm.
Start a new HTML document and insert an <OBJECT > tag in the body section as we have here:
<html>
<head>
<title>Scriplet Testing</title>
<STYLE type="text/css">
<!--
BODY {font-size: 10pt; color: #000000; font-family: Verdana, Arial, Helvetica;z-index:1;}
P {font-size: 10pt; color: #000000; font-family: Verdana, Arial, Helvetica;z-index:1;}
H1 {font-size: 20pt; color: #CC0000; font-family: Verdana, Arial, Helvetica;z-index:1;}
-->
</STYLE>
</head>
<body bgcolor="white">
<h1>Web Builder Scriptlet Test</h1>
<p>The following Marquee effect is created with a scriptlet</p>
<object></object>Now add the scriptlet by modifying the <OBJECT> tag, like this:
<OBJECT ID="headlines" STYLE="position:absolute; width:80%; height:70; top:120; left:50; color: white;" type="text/x-scriptlet" data="marquee.htm">
</OBJECT>At this point, you may add any additional graphics or text you feel necessary. Remember to adjust the TOP attribute within the STYLE parameter to fit your text properly. Save the document as MIT.htm and open it in Internet Explorer. The result should look something like Figure A: You should see the marquee scrolling across the page.
By incorporating scriptlets on your Web pages, you can significantly cut development time and let others reuse your code more efficiently. In this article, we’ve shown how scriptlets can help you take advantage of Dynamic HTML’s capabilities.
Shamir Dasgupta is technical editor of Microsoft Web Builder and Active Server Developer's Journal, both publications of The Cobb Group.
Copyright © 1998 The Cobb Group, a division of Ziff-Davis Inc. The Cobb Group and The Cobb Group logo are trademarks of Ziff-Davis Inc. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of Ziff-Davis is prohibited.