Project Explorer
Workspace에 있는 프로젝트와 파일을 확인할 수 있습니다. File – Switch Workspace 메뉴를 선택하여 Workspace를 확인하고 변경할 수 있습니다.
File – Switch Workspace
Palette
WebSquare5가 제공하는 컴포넌트와 UDC, TTC, Snippet을 한 눈에 확인할 수 있습니다. 검색창에 컴포넌트 이름을 입력하여 컴포넌트를 검색할 수 있습니다.
Palette 뷰
Design
WYSIWYG 방식의 컴포넌트 디자인 공간으로 Palette 뷰에서 선택한 컴포넌트를 그릴 수 있습니다. 일반적으로 컴포넌트를 디자인하는 순서는 아래와 같습니다.
Palette 뷰에서 컴포넌트를 선택합니다.
Design 뷰의 원하는 위치에 선택한 컴포넌트를 그립니다.
해당 컴포넌트의 속성, 구성, 스타일을 Property, Component, Style 뷰에서 편집합니다.
우측 하단 Outline 뷰의 Design 탭은 현재 화면 구성을 트리 형식으로 표시하며, 각 컴포넌트를 선택한 후 F2 버튼을 클릭하면 해당 컴포넌트의 ID를 복사할 수 있습니다.
Outline – Design
Info
개발한 화면을 페이지 컴포넌트로 등록하여 사용할 경우, Info 탭에서 관련 정보를 등록해야 합니다. 상단의 General, Component, Property, APIs, Event 탭을 활용하여 해당 화면 및 페이지 컴포넌트의 일반적인 정보를 등록하고, 페이지 컴포넌트의 속성, 함수, 이벤트를 추가할 수 있습니다. 좀 더 자세한 정보는 WRM 컴포넌트 구성 – 생성을 참조하십시오.
Info 탭
Script
Script 탭은 ES6, ES2020 등 최신 JavaScript 문법을 지원하는 에디터를 제공합니다. 개발자는 직접 이벤트 및 함수를 사용 하여 복잡한 기능을 구현할 수 있습니다.
Script 뷰
마우스 오버 시 아래와 같이 툴팁을 제공합니다.
툴팁
아래와 같은 컨텍스트 메뉴를 사용하여 찾기, 복사, 포맷팅 등의 기능을 사용할 수 있습니다.
컨텍스트 메뉴
Script 뷰에서 스크립트 작성 시, Ctrl + Space를 누르면 아래와 같이 자동 완성 기능이 제공됩니다.
자동 완성
Source
설명 | Design 뷰에서 작업한 내용에 대해 자동으로 XML 소스가 생성되어 표시되는 공간. |
|---|---|
기능 |
|
Workspace 뷰 분리
[Window] - [New Editor]를 선택하면 Script 뷰과 Source 뷰만 따로 분리할 수 있습니다.
Design 뷰과 Script 혹은 Source 뷰을 동일한 화면에 표시하여 더욱 편리하게 웹 페이지를 디자인할 수 있습니다. Script 혹은 Source 뷰에서 수정한 내용은 CTRL+F5를 통해 Design 뷰에 반영할 수 있습니다.
Property
Design 뷰에서 컴포넌트를 선택하면 해당 컴포넌트의 속성이 Property 뷰에 표시됩니다. Property 뷰에서 각 속성을 선택하면, 해당 속성에 대한 정보가 툴팁으로 표시됩니다.
Property
속성 설명 툴팁
Property 뷰의 각 속성에 마우스 커서를 올리면 아래와 같이 좌측에 속성에 대한 설명이 툴팁으로 표시됩니다.
툴팁
Window – Preferences – WebSquare 선택 후 Show Property Tooltip 항목을 선택하거나 선택 해제하여 속성 설명 툴팁을 표시하거나 숨길 수 있습니다.
카테고리 별 분류
속성은 카테고리 별로 분류되어 표시됩니다.
카테고리를 펼친 모습
카테고리를 닫은 모습
속성 정렬
기본값은 회색으로, 사용자가 직접 입력한 값은 검정색으로 굵게 표시됩니다.
속성 표시
Key를 클릭하면 오름차순 정렬 – 내림차순 정렬 – 카테고리 표시 순으로 속성을 표시할 수 있습니다.
Key를 클릭하여 속성 정렬
Value를 클릭하면 사용자가 정의한 값이 상단에 정렬됩니다.
사용자 정의 값만 정렬
Event
Design 탭에서 컴포넌트를 선택한 후 Property 뷰의 Event 탭을 클릭하면 해당 컴포넌트가 지원하는 이벤트 목록이 표시됩니다. 각 이벤트의 script 버튼을 클릭하며, 해당 이벤트의 코드가 Script 탭에 자동 생성됩니다.
Scirpt 버튼 클릭 후 자동 생성된 이벤트 함수
script 옆의 Meta 버튼을 클릭할 경우, 해당 이벤트의 메타 정보(이름, 설명, 규칙 등)을 입력할 수 있는 창이 표시됩니다. 이벤트의 메타 정보는 W-Docs를 사용하여 화면 설계서를 생성할 Excel 파일에 포함됩니다.
Style
Design 뷰에서 선택한 컴포넌트의 인-라인 스타일이 아래와 같이 Property 뷰 하단에 표시됩니다. 상단의 버튼을 클릭하면 스타일을 숨길 수 있습니다.
Outline
YouTube 동영상 (https://youtu.be/JTCMjNt4jiM)
Design
보통의 경우 Outline 뷰의 Design 탭은 현재 화면의 구성 형태를 아래와 같이 [컴포넌트명#ID.클래스명] 형식으로 표시합니다.
우측 상단의 Change Representation 버튼()을 클릭하면 아래와 같이 클래스명을 제외하고 컴포넌트명만 확인할 수 있습니다.
Script
Outline 뷰의 Script 탭은 현재 페이지에 포함된 스크립트 목록을 표시하며, 각 스크립트를 클릭하면 Script 뷰의 해당 코드 위치로 이동할 수 있습니다.
Outline – Script
Head
DataCollection 생성
Outline 뷰의 Head 탭에서 DataCollection 항목을 우클릭하여 원하는 DataCollection을 추가할 수 있습니다.
DataList 추가
Submission 생성
Outline 뷰의 Head 탭에서 Submission 항목을 우클릭하여 원하는 Submission을 추가할 수 있습니다.
Submission 추가
도움말
스튜디오 상단의 도움말 아이콘을 누르면 별도의 웹 브라우저에서 웹스퀘어 도움말을 확인할 수 있습니다.
도움말 아이콘
별도의 웹 브라우저에 표시된 도움말
혹은, F1버튼을 클릭하여 아래와 같이 Help 탭에서 도움말을 확인할 수 있습니다.
Help 탭
Help 탭 우측 상단의 브라우저 형태의 Show in external window 아이콘을 클릭하여, 별도의 브라우저에서 도움말 컨텐츠를 확인 할 수도 있습니다.
별도의 웹 브라우저에 표시된 도움말
YouTube 동영상 (https://youtu.be/IyV5dRXMaQw)
Perspective
우측 상단의 Open Perspective 버튼을 클릭하면 화면 Perspective를 설정할 수 있습니다.
Open Perspective
Perspectives