One approach to making such pages is to design a page with all your static elements, then add script to your HTML:
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 Rational 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.