화면 구성

이 장 에서는 개발 툴 UI 구성에 대해 설명한다.

  • 개발툴 UI 구성
  • 메뉴
  • 툴바
  • 오브젝트 윈도우
  • 프로젝트 윈도우
  • SCREEN
  • 정보 윈도우
  • 속성 윈도우
  • 오브젝트 리스트 윈도우

개발툴 UI 는 메뉴, 툴바, 오브젝트 윈도우, 프로젝트 윈도우, 디자인 화면, 정보 윈도우, 속성 윈도우, 오브젝트 리스트 윈도우로 구성된다. 다음은 xFrame5@DevStudio 를 실행 했을 때 나타나는 화면이다.

은 xFrame5@DevStudio 의 메뉴이다. 다음은 메뉴 부분 그림이다. 자세한 메뉴에 대한 설명은 개발툴 메뉴 설명을 참고하길 바란다.

그림. xFrame5@DevStudio 메뉴

 : 화면 디자인 창 크기 최소화 하기, 현재 열려있는 화면 닫기, 다음 화면으로 이동하는 기능을 한다.

다음은 메뉴 상세 그림이다.



그림. 메뉴

: 프로젝트 메뉴는 새로운 프로젝트 생성 및 열기, 삭제하고 xFrame5@DevStudio를 종료한다.

그림. 프로젝트 메뉴

: 화면 메뉴는 새로운 화면을 생성하고 현재 열려있는 화면을 닫고 화면의 변경된 내용을 저장, 인쇄 하기 위한 메뉴이다.

그림.화면 메뉴

: 화면을 편집할 때 사용하는 메뉴이다.

그림.편집 메뉴

: 화면을 편집하기 위한 보기의 여러가지 기능을 제공한다.

그림.보기 메뉴

: 현재 열려있는 편집 윈도우들을 편의에 의해 정렬하는 메뉴이다.

그림.창 메뉴

: 화면 편집에 필요한 도움말들을 보여주는 메뉴이다.

그림.도움말 메뉴

는 자주 사용하는 기능들을 버튼 형태로 도출시켜 즉시 수행할 수 있도록 해주는 툴 바 이다. 다음은 xFrame5@DevStudio 의 툴 바 그림이다. 자세한 툴바에 대한 설명은 개발툴메뉴 설명을 참고하길 바란다.

그림. xFrame5@DevStudio 툴 바

은 오브젝트 윈도우로 화면 편집에 사용될 오브젝트들을 모아둔 윈도우이다. 윈도우 오브젝트는 New, Template-Server, Template-Local 부분으로 구성되어 있다. 윈도우의 오브젝트를 선택한 다음 화면에서 마우스왼쪽버튼을 누르면 화면에 선택된 오브젝트가 생성된다. 다음은 오브젝트 윈도우와 Template-Server, Template-Local 윈도우이다. 자세한 오브젝트윈도우에 대한 설명은 개발툴메뉴 설명을 참고하길 바란다.

그림.오브젝트 윈도우

그림.Template-Server 윈도우

그림.Template-Local 윈도우

는 프로젝트 윈도우로 해당 프로젝트의 화면, 공통모듈, 라이브러리 등을 일목요연하게 보여주고 해당 객체에 쉽게 접근할 수 있도록 한다. Screen, Global Module, Global xDataSet 부분으로 구성되어 있다. 다음은 프로젝트 윈도우이다.

그림. 프로젝트 윈도우

Screen 객체 하위에는 그룹이 있으며, 그룹 하위에는 해당 그룹의 화면들이 있다. 화면을 더블클릭하면 해당되는 화면이 열린다. Screen 객체 윈도우는 위의 프로젝트 윈도우와 같다.

Global Module 객체는 화면의 전역에서 사용할 모듈을 정의하고 관리하는 객체이다. 다음은 Global Module 객체 윈도우이다.

그림. 공통모듈 객체 윈도우

공통 모듈 추가 생성하는 방법을 알아보자. 해당 프로젝트를 마우스 우 클릭해서 공통모듈 추가를 선택한다.

공통모듈 생성 윈도우에서 모듈 명을 입력하고 생성버튼을 누른다.

공통모듈이 추가 된 것을 확인할 수 있다.

Global xDataSet 은 호면 전역에서 사용된 데이터셋을 정의하고 관리하는 객체이다. 다음은 공통 xDataSet 객체 윈도우이다.

그림. 공통 xDataSet 객체 윈도우

공통 xDataSet 을 추가 하는 방법을 알아보자. 해당 프로젝트를 마우스 우 클릭해서 공통 xDataSet 추가/편집을 선택한다.

xDataSetList, xDataSetColumn, xDataSetColumnData 각각의 버튼을 눌러서 입력 항목들을 채워 넣고 적용 버튼을 클릭한다.

공통 xDataSet 이 생성된 것을 확인할 수 있다.

는 SCREEN 으로 실제 디자인을 하는 영역인 Design 탭, 개발영역인 JAVAScript 탭, 서버의 데이터를 주고받는 설정하는 영역인 Transaction 탭, AttributeMap 탭, TranInfo 탭으로 구성되어있다. 각 탭에 대한 자세한 사용법은 UI 서버개발 부분을 참고하길 바란다.

그림. Design 탭

그림. JAVA Script 탭

그림. Transaction 탭의 xDataSet 윈도우

그림. Transaction 탭의 xTranMap 윈도우

AttributeMap 을 사용하는 이유는 각각의 오브젝트 속성을 제어하는 것보다 하나의 MapID 로 원하는 오브젝트의 속성을 한번에 제어할 수 있는 편의성 때문이다. 사용 방법은 화면에 올라간 오브젝트들의 입력선택, 입력필수, 입력잠금, 숨기기, 비활성의 속성을 선택하고 MapID 를 입력해서 사용한다.

그림. AttributeMap 탭

그림. TranInfo 탭

은 정보 윈도우로 스크립트내 검색 결과 탭, 스타일화면검색 결과 탭, 북마크 리스트 탭으로 구성되어있다. 다음은 정보 윈도우이다.

그림. 정보 윈도우

스크립트검색 결과탭은 메뉴의 [편집] → [스크립트내 검색] 메뉴와 동일하다. 스크립트검색 결과 리스트를 보여주는 창이다.

그림. 스크립트검색 결과 윈도우

스타일화면검색 결과 탭은 등록된 스타일이 어느 화면에 사용이 됐는지 검색해주는 창이다. 컴포넌트 종류를 선택하고 스타일 리스트 중에 검색하고자 하는 스타일을 선택한다. 버튼을 누르면 검색 결과가 나타난다.

그림. 스타일화면검색 결과 윈도우

북마크했던 리스트를 보여주는 창이다.

그림. 북마크 리스트윈도우

은 속성 윈도우로 선택된 오브젝트의 속성을 설정할 수 있다. 속성은 특성 별로 분리되는 트리형태와 AZ 까지 순차적으로 정렬된 두 가지 형태로 표현된다. 다음은 속성 윈도우이다.

그림. 속성 윈도우(트리 정렬)

그림. 속성 윈도우(알파벳 정렬)

은 오브젝트 리스트 윈도우로 화면에 올라가 있는 모든 오브젝트들의 리스트를 보여주는 창으로 보여주는 방식에 따라 두 가지(Tree, Grid) 형태로 표현된다. 다음은 오브젝트 리스트 윈도우이다.

그림. 오브젝트 리스트 윈도우(Tree)

그림. 오브젝트 리스트 윈도우 (Grid)

  • manual/devstudio/devstudio_ui_layout.txt
  • 마지막으로 수정됨: 2023/12/22 14:11
  • 저자 127.0.0.1