dx5 메소드

canonicalize

1.0.0.0 이상
설명

파라미터로 주어진 상대 경로를 전체 경로 반환한다.

DEXTUploadX5 컴포넌트와는 상관 없이 샘플 작업을 하기 위해서 만들어진 일종의 유틸리티이다. '/', './' 또는 '../'으로 시작하는 경로를 스키마로 시작하는 경로로 변경하여 반환한다.

잘못된 경로 값이 주어지는 경우, 올바르지 못한 전체 경로가 반환될 수 있으니, 참고용으로만 사용하기를 권장한다.
```
// 현재 URL이 'http://abc.com/path1/path2/current.html' 라면 'http://abc.com/path1/abc/resource.txt'가 반환된다.
var full = dx5.canonicalize("../abc/resource.txt");
```

형식

fullURL = dx5.canonicalize(relativeURL);

파라미터

이름	형식	설명
relativeURL	String	'/', './', '../'로 시작하는 URL

반환

스키마로 시작하는 전체 경로

create

1.0.0.0 이상

설명

컴포넌트를 생성한다.

<div id="dext5-container" style="width:500px; height:300px;"><!-- 컴포넌트를 담는 컨테이너 요소 --></div>
<button id="btn-add-files" type="button">파일 추가</button>
<script>
    dx5.create({
        // 'id' 속성으로 컴포넌트 DOM 아이디를 부여한다. 이 DOM 아이디는 컴포넌트를 구분 짓는 ID이다.
        // 'parentId' 속성은 컨테이너의 ID를 지정한다.
        id: "dext5", parentId: "dext5-container",
        // 컴포넌트는 버튼을 갖고 있지 않으므로 버튼 요소를 직접 만들어주어야 하는데,
        // 'button' 또는 'input[type=button]' 요소를 만들고 대상 아이디를 지정해주면 파일 추가 기능이 자동으로 연결되는 버튼이 생성된다.
        btnFile: "btn-add-files"
    });
</script>
<script>
    function onDX5Error(id, code, msg) {
        // 컴포넌트 사용 중에 오류가 발생하면 호출된다.
    }
    function onDX5Created(id) {
        // 'dx5.create' 메소드를 사용하여 컴포넌트가 만들어지면 onDX5Create 콜백 함수가 호출된다.
        // 콜백 함수에서 'dx5.get' 메소드를 사용하여 컴포넌트 객체를 얻을 수 있다.
        var dx = dx5.get(id);
    }
</script>

3.3.0.0 버전부터는 컴포넌트를 생성할 때, id가 동일한 컴포넌트가 중복되지 않도록 기존 컴포넌트를 제거한다.

형식
```
dx5.create({ /* 생성 옵션 */ });
```

파라미터

다음 테이블 내용은 'create' 메소드가 필요로 하는 JSON 파라미터 객체의 속성들과 그 값에 대해 설명하고 있다.

