데이터 그리드 솔루션(html5)

SBGrid
proposal
소프트보울 SB Grid 제품 소개
2013.08

Overview
SBGri
d
웹의 본질적 특성인 보편적 접근성에 맞게
IE 및 사파리, 크롬, 파이어폭스 등의 웹 브라우져에 제한 없이
iOS, Android 등의 모바일 OS에 상관없이
원웹(One Web)으로 구현
시장은 Active X 및 Java Applet, Flash 등을 배제한 순수 WEB을 원하고 있다.
보안
브라우져
특성
모바일
특성
디바이스
특성

Overview
SBGri
d
SBGrid는 여러 건의 데이터를 표형태로 표현하는 제품으로, 순수 WEB
기술(HTML, JavaScript)로 구성. 따라서 어떠한 특정 OS나 Browser에
의존적이지 않으며, 다양한 PC환경은 물론 Smartphone, Tablet에
이르기까지 단 한번의 개발로 서비스와 활용이 가능.
순수 WEB 환경을 지원하는 WEB Grid 솔루션
Non
Active-X
HTML5
Multi
Device/
Multi
Browser
강력한 기능 높은 생산성

Overview
SBGrid 솔루션 특장점
웹 표준 준수 쉬운 사용
One Source Multi
Use
업무 환경에 특화
된 다양한 기능
• 웹 표준인 HTML, CSS
, JavaScript 사용
• XML / JSON 을 이용
한 DATA 통신
• 별도의 코딩 없이 간단
한 설정으로 다양한 기
능 사용
• 웹 표준 준수로 유지
보수 용이
• Multi OS, Multi
Device, Multi Browser
지원
• 별도의 설치 없이 범용
브라우저 실행
• Excel 연동, 한셀
연동, Sort, Merge, 누
계, 합계 등
• Input, radio, checkbox
, combobox 등 다양한
입력 형식
기업 업무환경
UX 향상을 위한
HTML 기반 Grid
컴포넌트
SBGri
d

Overview
시스템구성도
Server
BackendSystem
WAS
Controller
ModelView
SBGrid
Client
Request
Response
SBGri
d

Overview
아키텍쳐구성
SBGri
d

Overview
콤포넌트 구성
SBGrid.js
SBGrid
SBDataModel
(Hidden)
Engine Classes
CSS
JavaScript
HTML
Element
JQuery,
Library
Data Handling
Composition
Presentation
Interface
Control
Interaction
SBGri
d

Function List
SBGri
d
Grid 제품 기능 요약
다양한 데이터
표현 기능
사용하기 편한
확장 기능
사용자 UX
향상
편리한 외부
인터페이스
• 다양한 열 유형 지원
• 다양한 데이터 포맷 및 유형
지원
• 말 줄임(Ellipsis) 기능
• 툴팁(Tooltip) 뷰 기능
• 데이터 필터링
• 데이터 정렬(Sort)
• Cell 병합 (Merge)
• 부분 합계(Subtotal)
/누계 처리
• 트리 뷰(Outline bar) 지원
• 행간 자동 순번(Sequence)
• 열 단위 이동(Move)
• Drag & Drop 지원
• 틀 고정 (Fixed)
• CSS 지원 (테마 구성)
• 대용량 데이터 처리
• MS Excel / Hancell
파일 읽기 및 저장
• XML 및 JSON 데이터 연동
• 컨텍스트 메뉴 기능
• 동적 객체 및 Sub객체
생성
• 타 솔루션 연동
기업 업무환경 UX 향상을 위한 HTML 기반 Grid 컴포넌트

Function List
SBGri
d
다양한 데이터 표현 기능
기 능 설 명
다양한 열 유형 지원
• Caption (텍스트 뷰) / Input (텍스트 편집) / Input Date (달력 날짜 선택) /
Input Button (팝업 버튼) / Combo (목록 형태) / Checkbox / Radio 유형 제공
다양한 데이터 포맷 및 유형 지원
• 기본 포맷(사업자번호, 주민번호, 날짜, 실수 형 등) 제공
• 사용자정의 포맷 제공
• 표준텍스트, 정수, 실수, 백분율, 유효 값 텍스트 마스크 제공
• Alpha 또는 수치 데이터, 대소문자, 한글, 최대 문자 크기, 체크박스 Boolean 값 제공
행/열 단위 속성 제어
• 행/열 단위 숨기기(Hidden) / 비활성화(Disabled) / 읽기상태 (Read-only) 제어 가능
• 동적 스타일 (Border, Background, Align, Font 등) 지정 및 변경 가능
말줄임(Elipsis) 기능 • Cell의 크기보다 텍스트 데이터의 크기가 클 경우에 사용
툴팁(Tooltip) 뷰 기능 • Cell에 마우스 오버시 Full 또는 임의 텍스트를 말풍선 형태로 뷰잉처리
데이터 필터링 • 데이터 필터링 및 데이터 정렬 등 데이터 재구성 구현

