-- text figures

Figure 2 Listener Scriptlet


<html>
<body>

<script language="JScript">

// Declare the object interface
public_description = new CreateScriptlet;
var InScriptlet = (typeof(window.external.version) == "string")

// Vars that match properties
/*---------------------------------*/
mBkgndColor = "#C0C0C0";
mDescription = "";


/*---------------------------------*/
function CreateScriptlet() {

// This function define the scriptlet interface in terms of 
// properties, methods and events.
    
    // Properties
    this.put_BackgroundColor = put_BackgroundColor;
    this.get_BackgroundColor = get_BackgroundColor;

    this.put_Description = put_Description;
    this.get_Description = get_Description;

///////////////////////////////////////////////////////
   
    this.Clicked = DoClicked;

///////////////////////////////////////////////////////
}


/*---------------------------------*/
function put_Description( sText ) {
    
    mDescription = sText;
    DoSetText( mDescription );
    return 1;
}

/*---------------------------------*/
function get_Description() {
    
    return mDescription;
}

/*---------------------------------*/
function put_BackgroundColor( color ) {
    
    mBkgndColor = color;
    document.bgColor = mBkgndColor;
    return 1;
}

/*---------------------------------*/
function get_BackgroundColor() {
    return mBkgndColor;
}

/*---------------------------------*/
function DoSetText( sDescription )  {
    text.innerHTML = sDescription;
}

/*---------------------------------*/
function InitScriptlet()  {
    put_BackgroundColor( mBkgndColor );
}

////////////////////////////////////////////////////////////

/*---------------------------------*/
function DoClicked() {
    put_BackgroundColor( "red" );
    DoSetText( "1" );
}

////////////////////////////////////////////////////////////
</script>

<script language="JScript" for="window" event="onload">
    InitScriptlet();
</script>


<span id="text"></span>

</body>
</html>

Figure 3 HotImage Scriptlet


<html id=MyPage>
<head><title>HotImage Scriptlet</title></head>

<body>
<script language="VBScript" for="window" event="onload">
    InitHotImage 
</script>

<script language="VBscript" for="image" event="onmouseover">
    if mEnabled <> 0 then
       DoSetImage mHotImageName 
       if InScriptlet Then
      window.external.bubbleEvent
       end if
    end if
</script>

<script language="VBscript" for="image" event="onmouseout">
    if mEnabled <> 0 then    
      DoSetImage mImageName 
      if InScriptlet then    
        window.external.bubbleEvent
      end if
    end if
</script>

<script language="VBscript" for="image" event="onclick">
    if InScriptlet then

      EnumScriptlets

      window.external.bubbleEvent
    end if
</script>

<script language="VBscript">


' Initialize the control
' -------------------------------------------------------
Sub InitHotImage
  document.bgColor = "white"
End Sub

' Insert the image in the document
' -------------------------------------------------------
Sub DoSetImage( sImage )
  Set coll = document.images
  coll.item(0).setAttribute "src", sImage
  coll.item(0).setAttribute "alt", mDescription
End Sub

' Set a descriptive text for the image
' -------------------------------------------------------
Sub DoSetText( sDescription )

  Set coll = document.images
  coll.item(0).setAttribute "alt", sDescription

End Sub
</script>

<script language="JavaScript">

// declare the object interface
public_description = new CreateHotImage;
var InScriptlet = (typeof(window.external.version) == "string")

// Vars that match properties
/*---------------------------------*/
mImageName = "";
mHotImageName = "";
mEnabled = 1;
mBkgndColor = "#C0C0C0";
mDescription = "";
mInterface = "";

/*---------------------------------*/
function CreateHotImage() {

// This function define the scriptlet interface in terms of 
// properties, methods and events.
    
    // Properties
    this.put_Image = put_Image;
    this.get_Image = get_Image;

    this.put_BackgroundColor = put_BackgroundColor;
    this.get_BackgroundColor = get_BackgroundColor;

    this.put_Description = put_Description;
    this.get_Description = get_Description;

    this.put_HotImage = put_HotImage;
    this.get_HotImage = get_HotImage;

    this.put_Enabled = put_Enabled;
    this.get_Enabled = get_Enabled;

    this.put_Interface = put_Interface;
    this.get_Interface = get_Interface;
}

/*---------------------------------*/
function put_Enabled( bYes ) {   
   mEnabled = bYes;
   return 1;
}

/*---------------------------------*/
function get_Enabled() {   
   return mEnabled;
}


/*---------------------------------*/
function put_Interface( sIntf ) {   
   mInterface = sIntf;
   return 1;
}

/*---------------------------------*/
function get_Interface() {
   return mInterface;
}

