가이드라인: 웹 사용자 인터페이스 구축주제소개
RAD 6.0의 웹 개발 환경은 웹 사용자 인터페이스를 빠르게 빌드할 수 있는 포괄적인 툴 세트를 제공합니다. 이 툴에는 Web Site Designer 및 Page Designer와 복잡한 웹 페이지를 간단하게 작성할 수 있는 여러 가지 마법사가 포함됩니다. 이 문서는 개발 방법을 설명하고 지원되는 페이지 유형을 식별하며 웹 페이지 작성을 용이하게 하는 기능을 강조함으로써 이러한 툴을 사용하여 웹 사용자 인터페이스를 효과적으로 빌드할 수 있는 방법에 대한 가이드라인을 제공합니다. 개발 접근법
Page Designer를 사용하여 즉시 사용자 인터페이스에 개별 웹 페이지를 빌드할 수도 있지만 RAD 6.0에서는 Web Site Designer에서 시작하는 하향식 개발 방법을 권장합니다. 이 경우 탐색 편집기를 사용하여 다음 기능을 수행할 수 있습니다.
먼저 웹 사이트 구조를 나타내는 계층 구조 다이어그램을 빌드합니다. 기존 또는 새 페이지 및 프로젝트를 다이어그램으로 끌어서 놓아 그룹으로 구성할 수 있는 사이트 드로어를 팔레트 보기에서 사용할 수 있습니다. 편집기를 사용하면 시각적 방식으로 페이지를 쉽게 추가, 삭제 및 재배열할 수 있습니다. 탐색 다이어그램을 작성하면 Web Site Designer가 자동으로 웹 페이지 간의 탐색 링크를 식별 및 추적하고 사이트 맵을 생성할 수 있습니다. 나중에 Page Designer를 사용하여 개별 페이지를 작성하는 경우, 탐색줄 또는 메뉴와 같이 사이트 구조에 따라 적합한 링크만 표시하도록 사용자 정의할 수 있는 탐색 요소를 추가할 수 있습니다(예: 맨 위, 상위, 동위 및 첫 번째 하위에 대한 링크만 표시). 페이지 템플리트는 모든 페이지에 공통적인 시각 요소 및 레이아웃을 정의하여 사용자가 웹 사이트에 대한 일관적인 룩앤필을 적용할 수 있습니다. 웹 프로젝트를 작성할 때 마법사를 사용하여 작성하거나 나중에 별도로 작성할 수 있습니다. 탐색 편집기를 사용하면 다이어그램의 모든 페이지 또는 선택한 페이지에 템플리트를 쉽게 적용할 수 있습니다. 전체 웹 사이트에 대한 탐색을 일관적으로 제어하려면 템플리트에 탐색 요소를 포함하여 모든 페이지에 적용하는 것이 가장 올바른 방법입니다. 페이지를 두 번 눌러 페이지 작성 마법사를 실행합니다. 이 마법사를 사용하면 지원되는 페이지 유형 중 하나를 선택하고(페이지 유형 선택 참조) 초기 페이지 특성을 지정한 후 Page Designer 편집기에서 열 수 있습니다. 이제 웹 페이지 컨텐츠를 작성 및 편집할 수 있습니다. 웹 사이트 탐색 드로어는 팔레트 보기에서 자동으로 사용할 수 있으며 사용자가 탐색 요소를 페이지로 끌어서 놓을 수 있습니다. 페이지 유형 선택
RAD 6.0은 HTML, JSP 및 Faces JSP 기술을 사용한 웹 사용자 인터페이스 빌드를 지원합니다. 각 기술은 다른 유형의 웹 어플리케이션 요구사항을 처리하는 구현 선택사항을 나타냅니다. 각 기술은 또한 다른 웹 사용자 인터페이스 기능을 지원하는 페이지 유형을 정의합니다. 따라서 웹 사용자 인터페이스를 빌드할 때는 각 페이지 유형이 지원하는 기능을 이해하고 개발 중인 웹 어플리케이션 유형에 적합한지 여부를 판단할 수 있어야 합니다. 아래 섹션에서는 RAD 6.0의 다른 페이지 유형이 지원하는 웹 사용자 인터페이스 기능을 식별하고 웹 어플리케이션에 따라 정적, 동적, Struts 및 JSF(JavaServer Faces) 프레임워크에서 사용할 수 있는 페이지 유형을 지정합니다. 지원된 사용자 인터페이스 기능![]() RAD 6.0에서 웹 사용자 인터페이스를 구현하기 위해 제공하는 다른 페이지 유형은 HTML, JSP 및 Faces JSP의 세 가지 카테고리로 분류할 수 있습니다. JSP 페이지 유형은 또한 간단한 JSP 파일과 Struts JSP 페이지를 구분합니다. 마찬가지로 Faces JSP 페이지 유형은 기본 Faces JSP 또는 클라이언트측에 캐싱하는 Faces JSP일 수 있습니다. 다른 페이지 유형은 아래에서 설명합니다. HTML 이 페이지 유형을 사용하면 기본 HTML 페이지를 빌드할 수 있으며 또한 기타 마크업 언어를 지원합니다(표 1 - 페이지 유형 기능 참조). 프레임 세트, 계단식 스타일시트 및 JavaScript 스크립팅과 같은 일반 HTML 기능 또한 지원됩니다. 또한 이 툴을 사용하면 페이지 템플리트를 정의 및 사용하여 웹 페이지 룩앤필을 일관적으로 작성할 수 있습니다. JSP JSP 페이지 유형은 JSP 기술을 사용하여 구현되는 사용자 인터페이스를 지원합니다. (RAD 6.0은 JSP 2.0 표준을 지원합니다.) 기본 HTML 페이지의 모든 기능은 JSP 스크립팅(Java Scriptlet) 및 조치(사용자 정의 태그) 기술로 사용 및 구현됩니다. 이 툴을 사용하면 JSP 단편의 정의에 기타 JSP 페이지에서 올바르게 포함될 수 있는 별도 파일로 페이지의 공통 부분을 포함할 수 있습니다. SDO(Service Data Object) 기술을 사용한 백엔드 데이터 액세스 또한 지원됩니다. (SDO에 대한 설명은 개념: 웹 어플리케이션 기본 구조를 참조하십시오.) Struts JSP Struts JSP 페이지는 Struts 특정 요소에 대한 지원을 자동으로 포함하여 간단한 JSP를 확장합니다. (Struts에 대한 설명은 개념: 웹 어플리케이션 기본 구조를 참조하십시오.) 이 페이지는 Struts 기본 구조를 사용하여 구현되는 어플리케이션의 웹 사용자 인터페이스를 개발하기 위해 사용됩니다. 특히 이 툴에는 Struts HTML(struts-html.tld) 및 Bean(struts-bean.tld) 태그 라이브러리에 대한 액세스가 자동으로 포함되며 ActionForm Bean의 필드를 직접 페이지에 포함할 수 있습니다. 또한 기타 Struts 라이브러리를 추가할 수 있는 옵션을 제공합니다. Faces JSP Faces JSP 페이지 유형은 특히 JSF 기술을 사용하여 구현되는 웹 사용자 인터페이스에 맞게 설계된 JSP 페이지입니다. (JSF에 대한 설명은 개념: 웹 어플리케이션 기본 구조를 참조하십시오.) 이 페이지 유형은 페이지로 끌어서 올 수 있는 사전 정의된 사용자 인터페이스 컴포넌트(Faces 컴포넌트) 및 JSF 코어 태그 라이브러리에 대한 액세스를 제공합니다. 또한 Faces JSP는 예를 들어 Java 스니펫을 사용하여 사용자 인터페이스 컴포넌트 이벤트의 처리를 지정하는 스크립팅을 지원합니다. 클라이언트측에 캐싱하는 Faces JSP 이 페이지 유형은 클라이언트측에 데이터를 캐시할 수 있는 사용자 인터페이스 컴포넌트를 제공하여 Faces JSP를 확장합니다. 특히 클라이언트측 캐싱을 사용하면 서버측 데이터와 반대로 JavaScript 변수에 컴포넌트를 바인드할 수 있습니다. 이 경우 클라이언트와 서버 간의 라운드트립 횟수가 줄어들어 웹 페이지 빌드를 보다 효과적으로 수행할 수 있습니다. 제공되는 Faces 클라이언트 컴포넌트는 다음과 같습니다.
아래 표는 각 페이지 유형에서 지원하는 기능에 대해 요약 설명하며 웹 어플리케이션의 사용자 인터페이스 요구사항을 가장 충족시키는 유형을 판별하기 위한 지침으로 사용할 수 있습니다.
* SDO 데이터 액세스에는 WAS v5.1이 전개 대상으로 필요합니다. 표 1 - 페이지 유형 기능
웹 어플리케이션 적용 가능성
표 2 - 페이지 유형 적용 가능성
페이지 편집
Page Designer는 RAD 6.0에서 웹 페이지를 편집하기 위해 사용하는 툴입니다. 이 툴은 시각적인 WYSIWYG 또는 텍스트 소스 코드 기반 방식으로 페이지를 작성할 수 있는 중앙 편집기 보기를 제공합니다. 이 툴은 다른 웹 페이지 유형의 개발을 지원하는 기타 보기와 함께 사용합니다. 특히 다음 보기를 사용하여 페이지를 쉽게 편집할 수 있습니다. 팔레트 보기 팔레트 보기는 페이지로 이동하여 즉시 사용할 수 있는 다양한 UI 컴포넌트 세트를 제공합니다. 이 보기는 기능적으로 관련이 있는 컴포넌트를 드로어로 분류합니다. 예를 들어, 단추, 텍스트 필드 및 드롭 다운 상자와 같은 표준 HTML 양식 요소는 양식 태그 드로어로 분류됩니다. 팔레트 보기에 표시되는 드로어 목록은 편집 중인 페이지 유형에 따라 다릅니다. 표 3에는 지원되는 각 페이지 유형에 표시되는 기본 드로어가 나열됩니다. 팔레트와 대부분의 드로어는 드로어와 컴포넌트를 각각 추가, 삭제, 숨기기 또는 표시하여 사용자 정의할 수 있습니다. 각 드로어 및 해당 기본 컨텐츠에 대한 설명은 제품 문서를 참조하십시오.
표 3 - 페이지 유형별 기본 팔레트 드로어
빠른 편집 보기 이 보기를 사용하면 JavaScript 코드 스니펫을 빠르게 페이지에 추가할 수 있습니다. 페이지에서 컴포넌트를 선택하면 해당 컴포넌트에 적합한 이벤트 목록이 빠른 편집 보기의 왼쪽 분할창에 표시됩니다. 그러면 이벤트를 선택하여 다음 중 한 가지 방법으로 해당 스크립트를 추가할 수 있습니다.
자원
Web Site Designer 및 Page Designer에 대한 자세한 정보는 다음과 같이 제품 문서를 참조하십시오.
|
Rational Unified Process
|