| ThingMaker Documentation Chapter 10) Web Publishing

| Web Publishing This section documents the HTML tag that is required by ThingViewer, as well as the MIME type information required by ThingViewer and information about Active Desktop and CDF support. The specific areas covered in this chapter are:

- HTML Tag
- ThingViewer MIME Type
- Using ThingMaker and ThingViewer with Active Desktop
- Channel Defintion Format file information
- (See also "Publish" in the Menu Reference)
- Send Event Action Examples for JavaScript and VBScript

  HTML TAG
  If you use the Publish function of ThingMaker to create the HTML tag, you have the option of adding an alternate GIF file and JavaScript to detect whether the browser can support ThingViewer. These options result in additional information being added to the HTML tag which are not shown in the example below.

  The ThingMaker HTML tag is of the following format:

  `<!-- Generated by Parable ThingMaker : tag begin -->`

  `<html>`

  `<head>`

  `<title>ThingMaker</title>`

  `</head>`

  `<body bgcolor="#ffffff">`

  `<object id="mytest"`

  `name="mytest"`

  `classid="CLSID:F2D71283-BEE3-11d0-90AE-00A0C9270D87"`

  `codebase="http://www.thingworld.com/download/ie/`

  `ThingViewer.cab"`

  `width=151 height=187>`

  `<param name="SceneFile" value="mytest.tms">`

  `<param name="bgcolor" value="#ffffff">`

  `<EMBED type= application/x-Parable-Thing`

  `SceneFile="mytest.tms"`

  `width=151 height=187 bgcolor="#ffffff"`

  `pluginspage="http://www.thingworld.com/download/netscape"`

  `name="mytest">`

  `</object>`

  `</body>`

  `</html>`

  ``

  `<!-- Generated by Parable ThingMaker : tag end -->`

This Tag contains the following major details:

`<object id="mytest"`
If you just need the tag, copy from here through to the line </object>

The first set of parameters (up to the <EMBED tag) is the information used by Internet Explorer. The part of the tag that begins at <EMBED through to the end of the tag is used by Netscape Navigator and Communicator.

`object id="mytest"`
`name="mytest"`
These two parameters are the name of the Scene File. They are used by ThingViewer when sending messages to JavaScript, and they should be the same but unique for the Web page.

`classid="CLSID:F2D71283-BEE3-11d0-90AE-00A0C9270D87"`
This is the identifier Internet Explorer uses to identify the plug-in and determine if you have installed the correct version of the plug-in. This value must not be changed.

`codebase="http://www.thingworld.com/download/ie/ThingViewer.cab"` This is the location of the cab file for the plug-in. This is a copy of the ThingViewer plug-in that Internet Explorer will attempt to download and install if the user hasn't already installed it.

In theory, this parameter is optional: that is, if you know that someone has the plug-in installed, it's not necessary. Still, we recommend that you always include it.

`width=151 height=187`
This is the width and height of the Scene that will be displayed on the page. This information comes from the Scene Frame.

`<param name="SceneFile" value="mytest.tms">`
This is the actual File name of the Scene File to be played. This information is passed to ThingViewer.

`<param name="bgcolor" value="#ffffff">`
This is the background color which will fill the Scene area on the web page when the Scene is being loaded, usually the same color as the background color of the page.

`<EMBED`
This is the beginning of the Netscape information.

`type= application/x-Parable-Thing`
This is the MIME type information for ThingViewer Files: this must not be changed.

`SceneFile="mytest.tms"`
This is the actual name of the File to be played.

`width=151 height=187 bgcolor="#ffffff"`
This is the width and height of the Scene that will be displayed on the page. This is information from the Scene Frame. The background color is used to fill the Scene area on the web page while the Scene is being loaded. This should be the same as the background color of the page on which the Thing sits.

`pluginspage="http://www.thingworld.com/download/netscape"`
This is the page that the user goes to, if they get the message that says they don't have the necessary plug-in, and they want to install it.

`name="mytest">`
Name of the Scene for JavaScript. Should be unique if you have multiple Scenes on a page.

MIME TYPE
When adding Things to a web server, you may need to add the MIME type for ThingMaker Scene Files. The MIME type can be required by Netscape Navigator and Communicator if the HTML tag uses "SCR=" instead of "Type=". Internet Explorer does not require the MIME type.

