GAUCE HTML5

압도적인 개발 생산성 제공

개발 효율과 학습 편의성을 높이는 UI/UX 개발 환경

주요 적용 기술

웹 표준 기반 기술과 컴포넌트·Function 방식

기타 특장점

대용량 데이터 처리, 상호 연동성, 정보 보안성, 플랫폼 독립성, 다양한 자체 UI 컴포넌트

1. 제품 소개
2. 문법 학습
3. 사용방법 습득
4. 개발 효율화 · 비용 및 시간 절감

표준화된 문법과 가이드 제공

HTML5 기반의 표준 문법과 체계적인 개발 가이드를 통해 빠른 학습이 가능합니다.

다양한 샘플과 개발 예제

실무에 바로 적용 가능한 풍부한 예제와 템플릿을 제공하여 개발 생산성을 높입니다.

개발 비용 및 시간 절감

개발자가 문법과 사용방법을 신속히 익혀 효율적으로 개발을 수행할 수 있습니다.

컴포넌트 정의 · Core

component creator · get/set manager · param manager · extra manager

속성 정의

property-1 · property-2 · property-3 · property-4 · property-… · property-N

컴포넌트 기능

param control · get/set control · extra control

// ActiveX 기반 화면 동기 처리
var grid = document.getElementById("axGrid");
grid.SetCellValue(0, "USER_ID", userId);
grid.SetCellValue(0, "USER_NAME", userName);
grid.Refresh();

// 화면 갱신을 위한 별도 함수 호출 필요

// GAUCE5 기반 화면 동기 처리
const grid = $("#userGrid");
grid.setValue(0, "USER_ID", userId);
grid.setValue(0, "USER_NAME", userName);
grid.refresh();

// 웹 표준으로 동일한 화면 동작 구현

기존 환경

플러그인 의존(ActiveX) · 복잡한 코드 및 개별 처리 · 브라우저별 호환성 이슈

전환 환경

웹 표준 기반(HTML5) · 간결하고 직관적인 코드 구조 · 다양한 브라우저 지원

코드는 달라도 사용자는 동일한 화면을 경험합니다. 높은 화면 동기성으로 안정적인 전환을 지원합니다.

<object id="dsv_Tr_Head"
 classid="CLSID:<%=ClsComUtil.GetGauceMxLogicalTRCLSID()%>"
 param name="KeyName" value="toinb_dataid4"
>
</object>

<object id="dsv_Tr_Data"
 classid="CLSID:<%=ClsComUtil.GetGauceMxLogicalTRCLSID()%>"
 param name="KeyName" value="toinb_dataid4"
>
</object>

<g5-tr id="dsv_Tr_Head">
  <param name="KeyName" value="toinb_dataid4">
</g5-tr>

<g5-tr id="dsv_Tr_Data">
  <param name="KeyName" value="toinb_dataid4">
</g5-tr>

개발 생산성 향상

컴포넌트 구조 단순화로 빠른 전환 개발 지원

기능 유지

기존 TR 구조와 데이터 흐름을 안정적으로 반영

전환 안정성

검증된 변환 방식으로 안정적인 개발 환경 제공

Object → g5-tr 태그로 변환

<div id="luxCombo" class="luxe" classid="CLSID:...">
  <param name="ComboDataID" value="DB_BranchCD">
  <param name="ListDisplayNum" value="10">
  <param name="MouseLabel" value="지점명">
  <param name="TypeComboData" value="false">
</object>

<GauceCombo id="gr_luxcombo" class="gauce-combo">
  <prop name="ComboDataID" value="DB_BranchCD">
  <prop name="ListDisplayNum" value="10">
  <prop name="MouseLabel" value="지점명">
  <prop name="TypeComboData" value="false">
</GauceCombo>

선택형 UI 전환

콤보박스·리스트 등 다양한 선택형 UI를 HTML5로 전환

컴포넌트 재사용

표준 웹 컴포넌트로 전환하여 기존 화면 구성과 재사용성 유지

빠른 화면 적용

간단한 코드 변환으로 신속한 화면 구축 가능

<script language="javascript" event="onRowColChange"
  for="DG1">
  // 기존 그리드 이벤트 처리
  var row = DG1.Row;
  var col = DG1.Col;
  // 처리 로직
</script>

<script event="onCellClick" for="DG1">
  // 셀 클릭 이벤트 처리
</script>

dg1.on("rowColChange", function(row, col, grid, event) {
  // 그리드 이벤트 처리 (표준 웹 방식)
  console.log("row:", row, "col:", col);
  // 처리 로직
});

dg1.on("cellClick", function(row, col, value, event) {
  // 셀 클릭 이벤트 처리
  console.log("row:", row, "col:", col, "value:", value);
  // 처리 로직
});

이벤트 처리 일관성

표준 웹 방식의 이벤트 처리로 일관된 개발 패턴 제공

동작 유지

