EGL Rich UI 편집기 소개
EGL Rich UI 편집기를 사용하여 Rich UI 핸들러를 수정하고 핸들러의 런타임 동작을 미리보기할 수 있습니다.
다음은 Rich UI 편집기에서 파일 열기의 예제입니다.

- 예제에 표시된 대로 디자인 화면은 Rich UI 핸들러의 표시 가능한 컨텐츠를 표시하는 사각형 영역입니다. 위젯을 팔레트에서 디자인 화면 또는 아웃라인 보기로 끌어서 놓은 후 특성 보기에서 해당 위젯을 사용자 정의할 수 있습니다. 디자인 화면 또는 아웃라인 보기에서 작업하여 위젯의 위치를 변경할 수도 있습니다.
- 소스 보기는 로직을 업데이트하고 위젯을 추가하거나 업데이트하는 EGL 편집기의 임베디드 버전을 제공합니다. 디자인 보기 및 소스 보기가 통합됩니다. 디자인 보기에 대한 변경사항은 소스 보기에 반영되며 가능한 경우 소스 보기에 대한 변경사항이 디자인 보기에 반영됩니다.
- 미리보기는 로직을 실행할 수 있는 워크벤치에 대한 내부의 브라우저입니다. 원하는 경우 외부 브라우저로 쉽게 전환할 수 있습니다.
디자인 화면을 사용하여 DOM 트리 작성
위젯을 팔레트에서 디자인 화면으로 끌어 오는 경우 위젯을 수신할 수 있는 영역은 잠재적 놓기 위치라고 하며 해당 영역의 색상은 기본적으로 노란색입니다. 잠재적 놓기 위치 위에 커서를 올리면 영역은 선택된 놓기 위치라고 하며 해당 영역의 색상은 기본적으로 초록색입니다. 워크벤치 환경 설정에서 색상을 사용자 정의할 수 있습니다.
처음으로 위젯을 끌어서 디자인 화면에 놓는 경우 전체 화면은 선택된 놓기 위치이며 놓기의 영향은 위젯을 선언하고 Rich UI 핸들러의 initialUI 특성에서 첫 번째 요소로 이를 식별하는 것입니다. 해당 특성은 개발 시 위젯의 배열을 승인합니다. 배열은 궁극적으로 “브라우저가 웹 애플리케이션을 처리하는 방법 이해”에서 설명된 런타임 데이터 구조인 DOM 트리를 작성하는 데 사용됩니다. 특별히 Rich UI 핸들러 initialUI 배열의 요소는 런타임 시의 동위 DOM 요소의 순서와 동일한 개발 시의 initialUI 배열 요소의 순서로 문서 요소의 하위가 됩니다.
- 처음에 배치된 위젯에 인접한 위젯을 배치할 수 있습니다. 소스 코드에 대한 영향은 두 번째 위젯을 선언하고 이를 initialUI 배열의 다른 요소로 식별하는 것입니다. 새 위젯의 배치는 첫 번째 위젯의 앞 또는 뒤이며 위젯이 배열에 배치되는 위치를 표시합니다.
- 초기에 배치된 위젯이 컨테이너(예제: 상자)인 경우 첫 번째 위젯 안에 두 번째 위젯을 배치할 수 있습니다. 소스 코드에 대한 영향은 컨테이너의 children 특성에 요소를 추가하는 것입니다. 영향은 궁극적으로 DOM 트리에 하위 요소를 추가하는 것입니다. 특히, 컨테이너를 나타내는 요소에 하위 요소를 추가하는 것입니다.
후속 작업이 DOM 트리 빌드를 계속합니다. 영향을 받는 배열 및 위젯이 배열에 배치되는 위치를 판별하는 위젯의 배치와 함께 끌어서 놓기 조작을 반복적으로 수행할 수 있습니다. 끌어서 놓기 조작은 Rich UI 편집기의 소스 탭 또는 EGL 편집기에서 코드 자체의 배열 지정 및 위젯 선언을 작성하는 대안입니다.
새 위젯 선언은 이미 있었던 선언 전의 소스 코드에 추가됩니다. 즉, 명령문의 순서는 끌어서 놓기 조작 순서와 반대입니다.
아웃라인 보기를 사용하여 디자인 화면 업데이트
- 팔레트의 위젯을 아웃라인 보기의 특정 위치 및 디자인 화면의 특정 위치로 끌어서 놓을 수 있습니다.
- 아웃라인 보기 내에서 다음을 수행할 수 있습니다.
- 위젯을 다른 위치에 끌어서 놓으십시오. (하위가 있는 위젯을 선택하는 경우 위젯 및 해당 하위를 다른 위치로 끌어올 수 있습니다.)
- 위젯을 마우스 오른쪽 단추로 클릭하고 삭제를 클릭하여 위젯을 삭제하십시오.
- 위젯을 마우스 오른쪽 단추로 클릭하고 특성을 클릭한 후 위젯 특성 및 이벤트 설정에서 설명된 프로시저를 따라 위젯에 대한 세부사항을 업데이트하십시오.
투명성 옵션 이해
디자인 화면은 두 계층으로 구성됩니다. 맨 아래 계층은 초기 텍스트 값이 포함된 위젯을 표시하는 웹 브라우저입니다. 맨 위 계층은 각 위젯의 각 모서리에 꺾쇠괄호가 포함된 편집 오버레이입니다.
최상위 계층의 배경에는 다음과 같은 특징이 있을 수 있습니다. 투명, 흰색 패턴 및 투명 점 또는 (Windows 플랫폼의 경우) 다양한 투명도 레벨을 가진 흰색 계층. “Rich UI 모양을 위한 환경 설정 설정”에서 설명된 대로 워크벤치 환경 설정을 설정하여 투명성 옵션을 설정할 수 있습니다. 편집기에서 작업 중인 경우 편집 세션에 사용되는 투명성 옵션을 변경할 수 있습니다.
EGL Rich UI 편집기 및 EGL 편집기 결합
EGL Rich UI 편집기 및 EGL 편집기 모두에서 하나의 파일을 열어 Rich UI 편집기의 기능을 보완할 수 있습니다. 예를 들어, 다음 스크린 샷은 GridDemo.egl 파일을 두 가지 방법으로 표시합니다. 맨 위는 사용 가능한 위젯 유형을 나열하는 팔레트가 있는 Rich UI 편집기의 디자인 탭입니다. 맨 아래는 EGL 편집기입니다. 편집기의 작업은 동일한 파일에 영향을 미치며 기타 편집기에 표시되는 컨텐츠에 반영됩니다.
