유용한 기능

그리기 모드

WebSquare5는 Static 및 Absolute 그리기 모드를 제공합니다.


Static

Absolute

방식

클릭&클릭 방식.

  1. Palette 뷰에서 추가할 컴포넌트를 클릭.

  2. Design 뷰의 팝업창에서 추가할 위치를 지정하고 클릭.

클릭&드래그 방식.

  1. Palette 뷰에서 추가할 컴포넌트를 클릭.

  2. Design 뷰에서 컴포넌트를 직접 드래그하여 그리기.

컴포넌트 위치 결정

Design 뷰에서 선택한 컴포넌트를 기준으로 새로운 컴포넌트의 위치가 결정됨.

Design 뷰에서 드래그하여 직접 위치를 결정.

렌더링

컴포넌트 생성 시 지정한 위치에 따라 렌더링 순서가 결정됨.

렌더링 순서가 컴포넌트를 그린 순서를 따라감.

권장 환경

기존에 존재하는 화면을 수정하거나 기존 화면에 새로운 컴포넌트를 추가하는 경우.

새로운 WebSquare 페이지를 생성할 경우.

YouTube 동영상 (https://youtu.be/5-aBC8siCO8)

Static 모드 (클릭 & 클릭)

  1. 툴바의 Change Draw Mode 아이콘을 클릭하여 "Static" 모드를 선택합니다.

  2. Palette 뷰에서 (컴포넌트를 검색하여) 추가할 컴포넌트를 선택합니다.

  3. 선택한 컴포넌트를 추가할 위치를 선택합니다.

  4. Component 뷰에서 컴포넌트가 추가되었는지 확인합니다.

그리기 모드 변경

위치 결정

Static 모드 권장


대부분의 경우 Static 모드 사용을 권장합니다.

Absolute 모드 (클릭 & 드래그)

  1. 툴바의 그리기 모드 변경 아이콘을 클릭하여 "Absolute" 모드를 선택합니다.

  2. Palette 뷰에서 (컴포넌트를 검색하여) 추가할 컴포넌트를 선택합니다.

  3. Design 뷰에서 직접 마우스 드래그하여 컴포넌트의 위치와 크기를 결정합니다. (더블 클릭할 경우 해당 위치에 기본 크기로 컴포넌트가 추가됩니다.)

  4. Component 뷰에서 컴포넌트가 추가되었는지 확인합니다.

그리기 모드 변경

Absolute 모드에서 그리기

드래그 & 드롭을 통한 컴포넌트 제어

사용자는 드래그 & 드롭을 통해 컴포넌트를 쉽게 선택, 이동, 리사이징할 수 있습니다. 선택한 컴포넌트는 아래와 같이 테두리에 선과 점이 표시됩니다.

컴포넌트 선택

YouTube 동영상 (https://youtu.be/OZehI_ObKQE)

리사이징

컴포넌트를 클릭 후 원하는 크기로 드래깅하여 크기를 변경할 수 있습니다. 크기 정보도 같이 표시됩니다.

사이즈 조정을 위한 드래깅

사이즈 조정 후

여러 컴포넌트 선택

여러 컴포넌트를 한번에 선택하여 이동하는 것도 가능합니다.

여러 컴포넌트를 드래깅하여 선택

여러 컴포넌트가 선택된 모습

여러 컴포넌트를 드래깅하여 선택

여러 컴포넌트가 동시에 선택된 모습

앞/뒤 이동

동일 모드 사용


컴포넌트 생성 및 이동 시 동일한 모드를 사용하십시오.

즉, Static 모드에서 생성한 컴포넌트의 경우 Static 모드에서 이동하고, Absolute 모드에서 생성한 컴포넌트의 경우 Absolute 모드에서 이동할 것을 권장합니다.

Static 모드

특정 컴포넌트를 드래깅하여 다른 컴포넌트의 앞/뒤로 이동할 수 있습니다.

뒤로 이동

원하는 컴포넌트를 이동 기준 컴포넌트의 뒷 부분에 그림자가 표시되도록 드래깅합니다.

아래 예제에서는:

(1) New 컴포넌트를 222 컴포넌트(이동 기준 컴포넌트)로 드래깅한 후,

(2) 222 컴포넌트 뒤에 그림자가 표시되는 지점에서 드롭합니다.

(3) New 컴포넌트는 222 컴포넌트 뒤로 이동됩니다.

"222" 뒤로 이동

앞으로 이동

원하는 컴포넌트를 이동 기준 컴포넌트의 앞 부분에 그림자가 표시되도록 드래깅합니다.

아래 예제에서는:

(1) New 컴포넌트를 222 컴포넌트(이동 기준 컴포넌트)로 드래깅한 후,

(2) 222 컴포넌트 앞에 그림자가 표시되는 지점에서 드롭합니다.

(3) New 컴포넌트는 222 컴포넌트 앞으로 이동됩니다.

"222" 앞으로 이동

Absolute 모드

Absolute 모드에서는 컴포넌트를 직접 드래깅하여 원하는 위치로 이동할 수 있습니다.

이동할 위치로 드래깅

드래깅 후 이동 완료된 모습

여러 컴포넌트를 한번에 이동

여러 컴포넌트를 한번에 선택하여 이동하는 것도 가능합니다.

동일 모드 사용


컴포넌트 생성 및 이동 시 동일한 모드를 사용하십시오.

즉, Static 모드에서 생성한 컴포넌트의 경우 Static 모드에서 이동하고, Absolute 모드에서 생성한 컴포넌트의 경우 Absolute 모드에서 이동할 것을 권장합니다.

Static 모드

New 컴포넌트 뒤로 한번에 이동

이동 후

Absolute 모드

드래깅

이동 후

하위로 이동

Group과 같이 하위에 컴포넌트를 포함할 수 있는 경우, 하위 이동도 가능합니다. 아래 그림은 TextBox를 Group 내부로 드래깅 하여 Group 하위로 이동하는 예시입니다.

이동 전

아래 그림은 이동 후의 모습입니다. Group 하위로 이동된 것을 Design 뷰 및 Component 뷰에서 확인할 수 있습니다.

이동 후

컴포넌트 정보 확인하기

툴팁

컴포넌트를 클릭하거나 컴포넌트 상에 마우스를 가져다 대면 아래와 같이 툴팁이 표시됩니다.

툴팁

툴팁 표시/숨김 아이콘을 클릭하거나 T 키를 눌러 툴팁을 표시하거나 숨길 수 있습니다.

이벤트 표시

컴포넌트에 이벤트 및 이벤트 함수가 정의된 경우 아래와 같이 좌측 상단에 붉은 점이 표시됩니다.

이벤트가 추가된 컴포넌트 (OK 버튼)

마우스 커서를 올리면 툴팁이 표시되고 해당 이벤트 정보를 확인할 수 있습니다.

ref 바인딩 표시

컴포넌트가 ref 속성을 통해 바인딩된 경우, 아래와 같이 좌측 상단에 초록색 점이 표시됩니다. 이벤트가 존재할 경우, 빨간색 점과 함께 표시됩니다.

이벤트 및 ref 바인딩 표시

마우스 커서를 올리면 툴팁이 표시되고 ref 속성을 통한 바인딩 정보를 확인할 수 있습니다.

툴팁 상의 이벤트 및 ref 정보 표시

퀵 툴바

Design 뷰에서 특정 컴포넌트를 선택한 후 스페이스바를 누르면 아래와 같은 퀵 툴바가 나타납니다. 사용자는 방향키를 사용하여 퀵 툴바의 각 아이콘을 선택할 수 있습니다.

컴포넌트 퀵 툴바

GridView의 경우, 컬럼을 선택한 후 스페이스바를 누르면 아래와 같은 퀵 툴바가 나타납니다. 위의 일반 컴포넌트 퀵 툴바와 달리 GridView 컬럼의 inputType 속성을 변경할 수 있습니다.

GridView 컬럼 퀵툴바

퀵 툭바 상의 각 아이콘에 대한 설명은 아래와 같습니다.

퀵 틀바 설명

아이콘

설명

컴포넌트 퀵 툴바

GridView 컬럼 퀵 툴바

  • 퀵 툴바 닫기.

  • (동일.)

  • 현재 선택한 컴포넌트를 기준으로 관련 컴포넌트 선택.

    • 부모 선택.

    • 왼쪽 형제 선택.

    • 오른쪽 형제 선택.

    • 자식 선택.

  • (동일.)

  • InputBox 컴포넌트 추가.

  • (해당 없음.)

  • SelectBox 컴포넌트 추가.

  • GridView 컬럼에 inputType="select" 적용.

* InputCalendar 컴포넌트 추가.

  • GridView 컬럼에 inputType="inputcalendar" 적용.

  • Radio 컴포넌트 추가.

  • GridView 컬럼에 inputType="radio" 적용.

  • CheckBox 컴포넌트 추가.

  • GridView 컬럼에 inputType="checkbox" 적용.

  • TextBox 컴포넌트 추가.

  • (해당 없음.)

* Span 컴포넌트 추가.

  • (해당 없음.)

  • Trigger 컴포넌트 추가.

  • GridView 컬럼에 inputType="button" 적용.

  • Anchor 컴포넌트 추가.

  • GridView 컬럼에 inputType="link" 적용.

  • Group 컴포넌트 추가.

  • (해당 없음.)

  • (해당 없음.)

  • GridView 컬럼에 inputType="image" 적용.

  • (해당 없음.)

  • GridView 컬럼에 inputType="textImage" 적용.

  • (해당 없음.)

  • GridView 컬럼에 inputType="custom" 적용.

컨텍스트 메뉴

메뉴 구성

컴포넌트를 우클릭하면 아래와 같이 컨텍스트 메뉴가 표시됩니다.

1모든 컴포넌트에 공통적으로 적용되는 메뉴입니다.

2현재 선택한 컴포넌트에 적용 가능한 메뉴만 표시됩니다.

다음은 GridView를 우클릭할 때 표시되는 컨텍스트 메뉴입니다.

GridView 컨텍스트 메뉴

등록 이벤트 표시

컴포넌트 우클릭 후 이벤트 - 이벤트 종류를 선택하여 이벤트 추가가 가능합니다. 단, 이미 추가된 이벤트는 아래와 같이 " * " 기호와 함께 이벤트 목록 상단에 표시됩니다.

이벤트 추가

메뉴 편집

  1. Window – Preferences – WebSquare – Context Menu Setting을 선택합니다.

  2. 마우스 우클릭 시 표시되는 컨텍스트 메뉴의 보임/숨김을 지정할 수 있습니다.

Context Menu Setting

Studio 재시작


컨텍스트 메뉴 변경 후 Studio를 재시작하십시오.

Studio 재시작 후, 새로 편집한 컨텍스트 메뉴가 적용됩니다.

컴포넌트 복사

Design 뷰에서 CTRL+C와 CTRL+V를 사용하여 컴포넌트의 복사&붙여넣기가 가능합니다. 단축키는 아래와 같습니다.

복사 관련 단축키

기능

단축키

부모 컴포넌트 선택

F2

복사

CTRL+C

붙여넣기

CTRL+V

잘라내기

CTRL+X

컴포넌트 앞에 붙여넣기

CTRL+Shift+V

컴포넌트 뒤에 붙여넣기

CTRL+ALT+V

표 편집

GridView나 TableLayout과 같은 표 형식 컴포넌트의 경우, 아래의 아이콘을 사용하여 표 편집을 쉽게할 수 있습니다.

(1) Insert Column into Left CTRL + Shift + L

왼쪽에 열 삽입

(2) Insert Column into Right CTRL + Shift + R

오른쪽에 열 삽입

(3) Add Row CTRL + Shift + R

행 추가

(4) Delete Column CTRL + Alt + C

열 삭제

(5) Delete Row CTRL + Alt + R

행 삭제

(6) Merge Cell CTRL + M

셀 병합

(7) Divide Cell CTRL + Shift + M

병합 해제

(8) Move Column Left

왼쪽으로 열 이동

(9) Move Column Right

오른쪽으로 열 이동

검색

Studio의 Palette에서는 추가할 컴포넌트를 검색할 수 있습니다. Design 뷰에서 선택한 컴포넌트의 속성및 이벤트를 Property 뷰에서 검색할 수 있으며, Outline 뷰에서는 현재 페이지를 구성하는 각종 요소들을 검색할 수 있습니다.

YouTube 동영상 (https://youtu.be/D1N7hJB6DeE)

Palette

Design 뷰에서 컴포넌트를 그릴 때 Palette에서 컴포넌트를 검색할 수 있습니다. 컴포넌트 명이나 설명을 키워드로 입력하여 검색하십시오.

컴포넌트 검색 예시 (Palette)

Property

Property, Event, Style, Meta 탭에서 Key, Value, Description 항목에 대한 키워드를 통해 각 속성 및 이벤트, 스타일 등을 검색할 수 있습니다.

속성, 이벤트, 스타일 검색

Outline

Design, Script, Head 탭에서 키워드를 입력하여 해당 요소를 검색할 수 있습니다.

스크립트 검색

WebSquare Search

WebSquare Search 기능을 이용하여 WebSquare 페이지 파일을 효율적으로 검색할 수 있습니다.

YouTube 동영상 (https://youtu.be/8tWUw6h6lnY)

Search – WebSquare 메뉴를 선택하십시오.

Search – WebSquare

혹은, 아래와 같이 툴바의 아이콘을 클릭하여 WebSquare Search를 선택하십시오.

웹스퀘어 검색

다음은 SelectBox를 검색하되, SelectBox의 chooseOptionLabel 속성 값이 "city"를 포함한 WebSquare 페이지 파일을 찾는 예제입니다.

WebSquare 페이지 파일 찾기 예

아래와 같이 Search 뷰에 검색 결과가 표시되고, 파일을 클릭하여 해당 부분을 확인할 수 있습니다.

WebSquare 페이지 검색 결과

화면 가이드

YouTube 동영상 (https://youtu.be/Jdev6Y5Xmg8)

눈금자 (Ruler)

눈금자는 아래와 같이 Design 뷰 외곽에 표시됩니다.

눈금자 밖으로

눈금자 표시 변경 아이콘을 사용하여 눈금자를 표시하거나 숨길 수 있습니다.

눈금자 표시/숨김

눈금선 (Gridlines)

눈금선은 Design 뷰 바탕에 격자 무늬로 표시됩니다.

눈금선 표시 변경 아이콘을 선택하여 눈금선을 표시하거나 숨길 수 있습니다

눈금선 표시/숨김

눈금선 숨기기

안내선 (Guides)

눈금자 위의 원하는 지점에서 클릭할 경우, 아래와 같이 안내선을 생성할 수 있습니다. 이미 생성한 안내선을 다시 클릭하면 안내선을 삭제할 수 있습니다.

안내선

안내선 표시/숨김 아이콘을 클릭하여 안내선을 숨기거나 표시할 수 있습니다.

안내선 표시/숨김

미리 보기

WebSquare 뷰어

WebSquare Studio는 뷰어 기능을 제공합니다. 상단의 WebSquare 뷰어로 확인 아이콘을 클릭하십시오.

WebSquare 뷰어로 확인

아래와 같이 현재 작업 중인 페이지가 WebSquare Viewer에 렌더링된 모습을 확인할 수 있습니다.

WebSquare Viewer에서 확인

브라우저에서 확인

페이지가 렌더링된 모습을 브라우저에서 직접 확인할 수도 있습니다. 아래와 같이 브라우저 확인 – 설정 아이콘을 클릭하여 브라우저를 설정하십시오.

브라우저로 확인

모든 브라우저로 확인

[Windows] - [Preferences] - [External Programs]에 추가한 모든 브라우저에서 개발자가 작업한 파일을 표시합니다.

기본 브라우저로 확인

개발자가 PC에 설정한 기본 브라우저에서 개발자가 작업한 파일을 표시합니다.

설정

기본 브라우저를 설정할 수 있습니다.

YouTube 동영상 (https://youtu.be/uvP7ZkEogRc)

미리 보기 주소 비교


SP4

/websquare/websquare.html?w2Config=/.settings/config.xml&w2xPath=/tabs_added.xml


SP5

/websquare/websquare.html?w2xPath=/tabs_added.xml

기타

스타일 제거

Static 모드 (클릭 & 클릭) 모드에서 컴포넌트를 그릴 경우, 스타일 정보 없이 컴포넌트 그리기가 가능합니다. Inline Style 버튼을 클릭한 후 none을 선택하십시오.

스타일 제거 기능 (Inline Style – none)

Design 뷰에서 컴포넌트를 그린 후, 아래와 같이 Component 뷰에서 해당 컴포넌트를 선택해도 Style 뷰에는 아무 정보도 표시되지 않습니다.

스타일 정보가 없는 Style 뷰

SVN 및 Git 플러그인

WebSquare5 Studio는 SVN 플러그인과 Git 플러그인을 포함합니다. 아래와 같이 Window – Show View를 선택 후, SVN 혹은 Git을 검색해서 사용할 수 있습니다.

플러그인 찾기

SVN 및 Git 플러그인

고유 ID 부여

새로 생성되는 컴포넌트에 기존 ID와 중복되지 않는 ID를 부여하는 기능입니다. 초기 상태에서 이 기능은 비활성화 되어 있습니다. 아래와 같은 방법으로 본 기능을 사용할 수 있습니다.

컴포넌트 복사


복사를 통해 컴포넌트를 새로 생성할 경우 컴포넌트 복사 ID 자동 생성 기능을 사용하십시오.

동일한 ID의 컴포넌트가 여러 개 존재할 경우 미리보기를 할 수 없습니다.

Design 뷰 확대/축소

툴바의 확대/축소 아이콘을 사용하여 Design 뷰 화면만 확대 및 축소가 가능합니다.

확대/축소

청사진

컴포넌트가 겹쳐져 있거나 화면이 복잡하게 구성된 경우, 청사진 기능을 사용하십시오. 아래와 같이 컴포넌트의 가시성이 높이집니다.

청사진 기능을 적용한 모습

청사진 기능을 사용하지 않은 모습

청사진 아이콘

신규 아이콘

신규 아이콘

아이콘

설명

WebSquare 뷰어


Design 뷰 확대/축소

눈금선 (Gridlines)

청사진

툴팁

눈금자 (Ruler)

안내선 (Guides)

퀵 툴바 (일반 컴포넌트)

퀵 툴바 (GridView 컬럼)