화면샘플

개발된 시스템은 ‘RunElastic’ 엔드 유저용 RunElastic 모듈에 의해 기동되는데 실행하면, Login 화면을 통해 사용자 인증 후 로그인된다. 이 화면은 사이트에 따라 디자인이 커스터마이징 될 수 있습니다.

[참고] 여기에 제시된 화면 샘플들은 특정 기업 또는 특정 업무에 관련이 없는 교육용 튜토리얼 형태의 화면 샘플로만 구성되었습니다.

로그인 화면

툴 전반에 영향을 주는 기능과 유틸리티 등을 실행하기 위한 메뉴로 파일(F), 편집(E), 프로젝트(P), 환경설정(S), 보기(V), 도움말(H) 등의 드롭다운 메뉴와 단축실행 아이콘들이 준비되어 있는 영역입니다.

다국어 처리기 가능하도록 ‘Locale System’이 구성되어 있으며 로그인 시 언어를 선택할 수 있습니다. locale 의 개수 제한은 없으며 시스템의 로케일관리 기능에서 관리됩니다.

관리자 체크박스는 테스트(본 화면) 환경에서만 운영되며, 실 운영에서는 사용자 권한관리에서 셋팅된 내용으로 자동 설정됩니다.

사용자 메뉴 예시

엔드유저용의 운영 화면 메뉴 구성은 top 위치에 drop-down 형태로 구성되며 고객의 요구사항에 따라 다른 배치로 커스터마이징이 가능합니다.

이 메뉴의 구성은 makeElastic 의 기본 번들 시스템인 ‘ADMIN’ 시스템의 화면에 의해 메뉴를 생성하고 관리할 수 있습니다. (ADMIN 시스템의 자세한 사용법은 사용자매뉴얼에 준비되어 있습니다)

화면 우측상단의 메인화면, 사이트맵, 즐겨찾기 등의 아이콘은 회사의 포털시스템이 구축되어 있을 때 활용할 수 있는 기능입니다.

맨 우측상단의 ‘LOG OUT’ 버튼을 클릭하면 사용자 시스템을 로그아웃 합니다.

사용자 권한별 메뉴관리

makeElastic 솔루션에서는 사용자 및 권한 등록관리, 메뉴등록관리, 사용자별 권한할당, 권한에 따른 메뉴 Access 권한할당 관리 및 메뉴트리에 대한 폼 Assign 관리 등의 ADMIN 기능의 시스템이 번들로 제공됩니다.

아래 화면은 사용자 권한ID 에 따른 메뉴 Access 권한을 등록 및 관리하는 화면입니다.

이 화면은 관리자(Admin) 권한이 있는 사용자에게만 나타납니다.

기 등록된 사용자 권한ID에 대하여 Access 할 수 있는 메뉴의 조회/등록/수정/삭제/처리/출력/엑셀 등의 사용 권한을 체크박스로 관리할 수 있습니다.

메뉴 트리 할당관리

전 화면에서 설명한 makeElastic 솔루션의 ‘메뉴-폼 할당관리’ 화면으로 등록된 메뉴Tree에서 각 메뉴에 대하여 표시할 실 화면을 할당관리하는 화면입니다.

좌측 상단의 Pane에서 등록된 Menu Tree를 나타내고 상단 우측의 그리드에서는 등록된 폼 리스트를 보여주고 할당하고자 하는 메뉴를 클릭한 상태에서 오른쪽의 그리드에서 화면을 선택하고 ‘메뉴할당’ 버튼을 누르면 해당 폼에 메뉴 Tree에 Assign 되는 형태로 동작합니다.

아래의 그리드는 메뉴와 폼이 등록되는 상황을 종합적으로 보여주는 그리드이며 여기서도 메뉴할당을 할 수 있습니다.

메뉴 트리의 특정 노드에서 오른쪽 마우스를 클릭하면 해당 노드의 정보를 추가/수정/삭제 할 수 있는 팝업 메뉴가 나타나고 해당 작업을 선택하면 화면에서처럼 팝업 메뉴가 나타납니다.

우편번호 검색

우편번호를 검색 및 조회하는 화면으로 다양한 검색 조건으로 우편번호를 검색하도록 구성한 화면입니다.

