다국어 개발 가이드

이 장에서는 다국어 개발 환경에 대한 내용을 설명한다.

  • 다국어 관련 개발/실행 환경 구성
  • 언어별 사전 파일

다국어 관련 개발/실행 환경

개발 환경 구성 내용

다국어 개발 환경을 구성하기 위해서는 아래와 같은 내용이 필요하다.

구분 S/W 설명
xFrame5 개발 도구 xFrame5@DevStudio 도구→옵션 메뉴의 “메타데이터” 탭 설정 필요
메타 DBMS 연계 모듈 메타 연동용 jsp WAS 서버에 설치되어 xFrame5@DevStudio 와 메타 솔루션 DB 간의 연계 기능을 수행
메타 연동용 jsp 관련 메타 연동 가이드는 META 가이드 참조
WAS 서버 J2EE 기반 제품 J2EE 기반 WAS 서버
JDBC Driver JDBC Driver 메타 솔루션이 사용하는 DB 에 대응되는 JDBC
드라이버
메타 솔루션 DB DBMS
  • 메타 솔루션이 사용하는 DBMS이며, 언어별 메타ID에 대등되는 정보가 저장되어 있어야 한다.
  • 메타 파일을 생성하기 위한 기준 데이터를 보관하고있어야 하며, 메타 연동용 jsp 에서 접속이 가능해야 한다.

실행 파라미터 설정

다국어 실행 환경을 구성하기 위해서는 아래와 같은 내용이 필요하다.

USER_LANGUAGE, SCREEN_LANGUAGE 파라미터 정의

  • SCREEN_LANGUAGE 파라미터는 화면 개발시 사용한 언어 값을 지정한다.
  • USER_LANGUAGE는 사용자가 사용하는 언어 값을 지정한다.

USER_LANGUAGE 파라미터 값은 메인 화면인 경우에만 xframe5.js 에 설정된 값을 로드하여 사용한다.

factory.setlocale API 를 통해, 엔진에서 사용중인 USER_LANGUAGE 파라미터를 변경할 수 있다. 변경된 파라미터 값은 새로운 화면을 로드시부터 적용되며, 현재 로드된 화면에는 영향이 없다.

USER_LANGUAGE, SCREEN_LANGUAGE 파라미터가 다른 경우에만 엔진에서 메타 처리를 수행한다

언어별 사전 파일

언어별 메타 ID 에 해당하는 정보가 포함된 텍스트 파일이며, 언어별로 존재해야 한다. 생성된 메타 파일은 screen.loadmeta API 를 통해서 로드할 수 있다.

사전 파일 데이터 구조

  • META_ID=META_INFORMATION

사전 파일 규칙

  • 메타 파일 내용은 UTF-8 형식으로 저장돼야 한다.
  • 각 행은 “\r\n” 문자열로 구분된다.
  • “=” 문자 사이에 공백 문자가 없어야 한다.
  • META_INFORMATION에 대한 내용은 “메타 적용 대상 선정 방식”에 따라 다르다.
  • 빈 문자열 또는 ‘#’ 문자로 시작되는 행은 무시된다.

다국어 개발

이 장에서는 다국어 개발 방식에 대한 내용을 설명한다.

  • 메타 적용 방법
  • 메타 데이터 관련 API
  • 메타 데이터 연계 콜백 방식
  • 메타 관련 부가 파라미터 및 API

메타 적용 방법

메타 정보 적용 대상에는 아래와 같은 적용 방식이 있다.

구분 설명 비고
텍스트만 변경 언어별 사전 파일에는 META_ID 별 메타 텍스트 정보만 저장되어 있다. xFrame5 엔진에서 자동으로 처리한다.
다양한 속성 변경
  • 언어별 사전 파일에 META_ID 별 다양한 속성 정보가 포함되어 있다.
  • 속성 정보 문자열에 여러 정보를 포함하기 위해서는 구분자를 이용한 형식을 주로 사용한다.
  • 콜백 함수를 사용해야 한다.
  • 콜백 함수에 대한 설명은 아래의 “콜백 함수 사용 방법”을 참조한다.

메타 데이터 관련 API

메타 데이터 로드 및 사용자 환경 설정

메타 데이터 로드 및 사용자 언어 환경 설정을 위해서는 아래의 API 를 사용한다. 자세한 내용은 해당 API에 대한 도움말을 참조한다.

  • screen.loadmeta

메타 데이터 URL 을 파라미터로 받아서 메타 데이터를 로드하여 글로벌 메모리에 로드한다. 글로벌 메모리에 로드한다는 말은 한번 로드된 메타 데이터를 다른 화면에서도 사용할 수 있다는 의미이다.

로드된 메타 정보는 factory.meta~로 시작되는 API 통해서 접근할 수 있다.

  • factory.setlocale

