API 사용 가이드

본 장에서는 Bxm Web Admin UI의 API의 사용법을 설명한다.

1. Common Configuration

설정 정보를 관리하고 전역적으로 접근할 정보들을 저장하기 위해 scripts/common/config.js 파일을 사용한다.

속성 설명

isBxm

Boolean

BXM framework 제품 구분

BXM일 경우 true, 다른 프레임워크를 사용했을 경우 false

brand

String

사용처 브랜드 이름

title, logo, theme 등을 결정

sysConfig.maxActiveTabCount

Number

탭 활성화 최대 개수

최대 개수를 넘어가면 가장 처음에 열린 창이 닫힘

sysConfig.popupDuration

Number

팝업의 디폴트 지속시간(ms)

설정된 시간 이후 자동으로 팝업이 닫히며 팝업 생성시 커스텀하게 설정 가능

Confirm 버튼이 있는 팝업은 해당하지 않음

pageInfo

Object

메뉴별 페이지 정보, 페이지 생성시 페이지 경로를 참조

{{menuId}} : {desc: {{menuDesc}}, src: {{menuSrcPath}}}

pageInfo: {
    'MENU00101': {
        desc: '온라인 로그 조회',
        src: 'views/online/online-log-search/_online-log-search'
    },
    'MENU00102': {
        desc: '거래 파라미터 관리',
        src: 'views/online/trx-parameter/_trx-parameter'
    }
}

desc는 참고를 위한 설명이며 실제 화면에 표시되는 메뉴이름은 scripts/messages/{language}/main-menu.json을 참조함

startPageInfo

String

시작 페이지 정보, 로그인 후 보여질 페이지

{{menuId}}

comCdList

Object

공통코드

로그인후 서버에서 받아온 데이터로 공통코드를 셋팅한다.
(scripts/common/main/main.js)

{{codeKey}}: {{{codeVal}} : {{codeName}}}

comCdList: {
    'BXMAD0001': {
        D: '개발',
        O: '운영',
        T: '테스트'
    },
    'BXMAD0002': {
        AC: '계정계',
        INFO: '정보계'
    }
}

extraOption

Object

커스터마이징된 추가 옵션 값

로그인후 서버에서 받아온 데이터로 셋팅한다.
(scripts/common/main/main.js)

useTrxCd

Boolean

거래 코드 사용 유무

로그인후 서버에서 받아온 데이터로 셋팅한다.
(scripts/common/main/main.js)

2. Common Utility Functions

공통적으로 쓰이는 utility function 들을 scripts/common/util.js 파일에서 관리/사용한다.

  • * : 필수값(required)

  • 코드의 주석으로 설명이 충분한 function들은 언급하지 않는다.

메소드 설명

isBxm

Boolean

config.js의 설정값을 참조하여 BXM framework 사용여부를 리턴한다.

getBxmReqData

(service, operation, bodyName, bodyParam)

Object

BXM 서비스 요청시 전달할 파라미터 Object를 생성

파라미터

  • service* : String

    요청할 서비스의 service명

  • operation* : String

    요청할 서비스의 operation명

  • bodyName* : String

    업무서비스의 input omm class name

  • bodyParam : Object

    업무 서비스의 input omm class에 대한 데이터

var requestParam = commonUtil.getBxmReqData(
    'AdminService', 'getList', 'AdminOMM',
    {
        cfgKey: param.cfgKey
    }
);

requestBxmAjax

(data, callback, isLogin)

BXM 서비스 Ajax 요청

파라미터

  • data* : Object

    서비스 요청 파라미터 Object, util파일의 getBxmReqData의 리턴값

  • callback : Object

    서비스 요청후 실행될 콜백 메소드 Object

  • isLogin : Boolean

    로그인 여부

commonUtil.requestBxmAjax(requestParam, {
    beforeSend: function() {
        //...
    },
    success: function(response) {
        //...
    },
    complete: function() {
        //...
    }
});

downloadFile

(url, data, method)

파일 다운로드

파라미터

  • url* : String

    엑셀 다운로드 요청 url

  • data : Object

    엑셀 다운로드 요청 파라미터 Object

  • method : String('get', 'post')

    엑셀 다운로드 요청 method, 디폴트 'post'

