5부: 파일 액세스 및 선택기(HTML)

5부: 파일 액세스 및 선택기(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 자습서 시리즈의 2부 앱 수명 주기 및 상태 관리에서는 앱 데이터세션 데이터, 그리고 이 데이터를 저장하는 방법에 대해 알아보았습니다. 앱은 기본적으로 앱 데이터 위치 등의 특정 파일 시스템 위치, 앱 설치 디렉터리 및 앱이 Downloads 폴더에 만드는 항목에 액세스할 수 있습니다.

이와 달리 사진, 동영상, 문서 파일 등, 사용자 데이터는 앱과 독립적이며 일반적으로 파일 시스템의 다른 위치(예: 사용자의 라이브러리 폴더)에 저장됩니다. 이러한 위치에 액세스하려면 앱은 데이터에 액세스하기 위한 기능을 프로그래밍 방식으로 선언하거나, 사용자가 직접 파일을 열 수 있도록 파일 선택기를 사용해야 합니다. 여기서는 파일 선택기를 사용하여 사용자의 사진에 액세스하므로 앱 기능을 선언하지 않아도 됩니다. 기능에 대한 자세한 내용은 앱 기능 선언을 참조하세요.

이 자습서에서는 4부: 레이아웃 및 뷰에서 만든 사진 앱에 기능을 추가합니다. 먼저, 파일 선택기를 열고 사용자가 사진에서 이미지를 선택할 수 있도록 "Get photo(사진 가져오기)" 단추 클릭 이벤트를 처리합니다. 그런 다음 UI 컨트롤을 파일 속성에 바인딩하여 그림 정보를 표시합니다. 마지막으로 앱 상태를 저장하는 방법에 대해 2부에서 학습한 내용을 복습합니다. 여기에서는 MostRecentlyUsedList를 사용하여 사용자가 선택한 이미지에 대한 액세스를 유지합니다.

이 자습서에서는 다음에 대해 알아봅니다.

  • FileOpenPicker를 사용하여 사용자가 파일을 가져올 수 있게 하는 방법
  • 데이터에 UI 컨트롤을 바인딩하는 방법
  • MostRecentlyUsedList를 사용하여 이전에 열린 파일에 액세스하는 방법
.
  

자습서를 건너뛰고 바로 코드를 보려면 JavaScript 시작: 자습서 시리즈의 전체 코드(영문)를 참조하세요.

 

시작하기 전에...

1단계: 파일 선택기를 사용하여 이미지 파일 선택

앱은 파일 선택기를 통해 사용자 시스템 전체의 파일 및 폴더에 액세스할 수 있습니다. 파일 선택기를 호출하면 사용자가 시스템을 탐색하고 액세스하여 저장할 파일(또는 폴더)을 선택할 수 있습니다. 사용자가 파일이나 폴더를 선택하면 앱은 해당 선택 항목을 StorageFileStorageFolder 개체로 받습니다. 그러면 앱은 해당 개체를 사용하여 선택한 파일 및 폴더에서 작동할 수 있습니다.

가장 먼저 해야 할 일은 GetPhotoButton_Click 이벤트를 처리하여 표시할 그림을 가져오는 것입니다.

여기서는 4부: 레이아웃 및 뷰의 코드로 시작하겠습니다.

JJ856913.wedge(ko-kr,WIN.10).gif파일 선택기를 추가하려면

  1. Microsoft Visual Studio를 시작하고 PhotoAppSample프로젝트를 엽니다.
  2. 솔루션 탐색기에서 home.js를 두 번 클릭하여 엽니다.
  3. WinJS.UI.Pages.define 호출 직전에 "photoObject"라는 개체를 만듭니다. 이 개체에 관심 있는 이미지 정보를 저장할 필드를 제공합니다.
    
    (function () {
        "use strict";
    
        // Use this object to store info about the loaded image.
        var photoObject =
        {
            src: null,
            displayName: null,
            name: null,
            path: null,
            dateCreated: null
        };
    
        WinJS.UI.Pages.define("/pages/home/home.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
            }
        });
    })();
    
    
  4. "homePage"라는 변수를 만들고 WinJS.UI.Pages.define에서 반환된 값으로 설정합니다. 이렇게 하면 이후 단계에서 홈페이지의 멤버를 더 쉽게 참조할 수 있습니다.
    
    (function () {
        "use strict";
    
        // Use this object to store info about the loaded image.
        var photoObject =
        {
            src: null,
            displayName: null,
            name: null,
            path: null,
            dateCreated: null
        };
    
        var homePage = WinJS.UI.Pages.define("/pages/home/home.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
            }
        });
    })();
    
    
  5. 페이지에 대해 getPhotoButtonClickHandler, loadImagedisplayError의 3개 멤버를 추가로 정의합니다. 다음 단계에서 이러한 멤버에 대한 코드를 입력합니다.
    
       var homePage = WinJS.UI.Pages.define("/pages/home/home.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
            },
    
            getPhotoButtonClickHandler: function (eventInfo) {
    
            },
    
            loadImage: function (file) {
    
            },
    
            displayError: function (error) {
    
            }
    
        });
    
    
  6. getPhotoButtonClickHandler 메서드를 정의해 보겠습니다.
    1. FileOpenPicker 개체를 만듭니다. 사용자 및 앱과 관련된 파일 선택기 개체에서 속성을 설정합니다. 파일 선택기 사용자 지정 방법을 결정하는 데 도움이 되는 지침은 파일 선택기에 대한 지침을 참조하세요.

      사용자가 사진을 선택하므로 SuggestedStartLocation을 사진으로, ViewModethumbnail로 설정합니다. 또한 선택기에 이미지 파일용으로 지정한 파일 형식만 표시되도록 파일 형식 필터를 추가합니다.

      
      
      getPhotoButtonClickHandler: function (eventInfo) {
      
          var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
          openPicker.suggestedStartLocation =
              Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
          openPicker.viewMode =
              Windows.Storage.Pickers.PickerViewMode.thumbnail;
      
          openPicker.fileTypeFilter.clear();
          openPicker.fileTypeFilter.append(".bmp");
          openPicker.fileTypeFilter.append(".png");
          openPicker.fileTypeFilter.append(".jpeg");
          openPicker.fileTypeFilter.append(".jpg");
      
      },  
      
      
    2. 파일 선택기를 표시하려면 pickSingleFileAsync 메서드를 호출합니다.

      참고  사용자가 여러 파일을 선택하도록 하려면 pickMultipleFilesAsync를 호출합니다.
       

      이 메서드는 비동기 메서드이므로 파일을 직접 반환하는 것이 아니라 사용자 선택한 StorageFile에 대해 Promise를 반환합니다. 1부: "Hello, world!" 앱 만들기에서 설명한 바와 같이, Promise에서 값을 얻으려면 이벤트 처리기를 then 또는 done 메서드에 전달합니다.

      Promise 개체에서 가장 흔히 사용되는 메서드는 then으로, 최대 세 가지 매개 변수(Promise가 성공적으로 완료되었을 때 호출할 함수, Promise가 완료되었지만 오류가 발생했을 때 호출할 함수, 진행 정보를 제공할 함수)를 사용합니다. 또한 동일한 매개 변수를 사용하는 done 메서드도 사용할 수 있습니다. 단, 처리 중에 오류가 발생할 경우 then 함수는 오류 상태로 Promise를 반환하지만 예외가 발생하지는 않는 반면 done 메서드는 오류 함수가 제공되지 않은 경우 예외를 발생시킨다는 점에서 차이가 있습니다.

      done 메서드를 사용하여 이 메서드에 promise가 성공적으로 완료될 때의 함수(loadImage)와 오류가 발생했을 때의 함수(displayError)를 전달합니다. 이 코드 줄을 이벤트 처리기에 추가합니다.

      
      
      openPicker.pickSingleFileAsync().done(
          homePage.prototype.loadImage,
          homePage.prototype.displayError);
      
      

      다음은 전체 이벤트 처리기입니다.

      
      
      getPhotoButtonClickHandler: function (eventInfo) {
      
          var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
          openPicker.suggestedStartLocation =
              Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
          openPicker.viewMode =
              Windows.Storage.Pickers.PickerViewMode.thumbnail;
      
          openPicker.fileTypeFilter.clear();
          openPicker.fileTypeFilter.append(".bmp");
          openPicker.fileTypeFilter.append(".png");
          openPicker.fileTypeFilter.append(".jpeg");
          openPicker.fileTypeFilter.append(".jpg");
      
          openPicker.pickSingleFileAsync().done(
              homePage.prototype.loadImage,
              homePage.prototype.displayError);
      
      },   
      
      
  7. ready 함수에서 getPhotoButtonClickHandlergetPhotoButton에 등록합니다.
    
    
            ready: function (element, options) {
                // TODO: Initialize the page here.
                document.getElementById("getPhotoButton")
                    .addEventListener("click", this.getPhotoButtonClickHandler, false);
    
            }, 
    
    
  8. loadImage 메서드는 pickSingleFileAsync에 의해 반환되는 Promise가 성공적으로 완료될 때 호출됩니다. 이 메서드는 file이라는 이름의 StorageFile 개체를 단일 매개 변수로 사용합니다.
    1. 사용자가 열린 파일 선택기에서 취소 단추를 클릭하면 선택기가 여전히 성공적으로 완료되는 Promise를 반환하지만 file 매개 변수에 대해 null 값을 전달합니다. if 문을 추가하여 파일이 실제로 선택되었는지 여부를 확인합니다.

      
      
              loadImage: function (file) {
      
                  if (file) {
      
      
                  }
              }, 
      
      
    2. file 매개 변수는 StorageFile 개체입니다. 이 개체에는 이 개체가 나타내는 파일의 displayName, name, pathdateCreated 정보를 검색하기 위한 속성이 있습니다. 앞에서 만든 photoObject 변수에 이 정보를 저장합니다.
      
      
              loadImage: function (file) {
      
                  if (file) {
                      photoObject.displayName = file.displayName;
                      photoObject.name = file.name;
                      photoObject.path = file.path;
                      photoObject.dateCreated = file.dateCreated;
      
                  }
              }, 
      
      
    3. 이미지 자체를 검색하려면 URL.createObjectURL 메서드를 사용하여 Blob 개체를 만듭니다. 메모리 누출을 방지하려면 true로 설정된 속성 oneTimeOnly를 포함하는 개체를 URL.createObjectURL 메서드에 전달합니다. 이 Blob를 사용하여 photoObjectsrc 속성을 설정합니다.
      
      
              loadImage: function (file) {
      
                  if (file) {
                      photoObject.displayName = file.displayName;
                      photoObject.name = file.name;
                      photoObject.path = file.path;
                      photoObject.dateCreated = file.dateCreated;
      
                      var imageBlob = URL.createObjectURL(file, { oneTimeOnly: true });
                      photoObject.src = imageBlob;
                  }
              }, 
      
      
  9. 이제 displayError 메서드를 정의합니다. 이 메서드는 pickSingleFileAsync에서 반환된 Promise가 성공적으로 완료되지 않을 때 호출됩니다.
    
    
            displayError: function (error) {
                document.getElementById("imageName").innerHTML = "Unable to load image.";
            } 
    
    