사용자 언어 및 국가를 지정하는 동작을 수행한다.

콜백 함수 사용 방법

실행 환경 파라미터 설정

콜백함수는 글로벌 모듈에 정의하여 사용한다. 아래의 예시는 “SysUtil”이라는 글로벌 모듈에 “CallbackMetaData” 라는 함수를 사용한다고 설정한 예시이다.

메타 데이터를 이용하여 컴포넌트 생성시 호출될 글로벌 모듈 콜백

  • CALLBACK_META_DATA: “SysUtil.CallbackMetaData”,

콜백 함수 프로토타입 설명

콜백 함수의 주 기능은 엔진에서 META_ID 에 해당하는 메타 데이터 정보를 파라미터로 받아서 파라미터인 컴포넌트 생성시 사용되는 속성 정보 오브젝트의 값을 변경하는 동작을 수행하는 것이다. 

/**
* 메타 처리 콜백
* @param meta_id 메타 ID
* @param meta_value 메타 ID 에 해당하는 값
* @param screen_url 화면 URL
* @param object_kind 오브젝트 유형 (XFD_OBJKIND_CONTROL/XFD_OBJKIND_SHAPE)
* @param component_kind 오브젝트 유형 (getcontrolkind, getshapekind)  또는 오브젝트 세부 유형
* @param prop_info 컴포넌트 속성 정보 오브젝트 (key: 속성명, value: 속성값)
* @param user_language 사용자 실행 환경 언어
* @param user_country 사용자 실행 환경 국가
* @returns 1 - 메타 정보 처리함, 0 - 메타 정보 처리 하지 않음(엔진 기본 동작 수행)
*/
function CallbackMetaData(meta_id, meta_value, screen_url, screen_id,
                            object_kind, component_kind,
                            prop_info, user_language, user_country) {
    return 1;
}

콜백 함수 프로토타입 예시

function CallbackMetaData(meta_id, meta_value, screen_url, screen_id,
                          object_kind, component_kind,
                          prop_info, user_language, user_country) {
    var meta_item_arr;

    // 메타 값이 '|' 문자를 구분자로 여러개 구성되어 있는 경우 예시
    meta_item_arr = meta_value.split('|');
    if (object_kind == XFD_OBJKIND_CONTROL) {
        switch (component_kind) {
            case XFD_CTRLKIND_HYPERTEXT:
            case XFD_CTRLKIND_PUSHBUTTON:
            case XFD_CTRLKIND_CHECKBOX:
            case XFD_CTRLKIND_RADIOBUTTON:
               prop_info['text'] = meta_item_arr[0];
               prop_info['tooltip'] = meta_item_arr[0] + '_tooltip';
               break;
             case XFD_CTRLKIND_TABITEM: // 탭 아이템인 경우
                   prop_info['title'] = meta_item_arr[0];
                   break;
             case XFD_CTRLKIND_GRIDCOLUMNHEAD: // 그리드 컬럼 헤더인 경우
                   prop_info['title'] = meta_item_arr[0];
                   break;
             case XFD_CTRLKIND_GRIDCOLUMNDATA: // 그리드 컬럼 데이터인 경우
                   break;
             default:
                   break;
        }
   }
   else if (object_kind == XFD_OBJKIND_SHAPE) {
        switch (component_kind) {
            case XFD_SHAPEKIND_CAPTION:
                prop_info['text'] = meta_item_arr[0];
                return 1;
            default:
                break;
        }
    }
    return 0; // 엔진 기본 동작 수행
}

다국어 관련 부가 파라미터 및 API

실행 파라미터에 아래의 예시와 같은 다양한 정보를 설정할 수 있다. 

VALUE_THOUSANDS_SEPARATOR: ',', // 값 저장 기준 천단위 구분자
VALUE_DECIMAL_SEPARATOR: '.', // 값 저장 기준 소수점 구분자
SCREEN_LANGUAGE: 'ko', // 화면 개발 기준 언어
SCREEN_COUNTRY: 'kr', // 화면 개발 기준 국가
SCREEN_THOUSANDS_SEPARATOR: ',', // 화면 개발 기준 천단위 구분자
SCREEN_DECIMAL_SEPARATOR: '.', // 화면 개발 기준 소수점 구분자
SCREEN_FONT: ['맑은 고딕',9,0,0,0,0], // 화면 개발 기준 폰트 정보 (xframe5.css 설정 필요)
  