/*---------------------------------*/
function put_Description( sText ) {  
   mDescription = sText;
   DoSetText( mDescription );
   return 1;
}

/*---------------------------------*/
function get_Description() {   
   return mDescription;
}

/*---------------------------------*/
function put_BackgroundColor( color ) {   
   mBkgndColor = color;
   document.bgColor = mBkgndColor;
   return 1;
}

/*---------------------------------*/
function get_BackgroundColor() {   
   return mBkgndColor;
}

/*---------------------------------*/
function put_Image( sImageName ) {
   mImageName = sImageName;
   DoSetImage(mImageName);
   return 1;
}

/*---------------------------------*/
function get_Image() {
  return mImageName;
}

/*---------------------------------*/
function put_HotImage( sImageName ) {
   mHotImageName = sImageName;
   return 1;
}

/*---------------------------------*/
function get_HotImage() {
   return mHotImageName;
}

/*---------------------------------*/
function EnumScriptlets() {
   parentDoc = window.parent.document;
   sctColl = parentDoc.all.tags("object");
   
   for( i=0; i<sctColl.length; i++ )  {
      obj = sctColl.item(i);
      if( obj.getAttribute( "type" ) == "text/x-scriptlet" ) {
          if( mInterface == "XClicked2" ) {
            if( typeof(obj.Clicked2) != "undefined" ) 
               obj.Clicked2();
          }
          else {
            if( typeof(obj.Clicked) != "undefined" ) 
               obj.Clicked();
          }
      }  
   }
   return;
}

</script>
<img id="image" src="" alt=""></body></html>

Figure 4 Scriptlet Host Page


<html>
<head>
<title>Main Page</title>
</head>

<script language=JScript for=window event=onload>
    Button1.Image = "button1g.bmp";
    Button1.HotImage = "button1.bmp";
    Button2.Interface = "XClicked";

    Button2.Image = "button2g.bmp";
    Button2.HotImage = "button2.bmp";
    Button2.Interface = "XClicked2";
</script>

<body>
<object id="S1" data="1.htm" type="text/x-scriptlet"></object>&nbsp;
<object id="S2" data="2.htm" type="text/x-scriptlet"></object>
<object id="S3" data="3.htm" type="text/x-scriptlet"></object>&nbsp;
<object id="S4" data="4.htm" type="text/x-scriptlet"></object>
<hr>
<object id="Button1" data="hotimage.htm" type="text/x-scriptlet"></object>
<object id="Button2" data="hotimage.htm" type="text/x-scriptlet"></object>
</body>

</html>

Figure 9 HideOff Scriptlet


<HTML ID=MyPage>
<HEAD>
<TITLE>HideOff Scriptlet</TITLE>
<STYLE>
    BODY {
        background-color: "#C0C0C0";
        margin: 2;
    }
</STYLE>
</HEAD>

<SCRIPT language=JScript for="window" event=onload>
    InitHideOff();
</SCRIPT>
<SCRIPT language=JScript for="menuItem" event=onclick>
    DoClick( window.event.srcElement );    
</SCRIPT>
<SCRIPT language=JScript for="img_close" event=onclick>
    DoShow(); 
</SCRIPT>
<SCRIPT language=JScript for="img_open" event=onclick>
    DoShow(); 
</SCRIPT>
<SCRIPT language=JScript for="menuItem" event=onmouseover>
        if( window.event.srcElement.id=="menu"    ||
                window.event.srcElement.id=="item"    )
            DoSetHotState(window.event.srcElement);
</SCRIPT>
<SCRIPT language=JScript for="menuItem" event=onmouseout>
        DoSetNormalState(window.event.srcElement);
</SCRIPT>

<SCRIPT language=JScript>

//----------------------------------------------------
    function InitHideOff()    {
        MyPage.style.pixelWidth = 300;
        m_Size = MyPage.style.pixelWidth;
        m_High = MyPage.style.pixelHeight;
        hidden.style.setAttribute( "display", "none" );
    }

//----------------------------------------------------
    function DoSetHotState(e)    {
        e.style.fontFamily= m_fontFamily;
        if( e.id=="item" )    {
            e.style.fontSize = m_fontSize-5;
        }
        else 
            e.style.fontSize = m_fontSize;
        e.style.fontWeight = "bold";
        e.style.textDecoration = "underline";    
        e.style.color = m_hotColor;    
        e.style.cursor = "hand";
    }

//----------------------------------------------------
    function DoSetNormalState(e)    {
        e.style.fontFamily= m_fontFamily;
        if( e.id=="item" ) {
            e.style.fontSize = m_fontSize-5;
        }
        else 
            e.style.fontSize = m_fontSize;
        e.style.fontWeight = "";
        e.style.textDecoration = "";    
        e.style.color = m_foreColor;    
        e.style.cursor = "";
    }