You will have to contact your Internet Service Provider to ad the MIME type to the web server. If Things are already hosted at the web server, you won't have to get the MIME type added: you may want to upload a Thing and try it out first before contacting the ISP. If a Thing works fine with IE, but not with Navigator, the MIME type is most likely the problem.

Type: | binary
sub-type: | application/x-Parable-Thing
extension: | .tms

Active Desktop
ThingMaker and ThingViewer supports the Active Desktop, as well as the Channel Definition Format for subscribing to material that is updated frequently. The user must have Internet Explorer 4.0 installed to make use of these features.

Placing Things on the Active Desktop from ThingMaker and ThingViewer
The function, Place on Active Desktop, available in the File Menu in ThingMaker and the Context menu in ThingViewer work like ThingMaker's "Preview in BrowserÉ" function. Both functions create an HTML and .tms file. The Place on Active Desktop Button places the HTML File on the desktop.

File Naming
The name of the file is either the name of the selected Thing (or "Parable Thing" if the Thing has no name), or the name of the Scene (or "Untitled" if the Scene has not been saved). A number is appended to the name if necessary to make it unique.

Location
The HTML and .tms files are placed in the Active Desktop directory inside the ThingMaker directory.

If you delete a ThingMaker Scene from the Active Desktop using the Windows system display properties dialog (go to the web tab), you must manually delete the files from the Active Desktop directory.

Channel Definiton Format
If you are creating content that will be updated regularly, you will need to create a CDF file. This contains Universal Resource Locators (URLs) for the information that is to be updated and the scheduling information, as to when and how often the content will be updated. The CDF File is placed on the web server.

(See also "Publish" in the Menus Reference Chapter Nine).

When you add the Scene File to your Active Desktop, the URL is used to load the CDF File from the web server.

The information that is stored in the CDF File-subscription end date, update frequency, and time- is entered using the Publish Dialog. You must manually edit the CDF File before placing it on your server. (See below).

Editing the CDF file
The CDF file created by ThingMaker is not complete. You will have to edit the

Item tags that are bolded below. You must change the path name with a fully qualified URL for the file that lives on the server you are publishing to.

For example, c:\work\ltwin80\dll\foo.htm could be replaced by
http://www.myserver.com/~user/foo.htm

    <?XML version="1.0"?>

    <Channel>

       <Schedule EndDate="1998.11.24T0:0">
          <IntervalTime DAY="1" />
          <EarliestTime HOUR="9" />
          <LatestTime   HOUR="17" />
       </Schedule>

       <Item HREF="C:\Work\ltwin80\dll\foo.htm" >

          <Title>foo</Title>    <!-- Friendly name -->

          <Usage VALUE="DesktopComponent"> <!-- Required -->
             <OpenAs VALUE="HTML"/> <!-- "HTML"(default) or "Image"-->
             <Width  VALUE="361" />    <!-- Width in pixels -->
             <Height VALUE="220"  />   <!-- Height in pixels -->

     <CanResize VALUE="Yes"/> <!-- Yes (default) or No -->
          </Usage>
       </Item>

       <!-- Also cache the TMS file -->

       <Item HREF="C:\Work\ltwin80\dll\foo.tms">
       </Item>

    </Channel>

Send Event Examples
ThingMaker's Send Event Action can be used with JavaScript and VBScript in your HTML pages to add additional functionality to your web page. An example of each is listed below.

Using the Send Event Action with JavaScript
This sample HTML demonstrates the interaction of Parable Things and JavaScript. While JavaScript is common to both Internet Explorer and Natscape, there are significant differences between the browsers that must be handled in your JavaScript. All of this makes it much more difficult to write a single page that will work in all cases.

Unlike VBScript (where an individual script block is defined to handle a different event generated by the plug-in), JavaScript generally groups all its functions in a single script block. From a scripting point of view, each Thing in a page should have a unique "Name" parameter in its embed or object tag (As in VBScript, names of HTML elements and object properties are case sensitive.)

In JavaScript, a thing event handler is a function named "ThingName_EventName." (The name of events generated by ThingViewer and their arguments are listed below.) This naming convention applies to all Netscape implementations and to IE 3.0. IE 4.0 requires that VBScript-like <Script For=ThingName Event=EventName> blocks be defined for each Thing/Event combination. Since the presence of these blocks interferes with Netscape, it is necessary to generate them dynamically only for IE 4.0. This adds to the complexity of the script.