uploadFile

(option)

파일 업로드

HTML5의 'input:file' tag를 이용해 파일 업로드

파라미터

  • option* : Object

    • url* : Object

      업로드할 파일의 로컬 위치와 이름

    • fileInput* : DOM

      HTML5 'input:file' tag의 DOM

    • param : Object

      추가 파라메터

    • afterUploadFn : Function

      업로드 후 실행할 콜백함수

makeParamFromForm

($form)

Object

폼에서 파라미터를 리턴

$form 하위에 있는 엘리먼트의 data-form-param속성 값을 키로, value속성
값을 키의 값으로 갖는 Object를 생성

data-form-param을 갖는 엘리먼트에 data-value속성이 있는 경우,
data-value의 속성 값을 우선 적용

파라미터

  • $form* : Jquery Object

    파라미터를 가져올 엘리먼트

 <section id="form1">
  <input type="text" data-form-param="cfgKey" value="key" />
  <input type="text" data-form-param="cfgVal" value="value" />
  <input type="text" data-form-param="cfgCd" value="개발" data-value="D"/>
</section>
var formParam =  commonUtil.makeParamFromForm($('#form1'));

console.log(formParam); // Object {cfgKey: 'key', cfgVal: 'value', cfgCd: 'D'}

makeFormFromParam

($form, formParam)

파라미터로 폼을 셋팅

$form 하위에 있는 엘리먼트의 data-form-param 속성의 값을 키로 가지는
항목을 formParam에서 찾아서 그 값을 셋팅

값을 셋팅할 엘리먼트가 공통코드이고 보여줄 값이 코드값이 아닌 코드명일
경우 해당 엘리먼트에 data-code="\{{공통코드값}}"속성을 추가

파라미터

  • $form* : Jquery Object

    파라미터를 셋팅할 엘리먼트

  • formParam* : String

    셋팅할 파라미터 Object

 <section id="form2">
  <input type="text" data-form-param="cfgKey" />
  <input type="text" data-form-param="cfgVal" />
  <input type="text" data-form-param="cfgCd" data-code="BXMAD0001" />
</section>
var formParam = {
    cfgKey: 'key',
    cfgVal: 'value',
    cfgCd: 'D'
};

commonUtil.makeFormFromParam($('#form2'), formParam);

convertArrayToObject

(array, objectKey)

Array를 Object로 변환

Array = [Object, Object, …​] 구조에서 Object의 어떤 값(objectKey)을
key로 하는 Object로 변환

BXM OMM의 구조가 위와 같으므로 OMM을 object로 변환이 필요할 시 사용

파라미터

  • array* : Array

    파라미터를 셋팅할 엘리먼트

  • objectKey* : String

    셋팅할 파라미터 Object

var objectKey = 'name',
    array = [
        {
            name: 'name1',
            desc: 'desc1',
            codeVal: 'codeVal1'
        },
        {
            name: 'name2',
            desc: 'desc2',
            codeVal: 'codeVal2'
        },
    ];

변환 후

{
    name1: {
        desc: 'desc1',
        codeVal: 'codeVal1'
    },
    name2: {
        desc: 'desc2',
        codeVal: 'codeVal2'
    }
};

convertObjectToKeyValueArray

(object)

Object를 Array로 변환

Object를 [{key: key, value: value}, Object, …​] 구조의 Array로 변환

파라미터

  • object* : Object

    변환할 Object

var object = {
    name: 'name1',
    desc: 'desc1',
    codeVal: 'codeVal1'
};

변환 후

[
    {
        key: 'name',
        value: 'name1'
    },
    {
        key: 'desc',
        value: 'desc1'
    },
    {
        key: 'codeVal',
        value: 'codeVal1'
    }
];

getCommonCodeOptionTag

(commonCodeObj, isAllSelectable)

Array

공통 코드 옵션 태그 리스트 생성

파라미터

  • commonCodeObj* : Object

    공통 코드 Object, config파일의 comCdList의 {{codeKey}}에 대한 값

  • isAllSelectable : Boolean

    전체 옵션 태그 추가 여부

 <select id="common-code-select"></select>