Function List
SBGri
d
사용하기 편한 확장 기능
기 능 설 명
데이터 정렬(Sort)
• 열 단위 단일 정렬 가능 (오름/내림 차순)
• 스크립트를 통한 다중 열 및 구간 데이터 정렬 가능
Cell 병합 (Merge) • God/duf quf alc 임의적 구간 Cell 병합 가능
부분 합계(Subtotal)/누계 처리
• 임의 데이터 기준 별 처리 가능
• 기본적인 부분합 외에 전체합계, 평균, 비율, 카운트, 최대/최소 값 처리 가능
트리 뷰(Group) 지원 • 조직도 형식의 트리뷰 구성 가능
행간 자동 순번(Sequence)
• DB의 Rownum와 같이 행단위 번호부여 및 표현 가능
• 역순 표현도 가능
행 단위 상태 정보 제공 • 각 행 단위의 데이터 상태 정보(C,U,D) 저장 및 표현 처리 가능

Function List
SBGri
d
사용자 UX 향상 기능
기 능 설 명
유동적 Cell 포커스 전환
• 마우스 또는 키보드 방향키를 조작하여 현재 Cell을 편집 후 즉시 포커스를 다른 Cell
로 옮김 가능
열 단위 이동(Move) • 마우스 조작을 통해 사용자가 열(컬럼) 순서 변경 가능
Drag & Drop 지원 • Cell 간 데이터를 Drag & Drop 으로 복사 및 이동 가능
틀 고정 (Fixed)
• MS Excel의 기능과 유사
• 열/행(상단, 하단) 및 다중 구간 고정 가능
행/열 크기 조절(Resize)
• 사용자의 마우스 조작으로 드래그 또는 더블클릭만으로 Cell안의텍스트 데이터
크기만큼 자동 조절 가능
• Cell 텍스트 데이터 크기에 따른 행의 높이 또는 열 넓이 자동 조절 기능 제공
CSS 지원 (테마 구성) • CSS 제어 및 처리를 통한 세부적 스타일 지정 가능
홀수 짝수 행 단위의 스타일 지정 • Alternate 기능 제공
대용량 데이터 처리 • 스크롤시 화면 랜더링 방식 처리
다양한 Cell 선택(Selection) • Cell/행/열 또는 임의 다중 선택 가능

Function List
SBGri
d
Manual, Help, Support
Documentation
사용자 관점의 쉬운
문서 제공
• 보기 쉬운 매뉴얼 제공
• 사용하기 쉬운 Sample
Set 제공
• 알기 쉬운 교육 과정 구축
• 제품 테스트 자동화 환경
구축
직관적이고 강력한
Sales Kit 구축
• 직관적인 Presentation
자료 작성
• SBGrid 의 장점을 살린
Demo
• 외부에서 접근 가능한
Portfolio 구축

Sample
다양한 컬럼 유형
(input, output, date, popup, combo, checkbox, radio)
스타일 변경(row단위, col단위, cell 단위)

Sample
SB
Grid
그리드 상태 표시 기능
(각 row별 상태를 보여주고, 변경 내용만 서버에 반영)
Cell 병합
Manual, Help, Support

Sample
틀 고정
(상단, 좌측, 하단)
Subtotal(총계)

Sample
그룹 표현 필터링 / 소팅 / 컬럼 숨기기

안전행정부 프로젝트
- 국가정보자원 개방 및 공유체계 구축사업 [ http://data.go.kr ]
SBGri
d
SBGrid 대표 레퍼런스
 공공정보 활용성을 높이고, 민간개방 확대를 위
해 전자정부사업으로 추진
 국가공유자원포털은 기존 국가지식포털, 공유자
원포털, 공공정보 활용지원센터를 통합해 새로
운 모습으로 재탄생.

 이용자들은 공공정책, 교통, 법령, 기상, 농수산
물 가격, 항공운행, 국내관광. 나라기록물, 학술
정보, 문화정보 등 다양한 분야의 정보를 열람,
활용

thank you.
감사합니다
우공이산
[愚公移山]
어리석은 사람이 산을 옮긴다라는 말처럼 쉬지 않고 꾸준하게
열심히 하겠다는 소프트보울人의 마음가짐 입니다.
최문용 이사
TEL : 02- 6965-7196
HP : 010-5274-8888
FAX : 070-4232-7190
E-MAIL : mychoi@softbowl.co.kr

데이터 그리드 솔루션(html5)

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to 데이터 그리드 솔루션(html5)

Similar to 데이터 그리드 솔루션(html5) (20)

More from sam Cyberspace

More from sam Cyberspace (20)

데이터 그리드 솔루션(html5)