The page is composed of three functional sections:

The first contains the Viewer, the event handlers for the Viewer and the special code to deal with IE 4.0. Each handler updates the "ThingDetail area with some text, changes the background color, and records itself in a window.

A second set of HTML elements defines a button and text input field. This demonstrates the SceneFile exposed by the OCX control. Clicking on the text control or the button will cause the viewer to load a new scene at the URL (or file) specified. Note, for consistency, the OCX also supports the setSceneFile.

(strURL) method that is used in Netscape. The final section contains a text area to display the output of the most recent event.

The third set of HTML elements and functions manage a log of messages as they are received by the event handlers.

On Display, the initial scene is TheThings with reasonable names for each animation. Clicking on the "change to" button will load a button that has a special event defined for its mouse click state.

The events that a Thing can generate are:

Normal events:
ClickOnCtrl( xpos, ypos) - the mouse was clicked on the scene background at (x,y)

User defined:
Event(ThingName,StringDefinedInThingmaker) - This is triggered whenever a ScriptEvent object is specified or when another action specifies a ScriptEvent.

    <HTML>
    <HEAD>
    <TITLE>JavaScript Test</TITLE>
    <Center><B>Parable Thing JavaScript Test Page</B></center>
    <br>
    </HEAD>
    <BODY BGCOLOR="#E0E0F0" >

    <script Language= "JavaScript">

     // Helper functions to display a log of messages and their values.

    function AddToLog( NewLogEntry)
    {
    	msg2= document.MainForm.MsgLog.value + "\r\n" + NewLogEntry
    	document.MainForm.MsgLog.value= msg2
    }

    function ClearButton_Click()
    {
    	document.MainForm.MsgLog.value= '  ClearMsgs ';
    }

     // Event handler for the Change To button It calls the Viewer to change the file being displayed     /

    function TestButton_Click()
    {

    	var strNew= document.MainForm.FileName.value

            // This is an alternate way to set the scene file in IE
    	//if(navigator.appName == "Microsoft Internet Explorer" )
    	//	document.MainForm.TestThing.SceneFile= strNew
    	//else

    	document.TestThing.setSceneFile( strNew)
    }

      // These are the Viewer event handlers                                                 /

    function TestThing_ClickOnCtrl( x, y)
    {
    	msg= "Script: TestThing_ClickOnCtrl( " + x +", " + y + ")"
    	AddToLog( msg)
    	document.bgColor= "#CCBBAA"
    }

    function TestThing_Event( ThingName, EventText)
    {
    	msg= "Script: TestThing_Event( "+ ThingName + ", " + EventText + ")"
    	AddToLog( msg)
    	UpdateThingDetail( EventText)
    	//document.bgColor= "#CCDDBB"
    }

     // This helper function updates the Text area.  It is called by the event handlers /

    function UpdateThingDetail( ThingName)
    {
    	msg= ThingName;
    	if( ThingName == 'Saxaphone')
    		msg='Cool Joe Sax Player joined the band five years ago';
    	document.MainForm.ThingDetail.value= msg;
    }

     // These are helper functions for the IE 4.0 specific tags  /

    function write_endscript()
    {
    	document.writeln( "\<\/script\> ");
    }

    function write_begin( ThingName, Event)
    {
    	document.write( " <script Language=\"JavaScript\" for=\"");
    	document.write( ThingName);
    	document.write( "\" event=\"");
    	document.write( Event);
    	document.writeln( "\"> ");
    }

    if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.charAt( 0) == '4')
    {

     // This is the info that IE 4.0 requires which must be hidden from everyone else /

    	document.write("Using customized script for\"" + navigator.appName+ " " + navigator.appVersion + "\"");

    	write_begin( "TestThing", "ClickOnCtrl( x, y)");
    	document.write( " { TestThing_ClickOnCtrl( x, y) } ");
    	write_endscript();

    	write_begin( "TestThing", "Event( ThingName, EventText)");
    	document.write( "{ TestThing_Event( ThingName, EventText) }");
    	write_endscript();
    }
    else
    	document.write("Using standard script for\"" + navigator.appName+ " " + navigator.appVersion + "\"");
    </script>

    <br>
    <FORM Name=MainForm BgColor="#0E0EF0">

    // This two controls allow the user to load a different file into the  Viewer.

    <INPUT TYPE="button"
           NAME="TestButton"
           ID="btnID"
           VALUE="Change to:"
           onClick=TestButton_Click()
    >

    <INPUT type="text"
           name="FileName"
           id="txtFile"
           value="preview.tms"
           onSubmit=TestButton_Click()
    >

    <br><br>
    <center>

    // This is actual Viewer. Note that the Name value must match the first part of the JavaScript function names above

    <OBJECT
     ID="TestThing"
     Name="TestThing"
     CLASSID="CLSID:F2D71283-BEE3-11d0-90AE-00A0C9270D87"
     width=700 height=400>
    <param NAME="SceneFile" VALUE="new_test1_TheThings11.tmv">
    <param NAME="BgColor" VALUE=123456>
    <embed type= application/x-Parable-Thing
           width=700 height=400
           name="TestThing"
           SceneFile="new_test1_TheThings11.tmv"
           BgColor=#E0E0F0
    >
    </OBJECT>
    <br><br>

    // This is where we write interesting things when an event occurs

    <TextArea name=ThingDetail Rows=5 cols=80></TextArea>

    <br><br>

    // This is where we log events and their parameters when they are sent from the Viewer

    <INPUT TYPE="button"
           NAME="ClearButton"
           ID="btnClear"
           VALUE="Clear Message Display"
           onClick=ClearButton_Click()
    >

    <br>

    <TextArea name=MsgLog Rows=8 cols=80 defaultvalue="Initial Load"></TextArea>

    </center>

    </FORM>
    </BODY>
    </HTML>

