Scriptlets

Scriptlets are essentially small Web pages that can be used as components in other Web pages or applications. They conform to a set of standards that provide a standardized way for the page or application that is hosting the scriptlet to access the properties, methods, and other content that the developer makes explicitly available. Scriptlets can be used by any application that supports ActiveX controls. (DHTML Behaviors, covered later in this chapter, are similar to scriptlets but offer improved flexibility and backward compatibility.)

One advantage of using a scriptlet is that you are creating a reusable code module that you can incorporate into other Web pages. For example, suppose you are developing a Web site whose pages all contain user interface (UI) components (such as a toolbar or a button bar) that look alike but behave differently, depending on where they are used. You might create the UI components as a scriptlet and then access the appropriate properties or methods required for each page.

NOTE
Internet Explorer versions 4.0 and later support scriptlets on all platforms, including Windows, Macintosh, and UNIX. No version of Netscape Navigator currently supports scriptlets. If you try to view a page containing a scriptlet in Navigator, the page is simply rendered without the scriptlet.

Adding a scriptlet to a Web page is accomplished by simply creating an appropriately sized <OBJECT> tag with a TYPE attribute of text/x-scriptlet and a DATA attribute that contains a URL pointing to the target scriptlet, as the following code demonstrates.

 <OBJECT TYPE="text/x-scriptlet"   WIDTH="50" HEIGHT="80" DATA="myfile.htm">   </OBJECT> 

Creating a scriptlet is also simple—it is simply a Dynamic HTML page. All you need is a basic understanding of Dynamic HTML and scripting (and since you are this far along in this book, you have a fair amount of experience with both). In Code Listing 22-2, we have created an HTML page that we will use as a scriptlet in another page. The browser displays this page as a line of text. Note that even though the page contains script, no mechanism exists to call that script.

Code Listing 22-2.

 <HTML> <HEAD> <TITLE>Listing 22-2</TITLE> <SCRIPT LANGUAGE="JavaScript"> function public_chngText(sNum, sText){   label.innerHTML=""   for (var i=1; i<=sNum; i++){     label.innerHTML+="<SPAN STYLE=`font-size:"+i*5+"`>"+sText+" </SPAN>"   } } </SCRIPT> </HEAD> <BODY BGCOLOR="#CCCCCC"> <B><SPAN ID="label">Text</SPAN></B> </BODY> </HTML> 

To use functions and properties from a scriptlet in the container HTML page, you must identify them as public. There are two ways to do this: by creating a public_description object or by prefacing item names with the text public_. In Code Listing 22-2, we use the second method, as in public_chngText. Any page that hosts the scriptlet can then refer to the item through dot notation as though it were a child item of the scriptlet—for example, myScriptlet.chngText. The public_ prefix is excluded when accessing the item from the host page.

Another option is to create a public_description object that holds all aspects of the scriptlet that we want to be accessible. These are very similar to constructor functions in JScript (discussed in Chapter 8). This approach is convenient because all public parts of the scriptlet can be found in one location. We could have created a public_description object for Code Listing 22-2 as follows:

 var public_description=new InitScriptlet() function InitScriptlet() {   this.bgcolor=document.bgColor   this.chngText=chngText } 

If we had used this public_description object, we would have had access to the background color of the scriptlet in addition to the chngText function. Prefacing functions and properties with public_ is not necessary when using a public_description object.

Code Listing 22-2 includes a JScript function that repeats a specified bit of text a specified number of times on screen and increases the size of the text with each repetition. When this page is displayed by itself, the user sees only the default text that is coded in the SPAN element, Text. Because the script is not activated, the default text is not changed.

Code Listing 22-3 invokes the scriptlet in three places, using the OBJECT element. Figure 22-1 shows the results.

Code Listing 22-3.

 <HTML> <HEAD> <TITLE>Listing 22-3</TITLE> </HEAD> <BODY> <OBJECT ID="TextRepeater" WIDTH="500" HEIGHT="100"   TYPE="text/x-scriptlet"  DATA="lst22-2.htm"> </OBJECT><P> <FORM NAME="F1"> Number of repeats: <INPUT TYPE="Text" NAME="repeats" VALUE="1" SIZE="1"> Display text: <INPUT TYPE="text" NAME="newtext" VALUE="Text"> <INPUT TYPE="button" VALUE="Change"   ONCLICK="TextRepeater.chngText(F1.repeats.value, F1.newtext.value)"> </FORM> <OBJECT ID="TextRepeater2" WIDTH="200" HEIGHT="100" ALIGN="left"   TYPE="text/x-scriptlet"  DATA="lst22-2.htm"></OBJECT> <OBJECT ID="TextRepeater3" WIDTH="275" HEIGHT="100"   TYPE="text/x-scriptlet"  DATA="lst22-2.htm"></OBJECT> <SCRIPT FOR="window" EVENT="onload" LANGUAGE="JavaScript">   TextRepeater2.chngText(4, `Sample')   TextRepeater3.chngText(6, `Code') </SCRIPT> </BODY> </HTML> 

click to view at full size.

Figure 22-1. The button created on the second page allows the public function to be called from outside the scriptlet.

In Code Listing 22-3, the first instance of the scriptlet loads in its default state. Two text fields and a button allow the content of this first scriptlet to be changed by the user. The second two instances of the scriptlet are changed as soon as the page is loaded, through the script block at the end of the listing. (The block could have gone in the header with the same result.) This script block calls the chngText function of each scriptlet to specify text and the number of repeats.

A scriptlet can pass events to the host page by calling window.external.bubbleEvent(). This method simply passes the current event to the host. Scriptlets can pass custom events through the window.external.raiseEvent method and also let you create your own context (right-click) menus. You can learn more about custom events, context menus, and scriptlets as a whole at the SBN Workshop Web site. On the companion CD, see Workshop (References); Component Development; DHTML Scriptlets. Online, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD, and choose DHTML Scriptlets.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net