이름	설명
style	컴포넌트의 기본 GUI 모양을 결정하는 속성이다. 'list', 'tile', 'single', 'grid' 값을 가지며, 기본값은 'list'이다. 'grid'는 3.2.0.0 버전부터 추가되었다.
progressType	컴포넌트의 업로드/다운로드 진행창 GUI 모양을 결정한다. '0', '1', '2', '3' 값을 가지며, 기본값은 '0'이다. ORAF 방식으로 업로드를 하는 경우, 파일 별 업로드 상태를 파악할 수 없는 관계로 '0'번 또는 '3'번 진행창만 사용이 가능하다. '3'번 진행창 형식은 파일 다운로드 작업을 수행할 때, 파일의 크기를 미리 알 수 없는 경우에 사용하도록 2.3.0.0 버전부터 추가되었다.
id	[필수] DEXTUploadX5 컴포넌트의 ID이다. 컴포넌트가 생성될 때, 사용되는 'object' HTML 요소의 'id' 속성 값이며, dx5 객체는 이 ID를 가지고 컴포넌트를 구분한다.
parentId	[필수] DEXTUploadX5 컴포넌트가 생성될 부모 요소의 ID이다. 컴포넌트가 생성될 때, 사용되는 'object' HTML 요소를 포함하는 컨테이너 요소의 'id' 속성 값이다.
lang	DEXTUploadX5 컴포넌트가 지원해야할 언어이다. 'en', 'ko', 'ja', 'zh', ...와 같은 값을 지정할 수 있는데, 기본값은 브라우저 기본 언어 문자셋을 따른다. 제품은 기본적으로 한국어 리소스를 사용하기 때문에, 한국어 외의 다른 언어의 문자셋을 사용하려면 해당 언어로 작성된 'dextuploadx5-svg-message-{문자셋}.txt'이 필요하다.
width	컴포넌트의 가로 크기이다. CSS 형식을 사용하며, 기본값은 '100%'이다. 컴포넌트의 가로 크기는 'width' 속성을 사용하지 않고 컨테이너의 가로 크기에 의존하는 것을 권장한다.
height	컴포넌트의 세로 크기이다. CSS 형식을 사용하며, 기본값은 '100%'이다. 컴포넌트의 세로 크기는 'height' 속성을 사용하지 않고 컨테이너의 세로 크기에 의존하는 것을 권장한다.
path	DEXTUploadX5 컴포넌트의 위치이다. 이 값이 지정되지 않으면, 'dextuploadx5-configuration.js' 파일의 'dextuploadx5Configuration.productPath' 값을 따른다.
btnFile	파일 선택 다이얼로그를 연결할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 파일 추가 기능이 자동으로 연결된다.
btnFolder (3.7.0.0 이상)	폴더 선택 다이얼로그를 연결할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 폴더 추가 기능이 자동으로 연결된다.
btnSelectAll	파일 전체 선택 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 전체 파일을 선택하는 기능이 자동으로 연결된다.
btnUnselectAll	파일 전체 선택 해지 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 선택된 파일을 해지하는 기능이 자동으로 연결된다.
btnDeleteSelected	선택 파일 삭제 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 선택한 파일을 삭제하는 기능이 자동으로 연결된다.
btnDeleteAll	전체 파일 삭제 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 전체 파일을 삭제하는 기능이 자동으로 연결된다.
btnDeleteChecked	체크된 파일 삭제 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 체크 상태인 파일을 삭제하는 기능이 자동으로 연결된다.
btnRevokeAll	삭제된 가상 파일을 복구하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 삭제된 가상 파일 모두를 복구하는 기능이 자동으로 연결된다.
btnUploadAuto	파일을 업로드하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 아직 업로드가 안된 로컬 파일 모두를 업로드하는 기능이 자동으로 연결된다.
btnUploadChecked	파일을 업로드하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 체크 상태인 로컬 파일 모두를 업로드하는 기능이 자동으로 연결된다.
btnUploadSelected	파일을 업로드하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 선택 상태인 로컬 파일 모두를 업로드하는 기능이 자동으로 연결된다.
btnStopUploading	파일 업로드를 중단하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 업로드를 중단하는 기능이 자동으로 연결된다.
btnDownloadAuto	파일을 다운로드하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 가상 파일들을 모두 다운로드하는 기능이 자동으로 연결된다.
btnDownloadChecked	파일을 다운로드하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 체크 상태인 가상 파일들을 모두 다운로드하는 기능이 자동으로 연결된다.
btnDownloadSelected	파일을 다운로드하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 선택 상태인 가상 파일들을 모두 다운로드하는 기능이 자동으로 연결된다.
btnStopDownloading	파일 다운로드를 중단하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 다운로드를 중단하는 기능이 자동으로 연결된다.
btnDownloadCompressedAuto	압축 다운로드 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 가상 파일들을 하나의 압축 파일로 다운로드하는 기능이 자동으로 연결된다.
btnDownloadCompressedChecked	압축 다운로드 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 체크 상태인 가상 파일들을 하나의 압축 파일로 다운로드하는 기능이 자동으로 연결된다.
btnDownloadCompressedSelected	압축 다운로드 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 선택 상태인 가상 파일들을 하나의 압축 파일로 다운로드하는 기능이 자동으로 연결된다.
btnStopCompressWaiting	압축 다운로드를 중단하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 압축 다운로드를 중단하는 기능이 자동으로 연결된다.
btnOpenDownloadDialogOfHD	HD 응용프로그램의 다운로드 경로를 설정하는 다이얼로그 창을 여는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 HD 응용프로그램의 다운로드 경로를 설정하는 기능이 자동으로 연결된다.
btnDownloadToHDAuto	HD 응용프로그램을 사용하여 파일을 다운로드하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 가상 파일들을 HD 응용프로그램을 사용하여 다운로드하는 기능이 자동으로 연결된다.
btnDownloadToHDChecked	HD 응용프로그램을 사용하여 파일을 다운로드하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 체크 상태인 가상 파일들을 HD 응용프로그램을 사용하여 다운로드하는 기능이 자동으로 연결된다.
btnDownloadToHDSelected	HD 응용프로그램을 사용하여 파일을 다운로드하는 기능을 사용할 버튼 엘리먼트의 아이디를 설정한다. 'button' 또는 'input[type=button]' 엘리먼트와 같이 아이디를 지정해주면 선택 상태인 가상 파일들을 HD 응용프로그램을 사용하여 다운로드하는 기능이 자동으로 연결된다.
loadWaitingTime (2.1.2.0 이상)	컴포넌트를 생성하고 로드할 때까지 대기하는 시간을 설정한다. 기본 값은 10000ms(10초)이며, 이보다 더 오랜 시간을 대기하려면 밀리세컨드(1/1000초) 단위로 설정하면 된다. 3.6.1.0 버전까지는 3000ms(3초)였었다.
events (3.10.0.0 이상)	제품에서 발생하는 이벤트를 처리하는 핸들러를 개별적으로 등록하는 용도로 사용된다. 제품은 'onDX5~' 시작하는 이름으로 가진 전역 이벤트 핸들러를 호출하는 방식으로 이벤트를 처리하지만, 필요에 따라 개별 컴포넌트마다 따로 핸들러를 등록하여 사용할 수 있도록 컴포넌트 생성 시점에 지정을 해줄 수 있다. 전역 이벤트 핸들러와 개별 이벤트 핸들러를 중복하여 선언한 경우: 두 이벤트 핸들러 모두 호출된다. 개별 핸들러, 전역 핸들러 순서로 호출된다. 반환값에 영향을 받는 이벤트의 경우에는 마지막에 호출된 이벤트 핸들러의 반환값에만 영향을 받는다. dx5.create({ ... events: { created: /* onDX5Created /, error: / onDX5Error /, beforeItemsAdd: / onDX5BeforeItemsAdd /, itemAdding: / onDX5ItemAdding /, itemsAdded: / onDX5ItemsAdded /, beforeItemsDelete: / onDX5BeforeItemsDelete /, itemDeleting: / onDX5ItemDeleting /, itemsDeleted: / onDX5ItemsDeleted /, itemSelect: / onDX5ItemSelect /, itemCheck: / onDX5ItemCheck /, itemDoubleClick: / onDX5ItemDoubleClick /, uploadBegin: / onDX5UploadBegin /, uploadItemStart: / onDX5UploadItemStart /, uploadItemEnd: / onDX5UploadItemEnd /, uploadStopped: / onDX5UploadStopped /, uploadCompleted: / onDX5UploadCompleted /, downloadBegin: / onDX5DownloadBegin /, downloadItemStart: / onDX5DownloadItemStart /, downloadItemEnd: / onDX5DownloadItemEnd /, downloadStopped: / onDX5DownloadStopped /, downloadCompleted: / onDX5DownloadCompleted /, preview: / onDX5Preview /, itemsToHDFinish: / onDX5ItemsToHDFinish /, columnDataBinding: / onDX5ColumnDataBinding /, compressWaitingBegin: / onDX5CompressWaitingBegin /, compressWaitingCompleted: / onDX5CompressWaitingCompleted /, compressWaitingStopped: / onDX5CompressWaitingStopped /, dragAndDrop: / onDX5DragAndDrop */, } });

