Runs in Microsoft Internet Explorer 4+: Yes
Runs in Netscape Navigator: No
By now, most developers should understand the benefits of reusability in code. Writing code in a generic way lets you more easily reuse it in another project. Unfortunately, I see far too many developers writing code and building projects with a "right now" attitude—without planning for the future. Yes, there are cases where you need to write code that is very specific to the project in which you are working, but many times it is possible to write procedures or objects that can easily be reused. One way to make your Web pages more reusable is by turning them into client-side scriptlets.
IE4 client-side scriptlets function similarly to ActiveX controls in that they provide a reusable user-interface component. The difference is that IE4 scriptlets can be built from pure HTML so they are much simpler to create and can be quite powerful. In addition, you can use client-side scripting to enhance the functionality of these components. Creating and using an IE4 scriptlet requires just a couple of steps.
First, create an HTML page to use as the scriptlet. This page can include standard HTML. Optionally, include client-side scripts in the scriptlet that you expose to the parent. Next, create a second HTML page that will be used as the parent page, which hosts the scriptlet. You can think of the scriptlet as sitting on top of the parent. Add an <OBJECT> tag to the parent page to instantiate the scriptlet.
When you create an HTML page that will be used as the scriptlet, you can use any of the standard HTML tags that you would use to create any other HTML page. For example, <HTML>, <HEAD>, <BODY>, and other tags are all used in the scriptlet. Typically, you might include HTML textboxes, listboxes, and other user-interface elements.
You can also include client-side script to give the page life. You know about client-side script and what it can do, but scriptlets add an extra layer of functionality. You can call the scripts in one page (the scriptlet) from code running in another page (the parent). To expose a procedure, simply place the test "public_" before the name of the procedure in the scriptlet that you wish to expose. For example, this JavaScript function uses this naming convention.
function public_SetDefaults()
{
// DO STUFF IN HERE
}
This function would be defined in the scriptlet, but called from within the parent page, not from within code running in the scriptlet. Any function that is included in the scriptlet, and has "public_" at the start of function names, can be called by code running in the parent. Any function that is included in the scriptlet and does not include "public_" at the start of function names will be hidden from code running in the parent. For example, this function is also in the scriptlet but it cannot be called from the parent page, as can public_SetDefaults().
function ShowHideEditControls()
{
// DO STUFF IN HERE
}
Now let's discuss the parent page and how to instantiate the scriptlet and call public (exposed) procedures. You use the <OBJECT> tag to create the run-time instance of the scriptlet. You may recognize the <OBJECT> tag if you have written pages that instantiate ActiveX controls or other objects on an IE4+ Web page. The syntax for using the <OBJECT> tag to instantiate the scriptlet is as follows:
<OBJECT height=400 id=OBJECT2 style="HEIGHT: 400px; WIDTH: 400px"
type=text/x-scriptlet width=400 VIEWASTEXT>
<PARAM NAME="URL" VALUE="AddNewItemBox.htm">
<PARAM NAME="Scrollbar" VALUE="0">
</OBJECT>
You can put this <OBJECT> tag just about anywhere you want within the bounds of the <BODY></BODY> tags of your parent HTML page. The scriptlet will run within an invisible rectangle on your parent page. The height parameter defines the height of that rectangle. The id parameter is important as it defines the run-time name of the scriptlet. The code that runs in the parent page will use this name to reference the scriptlet when calling those functions exposed by the scriptlet.
You can use the style parameter to define the values of several DHTML style attributes. Notice that the HEIGHT parameter is one of the style attributes that are configurable. This DHTML HEIGHT property will override the standard height property. The type parameter will always be of the value "text/x-scriptlet". This lets IE know what type of object to expect.
The width parameter defines the width of the rectangle in which the scriptlet will run, but can be overridden by the DHTML style attribute. The word VIEWASTEXT is not required but if you use Microsoft Visual InterDev (VID) to create your parent page, that word will tell the VID code editor to display the <OBJECT> tag as text, rather than graphically.
The PARAM tag lets you define the values of properties that are unique to scriptlets. You can apply all of the properties mentioned (height, id, style, and so on) to most all objects. The properties that use the <PARAM> tags are unique to scriptlets. They would most likely have no meaning to other objects, such as ActiveX controls, except by coincidence. This tag defines the value of the "URL" property, which identifies the page that will be used as a scriptlet.
<PARAM NAME="URL" VALUE="AddNewItemBox.htm">
The other tag tells the scriptlet if it should display a scrollbar when the scriptlet is larger than the rectangle in which it sits.
<PARAM NAME="Scrollbar" VALUE="0">
This scroll bar enables scrolling of the scriptlet. The value of "0" tells the scriptlet that there will be no scollbar. Setting the value to "1" would show a scrollbar. That's all there is to defining the <OBJECT> tag of a client-side scriptlet. Here's how to use the functions that the scriptlet exposes. This line shows how to call a function defined in a scriptlet from a parent.
OBJECT2.SetDefaults()
The id of the run-time instance of the scriptlet is concatenated with a period (.) and the name of the function (without the "public_" prefix). Any parameters to the function would be passed in as normal. Remember: define a public function in a scriptlet by naming it with the word "public_", but call that function without the word "public_".
Building your applications in a generic fashion will help make them reusable in other projects. Using scriptlets is an easy way to add reusable user-interface objects to your IE4+ Web applications. Now you know some of the basics involved in getting your own client-side scriptlet running. The associated code includes a sample page that will open a new browser window containing a client-side scriptlet that you can use to control the contents of a listbox. You also have the option to have the data be generated from server-side script if you are running the test pages on a Web server that has ASP properly installed.
Download the code for this article.