var comCdObj = commonConfig.comCdList.BXMAD0004,
option = commonUtil.getCommonCodeOptionTag(comCdObj);

$('#common-code-select').html(option);

setExpandAccordion

($element)

한개 이상 펼치기가 가능한 아코디언을 셋팅

파라미터

  • $element* : Jquery Object

    아코디언을 셋팅할 엘리먼트

<div id="accordion" class="bw-accordion">
    <h3 class="clr-bd-t">아코디언1</h3>
    <div>아코디언1 컨텐츠</div>
    <h3 class="clr-bd-t">아코디언2</h3>
    <div>아코디언2 컨텐츠</div>
</div>
commonUtil.setExpandAccordion($('#accordion'));

setDatePicker

($element, dateFormat)

데이터피커를 셋팅

파라미터

  • $element* : Jquery Object

    데이터 피커를 셋팅할 엘리먼트

  • dateFormat : String

    데이터 피커에서 보여줄 날짜 포맷, 디폴트 'yymmdd'

    날짜 포맷의 상세한 내용은 api.jqueryui.com/datepicker을 참조한다.

<input type="text" id="date-picker-input" />
commonUtil.setDatePicker($('#date-picker-input'));

setTimePicker

($element, timeFormat)

타임피커를 셋팅

파라미터

  • $element* : Jquery Object

    타임 피커를 셋팅할 엘리먼트

  • timeFormat : String

    타임 피커에서 보여줄 날짜 포맷, 디폴트 'H:i:s'

    필요시 설치 필요

    타임 포맷의 상세한 내용은 jonthornton.github.com/jquery-timepicker/을 참조한다.

3. Common Components

공통적으로 쓰이는 표, 로딩바, 팝업 등의 컴포넌트

scripts/common/component에 위치하며 사용 시 해당 파일/디렉토리를 extend하여 사용한다.

3.1. Ext Grid (extended)

Ext.grid.Panel에 BXM에서 필요한 기능들을 추가/커스터마이징한 컴포넌트

본 가이드에서는 추가/확장된 기능에 대해서 주로 설명하며 기본 Ext.grid.Panel의 기능은 공식문서를 참조한다.

메소드 설명

initialize

(config)

Ext Grid는 var grid = new ExtGrid({config object})와 같은 방식으로 initialize되며 아래 설명한 파라메터 들을 Object의 형태로 넘겨줄 수 있다.

config 파라미터

  • requestParam.obj* : Object

    그리드 서비스 요청 파라미터 Object, 5.2절. “Common Utility Functions”의 getBxmReqData의 리턴값

  • requestParam.key* : String

    그리드 서비스 요청 파라미터 Object 내의 업무서비스의 input OMM class
    name에 대한 키

  • responseParam.objKey* : String

    그리드 서비스 응답 Object의 키

  • responseParam.key* : String

    그리드 서비스 응답 Object 내의 그리드 데이터의 키

  • paging : Boolean

    페이징 사용 여부

  • pageCountDefaultVal : Number

    디폴트 페이지 카운트 값

  • gridToggle : Boolean

    그리드 토글 버튼 사용 여부, 디폴트 true

  • header.pageCount : Boolean

    페이지 카운트 사용 여부

  • header.pageCountList : Array[Number]

    페이지 카운트 리스트, 디폴트 [5, 10, 20, 30]

  • header.button : Array[Object(html: String, event: Function)]

    그리드 우상단에 추가될 버튼

  • header.content : Array[String/HTML tag]

    그리드 좌상단에 입력될 내용

  • fields* : Array

    Ext.grid.Store fields
    (공식문서 참조)

    Ext.grid.Panel은 Ext.grid.Store를 model로 하여 view를 구성한다.

  • columns* : Array

    Ext.grid.Panel columns
    (공식문서 참조)

  • listeners : Object

    Ext.grid.Panel listeners
    (공식문서 참조)

  • storeListeners : Object

    Ext.grid.Store listeners
    (공식문서 참조)

  • gridConfig : Object

    Ext.grid.Panel 추가 설정
    (공식문서 참조)

    columns와 listeners를 제외한 추가적인 Ext.grid.Panel의 설정값이 필요할 시 여기에 추가한다.

