안녕하십니까? 

웹페이지에서 흔히 사용되는 분할창 기능을 스카다에서 구현해 보았습니다.

1. 실행 화면

   실제 현장에서는 View창의 타이틀, 상태표시줄, 메뉴바를 모두 숨겨서 사용하는 경우가 많기 때문에 동일한 환경으로 구현해 보았습니다.

   왼쪽에 페이지 네비게이터 창이 있으며 페이지 스크롤이나 마우스 스크롤로 상하 이동이 가능합니다.

2. 디자이너 화면

   디자이너에서 만든 실제 페이지는 메뉴 페이지 1, 공용 페이지 1, 개별 페이지 4개로 총 6개 페이지로 구성되어 있습니다.    

3. 설정

   실행 환경 설정

   실행 환경 설정에서 창 추가를 클릭하신 후 메인 창(왼쪽)과 하위 창(오른쪽)에서 창이 생성될 위치와 크기를 설정합니다.

   메뉴창 속성

   메뉴창 속성에서 최소 스케일을 1로 맞춰줍니다.

   만약 스케일 제한을 두지 않으면 스카다 실행시 창 크기에 맞춰서 페이지의 크기가 줄어들기 때문에 스크롤이 자동으로 생기지 않습니다.

   태그와 스크립트

   메뉴 페이지의 버튼 객체의 속성 -> 이벤트에서 OnClick 속성의 빈 칸을 더블클릭하여 이벤트를 작성합니다.

   이 때 모든 버튼에 이벤트 함수를 등록합니다.

   빈 공간을 더블클릭하면 페이지 스크립트 창으로 전환됩니다. 이 때 아래와 같이 코드를 작성합니다.

   초음 코드를 작성할 때만 더블클릭을 통해 함수의 틀을 만드시고, 그 다음 버튼부터는 동일한 함수에 연결합니다.

   창 전환 스크립트

   페이지 정보가 담긴 태그의 change 이벤트를 통해 창을 전환한 태그를 각각의 내용 페이지의 스크립트 영역에 동일한 내용으로 붙여 넣습니다.

위에는 기본적인 레이아웃과 창 전환 기능을 기술하였습니다. 더 자세한 내용을 첨부된 샘플 파일을 참고해 주세요.