끌어오기 작업을 지원하는 방법(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
대부분의 경우 앱은 datarequested 이벤트 처리기에서 바로 데이터 공유를 제공합니다. 그러나 앱에서 데이터를 공유할 준비를 하는 데 시간이 필요한 경우도 있습니다. 이런 경우 지원되는 형식 목록을 제공할 수 있지만 대상 앱이 요청할 때까지 콘텐츠 준비 및 제공을 지연시킬 수 있습니다. 대상 앱이 요청할 때까지 콘텐츠 제공을 지연시키는 것을 끌어오기 작업(또는 지연된 공유)이라고 합니다.
끌어오기 작업을 지원하려면 먼저 사용자가 공유하려는 데이터를 패키지화하는 함수를 만듭니다. 그런 다음 대상 앱에 실제 데이터를 제공하는 대신 대리자 함수를 제공합니다. 대상 앱이 데이터를 가져오려고 하면 시스템에서 대리자 함수를 호출합니다. 그러면 앱이 백그라운드에서 데이터를 공유할 수 있으므로 사용자가 앱에서 다른 작업을 계속할 수 있다는 이점이 있습니다.
알아야 할 사항
기술
사전 요구 사항
- Visual Studio 및 관련 템플릿을 잘 알고 있어야 합니다.
- JavaScript에 대해 잘 알고 있어야 합니다.
- 파일 및 기타 데이터를 가져오는 방법(예: FileOpenPicker 사용)을 알고 있어야 합니다. 파일 선택기를 사용하여 파일에 액세스에서 자세히 알아볼 수 있습니다.
지침
단계 1: 사용자가 이미지 파일을 선택할 수 있도록 단추 처리기 함수 만들기
다음 단추 처리기 코드를 사용하여 사용자가 이미지 파일을 선택할 수 있습니다. 이 파일은 이 빠른 시작의 나머지 단계에서 사용됩니다.
참고
다음 코드는 pickSingleFileAsync를 사용합니다. Windows Phone 8.1에서는 pickSingleFileAndContinue를 대신 사용해야 합니다.
var imageFile = null;
function pickImageFile() {
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
picker.pickSingleFileAsync().done(function (file) {
imageFile = file;
});
}
단계 2: 사용자가 공유하려는 콘텐츠를 제공하는 대리자 함수를 만듭니다.
대리자 함수의 정확한 특성은 앱에 따라 다릅니다. 한 가지 예를 들면 다음과 같습니다.
function onDeferredImageRequested(request) {
if (imageFile) {
var imageStreamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
request.setData(imageStreamRef);
}
}
이 대리자 함수는 setBitmap 또는 setStorageItems 같은 형식 관련 함수 대신 setData를 사용하여 콘텐츠를 추가합니다. 대리자 함수를 사용할 경우 항상 setData를 사용하여 콘텐츠를 제공해야 합니다.
단계 3: 앱을 공유 소스로 설정
DataTransferManager 개체는 모든 공유 작업의 주요 시작점입니다. 사용자가 공유를 호출하려고 하면 실행되는 DataRequested 이벤트 처리기를 추가합니다. Windows 스토어 앱에서는 사용자가 공유 참 메뉴를 호출하면 자동으로 실행됩니다. Windows Phone용으로 개발하는 경우에는 기본 제공 공유 참 메뉴가 없으므로 사용자가 처리기를 탭하여 트리거하는 컨트롤을 추가해야 합니다.
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", sharePullHandler);
나머지 단계는 sharePullHandler 함수를 구현하기 위한 것입니다.
단계 4: DataRequest 개체 가져오기
datarequested 이벤트가 발생하면 앱이 DataRequest 개체를 받습니다. 이 개체에는 사용자가 공유하려는 콘텐츠를 제공하는 데 일반적으로 사용하는 DataPackage가 포함되어 있습니다. 그러나 끌어오기 작업에서는 실제 데이터 대신 대리자 함수를 지정합니다.
var request = e.request;
단계 5: 제목 및 설명 속성 설정
request.data.properties.title = "Share Pull Example";
request.data.properties.description = "Demonstrates how to pull operations in share.";
단계 6: 필요한 경우 파일 형식을 설정합니다.
대리자 함수를 사용하여 파일을 공유할 경우에는 앱에서 지원하는 파일 형식을 지정해야 합니다.
request.data.properties.fileTypes.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
단계 7: DataPackage 개체에 대리자 함수 추가
setDataProvider 메서드는 실제 콘텐츠를 제공하도록 만든 대리자 함수를 지정합니다.
request.data.setDataProvider(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap, onDeferredImageRequested);
이제 사용자가 공유 참을 탭할 경우 앱은 대리자 함수가 포함된 DataPackage 개체를 사용하여 즉각적으로 응답할 수 있습니다. 이제 공유 작업을 백그라운드에서 계속할 수 있으므로 사용자가 원하는 다른 작업을 계속해서 수행할 수 있습니다.
setStorageItems 메서드를 사용하여 파일을 공유할 경우 이 메서드는 공유를 위한 읽기 전용 StorageFile 개체를 만들고 원본 개체를 계속 보유합니다. 즉, setStorageItems를 호출한 후에 파일에 확장 속성을 추가할 경우 이러한 새 확장 속성이 공유하려는 StorageFile 개체에 포함되지 않습니다. 따라서 준비가 끝날 때까지는 파일을 추가하지 않는 것이 좋습니다.
설명
지연된 렌더링을 사용하여 데이터를 공유하는 앱은 페이지 간 탐색을 피하기 위해 단일 페이지로 된 앱이어야 합니다. 또한 앱이 프레임 내에서 탐색을 지원하는 경우 프레임 수준에서 대리자를 등록하는 대신 최상위 수준 스크립트 컨텍스트를 사용하여 대리자 함수를 등록해야 합니다. 탐색할 경우 스크립트 컨텍스트가 손실되고 이로 인해 대리자 함수가 무효화되며 지연된 렌더링이 실패하게 됩니다.
전체 예제
var imageFile = null;
function pickImageFile() {
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
picker.pickSingleFileAsync().done(function (file) {
imageFile = file;
});
}
function onDeferredImageRequested(request) {
if (imageFile) {
var imageStreamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
request.setData(imageStreamRef);
}
}
function sharePullHandler(e) {
var request = e.request;
request.data.properties.title = "Share Pull Example";
request.data.properties.description = "Demonstrates how to support pull operations in share.";
request.data.properties.fileTypes.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
request.data.setDataProvider(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap, onDeferredImageRequested);
}
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// This app is newly launched; register it as a share source.
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", sharePullHandler);
// Set up the button handler to pick an image file.
document.getElementById("chooseImageButton").addEventListener("click", pickImageFile, false);
} else {
// TODO: This app was reactivated from suspension.
// Restore the app state here.
}
args.setPromise(WinJS.UI.processAll());
}
};