</SCRIPT>

<SCRIPT language=JavaScript>
public_description = new CreateHideOff();
var InScriptlet = (typeof(window.external.version)=="string");
var m_Visible = 1;
var m_Size=0;
var m_nItems=0;
var m_nSubItems=0;
var m_fontFamily = "verdana";
var m_fontSize = 12;
var m_backColor = "#C0C0C0";
var m_foreColor = "black";
var m_hotColor = "blue";

//----------------------------------------------------
function CreateHideOff()    {
    this.put_Head = PutHead;
    this.ToggleShow = DoShow;
    this.addItem = DoAddItem;
    this.addItemList = DoAddItemList;
    this.SetStyle = DoSetStyle;
    this.SetColors = DoSetColors;
}
//----------------------------------------------------
function DoSetColors(sBkColor, sFrColor, sHiColor) {
    m_backColor = sBkColor;
    m_foreColor = sFrColor;
    m_hotColor = sHiColor;
    document.body.style.backgroundColor = m_backColor; 

    for( i=0; i<m_nItems; i++ )
        DoSetNormalState( menuItem(i));

    cItems = document.all("item");
    for( i=0; i<m_nSubItems; i++ ) {
        DoSetNormalState( cItems(i) );    
    }
}

//----------------------------------------------------
function DoSetStyle( sFont, nSize ) {
    m_fontFamily = sFont;
    m_fontSize = nSize;

    cItems = document.all("item");
    for( i=0; i<m_nSubItems; i++ ) {
        DoSetNormalState( cItems(i) );    
    }
}

//----------------------------------------------------
function DoAddItem( sText ) {
    if( arguments.length==1 && sText.length==0 ) {
            menuBar.innerHTML += "<hr>";            
            return;
    }

    sDnArr = "<img style=\"display:none\" id=arrow" + m_nItems + _
             " src=dnarr.gif>&nbsp;</img>" 

    sStyle0 = "\"font-Family:" + m_fontFamily + ";";
    sStyle1 = "font-Size:" + m_fontSize + ";";
    sStyle2 = "color:" + m_foreColor + "\"";
    sStyle = sStyle0 + sStyle1 + sStyle2;

    s0 = "<span id=menuItem style=" + sStyle + ">";
    s1 = "</span>";
    s2 = "";

    sStyle = "\"display:none;\""; 
    sDiv = "<br><DIV id=menuList" + m_nItems + " style=" + sStyle +"> </DIV>";


    sMenuItem = "<span pos=" + m_nItems +" id=menu>" + sText + "</span>";
    s = s0 + s2 + sDnArr + "<b>" + sMenuItem + "</b>" + sDiv + s1;

    menuBar.innerHTML += s;
    m_nItems ++;
    return m_nItems-1;
}

//----------------------------------------------------
function DoAddItemList(nParentItem, sItem) {
    s = "menuList" + nParentItem;
    div = document.all(s)
    div.innerHTML += "<span id=item>" + sItem + "</span><br>";
    div.style.marginLeft = 15;
    m_nSubItems ++;
    
    s = "arrow" + nParentItem;
    img = document.all(s);
    img.style.display = "";
}

//----------------------------------------------------
function PutHead(sText) {
    m_Head = sText;
    heading.innerHTML = sText;    
}

//----------------------------------------------------
function DoShow() {
    if( m_Visible==1 ) {
            content.style.setAttribute( "display", "none" );
            hidden.style.setAttribute( "display", "" );
            m_Visible = 0;
            MyPage.style.pixelWidth = 25
    }
    else {
            MyPage.style.pixelWidth = m_Size
            hidden.style.setAttribute( "display", "none" );
            content.style.setAttribute( "display", "" );
            content.style.height = m_High;
            m_Visible = 1;
    }
}

//----------------------------------------------------
function DoClick( e ) {    
    if( e.id=="menu" )    {
            s = "arrow" + e.pos;
            img = document.all(s);
            if( img.style.display == "none" )    {
                window.external.raiseEvent( "Clicked", e.innerText );
                return;
            }

            div = document.all( "menuList" + e.pos );
            if( div.style.display == "" )
                    div.style.display = "none";                        
            else
                    div.style.display = "";                        
    }
    else    {
            window.external.raiseEvent( "Clicked", e.innerText );
    }
}
</SCRIPT>

<BODY>
<DIV id=hidden>
    <TABLE>
    <TR>
        <TD valign=top >
        <img id="img_open" src="closed.gif" alt="Open the navigational bar">
        </TD>
    </TR>
    </TABLE>    