2단계: 이미지 표시

지금은 "Get photo!(사진 가져오기!)" 단추를 클릭하여 이미지를 검색하지만 표시하지는 않습니다. 이미지 및 이미지 정보를 표시하기 위해 요소를 검색하고 수동으로 설정할 수도 있지만, 대신 JavaScript용 Windows 라이브러리 데이터 바인딩 기능을 사용하여 이러한 값을 설정하겠습니다.

데이터 바인딩은 개체(원본)를 UI 개체(대상)에 연결합니다.

이전 단계에서 사진 정보를 저장할 개체를 만들었습니다. 이 개체가 원본 개체입니다.



    // Use this object to store info about the loaded image.
    var photoObject =
    {
        src: null,
        displayName: null,
        name: null,
        path: null,
        dateCreated: null
    };


대상 UI 개체는 home.html 파일에 있고, 이미지 정보를 표시하는 데 사용할 요소입니다.


        <section aria-label="Main content" role="main">
            <div id="contentGrid">
                <button id="getPhotoButton">Get photo</button>
                <div id="imageName" class="pageSubheader">Image name</div>

                <div id="imageGrid">
                    <img id="displayImage" src="#"  />
                    <div id="imageInfoContainer">
                        <label for="fileName">File name:</label>
                        <div id="fileName">File name</div>
                        <label for="path">Path:</label>
                        <div id="path">Path</div>
                        <label for="dateCreated">Date created:</label>
                        <div id="dateCreated">Date created</div>
                    </div>
                </div>
            </div>
        </section>

