SBGridproposal소프트보울 SB Grid 제품 소개

2013.08

Overview

SB-Grid

웹의 본질적 특성인 보편적 접근성에 맞게 IE 및 사파리 , 크롬 , 파이어폭스 등의 웹 브라우져에 제한 없이iOS, Android 등의 모바일 OS 에 상관없이원웹 (One Web) 으로 구현

시장은 Active X 및 Java Applet, Flash 등을 배제한 순수 WEB 을 원하고 있다 .

보안 브라우져특성

모바일 특성

디바이스특성

Overview

SB-Grid

SBGrid 는 여러 건의 데이터를 표형태로 표현하는 제품으로 , 순수 WEB 기술 (HTML, JavaScript) 로 구성 . 따라서 어떠한 특정 OS 나 Browser에 의존적이지 않으며 , 다양한 PC 환경은 물론 Smartphone, Tablet 에 이르기까지 단 한번의 개발로 서비스와 활용이 가능 .

순수 WEB 환경을 지원하는 WEB Grid 솔루션

NonActive-X

HTML5

Multi De-vice/Multi

Browser

강력한 기능 높은 생산성

Overview

SBGrid 솔루션 특장점

웹 표준 준수 쉬운 사용

One Source Multi Use

업무 환경에 특화된 다양한

기능

• 웹 표준인 HTML, CSS, JavaScript 사용

• XML / JSON 을 이용한 DATA 통신

• 별도의 코딩 없이 간단한 설정으로 다양한 기능 사용

• 웹 표준 준수로 유지 보수 용이

• Multi OS, Multi De-vice, Multi Browser 지원

• 별도의 설치 없이 범용 브라우저 실행

• Excel 연동 , 한셀 연동 , Sort, Merge, 누계 , 합계 등

• Input, radio, checkbox, combobox 등 다양한 입력 형식

기업 업무환경 UX 향상을 위한

HTML 기반 Grid 컴포넌트

SB-Grid

Overview

시스템구성도

Server

Backe

nd

Syste

m

WAS

Con-troller

ModelView

SBGrid

Client

Re-quest

Response

SB-Grid

Overview

아키텍쳐구성

SBGrid

Grid Engine

Interface

Data

Han

dlin

g

AP

I

Grid

Con

trol A

PI

Pre

sen

tatio

n A

PI

Engine

UI C

om

pon

en

t

Make H

TM

L

UI P

rocessin

g

CSS

Pro

cessin

g

Data

Pro

cessin

g

Load

/ Save E

xcel

Data Modeler

Interface

Data

In / O

ut A

PI

Data

Pro

cess A

PI

Data model

XM

L R

ep

osito

ry

JSO

N R

ep

osito

ry

SB-Grid

Overview

콤포넌트 구성

SBGrid.js

SBGrid

SBDataModel (Hidden)

Engine Classes

CSS

JavaScript

HTML Ele-ment

JQuery, Li-brary

Data Handling

Composition

Presentation

Interface

Control

Interaction

SB-Grid

Function List

SB-Grid

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

SB-Grid

Grid 제품 기능 요약

다양한 데이터 표현 기능

기 능 설 명

다양한 열 유형 지원 • 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

SB-Grid

Grid 제품 기능 요약

사용하기 편한 확장 기능

기 능 설 명

데이터 정렬 (Sort) • 열 단위 단일 정렬 가능 ( 오름 / 내림 차순 )• 스크립트를 통한 다중 열 및 구간 데이터 정렬 가능

Cell 병합 (Merge) • God/duf quf alc 임의적 구간 Cell 병합 가능

부분 합계 (Subtotal)/ 누계 처리• 임의 데이터 기준 별 처리 가능

• 기본적인 부분합 외에 전체합계 , 평균 , 비율 , 카운트 , 최대 / 최소 값 처리 가능

트리 뷰 (Group) 지원 • 조직도 형식의 트리뷰 구성 가능

행간 자동 순번 (Sequence)• DB 의 Rownum 와 같이 행단위 번호부여 및 표현 가능

• 역순 표현도 가능

행 단위 상태 정보 제공 • 각 행 단위의 데이터 상태 정보 (C,U,D) 저장 및 표현 처리 가능

Function List

SB-Grid

Grid 제품 기능 요약

사용자 UX 향상 기능

기 능 설 명

유동적 Cell 포커스 전환 • 마우스 또는 키보드 방향키를 조작하여 현재 Cell 을 편집 후 즉시 포커스를 다른 Cell 로 옮김 가능

열 단위 이동 (Move) • 마우스 조작을 통해 사용자가 열 ( 컬럼 ) 순서 변경 가능

Drag & Drop 지원 • Cell 간 데이터를 Drag & Drop 으로 복사 및 이동 가능

틀 고정 (Fixed)• MS Excel 의 기능과 유사• 열 / 행 ( 상단 , 하단 ) 및 다중 구간 고정 가능

행 / 열 크기 조절 (Resize)• 사용자의 마우스 조작으로 드래그 또는 더블클릭만으로 Cell 안의텍스트 데이터

크기만큼 자동 조절 가능

• Cell 텍스트 데이터 크기에 따른 행의 높이 또는 열 넓이 자동 조절 기능 제공

CSS 지원 ( 테마 구성 ) • CSS 제어 및 처리를 통한 세부적 스타일 지정 가능

홀수 짝수 행 단위의 스타일 지정 • Alternate 기능 제공

대용량 데이터 처리 • 스크롤시 화면 랜더링 방식 처리

다양한 Cell 선택 (Selection) • Cell/ 행 / 열 또는 임의 다중 선택 가능

Function List

SB-Grid

Manual, Help, Support

Documentation

사용자 관점의 쉬운 문서 제공

•보기 쉬운 매뉴얼 제공

•사용하기 쉬운 Sample Set 제공

•알기 쉬운 교육 과정 구축

•제품 테스트 자동화 환경

구축

직관적이고 강력한 Sales Kit 구축

•직관적인 Presenta-tion

자료 작성

• SBGrid 의 장점을 살린 Demo

•외부에서 접근 가능한 Portfolio 구축

Sample

다양한 컬럼 유형 (input, output, date, popup, combo, checkbox,

radio)스타일 변경 (row 단위 , col 단위 , cell 단위 )

Sample

SBGrid

그리드 상태 표시 기능 ( 각 row 별 상태를 보여주고 , 변경 내용만 서버에 반영 )

Cell 병합

Manual, Help, Support

Sample

틀 고정( 상단 , 좌측 , 하단 )

Subtotal(총계 )

Sample

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

안전행정부 프로젝트- 국가정보자원 개방 및 공유체계 구축사업 [ http://data.go.kr

] SB-Grid

SBGrid 대표 레퍼런스

공공정보 활용성을 높이고 , 민간개방 확대를 위해 전자정부사업으로 추진

국가공유자원포털은 기존 국가지식포털 , 공유자원포털 , 공공정보 활용지원센터를 통합해 새로운 모습으로 재탄생 .

  이용자들은 공공정책 , 교통 , 법령 , 기상 , 농수산물 가격 , 항공운행 , 국내관광 . 나라기록물 , 학술정보 , 문화정보 등 다양한 분야의 정보를 열람 , 활용

thank you.감사합니다

우공이산[愚公移山 ]

어리석은 사람이 산을 옮긴다라는 말처럼 쉬지 않고 꾸준하게 열심히 하겠다는 소프트보울人의 마음가짐 입니다 .

최문용 이사TEL : 02- 6965-7196HP : 010-5274-8888FAX : 070-4232-7190E-MAIL : mychoi@softbowl.co.kr