Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Figure 26.14 shows what the document looks like when the Blur filter effect is selected. This is implemented by using the onClick method of one of the buttons, as shown here:

<INPUT CLASS=clsbtn VALUE="Blur" TYPE=BUTTON NAME=BLUR
   onClick="theImg.style.filter = ‘blur(direction=45,strength=15,add=0,enabled=1)’;
            progress.innerText = ‘explanatory text…’;">

The different attributes of this <INPUT> tag do the following:

•  The CLASS attribute attaches a style to the label of the button, enabling you to change its appearance. (This was not possible in earlier versions of Internet Explorer.)

•  The TYPE, VALUE, and NAME attributes are the familiar attributes used for HTML form elements, defining the type of element, label, and object name, respectively.

•  The onClick attribute attaches the inline JavaScript shown so that it gets executed whenever the button is clicked. The inline JavaScript does two things. First, it attaches the Blur filter to the style sheet filter property for the region named theImg (as defined in Listing 26.9). Second, it sets the innerText property of the region named progress, which displays explanatory text in that region for the filter selected.

A number of filter effects are possible. It is even possible to combine the effects of more than one filter within a given region, or to apply a filter and animate it through JavaScript. Figure 26.15 shows a snapshot of an animated sine wave filter. This is achieved by applying the Wave filter, and then dynamically changing its parameters with a JavaScript, as shown in this code excerpt:

FIGURE 26.14  Filter effects are quickly applied by the client browser and save the need for creating graphic images to achieve the same look.

FIGURE 26.15  Because you can dynamically change the filter applied to a given region, it is very easy to quickly achieve an assortment of effects.

function animatwav() {
   if (wavable) {
      wavphase = (wavphase + 10) % 100;
      if (theImg.style.filter == “wave(freq=4,strength=8,phase=0,
⇒lightstrength=25,add=1,enabled=1)") {
         theImg.filters[0].phase = wavphase;
      }
      window.setTimeout(“animatwav()", 0400, “JavaScript");
   }
}

Microsoft’s Scriptlets

With version 4 of Internet Explorer, Microsoft also introduced another new technology known as Scriptlets. Microsoft calls Scriptlets “components for the Web.” Although not technically a part of Dynamic HTML, Scriptlets enable you to create small, reusable Web applications that can be used in any Web page. Scriptlets are created using HTML, scripting, and Dynamic HTML. To include them in an HTML document, use the <OBJECT> tag.

What is meant by “Web component?” A software component is a self-contained piece of software designed to be used within a container application through a clearly defined interface. ActiveX Controls and Java applets represent two examples of Web objects that act as components within a browser. Until now, it has been possible to obtain some component functionality with HTML scripting by using the SRC attribute of the HTML <SCRIPT> tag. You could also achieve some measure of reuse either by making use of server-side includes or by simply cutting and pasting from one document to another.

Microsoft’s Scriptlets add more complete component architecture for reusing scripted HTML documents and applications within other documents. Using Scriptlets as components in your HTML documents offers the following benefits:

•  Scriptlets are isolated from the surrounding HTML document, except through a predefined interface. This way, errors that occur elsewhere in the document do not affect the Scriptlet, and vice versa. This simplifies the development process of both the Scriptlet and the containing document.

•  A second benefit of Scriptlet Web components is that they can be easily reused within other HTML documents. A component can be designed, developed, and debugged one time, and then can be easily reused without further investment of time.

•  The final benefit of Scriptlet Web components is that you can use Scriptlets to interact with any other Web component developed using any other compatible language or technology. In this way, Scriptlets (components developed using HTML and scripts), Java applets, and ActiveX Controls can work together without the need to recode them into a common language.

	ON THE WEB
	http://www.microsoft.com/scripting/ This Web site contains the latest information about all of Microsoft’s scripting languages, including Scriptlets.

Creating Scriptlets

Scriptlets are created like any other HTML document, with HTML and scripts. Scriptlet properties and methods are made accessible to containing HTML documents by prefacing them with public. For instance, if the following appears in the Scriptlet:

<SCRIPT LANGUAGE=“JAVASCRIPT”>
public_Value = “Hello”;
function public_myFunction(par1,par2,…) {
   ...
}
</SCRIPT>

and if the Scriptlet is included in an HTML document with <OBJECT ID="MyScriptlet">, the property and method shown in the preceding code can be accessed using this:

MyScriptlet.Value = “Goodbye”;
x = MyScriptlet.myFunction();