TGML JavaScript Functions

The following is an overview of the TGML JavaScript functions unique for TGML:

Method	Description
alert("‹message›")	Displays a message box.
clearInterval(intervalID) *Obsolete. This function is replaced by JavaScript standard implementation.	Cancels the interval previously started using the setInterval function. intervalID is an identifier returned by a previous call to the setInterval function.
clearTimeout(timeoutID) *Obsolete. This function is replaced by JavaScript standard implementation.	Cancels a time-out that was set with the setTimeout function. timeoutID is an identifier returned by a previous call to the setTimeout function.
confirm("‹message›")	Displays a confirm box with "Yes" and "No" buttons. Returns true if the user clicks "Yes" or false if the user clicks "No".
execute("‹command›") execute("‹command›", "‹options›")	Requests an execute operation to be performed by the TGML viewer (start a Windows program). command is the name of the program (full path) and options is the command line options. Returns true if succeeded or false if failed. NOTE: The implementation of this function is system dependent. May not be implemented in some systems.
invoke("‹bindingName›", "‹operation›")	Requests an operation to be performed on a bound object by the TGML viewer. The bindingName is the full name (as it is exposed to the binding tools) of a Bind or Link element. Returns true if succeeded or false if failed. NOTE: The implementation of this function is system dependent. May not be implemented in some systems.
openFile("‹path›", "‹operation›")	Requests the TGML viewer to open a file. The operation is typical Windows object verbs. Returns true if succeeded or false if failed. NOTE: The implementation of this function is system dependent. May not be implemented in some systems.
prompt("‹message›", "‹defaultValue›")	Prompts the user to enter a value. Returns the entered value or null if canceled.
setForce("‹bindingName›", "true\|false")	Sets the force state of a bound signal object. The bindingName is the full name (as it is exposed to the binding tools) of a Bind element. Returns true if succeeded or false if failed. NOTE: The implementation of this function is system dependent. May not be implemented in some systems.
setInterval("‹expression›", "‹milliseconds›") *Obsolete. This function is replaced by JavaScript standard implementation.	Evaluates (executes) the expression each time the specified number of milliseconds has elapsed. Returns an identifier that cancels the timer with the clearInterval method.
setTimeout("‹expression›", "‹milliseconds›") *Obsolete. This function is replaced by JavaScript standard implementation.	Evaluates (executes) the expression after the specified number of milliseconds has elapsed. Returns an identifier that cancels the timer with the clearTimeout method.
setValue("‹bindingName›", "‹value›")	Sets the value of a bound signal object. The bindingName is the full name (as it is exposed to the binding tools) of a Bind element. Returns true if succeeded or false if failed. NOTE: The implementation of this function is system dependent. May not be implemented in some systems.

*This is valid for the TGML specific implementations and may be removed in future releases. Made obsolete in favor of the JavaScript standard implementation.

TGML JavaScript Functions - Example 1

This is an example of how to create an interactive rectangle that toggles a value.

Copy

<TGML>
   <Component Name="Switch" Left="50" Top="50" Width="102" Height="102" ContentHeight="102" ContentWidth="102">

   <Rectangle Left="l" Top="l" Width="100.0" Height="100.0" Fill="#C0C0C0" Stroke="#000000">

      <Script OnMouseClick="click"
      OnSignalChange="signal"><![CDATA [

      currentValue = NaN;

      function click(evt)
      {
         var rect = evt.getTarget();

         var oldVal = new Number(currentValue);
         // Note: currentValue is set in function signal.

         if (!isNaN(oldVal)) // Skip if no value has arrived
         {
         // Toggle
         var newVal = (oldVal==0) ? 1 : 0;

         // Get the Bind element (named Value) 
         var bind = rect.getChild("Value");

         // Get the full binding name
         var fullName = bind.getFulIBindName();

         var toggle = confirm("Toggle \"" + fullName + "\" from " + oldVal + " to " + newVal + "\n\nAre you sure?");

         if(toggle == true)
         setValue(fullName, newVal);
      }

      // The rect contains a Bind element. Cancel the 
      // default viewer action (do not display the 
      // default "edit value" dialog).
      evt.preventDefault();
      }
        
      function signal(evt)
      {
         var currentValue = evt.getValue ();
      }
      ] ]></Script>

      <Bind Attribute="Fill" Name="Value">
         <ConvertValue AttributeValue="#FF0000" SignalEqualTo="0"/> 
         <ConvertValue AttributeValue="#00FF00" SignalEqualTo="l"/> 
      </Bind>

   </Rectangle>
   </Component>
</TGML>

TGML JavaScript Functions - Example 2

The example below assumes that the Link named "Report" is bound to a TACOS report object. The function invoke will result in a "print report" operation in Diagrams.

Copy

<TGML>
    <Text Left="100" Top="100">
    Print TACOS report

        <Script OnMouseClick="click"><![CDATA [ 
            function click(evt)
            {
                var rect = evt.getTarget();
                var link = rect.getChild("Report");
                var fullName = link.getFullBindName();

                // Print the linked report 
                invoke(fullName, "PrintReport");

                // The text contains a Link. Cancel the default 
                // Link operation
                evt .preventDefault();
            }
        ]] ></Script>

        <Link Name="Report"/>
    
    </Text>
</TGML>

TGML JavaScript Functions - Example 3

This example starts an interval timer and animates (toggles) the fill color when the cursor is over the rectangle. The timer is stopped and the color is restored when the cursor leaves the rectangle.

Copy

<TGML>
    <Rectangle Fill="#FFFFFF" Height="100.0" Left="100.0" Stroke="#000000" Top="100.0" Width="200.0">
        <Script OnMouseOut="out" 0nMouseOver="over"><![CDATA [

        var intervalID;
        var rectangle;
        var originalColor;
        var animatedColor;

        function over(evt)
        {
            // Store the rectanle element and the original color
            rectangle = evt.getTarget();
            originalColor = rectangle.getAttribute("Fill");

            // Initialize the animated color and set this color
            animatedColor = "#FF0000";
            rectangle.setAttribute("Fill", animatedColor);

            // Start the timer
            intervallD = setlnterval(toggleColor, 500);
        }

        function out (evt)
        {
            // Stop the timer and restore the color
            clearlnterval(intervallD);
            rectangle.setAttribute("Fill", originalColor);
        }

        function toggleColor()
        {
            if(animatedColor == "#FF0000")
            animatedColor = "#0000FF";
            else
            animatedColor = "#FF00Q0";
            rectangle.setAttribute("Fill", animatedColor);
        }
        
        ] ]></Script>
    </Rectangle>
</TGML>

TGML JavaScript Functions - Example 4

This example displays an alert box when the cursor has been over the rectangle for one second. The timer is stopped when the cursor leaves the rectangle.

Copy

<TGML>
    <Rectangle Fill="#FFFFFF" Height="100.0" Left="100.0" Stroke="#000000" Top="100.0" Width="200.0">

        <Script OnMouseOut="out" 0nMouseOver="over"><! [CDATA [

        var timeoutID;

        function over(evt)
        {
            // Start the timer.
            // Evaluate "alert('Hovering')" after 1 second 
            timeoutID = setTimeout("alert('Hovering')", "1000")
        }

        function out(evt)
        {
            // Stop the timer (abort) 
            clearTimeout(timeoutID);
        }

        ]]></Script>

    </Rectangle>
</TGML>