브라우저가 Rich UI 애플리케이션을 처리하는 방법 이해
- 개발 시 사용자가 코딩하는 것의 런타임 영향을 이해하여 기술을 더욱 빠르게 습득할 수 있게 합니다.
- 고급 태스크를 쉽게 수행할 수 있게 합니다.
사용자가 브라우저에 웹 주소를 입력하면 브라우저는 일반적으로 두 번째 시스템에 있는 웹 서버에 요청을 전송합니다. 주소는 특정 서버를 식별하며 브라우저에 리턴되는 컨텐츠를 표시합니다. 예를 들어, 주소 http://www.ibm.com을 입력하는 경우 IBM® 서버는 브라우저가 IBM 홈 페이지를 표시하는 데 사용하는 메시지로 응답합니다. 지금 관심이 있는 질문은 브라우저가 메시지를 어떻게 사용하는지에 대한 것입니다.
브라우저는 메시지의 부분을 데이터 영역의 내부 세트로 가져옵니다. 그런 다음 브라우저는 해당 데이터 영역의 값을 사용하여 일반적으로 위젯이라고 하는 화면 제어를 표시합니다. 예제 위젯은 단추이며 텍스트 필드입니다.
다음 웹 페이지 컨텐츠를 고려하십시오.

- 엔클로징 상자는 myBox입니다.
- myBox 내에서 상단의 상자는 myBox02이며 텍스트 필드 myHelloField를 포함합니다.
- myBox 내에서 하단의 상자는 myBox03이며 텍스트 필드 myInTextField, 단추 myButton, textField myOutTextField를 포함합니다.
브라우저가 사용하는 내부 데이터 영역은 반전된 트리로 표시됩니다.

트리는 문서로 이름 지정된 루트로 구성되며 정보의 단위인 요소의 세트입니다. 사용자가 사용할 수 있는 가장 높은 요소는 본문으로 이름 지정됩니다. 본문에 종속적인 요소는 애플리케이션에 특정합니다.
- myBox03 및 myInTextField는 상위 및 하위입니다.
- myBox 및 myButton은 상위(ancestor) 및 하위(descendant)입니다.
- myInTextField, myButton, myOutTextField는 동위입니다.
- 하위 요소를 반영하는 위젯은 상위 노드를 반영하는 위젯 내에서 표시됩니다.
- 동위 요소를 반영하는 위젯이 이전 동위 요소를 즉시 반영하는 위젯의 아래 또는 오른쪽에 표시됩니다.
표시된 위젯 및 DOM 요소 간의 구별 없이 기본 아이디어를 통신하는 기술 속기를 사용하는 경우가 있습니다. 이전 목록 대신 "위젯이 해당 상위 내에 포함되며 동위가 이전 동위의 아래 또는 오른쪽에 표시됩니다."라고 나타낼 수 있습니다.
DOM 트리 조직은 위젯이 배열되는 방법을 완전하게 설명하지 않습니다. 상위 요소는 하위 위젯이 두 가지 방법(하나의 동위가 다음 아래에 배열되거나 하나의 동위가 다음의 오른쪽에 배열) 중 하나로 배열되도록 하는 세부사항을 포함할 수 있습니다. 표시는 지정된 브라우저의 세부사항(예를 들어, 사용자가 대부분의 경우 런타임 시 업데이트할 수 있는 브라우저 창 크기)에 영향을 받을 수 있습니다. 마지막으로, 표시는 캐스케이딩 스타일시트의 설정에 영향을 받을 수 있습니다.
Rich UI로 웹 페이지를 개발하는 경우 정수를 선언하는 만큼의 위젯을 선언합니다. 그러나 위젯은 코드가 해당 위젯을 DOM 트리에 추가하는 경우에만 표시 가능합니다. 사용자가 단추를 클릭하는 것과 같은 런타임 이벤트에 대한 응답에서 코드가 트리를 업데이트할 수도 있습니다(위젯 추가, 변경, 제거). 중심점은 다음과 같습니다. 웹 페이지 개발의 기본 태스크는 DOM 트리를 작성하고 업데이트하는 것입니다.
Rich UI 편집기의 디자인 탭에서 작업하는 경우 초기 DOM 트리 작성에 필요한 일부 태스크는 끌어서 놓기 조작 중에 자동으로 처리됩니다. Rich UI 편집기의 소스 탭에서 또는 EGL 편집기에서 작업하는 경우 코드를 직접 쓸 수 있으며 DOM 요소도 명시적으로 참조할 수 있습니다.
- 단추에 대해 특정 유형—단추, 텍스트 필드에 대해 TextField 위젯 등을 선언하여 위젯 특성을 사용자 정의합니다. 예를 들어, 예제에 표시된 것처럼 단추의 텍스트를 "입력 대 출력"으로 설정할 수 있습니다.
- 위젯을 초기 DOM 트리에 추가하십시오.
- 변경사항을 표시 가능하도록 하려는 경우 코드의 해당 지점에서 위젯을 추가하고 변경하고 제거하여 DOM 트리를 변경하십시오.
보기에서 DOM 트리의 위젯을 숨길 수 있으므로 위젯 또는 해당 변경사항은 "표시됨"이 아닌 "표시 가능"입니다.
런타임 처리 중 지정된 시점에 위젯은 하나의 상위에 대한 하위만 될 수 있습니다.