UX-Studio는 Application Frame, Project Explorer, Form Design, Properties 및 Message 창으로 구분됩니다.
구성요소 | 설명 | |
|---|---|---|
1 | Application Frame | Menu Bar, Toolbar, TextStyle Bar, Alignment Bar, Component Bar, Debug Bar, Source Control Bar, HTML5 Bar, Bookmark Bar, Statusbar 등을 표시 |
2 | Project Explorer | 작업중인 Project 구성 표시 |
3 | Form Design | Design, Source, Script 편집 |
4 | Properties | Form 및 각종 Component, Dataset등의 속성 및 이벤트 속성 표시, 편집 |
5 | Message Window | 각종 메시지 및 찾기 결과 표시 |
Application Frame
Application Frame에는 UX-Studio의 Menu와 Toolbar등이 포함되며, 현재 UX-Studio의 상태를 나타내는 Statusbar가 있습니다.
Statusbar에 표시되는 UX-Studio의 상태 값은 아래와 같습니다.
상태 | 기능 |
|---|---|
UX-Studio의 상태를 보여주는 Message Bar | |
선택된 Component의 Form 좌표 (단위:Pixel) | |
선택된 Component의 크기 (단위:Pixel) | |
현재 파일의 상태 | |
스크립트 삽입모드 상태 | |
<CAPS LOCK> 설정/해제 상태 | |
<NUM LOCK> 설정/해제 상태 | |
<SCRL LOCK> 설정/해제 상태 |
Project Explorer
Project Explorer에서는 Open된 Project에 포함된 모든 항목들을 트리 형태로 표시해주며, Project Explorer의 구성은 아래와 같습니다.
설명 | |
|---|---|
1 | Project에 포함된 항목들 중 검색어로 빠르게 찾을 수 있는 Edit창 |
2 | Edit창에 입력된 값과 일치하는 항목만 표시하는 Filter 기능 |
3 | 목록 창에 적용된 Filter를 Clear |
4 | Filter 기능을 적용할 Service Group |
5 | 편집 동기화 기능 |
6 | TypeDefinition, GlobalVariables, ADL, FDL등의 목록 창 |
Project Explorer에서 표시되는 항목은 크게 Component, Service, Update의 Prefix를 등록하는 Type Definition, Project 어디서든 사용 가능한 변수를 등록하는 GlobalVariables, Style이나 Theme, MainFrame, Tray, Widget등 Project의 전반적인 부분을 관리하는 ADL(Application Definition Language), Form 그룹인 Service로 구분되며, 편집 가능한 항목을 더블 클릭하거나 Popup Menu를 이용하여 항목에 맞는 편집기를 호출하여 작업을 할 수 있습니다.
Form Design
Form Design창 에서는 Project에서 사용 가능한 컴포넌트로 응용 프로그램의 각 화면을 작성합니다. Form Design창은 Design창과 Source Editor, Script Editor로 구성됩니다.
Design
개발자가 원하는 곳에 컴포넌트를 배치할 수 있으며 각각의 컴포넌트를 잘라내기, 복사, 붙여 넣기 및 이동하거나 정렬하여 화면 구성을 합니다. 컴포넌트를 배치하는 Form Canvas영역은 개발자가 임의로 크기를 변경할 수 있습니다.
Source
Source 편집 창에서는 Form의 내용 중 Script영역을 제외한 모든 내용이 XML형태로 표시되며, 표시된 XML을 직접 편집하여 Form의 내용을 변경할 수 있습니다.
Script
Script 편집 창에서는 Form 및 각종 컴포넌트의 Event 처리 함수와 사용자 함수들을 작성합니다.
Properties
Properties는 편집 중인 Form이나 Component, Dataset등에 대한 속성 및 Event항목의 값을 표시하고 편집할 수 있습니다.
Component List
편집 중인 Form이 지닌 모든 Component, Dataset, Animation Effect등을 Component ID (Type) 형태로 List에 보여줍니다.
Toolbar
Group Sort/Alphabet Sort
선택된 Object의 Attribute나 Event를 그룹별로 정렬하여 편집하는 Group Sort 화면입니다. 그룹별로 편집할 때는 그림과 같이 ‘+’나 ‘-‘를 마우스로 클릭하여 항목을 펼치거나 접을 수 있습니다.
선택된 Object의 Attribute나 Event를 이름순으로 정렬하여 편집하는 Alphabet Sort화면입니다.
Attribute/Event List
선택된 Object의 Attribute를 편집하는 Attribute 화면입니다.
선택된 Object의 Event를 편집하는 Event 화면입니다
Property Bind
선택된 Object의 Property에 Dataset을 Bind하는 화면입니다.
Pseudo List
선택된 Object가 컴포넌트일 경우에만 활성화되며, disabled, focused등 컴포넌트의 상태 별로 Design을 확인할 수 있습니다.
Style Property Editor
Properties창의 Style속성을 직관적으로 입력, 수정할 수 있는 편집 창으로 Style Property Editor에서 입력, 수정된 값은 Properties창에 자동으로 반영됩니다. Style Property Editor는 아래와 같이 구성되어 있습니다.
속성 | 설명 | |
|---|---|---|
1 | Component List | 편집 중인 Form이 지닌 모든 Component, Dataset, Animation Effect등을 List에 표시 |
2 | Pseudo List | 선택된 Component의 각 Pseudo별로 Style Property를 수정할 수 있도록 Pseudo List를 표시 |
3 | Style Property | Component의 Style Property 목록을 직관적으로 수정할 수 있도록 표시 |
자세한 내용은 Style Property Editor를 참고하십시오.
Message Window
Output
UX-Studio로 작업하는 중에 발생할 수 있는 각종 메시지를 표시합니다. 메시지에는 각종 오류, 진행과정 표시 메시지 등이 포함됩니다.
Debug
Debug창은 디버깅 모드에서 발생하는 메시지를 보여줍니다.
Find Results
Find in Files명령의 처리 결과를 표시합니다. 표시된 각 파일을 더블 클릭하면 해당 편집 창이 열리고 해당 라인이 표시됩니다. Find in Files 검색 창에서 ‘Find results 2 window’의 체크 옵션에 따라 ‘Find Results 1’ 또는 ‘Find Results 2’에 결과를 표시합니다.
Global Bookmark
Source 또는 Script 편집 창에서 사용된 Bookmark 목록을 보여줍니다. 목록에 표시된 Bookmark를 더블 클릭하면 편집 창이 열리고 해당 라인이 표시됩니다.
아이콘 | 이름 | 설명 | |
|---|---|---|---|
1 | Toggle Bookmark | 커서 위치의 Bookmark를 설정 및 해제 | |
2 | Previous Bookmark | 이전 Bookmark를 찾아 커서를 위치 | |
3 | Next Bookmark | 다음 Bookmark를 찾아 커서를 위치 | |
4 | Previous Bookmark in Document | 현재 편집 창에서 이전 Bookmark를 찾아 커서를 위치 | |
5 | Next Bookmark in Document | 현재 편집 창에서 다음 Bookmark를 찾아 커서를 위치 | |
6 | Clear Bookmark | 설정된 Bookmark를 모두 해제 | |
7 | Clear Bookmark In Document | 현재 편집 창에서 설전된 Bookmark를 모두 해제 |
Project Filter의 옵션을 조절하여 Bookmark 목록을 Filter할 수 있습니다. 또한 아래의 옵션 외에 Bookmark를 가진 Project 목록이 옵션 창에 추가로 표시됩니다.
옵션 | 설명 | |
|---|---|---|
1 | Show All Bookmarks | UX-Studio에서 설정된 모든 Bookmark를 목록에 표시 |
2 | Show Bookmarks that marked in Current project only | 현재 Project에 해당하는 Bookmark만 목록에 표시. |
Global Bookmark창에서 Bookmark를 설정, 해제할 경우 해당 편집 창에 바로 반영되며, Bookmark 목록은 UX-Studio에서 별도로 관리하기 때문에 다른 장소에서 작업된 Project를 복사하여 작업할 경우 Bookmark는 표시되지 않습니다.
Debug Window
Breakpoints
Script편집 창에서 사용된 Breakpoint목록을 보여줍니다. 목록에 표시된 Breakpoint를 더블 클릭하면 편집 창이 열리고 해당 라인이 표시됩니다.
메뉴 | 아이콘 | 기능 | |
|---|---|---|---|
1 | Go To Source | 선택된 Breakpoint에 해당하는 편집 창이 열리고 해당 라인을 표시 | |
2 | Delete | Breakpoints 창에서 선택된 Breakpoint를 해제 | |
3 | Delete All | 모든 Breakpoint를 해제 | |
4 | Enable/Disable | Breakpoints 창에서 선택된 Breakpoint를 활성화/비활성화 | |
5 | Enable/Disable All | 설정된 모든 Breakpoint를 활성화/비활성화 |
Breakpoint 목록은 UX-Studio에서 별도로 관리하기 때문에 다른 장소에서 작업된 Project를 복사하여 작업할 경우 Breakpoint는 표시되지 않습니다.
Call Stack
UX-Studio에서 Debugging시 Script함수가 호출된 순서를 보여주는 메시지 창입니다. Call Stack에서 항목을 더블 클릭하면 편집 창이 열리고 해당 라인이 표시됩니다.
Column | 설명 | |
|---|---|---|
1 | Function | 현재 커서가 위치한 함수명 |
2 | Filename | 함수가 위치한 파일명 |
3 | Line | 파일 라인 번호 |
Variables
UX-Studio에서 Debugging시 커서가 위치한 함수에서 사용되는 변수들을 표시해주는 창입니다.
Column | 설명 | |
|---|---|---|
1 | Name | 변수명 |
2 | Value | 변수에 저장된 Value |
Watch
UX-Studio에서 Debugging시 사용자가 Script내에서 사용된 변수를 쉽게 확인하기 위해 사용자가 직접 Watch창에 변수 명을 입력해서 확인할 수 있는 창입니다.
Column | 설명 | |
|---|---|---|
1 | Expression | 사용자가 입력한 변수명 |
2 | Value | 변수에 저장된 Value |