</DIV>

<DIV id="content">
    <TABLE cellpadding=2 height=100% width=100% border=0 >
    <TR>
        <TD valign=top>
            <span id=heading>HideOff Menu</span>
        <hr>
        <span id=menuBar>
        </span>
        </TD>
        <TD valign=top width=20>
        <img id="img_close" src="opened.gif" alt="Close the navigational bar">
        </TD>
</TR></TABLE></DIV>

</BODY></HTML>

Figure 11 HideOff Demo


<html>

<head>
<title>Demonstrating HideOff menu</title>
</head>

<script language="JavaScript" for="window" event="onload">
    navBar.Head = "<img src=topbar.jpg>";
    i = navBar.addItem("Internet");
    navBar.addItemList( i, "WinInet API" ); 
    navBar.addItemList( i, "Server-side programming" ); 
    navBar.addItemList( i, "Shell Integration" ); 
    
    i = navBar.addItem("Scripting");
    navBar.addItemList( i, "Scriptlets" ); 
    navBar.addItemList( i, "XML" ); 
    navBar.addItemList( i, "Dynamic HTML" ); 
    navBar.addItemList( i, "Behaviors" ); 

    navBar.addItem("");
 
    i=navBar.addItem( "Windows Shell" );
    navBar.addItemList( i, "Win32 API" ); 
    navBar.addItemList( i, "LightWeight API" ); 
    navBar.addItemList( i, "Shell Extension" ); 
    navBar.addItemList( i, "Namespace Extension" ); 

    navBar.SetStyle( "Verdana", 15);
    navBar.SetColors( "darkblue", "white", "yellow" );
</script>

<script language="JScript" for="navBar" event="onscriptletevent(n,o)">
    alert( "Clicked: "+o );
</script>


<body>

<!-- Heading -->

<table border="0" width="100%" bgcolor="#000000">
    <tr>
        <td align="left" width="30%">
            <img src="flag.GIF" WIDTH="314" HEIGHT="29">
        </td>
        <td align="right" width="70%">
            <big><em><strong>
            <font color="#FFFFFF" face="Arial">Expoware Soft&nbsp; </font>
            </strong></em></big>
        </td>
    </tr>
</table>


<!-- Yellow separator -->
<table border="0" width="100%" height="2" bgcolor="#FFCC00">
    <tr height="2">
        <td align="right" width="100%"></td>
    </tr>
</table>


<table border="0" bgcolor="#FFFFFF" height="100%" width="90%">
    <tr>

<!-- Inserting HideOff scriptlet ----------> 

     <td valign="top" height=100%>
     <object id="navBar" data="hideoff.htm" height="100%" type="text/x-scriptlet">
            </object>
        </td>

<!-- End of HideOff scriptlet ----------> 
        
        <td valign="top">
            <p align="left"><strong>
            <font face="Verdana"><big><big><u><big>D</big>ino</u><big> Esposito
                </big></big></big>
                &nbsp;&nbsp;&nbsp;</font></strong>
            </p>

            <hr>
            <p><big><font face="Verdana"><big>
            <strong>W</strong></big>elcome to my personal HomePage.</font></big>
            </p>
        </td>
        <td valign="top">
        </td>
    </tr>
</table>

</body>
</html>

Figure 12 Comparing JScript and VBScript

JScript Description

Try...Catch An error handling mechanism that lets you try one or more statements and catch any error that may occur through an exception.

Throw A statement to raise an exception passing any kind of data as its argument.

Error The system object that represents an exception. An instance of this object is created each time an exception is thrown. You can also create it explicitly via the new operator and pass it to the throw statement. Such an object can have two properties: Description and Number.

Instanceof An operator, not a function, that may be used to check whether a given object is of a certain class. It returns a Boolean value.

VBScript Description

Eval The same as the JScript eval function. It evaluates a given expression and returns the result.

Execute Simply executes a given command and doesn't return any value.

JScript	Description
Try...Catch	An error handling mechanism that lets you try one or more statements and catch any error that may occur through an exception.
Throw	A statement to raise an exception passing any kind of data as its argument.
Error	The system object that represents an exception. An instance of this object is created each time an exception is thrown. You can also create it explicitly via the new operator and pass it to the throw statement. Such an object can have two properties: Description and Number.
Instanceof	An operator, not a function, that may be used to check whether a given object is of a certain class. It returns a Boolean value.
VBScript	Description
Eval	The same as the JScript eval function. It evaluates a given expression and returns the result.
Execute	Simply executes a given command and doesn't return any value.