모델에 임베드된 오브젝트 바인드

이 디자인 메소드를 사용하여 웹 페이지의 그래픽 요소를 JavaScript 오브젝트로 임베드한 다음 IBM® Rational® Rhapsody® 모델의 실시간 값으로 오브젝트를 바인드합니다. 임베드된 그래픽을 바인드하고 웹 지원 가능 요소의 값으로 맵핑해서, 프로세스가 중지될 때(예: 중지 부호) 웹 인터페이스에 이미지가 표시되는 반면 다른 것은 프로세스가 실행 중임을(예: 초록빛) 나타내는 페이지를 작성할 수 있습니다.

프로시저

이러한 페이지를 작성하는 한 가지 방법은 모든 정적 요소로 페이지를 디자인한 다음 HTML에 스크립트를 추가하는 것입니다.

  1. </head> 태그 앞의 스크립트 태그에서 HTML 파일의 헤더에 manage.inc 파일을 포함시켜서 HTML 파일을 편집하십시오.
       <head>
          <title>Your Title Here</title>
          <script src='manage.inc'></script>
       </head>

    manage.inc 파일에는 Rational Rhapsody 웹 인터페이스의 클라이언트측 동작을 제어하는 JavaScript 파일의 콜렉션이 포함되어 있습니다.

  2. 페이지의 모델 요소를 임베드하려면 WebObject 유형의 JavaScript 오브젝트를 작성하고 bind 함수를 사용하여 인터넷을 통해 관리 및 제어 중인 디바이스의 요소와 각 오브젝트를 바인드하십시오.

결과

다음 샘플 코드는 부울 요소의 값이 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 메소드는 새로 설정된 값인 하나의 인수를 허용합니다.


피드백