var adminSettingGrid = new ExtGrid({
    requestParam: {
        obj: commonUtil.getBxmReqData('AdminService', 'getList', 'AdminOMM'),
        key: 'AdminOMM'
    },
    responseParam: {
        objKey: 'AdminSettingListOMM',
        key: 'adminSettingList'
    },
    header: {
        pageCount: true,
        button: [
            {
                html: '<button></button>',
                event: function() {
                    //...
                }
            }
        ]
    },
    paging: true,

    fields: ['cfgKey', 'cfgVal'],
    columns: [
        {
            text: bxMsg('setting.key'),
            flex: 1,
            dataIndex: 'cfgKey'
        },
        {
            text: bxMsg('setting.value'),
            flex: 1,
            dataIndex: 'cfgVal'
        }
    ],
    listeners: {
        select : function(_this, record) {
            //...
        }
    },
    gridConfig: {
        animate: false
    }
});

render

(renderAfter, gridSize)

Jquery Object

그리드 렌더

파라미터

  • renderAfter : Function

    그리드 렌더링 후 실행될 함수

  • gridSize.width : Number

    그리드 너비

  • gridSize.height : Number

    그리드 높이

loadData

(bodyParam, loadAfter, initActivePaging, data, key)

그리드 데이터 요청

파라미터

  • bodyParam : Object

    그리드 서비스 요청 파라미터 Object내의 업무서비스의 input omm class에
    대한 값

  • loadAfter : Function

    그리드의 데이터 요청 성공후 실행될 함수

  • initActivePaging : Boolean

    페이지 카운트 초기화 여부

  • data : Object

    그리드 데이터 Object, 그리드에 직접 데이터를 셋팅시 사용

  • key : String

    그리드 데이터 Object내의 그리드 데이터의 key, 그리드에 직접 데이터를 셋팅시 사용

reloadGrid

(loadAfter, initActivePaging)

그리드 데이터 재요청

이전의 그리드의 데이터를 요청했던 파라미터로 재요청

파라미터

  • loadAfter : Function

    그리드의 데이터 재요청 성공후 실행될 메소드

  • initActivePaging : Boolean

    페이지 카운트 초기화 여부

setGridHeight

(rowCount)

지정한 행 갯수에 맞게 그리드 높이 세팅

파라미터

  • rowCount : Number

    높이를 세팅할 행 갯수

resetData

그리드의 데이터 모두 삭제

getAllData

그리드의 모든 데이터 리턴

getDataAt

(index)

특정 인덱스의 데이터 리턴

파라미터

  • index : Number

    데이터를 가져올 인덱스

setDataAt

(index, data)

특정 인덱스에 데이터 셋팅

파라미터

  • index : Number

    데이터를 셋팅할 인덱스

  • data : Number

    셋팅할 데이터

removeAt

(index)

특정 인덱스의 데이터 삭제

파라미터

  • index : Number

    데이터를 삭제할 인덱스

getSelectedRowIdx

Number

선택된 로우의 인덱스를 가져오는 메소드

setSelectedRowIdx

(index)

파라미터로 받는 인덱스의 로우를 선택하는 메소드

파라미터

  • index : Number

    선택할 로우의 인덱스

팝업은 상속 받아서 구현한다.

define(
    [
        'common/component/popup/popup'
    ],
    function(
        Popup
    ) {

        var AdminSettingPopup = Popup.extend({
            // ...
        });

        return AdminSettingPopup;
    }
);
메소드 설명

setDraggable

팝업 드래그 설정

상속 받은 뷰에서 팝업이 드래그 가능하도록 설정하려면 해당 메소드를 호출한다.

setResizable

팝업 리사이즈 설정

상속 받은 뷰에서 팝업이 리사이즈 가능하도록 설정하려면 해당 메소드를 호출한다.

show

팝업을 보여준다.

close

팝업을 닫는다.

3.3. LOADING BAR

LOADING BAR를 렌더할 엘리먼트에는 bx-loding-wrap클래스를 추가하여 로딩바를 표시할 영역을 설정한다.

메소드 설명

show

로딩바를 보여준다.

hide

로딩바를 숨긴다.

Copyright© Bankwareglobal All Rights Reserved.