USER_LANGUAGE: 'ko', // 사용자 언어('ko'/'en'), 파라미터에 의해서 동적 변경
USER_COUNTRY: 'kr', // 사용자 국가('kr'/'us'), 파라미터에 의해서 동적 변경
USER_THOUSANDS_SEPARATOR: ',', // 사용자 언어 기준 천단위 구분자
USER_DECIMAL_SEPARATOR: '.', // 사용자 언어 기준 소수점 구분자
IS_INPUT_RTL: false, // 데이터 입력 방향이 우측에서 좌측인지 여부(기본값: false)
HOLIDAY_COLOR: [236,109,97], // 달력 휴일 색상
SUNDAY_COLOR: [236,109,97], // 달력 일요일 색상
SATURDAY_COLOR: [104,169,219], // 달력 토요일 색상
FRIDAY_COLOR: [102,102,102], // 달력 금요일 색상
WEEKDAY_COLOR: [102,102,102], // 달력 평일 색상
 
// 휴일/기념일 정보 오브젝트(휴일/기념일 일자, 휴일/기념일 이름, 공휴일 여부)배열 설정
HOLIDAY_LIST: [
         { date: '0101', title: '양력설', is_holiday: true },
         { date: '0301', title: '3.1 절', is_holiday: true },
         { date: '0505', title: '어린이날', is_holiday: true },
         { date: '0606', title: '현충일', is_holiday: true },
         { date: '0815', title: '광복절', is_holiday: true },
         { date: '1003', title: '개천절', is_holiday: true },
         { date: '1009', title: '한글날', is_holiday: true },
         { date: '1225', title: '기독탄신일', is_holiday: true }
],

// 요일, 월 이름 정보 배열 설정
FIRSTDAY_OF_WEEK: 0, // 0: sunday, 1:monday
DAYNAME_OF_WEEK: ['일','월','화','수','목','금','토'],
FULL_DAYNAME_OF_WEEK: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'],
MONTHNAME_OF_YEAR: ['1 월','2 월','3 월','4 월','5 월','6 월','7 월','8 월','9 월','10 월','11 월','12 월'],
FULL_MONTHNAME_OF_YEAR: ['1 월','2 월','3 월','4 월','5 월','6 월','7 월','8 월','9 월','10 월','11 월','12 월'],
SCHEDULE_DAYNAME_OF_WEEK: ['일[Sun]','월[Mon]','화[Tue]','수[Wed]','목[Thu]','금[Fri]','토[Sat]']

API

메타 데이터 이외의 부가적인 정보를 설정하는 API 를 제공한다. 아래의 API 는 factory 오브젝트를 통해 제공된다.

구분 설명
setlocaleseparator 천단위 및 소수점 구분자를 지정한다.
setfirstdayofweek 달력의 첫번째 요일을 지정한다.
setlocalecalendar 달력 관련 문자열을 지정한다.
setpicklistbaseur 코드 파일 기본 URL 을 지정한다.
setholiday 휴일 정보를 설정한다.
setinputrtl 문자열에 대한 입력 방향을 지정한다.

다국어 관련 엔진 표시 텍스트 환경

다국어 환경에서 엔진에서 표시하는 텍스트에 대한 다국어 처리는 실행 파라미터를 기준으로 현재 한국어와 영어에 대한 기능이 기본으로 제공된다.

한국어/영어 이외의 언어에 대한 표시 처리는 아래의 소스를 참조하여 “xf_i18n.js” 파일 이름으로 개발하여, 화면 로더 HTML에 포함해야 한다.

xf_i18n.js 파일에 대한 경로는 프로젝트별 디렉토리 표준 환경에 맞추어 변경한다.

화면 로더 HTML 예시

<script type="text/javascript" src="./xf5/lib/xf_const.min.js"></script>
<script type="text/javascript" src="./xf_i18n.js"></script>
<script type="text/javascript" src="./xf5/lib/xf_engine.min.js"></script>

xf_i18n.js 파일 예시

/**
 * 솔루션 엔진에서 사용하는 텍스트에 대한 다국어 처리 콜백 함수
 * @param country 언어 코드 ('kr'/'us'/'cn'), USER_COUNTRY 실행 파라미터에 지정된 값
 * @param language 언어 코드 ('ko'/'en'/'zh'), USER_LANGUAGE 실행 파라미터에 지정된 값
 * @param ko_text 한글 텍스트
 * @param en_text 영문 텍스트
 * @returns display_text 표시할 텍스트
 */
function _xfi_enginetext(country, language, ko_text, en_text) {
    var display_text;

    // 필요시 country, language 파라미터 값 비교 처리
    if (language == 'ko') { return ko_text; }
    else if (language == 'en') { return en_text; }
    else if (language != 'zh') { return en_text; }

    display_text = ko_text;

    // 값에 따른 표시 텍스트 변수값 설정
    switch (ko_text) {
        case "삭제하면 하위도 삭제됩니다. 삭제하시겠습니까?" :
            display_text = "Delete it will also delete the child. Are you sure you want to delete it?";
            break;
    }

    // 표시할 텍스트 반환
    return display_text;
}

  • guide/general/multi_language_guide.txt
  • 마지막으로 수정됨: 2024/10/24 14:34
  • 저자 127.0.0.1