데이터 바인딩을 만들려면 대상 HTML 요소에 data-win-bind 특성을 추가합니다. 이 특성은 설정할 대상 속성의 이름과 데이터를 제공하는 원본 속성의 이름을 값으로 사용합니다.

targetPropertyName: sourcePropertyName

동시에 여러 개의 속성을 데이터 바인딩할 수 있습니다. 다음과 같이 각 대상/원본 쌍을 세미콜론으로 구분하여 나열하면 됩니다.

targetPropertyName1: sourcePropertyName1; targetPropertyName2: sourcePropertyName2

이 예제에서는 div 요소의 innerHTML 속성을 원본 개체의 displayName 속성에 바인딩합니다.


<div id="imageName" class="pageSubheader" 
    data-win-bind="innerHTML: displayName">Image name</div>

데이터 바인딩을 시작하려면 WinJS.Binding.processAll을 호출하고 대상 요소나 대상 요소의 부모와 원본 개체를 전달합니다. 이 예제에서는 데이터 바인딩할 요소가 모두 포함된 contentGrid 요소에 대해 WinJS.Binding.processAll을 호출합니다.


var contentGrid = document.getElementById("contentGrid");
WinJS.Binding.processAll(contentGrid, photoObject);

이전 예제와 마찬가지로 선언적 바인딩을 수행하는 경우 앱의 코드에서 항상 WinJS.Binding.optimizeBindingReferences 속성을 true로 설정해야 합니다. 그렇지 않으면 앱의 바인딩에서 메모리 누수가 발생할 수 있습니다.