시/도 선택 콤보에서 ‘전체/특별시/도전체’ 의 조건을 선택하면 이 조건에 연동하여 다음에 위치한 콤보박스에 해당되는 정보가 들어가고, 여기서 특정 ‘시’ 또는 ‘도’를 선택하면 그 조건에 맞춰 ‘우편번호’ 콤보에 정보가 셋팅됩니다.
검색조건에서의 3개의 콤보박스는 각각 ‘Value Finished’ 이벤트를 통해 다음 검색단계의 콤보에 정보를 넣어주는 Event Script 를 작성하여 순차적으로 콤보박스에 값을 넣어주는 로직으로 프로그램 되어있습니다.

‘빌딩 키워드’로 검색하는 기능은 예를 들어 “△△”이라는이름을 가진 전국의 아파트를 검색하는 경우에 사용할 수 있습니다.

이 화면은 약 6 만건 정도의 우편번호 데이터로, 전 데이터를 Data Grid 에 전개하더라도 빠른 시간에 데이터 조회 및 표 전개를 수행하여 높은 성능을 보이고 있습니다.

사용자스토리 등록

사용자스토리는 애자일 방법론인 XP(eXtream Programming) 방법론에서 사용자의 요구사항을 관리하는 도구로 사용되며, 본 화면은 ‘사용자스토리’ 기능을 화면으로 구성한 것입니다.

사용자의 편의성을 위해 전진(▶), 후진(◀) 버튼으로 데이터를 조회하도록 하였으며 팝업창을 통해 특정 스토리ID를 검색하여 조회할 수도 있습니다.

기본정보와 테스트항목과 함께 입력되는 스토리에 대한 상세 설명 및 관련 정보를 첨부파일 또는 이미지 파일로 관리할 수 있습니다.

올림픽 국가코드 마스터

‘올림픽’시스템은 makeElastic 툴의 교육용으로 구성한 시스템으로 ‘올림픽’을 아이템으로 정한 것은 누구라도 업무 도메인을 쉽게 이해할 수 있기 때문입니다. [국가코드마스터] 화면은 올림픽시스템이 운영되기 위한 기본 정보로 국제표준인 3자리와 2자리의 국가코드에 대한 정보를 관리하는 화면입니다.

전형적인 마스터 관리하면으로 조건 Frame, Body Frame(Grid) 및 Body의 Grid에 대한 row 별 Detail Control 부분으로 구성됩니다.

여기에 적용된 Grid는 Rich Grid로 각 셀별로 이미지, 다양한 컨트롤, URL Link, Multi-Line, Column Fix 기능 등 다양한 그리드 기능을 구현하였습니다.

우측 상단의 ‘한/일’ 버튼은 다국어 기능을 직접 테스트하기 위해 준비된 버튼으로 (실 운영환경에서는 로그인 화면에서 언어셋이 결정된다) 이 버튼을 클릭할 때마다 ‘한글’ 모드와 ‘일본어’ 모드가 즉시로 교대됩니다.

올림픽 참가국 현황

하계/동계 올림픽에 대한 회차별 참가국가 현황 화면입니다. 화면에는 두 개의 그리드가 준비되며, 마스터 그리드와 디테일 그리드인데 이 두 그리드의 데이터가 연동되어 움직이는 예시 화면입니다.

데이터의 입력은 디테일 그리드에서 이루워지며 데이터는 각 row 당 detail control 패널을 통해 입력됩니다.

국가코드, 국가명 입력 부분에서 팝업 버튼을 클릭하면 그림과 같이 팝업 창이 나타나며 팝업창을 통해 국가코드와 국가명을 선택합니다.

일본어 한자읽기 사전

일본어 한자읽기 사전은 주제어를 검색하기 위해 자음에서 음절, 검색 한자로 각각의 그리드에서 해당 셀의 더블클릭 이벤트에 의해 데이터가 선택되며 순차적으로 검색을 진행해 나가는 형태로 검색이 수행됩니다.

왼편의 세 개의 그리드는 Header와 Row 의 Label 헤더표시를 억제하는 Property 적용하여 동일 항목의 나열형 그리드 효과를 나타냅니다.