delete

3.3.0.0 이상
설명

DEXTUploadX5 컴포넌트를 삭제한다. 삭제할 대상이 존재하지 않더라도 오류가 발생하지 않는다.
```
// 아이디가 "dext5"인 컴포넌트를 삭제한다.
dx5.delete("dext5");
```
형식
```
success = dx5.delete(id);
```

파라미터

이름	형식	설명
id	String	삭제할 DEXTUploadX5 컴포넌트의 아이디

반환

대상이 존재하고 삭제 작업을 했다면 true이고 그렇지 않으면 false이다.

get

1.0.0.0 이상

설명

생성된 DEXTUploadX5 컴포넌트를 사용하기 위해서는 'dx5.get' 메소드를 사용하여 컴포넌트 객체를 얻어야만 한다.

<div id="dext5-container" style="width:500px; height:300px;"><!-- 컴포넌트를 담는 컨테이너 요소 --></div>
<button id="btn-add-files" type="button">파일 추가</button>
<script>
    dx5.create({ mode: "multi", id: "dext5", ... });
</script>
<script>
    function onDX5Error(id, code, msg) {
        // 컴포넌트 사용 중에 오류가 발생하면 호출된다.
    }
    function onDX5Created(id) {
        // 'dx5.create' 메소드를 사용하여 컴포넌트가 만들어지면 'onDX5Create' 콜백 함수가 호출된다.
        // 컴포넌트가 생성되면 'dx5.get' 메소드를 사용하여 컴포넌트를 얻을 수 있다.
        var dx = dx5.get(id);
    }
</script>

형식
```
component = dx5.get(id);
```

파라미터