WinJS.Binding.optimizeBindingReferences = true;

데이터 바인딩을 사용하여 이미지 및 이미지 정보를 표시하겠습니다.

JJ856913.wedge(ko-kr,WIN.10).gif이미지를 데이터 바인딩하려면

  1. 솔루션 탐색기에서 home.html를 두 번 클릭하여 엽니다.
  2. 이미지와 관련 정보를 표시하는 요소를 데이터 바인딩합니다.
    1. imageName 요소의 innerHTML 속성을 데이터 원본의 displayName 속성으로 바인딩합니다.
      
      <div id="imageName" class="pageSubheader" 
          data-win-bind="innerHTML: displayName">Image name</div>
      
      
    2. displayImage 요소의 src 속성을 데이터 원본의 src 속성으로 바인딩합니다.
      
      <img id="displayImage" src="#" data-win-bind="src: src" />
      
      
    3. fileName 요소의 innerHTML 속성을 데이터 원본의 name 속성으로 바인딩합니다.
      
      <div id="fileName" data-win-bind="innerHTML: name">File name</div>
      
      
    4. path 요소의 innerHTML 속성을 데이터 원본의 path 속성으로 바인딩합니다.
      
      <div id="path" data-win-bind="innerHTML: path">Path</div>
      
      
    5. dateCreated 요소의 innerHTML 속성을 데이터 원본의 dateCreated 속성으로 바인딩합니다.
      
      <div id="dateCreated" 
          data-win-bind="innerHTML: dateCreated">Date created</div>
      
      

    다음은 home.html 파일의 기본 섹션에 대해 업데이트된 HTML입니다.

    
            <section aria-label="Main content" role="main">
                <div id="contentGrid">
                    <button id="getPhotoButton">Get photo</button>
                    <div id="imageName" class="pageSubheader" 
                        data-win-bind="innerHTML: displayName">Image name</div>
    
                    <div id="imageGrid">
                        <img id="displayImage" src="#" data-win-bind="src: src" />
                        <div id="imageInfoContainer">
                            <label for="fileName">File name:</label>
                            <div id="fileName" data-win-bind="innerHTML: name">File name</div>
                            <label for="path">Path:</label>
                            <div id="path" data-win-bind="innerHTML: path">Path</div>
                            <label for="dateCreated">Date created:</label>
                            <div id="dateCreated" 
                                data-win-bind="innerHTML: dateCreated">Date created</div>
                        </div>
                    </div>
                </div>
            </section>
    
    
  3. 솔루션 탐색기에서 home.js를 두 번 클릭하여 엽니다.
  4. loadImage 메서드의 기존 코드 뒤에서 contentGrid 요소를 검색합니다. loadImage가 끝나면 WinJS.Binding.processAll 메서드를 호출하고 contentGridphotoObject를 전달합니다.
    
            loadImage: function (file) {
    
                if (file) {
                    photoObject.displayName = file.displayName;
                    photoObject.name = file.name;
                    photoObject.path = file.path;
                    photoObject.dateCreated = file.dateCreated;
    
                    var imageBlob = URL.createObjectURL(file, { oneTimeOnly: true });
                    photoObject.src = imageBlob;
    
                    var contentGrid = document.getElementById("contentGrid");
                    WinJS.Binding.processAll(contentGrid, photoObject);
    
                }
            },
    
    
  5. 앱을 실행합니다. "Get photo(사진 가져오기)" 단추를 클릭하고 이미지를 선택합니다.

    사진이 선택되어 있고 텍스트 블록이 데이터에 바인딩된 앱의 모양은 다음과 같습니다.

    PhotoAppSample의 이미지 표시