기존 화면의 이벤트 동작을 동일하게 유지

전환 안정성

검증된 변환 방식으로 안정적인 개발 환경 제공

강력한 대용량 데이터

처리 특허 기술 제공

상호 연동성 · 정보 보안성

플랫폼 독립성 제공

다양한 자체 UI

컴포넌트 제공

1. 기존 시스템
2. 서비스 Request / Response
3. GAUCE HTML5 인터페이스
4. SOAP 통신 · Dataset 컨트롤
5. 외부 시스템 · OZ Server / EasyBase Server

1. Dataset · 부분 암호화
2. TR · 암호화 데이터 가져오기
3. Service · 공개키 세션키 암호화
4. API 호출
5. 3rd Party Security Lib

다른 프로그램·타 시스템과의 연동 방안

전자정부프레임워크, LAF/J(LG), DEVON(LG), AnyFrame(삼성) 등과의 연동을 지원합니다.

리포팅·데이터 연동

DataSet의 Data를 XML로 변환하여 OZ Report Viewer 및 EasyBase에서 OZ Server·EasyBase Server로 Data를 재조합하지 않고 데이터 연동이 가능합니다.

형상관리 연계

CVS, SVN, Git 등 상용화된 다양한 형상관리 툴과 연계하여 사용할 수 있습니다.

3rd-Party 보안 모듈과의 연계성

DataSet과 TR은 업체별 보안 솔루션을 별도로 개발할 필요 없이 Security 컴포넌트에 정의된 인터페이스만을 사용하여 Initech, Xecure, Secui.com, 한국정보인증 등 다수의 보안 솔루션과 연계를 지원합니다.

사용자 · Device

다양한 브라우저 및 플랫폼 지원 · 멀티 디바이스/반응형 웹 · IE9 이상, Chrome, Firefox, Safari5, Opera 지원

UI 프레임워크 · Client

HTML5 기반으로 확장성 및 호환성 우수 · 데이터 처리의 안정성 및 효율적인 처리 · XENA 클라이언트는 JavaScript로 구현되어 AJAX 아키텍처 기반으로 함께 활용 · 그리드, 차트 등의 UI 컴포넌트를 동적으로 실행되도록 지원 · XENA는 외부 Control과 UI 구성 가능

런타임 프레임워크 · Server

전자정부프레임워크, LAF/J(LG), DEVON(LG), AnyFrame(삼성) 등과 간단한 모듈로 연동 지원 · CVS, SVN, Git 등 다양한 형상관리 툴과 연계 · SOAP 통신과 XML, JSON 등 다양한 형태의 데이터를 처리하며 다양한 웹 프로토콜 수용 · Security 컴포넌트에 정의된 인터페이스를 사용해 3rd Party 보안 솔루션과 연계

MaskedInput

지정된 형식에 맞게 입력을 제한하는 컨트롤

Progress

진행 상태를 시각적으로 표현하는 컨트롤

Slider

값을 선택할 수 있는 슬라이더 컨트롤

TAB

여러 개의 화면을 탭 형태로 구성하는 컨트롤

RichEdit

다양한 서식을 지원하는 고급 에디터 컨트롤

SimpleEdit

간단한 텍스트 입력 컨트롤

NumberInput

숫자 입력 전용 컨트롤

Password Input

비밀번호 입력 및 강도 표시 기능을 제공하는 컨트롤

이미지 크게 보기 ↗

엑셀 파일 Import/Export 지원

엑셀 파일 가져오기/내보내기 기능을 지원합니다.

엑셀 Copy & Paste 기능

엑셀 복사/붙여넣기 기능을 제공합니다.

Expression

셀마다 서로 다른 조건을 설정할 수 있습니다.

동적 필터링

콤보박스, 컴포넌트 등을 활용한 동적 필터링 기능을 제공합니다.

그리드 내 데이터 정렬 기능

그리드 내 데이터를 다양한 조건으로 정렬할 수 있습니다.

합계 자동계산 기능 제공

그리드의 합계를 자동으로 계산하여 제공합니다.

이미지 크게 보기 ↗

다중 행 선택

여러 행을 함께 선택

다중 셀 선택

여러 셀 범위를 선택

로우별 상세정보 지원

각 행에 연결된 세부 정보 표시

프로그레스 컬럼 지원

진행 상태를 그리드 컬럼 안에 표현

포맷터 기능

기호·수식·날짜형식 등 데이터 표현

그리드 Process Bar

그리드에서 프로세스 상태 표시

이미지 크게 보기 ↗

2D 차트

선·막대 등 평면 차트

3D 차트

입체 표면·막대 차트

실시간 차트

시간에 따른 데이터 변화 표현

막대·라인 차트

막대와 선을 결합한 시각화

원형·도넛 차트

구성 비율과 합계 표현

복합 차트

다양한 유형의 데이터를 하나의 화면에서 분석

이미지 크게 보기 ↗