Binding embedded objects to your model

Edit online

Using this design method, you embed graphical elements in your web page as JavaScript objects, then bind those objects to the real-time values for the Rhapsody® model. By binding embedded graphics and mapping them to the values of web-enabled elements, you can create a page where an image is displayed in the web interface when a process has stopped (for example, a stop sign), whereas another indicates that the process is running (such as a green light).

Procedure

One approach to making such pages is to design a page with all your static elements, then add script to your HTML:

Edit your HTML file, including the manage.inc file in the header of the HTML file in script tags before the </head> tag:
```
   <head>
      <title>Your Title Here</title>
      <script src='manage.inc'></script>
   </head>
```
The manage.inc file includes a collection of JavaScript files that control client-side behavior of the Rhapsody web interface.
To embed model elements in the page, create JavaScript objects of the WebObject type and bind each object with the elements of the device you are managing and controlling through the Internet, using the bind function.

Results

The following sample code displays a yellow lamp when the value for a Boolean element is true, and a red lamp when the value is false:


   <html><head><title>Page Title</title>
   <script src='manage.inc'></script>
   <script>
   function updateMyLamp(val)
   {
      if (val == 'On') 
      {
         document.getElementById(‘myImage').src = 'redLamp.gif';
      }
      else
      {
         document.getElementById(‘myImage').src = 'yellowLamp.gif';
      }
   }
   </script>
   </head>
   <body>
   <script>
   var lamp = new WebObject;
   bind(window.lamp,
       'ProcessController[0]::OMBoolean_attribute');
   lamp.update = updateMyLamp;
   </script>
   <img id=myImage border=0>
   <hr noshade>
   <i>Rotate the bool values here<i> 
   <script>show('ProcessController[0]::rotate');</script>
   </body>
   </html>

The declaration of the object and binding takes place in the header of the document, between the second pair of script tags.

The bind function serves as a bridge between the element values in the model and the web interface. It takes two arguments, the variable name of the JavaScript object (lamp in the example) and the name of the model element in Rhapsody (ProcessController[0]::rotate in the example).

In the example, the following line refreshes updated model values in the web GUI:


   lamp.update = updateMyLamp;

This update function accepts one argument, which is the new value of the element.

If a GUI control in the page needs to pass information to the device, call the set method of the corresponding object. The set method accepts one argument, the newly set value.