3단계: 상태 저장 및 로드

이 자습서 시리즈의 2부 앱 수명 주기 및 상태 관리에서는 앱 상태를 저장하고 복원하는 방법에 대해 알아보았습니다. 새 사진 앱에서도 상태를 저장해야 합니다. 현재 표시된 이미지 파일만 저장하고 복원하면 됩니다.

그러나 파일에 경로를 저장한 다음 해당 경로를 사용하여 파일을 다시 열 수는 없습니다. 사용자가 FileOpenPicker가 포함된 파일을 열 경우 해당 파일에 대한 앱 권한을 암시적으로 부여 받습니다. 나중에 경로만 사용하여 파일을 검색하려고 하면 사용 권한이 거부됩니다.

대신 파일에 대한 액세스 권한을 유지하여 나중에 사용할 수 있도록, StorageApplicationPermissions 클래스는 파일 및 사용자가 파일 선택기로 이 파일을 열었을 때 부여된 사용 권한을 저장할 수 있는 목록 두 개를 제공합니다.

  • MostRecentlyUsedList - 최근에 액세스한 25개 파일을 저장합니다.
  • FutureAccessList - 이후 액세스를 위해 최대 1000개의 파일을 저장하는 일반 저장소입니다.
여기서는 페이지 상태를 복원하는 데 사용할 수 있도록 사용자가 마지막으로 선택한 파일에만 액세스하면 됩니다. 따라서 MostRecentlyUsedList가 적절합니다.

사용자가 파일을 선택하면 이를 MostRecentlyUsedList에 추가합니다. 이 목록에 파일을 추가하면 MostRecentlyUsedList는 나중에 해당 파일을 검색하는 데 사용할 수 있는 토큰을 반환합니다. 이 토큰을 저장하고, 페이지 상태를 복원할 때 현재 이미지 파일을 검색하는 데 사용합니다.

JJ856913.wedge(ko-kr,WIN.10).gif상태를 저장하려면

  1. 솔루션 탐색기에서 home.js를 두 번 클릭하여 엽니다.
  2. loadImage 메서드의 끝에 선택한 파일을 mostRecentlyUsedList에 추가하는 코드를 추가합니다. 이 메서드에서 반환된 토큰을 sessionState 개체에 저장합니다.
    
    // Add picked file to MostRecentlyUsedList.
    WinJS.Application.sessionState.mruToken =
        Windows.Storage.AccessCache.StorageApplicationPermissions
            .mostRecentlyUsedList.add(file);
    
    

    다음은 전체 loadImage 메서드입니다.

    
            loadImage: function (file) {
    
                if (file) {
                    photoObject.displayName = file.displayName;
                    photoObject.name = file.name;
                    photoObject.path = file.path;
                    photoObject.dateCreated = file.dateCreated;
    
                    var imageBlob = URL.createObjectURL(file, { oneTimeOnly: true });
                    photoObject.src = imageBlob;
    
                    var contentGrid = document.getElementById("contentGrid");
                    WinJS.Binding.processAll(contentGrid, photoObject);
    
                    // Add picked file to MostRecentlyUsedList.
                    WinJS.Application.sessionState.mruToken =
                        Windows.Storage.AccessCache.StorageApplicationPermissions
                            .mostRecentlyUsedList.add(file);
    
                }
            },
    
    

