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}}}
|
||
startPageInfo String |
시작 페이지 정보, 로그인 후 보여질 페이지 {{menuId}} |
||
comCdList Object |
공통코드 로그인후 서버에서 받아온 데이터로 공통코드를 셋팅한다. {{codeKey}}: {{{codeVal}} : {{codeName}}}
|
||
extraOption Object |
커스터마이징된 추가 옵션 값 로그인후 서버에서 받아온 데이터로 셋팅한다. |
||
useTrxCd Boolean |
거래 코드 사용 유무 로그인후 서버에서 받아온 데이터로 셋팅한다. |
2. Common Utility Functions
공통적으로 쓰이는 utility function 들을 scripts/common/util.js 파일에서 관리/사용한다.
|
메소드 | 설명 | ||
---|---|---|---|
isBxm Boolean |
config.js의 설정값을 참조하여 BXM framework 사용여부를 리턴한다. |
||
getBxmReqData (service, operation, bodyName, bodyParam) Object |
BXM 서비스 요청시 전달할 파라미터 Object를 생성 파라미터
|
||
requestBxmAjax (data, callback, isLogin) |
BXM 서비스 Ajax 요청 파라미터
|
||
downloadFile (url, data, method) |
파일 다운로드 파라미터
|
||
uploadFile (option) |
파일 업로드 HTML5의 'input:file' tag를 이용해 파일 업로드 파라미터
|
||
makeParamFromForm ($form) Object |
폼에서 파라미터를 리턴 $form 하위에 있는 엘리먼트의 data-form-param속성 값을 키로, value속성 data-form-param을 갖는 엘리먼트에 data-value속성이 있는 경우, 파라미터
|
||
makeFormFromParam ($form, formParam) |
파라미터로 폼을 셋팅 $form 하위에 있는 엘리먼트의 data-form-param 속성의 값을 키로 가지는 값을 셋팅할 엘리먼트가 공통코드이고 보여줄 값이 코드값이 아닌 코드명일 파라미터
|
||
convertArrayToObject (array, objectKey) |
Array를 Object로 변환 Array = [Object, Object, …] 구조에서 Object의 어떤 값(objectKey)을 BXM OMM의 구조가 위와 같으므로 OMM을 object로 변환이 필요할 시 사용 파라미터
변환 후
|
||
convertObjectToKeyValueArray (object) |
Object를 Array로 변환 Object를 [{key: key, value: value}, Object, …] 구조의 Array로 변환 파라미터
변환 후
|
||
getCommonCodeOptionTag (commonCodeObj, isAllSelectable) Array |
공통 코드 옵션 태그 리스트 생성 파라미터
|
||
setExpandAccordion ($element) |
한개 이상 펼치기가 가능한 아코디언을 셋팅 파라미터
|
||
setDatePicker ($element, dateFormat) |
데이터피커를 셋팅 파라미터
|
||
setTimePicker ($element, timeFormat) |
타임피커를 셋팅 파라미터
|
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 파라미터
|
render (renderAfter, gridSize) Jquery Object |
그리드 렌더 파라미터
|
loadData (bodyParam, loadAfter, initActivePaging, data, key) |
그리드 데이터 요청 파라미터
|
reloadGrid (loadAfter, initActivePaging) |
그리드 데이터 재요청 이전의 그리드의 데이터를 요청했던 파라미터로 재요청 파라미터
|
setGridHeight (rowCount) |
지정한 행 갯수에 맞게 그리드 높이 세팅 파라미터
|
resetData |
그리드의 데이터 모두 삭제 |
getAllData |
그리드의 모든 데이터 리턴 |
getDataAt (index) |
특정 인덱스의 데이터 리턴 파라미터
|
setDataAt (index, data) |
특정 인덱스에 데이터 셋팅 파라미터
|
removeAt (index) |
특정 인덱스의 데이터 삭제 파라미터
|
getSelectedRowIdx Number |
선택된 로우의 인덱스를 가져오는 메소드 |
setSelectedRowIdx (index) |
파라미터로 받는 인덱스의 로우를 선택하는 메소드 파라미터
|
3.2. POPUP
팝업은 상속 받아서 구현한다.
define(
[
'common/component/popup/popup'
],
function(
Popup
) {
var AdminSettingPopup = Popup.extend({
// ...
});
return AdminSettingPopup;
}
);
메소드 | 설명 |
---|---|
setDraggable |
팝업 드래그 설정 상속 받은 뷰에서 팝업이 드래그 가능하도록 설정하려면 해당 메소드를 호출한다. |
setResizable |
팝업 리사이즈 설정 상속 받은 뷰에서 팝업이 리사이즈 가능하도록 설정하려면 해당 메소드를 호출한다. |
show |
팝업을 보여준다. |
close |
팝업을 닫는다. |