VBScript Example
This sample HTML demonstrates the interaction of Parable Things and VBScript. Each script block handles a different event generated by the plug-in. From a scripting point of view, each thing in a page should have a unique "Name" parameter in its object tag ( the embed tag is ignored in IE).The names of HTML elements and object properties are case sensitive. The initial scene is TheThings with reasonable names for each animation. Clicking on the "change to" button will load a button that has a special event defined for its mouse click state.

The events that a thing can generate are:

Normal events:
ClickOnCtrl( xpos, ypos) - the mouse was clicked on the scene background at (x,y)

User defined:
Event( ThingName, StringDefinedInThingmaker) - This is triggered whenever a ScriptEvent object is specified or when another action specifies a ScriptEvent.

A second set of HTML elements define a button and text input field. This demonstrates the SceneFile exposed by the OCX control. Clicking on the text control or the button will cause the viewer to load a new scene at the URL (or file) specified. Note, the OCX also supports the setSceneFile( strURL) method that is used in Netscape. The final section contains a text area to display the output of the most recent event.

    <HTML>
    <HEAD>
    <TITLE>VB Script Test</TITLE>
    <B>VBScript Testing Page</B>
    </HEAD>
    <BODY BGCOLOR="#EEEEFF">

    <br>

    <FORM name="ThingForm">

    <INPUT TYPE="button" NAME="TestButton" ID="btnID" VALUE="Change to:" >
    <INPUT type="text" name="FileName" id="txtFile" value="preview.tms">

    <br><Br>
    <OBJECT
     ID="ThingCtrl"
     Name="TestThing"
     CLASSID="CLSID:F2D71283-BEE3-11d0-90AE-00A0C9270D87"
     width=700 height=400>
    <param NAME="SceneFile" VALUE="TheThings11.tmv">
    <embed src="thethings11.tmv" width=700 height=400 name="TheThings">
    </OBJECT>

    <br>
    <Br>
    Event Output:
    <br>
    <TextArea name=MsgLog Rows=1 cols=80></TextArea>
    </FORM>

    <script language="VBScript" for="TestThing" event="Event( name, extra)">
    msg= "Event Name= " + name + " String=" + extra
    msgbox( msg)
    </script>

    <script language="VBScript" for="TestThing"
    					event="ClickOnCtrl( xpos, ypos)">
    msg= "ClickOnControl X=" + CStr(xpos) + " Y= " + CStr(ypos)
    document.ThingForm.MsgLog.value= msg
    </script>

    <script language="VBScript" for="TestButton" event="onclick()">
    msg= "Changing Scene from "  + document.ThingForm.TestThing.SceneFile + " to " + document.ThingForm.FileName.value
    document.ThingForm.MsgLog.value= msg
    document.ThingForm.TestThing.SceneFile= document.ThingForm.FileName.value
    </script>

    </BODY>
    </HTML>

<--Previous | table of contents | Next -->