생성

화면 파일은 웹스퀘어가 제공하는 80여개의 기본 컴포넌트와 UDC와 같은 공통 개발 컴포넌트의 속성, 함수, 이벤트 등을 설정하고, 웹스퀘어가 제공하는 공통 디자인 리소스(페이지 템플릿, 레이아웃 템플릿, 스니핏)를 이용하여 개발할 수 있습니다. 상세한 스튜디오 사용법은 화면 그리기를 참조하십시오.

화면 개발용 리소스

(1) 80여개의 기본 컴포넌트

(2) UDC

(3) 페이지 템플릿

(4) 레이아웃 템플릿

(5) 스니핏

1. WebContent 폴더 아래에 새로운 페이지 컴포넌트를 생성해야 합니다. WebContent를 우클릭한 후, New – WebSquare Page Component를 선택합니다.

2. 파일명을 입력하고, Next 혹은 Finish를 클릭합니다.

3. Next를 클릭할 경우 아래와 같이 템플릿을 선택하는 창이 나타납니다.

4. 템플릿을 사용할 경우, 템플릿을 선택 후, Finish를 클릭하십시오.

5. 위에서 선택한 템플릿이 Design 탭에 표시되는지 확인합니다.

템플릿

효율적인 프로젝트 관리를 위해 웹스퀘어5는 Page를 템플릿 기반으로 화면을 관리하고 생성할 수 있는 기능을 제공합니다. 템플릿으로 등록된 화면 파일들은 썸네일 이미지 형태로 제공되어 개발자들은 손쉽게 템플릿을 선택하고 원하는 화면을 쉽게 개발할 수 있습니다.

페이지 템플릿

웹스퀘어 페이지 컴포넌트를 최초 생성할 경우, 아래와 같이 템플릿 선택창이 표시됩니다. Use template 항목을 선택하면 Page 탭에서 웹스퀘어5가 제공하는 페이지 컴포넌트를 사용할 수 있습니다.

/WebContent/cm/template/page/ 폴더에 저장된 페이지 리소스가 썸네일 이미지 형태로 표시되어 제공됩니다.

레이아웃 템플릿

웹스퀘어 페이지 컴포넌트를 최초 생성할 경우, 아래와 같이 템플릿 선택창이 표시됩니다. Use template 항목을 선택하면 Layout 탭에서 웹스퀘어5가 제공하는 페이지 컴포넌트를 사용할 수 있습니다.

/WebContent/cm/template/layout/ 폴더에 저장된 리소스가 썸네일 이미지 형태로 표시되어 제공됩니다.

Design System (Snippet)

Design System은 프로젝트 전반에 걸쳐 사용하는 디자인 관련 리소스를 썸네일 이미지로 제공합니다. 개발자는 디자인을 직관적으로 확인할 수 있고, 단순 마우스 클릭을 통해 원하는 디자인을 화면에 추가하여 사용할 수 있습니다.

현재 Design System은 /WebContent/cm/template/snippets/ 폴더에 저장된 리소스를 썸네일 이미지로 제공하며, 향후 CSS, 컴포넌트, 레이아웃, 템플릿 등의 디자인 리소스도 썸네일 이미지로 제공할 예정입니다.