JJ856913.wedge(ko-kr,WIN.10).gif상태를 로드하려면

  1. 솔루션 탐색기에서 default.js를 두 번 클릭하여 엽니다.
  2. 활성화된 이벤트 처리기에서 홈페이지가 액세스할 수 있도록 이전 실행 상태를 WinJS.Application.sessionState 개체에 저장하는 코드를 추가합니다. 이 코드를 첫 번째 if 문 안에 추가합니다.
    
    // Save the previous execution state. 
    WinJS.Application.sessionState.previousExecutionState =
        args.detail.previousExecutionState;
    
    

    다음은 활성화된 전체 이벤트 처리기입니다.

    
        app.addEventListener("activated", function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
    
                // Save the previous execution state. 
                WinJS.Application.sessionState.previousExecutionState =
                    args.detail.previousExecutionState;
    
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
    
                }
    
                if (app.sessionState.history) {
                    nav.history = app.sessionState.history;
                }
                args.setPromise(WinJS.UI.processAll().then(function () {
                    if (nav.location) {
                        nav.history.current.initialPlaceholder = true;
                        return nav.navigate(nav.location, nav.state);
                    } else {
                        return nav.navigate(Application.navigator.home);
                    }
                }));
            }
        });
    
    
  3. 솔루션 탐색기에서 home.js를 두 번 클릭하여 엽니다.
  4. ready 함수에 앱이 이전에 종료되었는지 여부를 테스트하는 코드를 추가합니다. 종료된 경우 mostRecentlyUsedList.getFileAsync 메서드를 호출하여 파일을 검색합니다. 이 메서드는 파일에 대해 Promise를 반환합니다. Promise 개체의 done 메서드에 loadImagedisplayError 메서드를 전달합니다.
    
    if (
        WinJS.Application.sessionState.previousExecutionState
        === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
        var mruToken = WinJS.Application.sessionState.mruToken;
        if (mruToken) {
            Windows.Storage.AccessCache.StorageApplicationPermissions.
                mostRecentlyUsedList.getFileAsync(mruToken)
                    .done(this.loadImage, this.displayError);
        }
    
    }
    
    

    다음은 업데이트된 ready 메서드입니다.

    
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                document.getElementById("getPhotoButton")
                    .addEventListener("click", this.getPhotoButtonClickHandler, false);           
    
                if (
                    WinJS.Application.sessionState.previousExecutionState
                    === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                    var mruToken = WinJS.Application.sessionState.mruToken;
                    if (mruToken) {
                        Windows.Storage.AccessCache.StorageApplicationPermissions.
                            mostRecentlyUsedList.getFileAsync(mruToken)
                                .done(this.loadImage, this.displayError);
                    }
    
                }
    
            },
    
    
  5. F5 키를 눌러 앱을 빌드 및 실행합니다. "Get photo(사진 가져오기)" 단추를 클릭하여 FileOpenPicker를 시작하고 파일을 선택합니다. 이제 앱을 일시 중단, 종료 및 복원하면 이미지가 다시 로드됩니다.
    참고  앱 일시 중단, 종료 및 복원 방법에 대해서는 2부: 앱 수명 주기 및 상태 관리를 참조하세요.
     

요약

축하합니다. 다섯 번째 자습서를 마쳤습니다! 지금까지 Windows 스토어 앱에서 파일 선택기와 데이터 바인딩을 사용하는 방법에 대해 알아보았습니다.

샘플 다운로드

난관에 봉착했나요? 또는 작업의 확인이 필요하세요? 이 경우 JavaScript 시작 샘플을 다운로드(영문)하세요.

관련 항목

JavaScript 시작: 자습서 시리즈의 전체 코드
앱 기능 선언
파일 선택기에 대한 지침
빠른 시작: 데이터 및 스타일 바인딩

 

 

표시:
© 2016 Microsoft