このようなページを作成する 1 つの方法は、すべての静的要素を持つページを設計して、HTML にスクリプトを追加します。
以下のサンプル・コードは、ブール要素の値が true の場合に黄色のランプを表示し、値が 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>
オブジェクトの宣言とバインドはドキュメントのヘッダー内の 2 番目のスクリプト・タグ・ペア間で行われます。
bind 関数は、モデルと Web インターフェースの要素値間のブリッジの役目をします。これには、JavaScript オブジェクトの変数名 (例では lamp) と Rational Rhapsody のモデル要素の名前 (例では ProcessController[0]::rotate) の 2 つの引数があります。
例では、以下の行が Web GUI で更新されたモデル値を最新表示します。
lamp.update = updateMyLamp;
この update 関数は 1 つの引数、要素の新しい値を受け付けます。
ページ内の GUI コントロールがデバイスに情報を渡す必要がある場合、対応するオブジェクトの set メソッドを呼び出します。set メソッドは、1 つの引数、新しく設定した値を受け付けます。