이러한 페이지를 작성하는 한 가지 방법은 모든 정적 요소로 페이지를 디자인한 다음 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>
오브젝트 및 바인딩 선언은 문서의 헤더에서 스크립트 태그의 두 번째 쌍 사이에 발생합니다.
bind 함수는 모델의 요소 값과 웹 인터페이스 간의 브릿지 역할을 합니다. 이 함수는 두 가지 인수 즉, JavaScript 오브젝트의 변수 이름(이 예제의 lamp) 및 Rational Rhapsody의 모델 요소 이름(이 예제의 ProcessController[0]::rotate)을 사용합니다.
예제에서 다음 행은 웹 GUI의 업데이트된 모델 값을 새로 고칩니다.
lamp.update = updateMyLamp;
이 업데이트 함수는 요소의 새 값인 하나의 인수를 허용합니다.
페이지의 GUI 제어가 디바이스에 정보를 전달해야 하는 경우 해당 오브젝트의 set 메소드를 호출하십시오. set 메소드는 새로 설정된 값인 하나의 인수를 허용합니다.