이름	형식	설명
id	String	DEXTUploadX5 컴포넌트의 아이디이다. 컴포넌트가 생성될 때, 사용되는 'object' HTML 요소의 'id' 속성 값이며, 'dx5' 객체는 이 아이디를 가지고 컴포넌트를 구분한다.

이름

형식

설명

String

DEXTUploadX5 컴포넌트의 아이디이다.

컴포넌트가 생성될 때, 사용되는 'object' HTML 요소의 'id' 속성 값이며, 'dx5' 객체는 이 아이디를 가지고 컴포넌트를 구분한다.

반환

주어진 아이디에 해당하는 컴포넌트 객체

isHDAvailable

2.3.5.0 이상

설명

HD 응용프로그램이 설치되어 웹페이지와 통신이 가능한 상태인지를 확인할 때 사용하는 메소드이다.

메소드를 호출하여 성공적인 응답을 얻는다면 success 파라미터로 등록된 콜백함수가 호출이 되며, 실패한다면 fail 파라미터로 등록된 콜백함수가 호출된다.

function checkHDInstalled() {
    dx5.isHDAvailable(function (ver) {
        // 성공하면 버전을 나타내는 문자열을 파라미터로 얻을 수 있다.
        alert(ver);
    }, function (code, msg) {
        // 실패하면 실패 코드와 메시지를 얻을 수 있다.
        alert(code + ": " + msg);
    });
}

isHDAvailable 함수는 HD 응용프로그램을 사용할 수 있는 상태를 나타내는 것으로서, 현재 HD 응용프로그램의 실행 여부를 알 수는 없다.

응답이 실패하는 경우 브라우저 콘솔에는 다음과 같은 추가 오류 정보가 출력될 수 있다.

# Chrome
POST http://localhost:35959/DEXTUploadX5_HDS net::ERR_CONNECTION_REFUSED

# IE
SCRIPT7002: XMLHttpRequest: 네트워크 오류 0x2efd, 00002efd 오류가 발생하여 작업을 완료할 수 없습니다.

# FF
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:35959/DEXTUploadX5_HDS. (Reason: CORS request did not succeed).

# Opera
POST http://localhost:35959/DEXTUploadX5_HDS net::ERR_CONNECTION_REFUSED

형식
```
dx5.isHDAvailable(success, fail);
```

파라미터

이름	형식	설명
success	function	HD 사용이 가능한 경우 호출되는 콜백 함수
fail	function	HD 사용이 불가능한 경우 호출되는 콜백 함수

isHDRunning

2.3.5.0 이상

설명

HD 응용프로그램이 현재 실행 중인지를 확인할 때 사용하는 메소드이다.

function checkHDRunning() {
    dx5.isHDRunning(function (ver) {
        // 성공하면 버전을 나타내는 문자열을 파라미터로 얻을 수 있다.
        alert(ver);
    }, function (code, msg) {
        // 실패하면 실패 코드와 메시지를 얻을 수 있다.
        alert(code + ": " + msg);
    });
}

isHDRunning 함수는 현재 HD 응용프로그램의 실행 여부만을 확인한다. 그러므로 HD 응용프로그램의 설치 여부는 알 수 없다.

응답이 실패하는 경우 브라우저 콘솔에는 다음과 같은 추가 오류 정보가 출력될 수 있으며, HD 설치 여부에 따라 메시지가 달라질 수 있다.

# Chrome
POST http://localhost:35959/DEXTUploadX5_HDM 404 (Not Found)
Access to XMLHttpRequest at 'http://localhost:35959/DEXTUploadX5_HDM' from origin 'http://(omission)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

# MS Edge
SEC7120: [CORS] 원본 'http://(omission)'이(가) 'http://localhost:35959/DEXTUploadX5_HDM'에서 cross-origin  리소스에 대한 Access-Control-Allow-Origin response header에서 'http://localhost:4876'을(를) 찾지 못했습니다.
HTTP404: NOT FOUND - 요청한 URI(Uniform Resource Identifier)와 일치하는 항목을 서버에서 찾지 못했습니다.
(XHR)POST - http://localhost:35959/DEXTUploadX5_HDM

# FF
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:35959/DEXTUploadX5_HDM. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

# Opera
Failed to load resource: the server responded with a status of 404 (Not Found)
Access to XMLHttpRequest at 'http://localhost:35959/DEXTUploadX5_HDM' from origin 'http://(omission)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

형식
```
dx5.isHDRunning(success, fail);
```

파라미터

이름	형식	설명
success	function	HD 응용프로그램이 실행 중이면 호출되는 콜백 함수
fail	function	HD 응용프로그램이 실행 중이 아니라면 호출되는 콜백 함수