일본어 한자사전 데이터베이스가 구축되었고 음절 및 한자는 group by 와 rowcount 를 쿼리로 조작하여 검색된 테이블의 데이터가 한 줄에 5개씩 나열되도록 쿼리를 작성함에 따라 옥편의 인덱스 페이지처럼 보이도록 하였습니니다.

Chart 예시

다양한 Chart 예시를 보여 주는 샘플화면입니다.

적용할 수 있는 그래프의 종류는 Line, Curve, Bar, Area, Scatter, Bubble, Pie, Radar 등의 그래프입니다.

각각의 그래프별로 본 툴의 Web Service 컴포넌트를 통해 dataset을 연결하여 그래프를 표시할 수 있으며, 본 예시의 그래프는Web Service를 통한 서버의 데이터가 아니라 Memory Service 컴포넌트를 통한 Temporary Dataset의 데이터로 그래프를 그린 예입니다.

Grid: Group Header 예시

데이터 그리드의 Heading에서 Group Header를 적용한 예시 화면입니다.

Grid의 Heading 처리에서 Group Column은 Layout Tree 상에서 Grid 컨테이너의 하부 요소인 ‘GridColumn’ 을 그룹으로 묶는 기능인 ‘GridColumnGroup’ 요소를 사용함으로써 가능합니다.

그림의 ‘Layout Tree’ 예와 같이 ‘GridColumn’ 요소를 이중으로 사용함으로서 위의 화면에서와 같은 멀티레벨의 그룹컬럼을 구성할 수 있습니다.

FTP Service 예시

makeElastic 솔루션에서 팔레트의 ‘Service’ 항목은 서버와의 통신을 위한 기능으로, 데이터베이스의 Data 처리를 위한 Web Service 와 ADO Servide, 로컬 PC의 메모리를 Dataset 으로 사용하는 Memory Service, File system Service 및 FTP Service 등으로 5개의 서비스 요소가 구비되어 있습니다.

본 화면은 그 중에서 FTP Service 의 기능을 예시로 보여주고 있습니다.

FTP Service 컴포넌트의 테스트를 위하여 ‘알FTP’ 툴의 ‘서버’ 기능을 활용하여 원격 PC에서 FTP서버를 기동시킵니다.

메인 화면에서 Host IP 선택 콤보 박스에서 해당 PC의 IP를 선택하고 아이디와 패스워드 및 포트번호를 셋팅한 후 ‘Connect’ 버튼을 클릭하면 해당 PC의 FTP서버로 접속이 이루어집니다.
이때 Host PC의 로그 창에 접속된 내용이 그림과 같이 디스플레이됩니다.

FTP Service 샘플화면에서 업로드 버튼으로 파일을 선택하여 업로드하면 FTP 서버 PC의 홈 디렉토리로 파일이 업로드됩니다.

반대로 FTP서버 PC의 홈 디렉토리의 파일(화면의 그리드에 있는 리스트)을 선택하여 ‘다운로드’ 버튼을 클릭하면 현재 PC의 ‘C:\down\’ 폴더에 파일이 다운로드됩니다.

레포트 출력 예시

본 makeElastic 솔루션에는 레포트용 템플릿을 디자인하고 이 템플릿에 데이터베이스를 바인딩하여 레포트 출력할 수 있는 기능이 탑재되어 있습니다.

본 화면은 출력물에 대한 레이아웃을 디자인하고 출력 화면에서 출력시키기 위한 레포트 템플릿 샘플 화면입니다.

‘➊’화면은 데이터베이스로부터 1 row 의 출력에 대한 템플릿 디자인 화면입니다. 본 예시에서는 우편번호부 출력 예시이므로 합계에 대한 디자인은 수행하지 않습니다.

‘➋’는 출력 템플릿을 적용시키기 위한 화면으로 데이터베이스로부터 출력 데이터(zipcode)를 조회한 후 ‘프린트’ 버튼을 클릭하여 출력을 수행하는 가이드 화면입니다.

‘➌’은 출력결과 화면으로 ‘➊’의 템플릿과 ‘➋’의 데이터베이스가 반영되어 출력물이 출력된 예시입니다.