Главная » Статьи » Visual Studio 2012 » Создание с помощью JavaScript

Часть 5(1). Доступ к файлам и средства выбора файлов

В части 2 этой серии учебников Управление жизненным циклом и состоянием приложения вы узнали о данных приложения и данных сеанса, а также о способах сохранения этих данных. Ваше приложение может по умолчанию получать доступ к определенным расположениям файловой системы, например к местам хранения данных приложения, к установочному каталогу приложения и к элементам, создаваемым им в папке Downloads.

В то же время пользовательские данные, такие как изображения, видео и файлы документов, не зависят от вашего приложения и обычно хранятся в других расположениях файловой системы, например в папках пользовательских библиотек. Для доступа к этим расположениям ваше приложение должно объявить возможности, которые позволят обращаться к данным программным путем, или задействовать средство выбора файлов, чтобы пользователь мог открыть файл вручную. Здесь мы используем средство выбора файлов для доступа к пользовательской библиотеке изображений, поэтому нам не придется объявлять какие-либо возможности. (Дополнительные сведения о возможностях см. в разделе Объявление возможностей приложения.)

В этом учебнике вы добавите функцию в фотоприложение, созданное в разделе Часть 4. Макет и представления. Прежде всего вам нужно обработать событие нажатия кнопки "Get photo" (Получить фотографию), при котором будет открываться средство выбора файлов и пользователь сможет выбрать изображение из библиотеки изображений. Затем мы выполним привязку элементов управления пользовательского интерфейса к свойствам файлов, чтобы показывать сведения об изображении. Наконец, мы вспомним процедуру сохранения состояния приложения, описанную в части 2. Здесь используется MostRecentlyUsedList для обеспечения доступа к изображению, выбранному пользователем.

В этом учебнике рассматриваются следующие вопросы.

  • Использование средства FileOpenPicker, которое позволяет пользователю получить файл.
  • Привязка элементов управления пользовательского интерфейса к данным.
  • Использование MostRecentlyUsedList для доступа к ранее открытому файлу.
.

Совет  

Если вы хотите пропустить учебник и перейти прямо к коду, см. раздел Начало работы с JavaScript: полный код для серии учебников.

Перед началом работы...

Шаг 1: использование средства выбора файлов для получения файла изображения

Используя средство выбора файлов, ваше приложение может получить доступ к файлам и папкам в любом расположении системы пользователя. При вызове средства выбора файлов пользователь может выполнить обзор системы и выбрать файлы (или папки) для доступа либо сохранения. После выбора файлов или папок пользователем ваше приложение получает эти выбранные элементы как объекты StorageFile и StorageFolder. Далее ваше приложение может работать с выбранными файлами или папками с использованием указанных объектов.

Прежде всего вам следует обработать событие GetPhotoButton_Click, чтобы получить изображение, которое нужно показать.

Здесь мы начнем с кода из раздела Часть 4. Макет и представления.

JJ856913.wedge(ru-ru,WIN.10).gifДобавление средства выбора файлов

  1. Запустите Microsoft Visual Studio и откройте свой проект PhotoAppSample.
  2. Дважды щелкните home.js в Solution Explorer (Обозреватель решений), чтобы открыть его.
  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, loadImage и displayError. Код для этих элементов вы найдете на следующих шагах.
     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. Невозможно открывать пользовательский интерфейс средства выбора файлов в прикрепленном представлении. Поэтому используйте в обработчике событий свойство Windows.UI.ViewManagement.ApplicationView.value, чтобы узнать, не находится ли приложение в прикрепленном представлении, и только после этого пробуйте открыть средство выбора файлов.

      Если приложение находится в прикрепленном представлении, вызовите метод WinJS.UI.ViewManagement.ApplicationView.tryUnsnap и отключите прикрепление.

       getPhotoButtonClickHandler: function (eventInfo) {
      
       if (Windows.UI.ViewManagement.ApplicationView.value !=
       Windows.UI.ViewManagement.ApplicationViewState.snapped ||
       Windows.UI.ViewManagement.ApplicationView.tryUnsnap() === true) {
      
       }
       }, 
      
      
    2. Затем создайте объект FileOpenPicker. Задайте в объекте средства выбора файлов свойства, важные для пользователей и вашего приложения. (Рекомендации по настройке средства выбора файлов см. в разделе Руководство по средствам выбора файлов.)

      Поскольку пользователь выбирает изображение, задайте для SuggestedStartLocation значение библиотеки изображений, а для ViewModethumbnail. Необходимо также добавить фильтры типов файлов, чтобы в средстве выбора отображались только те типы файлов, которые указаны для файлов изображений.

       getPhotoButtonClickHandler: function (eventInfo) {
      
       if (Windows.UI.ViewManagement.ApplicationView.value !=
       Windows.UI.ViewManagement.ApplicationViewState.snapped ||
       Windows.UI.ViewManagement.ApplicationView.tryUnsnap() === true) {
      
       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");
       }
       }, 
      
      
    3. Чтобы отобразить средство выбора файлов, вызовите метод pickSingleFileAsync.

      Примечание  Чтобы разрешить пользователю выбирать несколько файлов, вызовите pickMultipleFilesAsync.

      Этот метод асинхронный, поэтому он возвращает Promise для StorageFile, выбираемого пользователем, а не возвращает непосредственно файл. Как описано в разделе Часть 1. Создание приложения "Hello, world!", чтобы получить значение от Promise, следует передать обработчик событий в метод then или done.

      Чаще всего для объекта Promise используется метод then, в котором задействуется до трех параметров: функция, вызываемая при успешном завершении Promise, функция, вызываемая при завершении Promise с ошибкой, и функция для предоставления информации о ходе выполнения задачи. Можно также использовать метод done, в котором задействованы эти же параметры. Разница между ними следующая: при наличии ошибки обработки функция then возвращает Promise в состоянии ошибки, но не вызывает исключение, тогда как метод done вызывает исключение, если отсутствует функция ошибки.

      Воспользуемся методом done и передадим ему функцию в случае успешного завершения отложенного результата (loadImage) и функцию в случае обнаружения ошибки (displayError). Добавьте эту строку кода в обработчик событий.

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

      Здесь полный обработчик событий.

       getPhotoButtonClickHandler: function (eventInfo) {
      
       if (Windows.UI.ViewManagement.ApplicationView.value !=
       Windows.UI.ViewManagement.ApplicationViewState.snapped ||
       Windows.UI.ViewManagement.ApplicationView.tryUnsnap() === true) {
      
       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 зарегистрируйте getPhotoButtonClickHandler в getPhotoButton.
     ready: function (element, options) {
     // TODO: Initialize the page here.
     document.getElementById("getPhotoButton")
     .addEventListener("click", this.getPhotoButtonClickHandler, false);
    
     }, 
    
    
  8. Вызов метода loadImage происходит, когда объект Promise, возвращаемый pickSingleFileAsync, завершается успешно. Задействован один параметр: объект StorageFile с именем file.
    1. Если пользователь нажимает кнопку Отмена в открытом средстве выбора файлов, средство выбора файлов все же вернет объект Promise, который сообщит об успешном завершении, но при этом передаст значение NULL для параметра file. Добавьте оператор if, чтобы проверить, был ли файл выбран на самом деле.

       loadImage: function (file) {
      
       if (file) {
      
      
       }
       }, 
      
      
    2. Параметр file представляет собой объект StorageFile. Этот объект имеет свойства для получения сведений displayName, name, path и dateCreated о файле, который он представляет. Сохраните эти сведения в созданной ранее переменной 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. Чтобы предотвратить утечки памяти, передайте в метод URL.createObjectURL объект, содержащий свойство с именем oneTimeOnly, для которого задано значение true. Используйте этот Blob, чтобы задать свойство src нашего photoObject.
       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. Вызов этого метода происходит в том случае, когда объект Promise, возвращаемый методом pickSingleFileAsync, завершается ошибкой.
     displayError: function (error) {
     document.getElementById("imageName").innerHTML = "Unable to load image.";
     } 
    
    

Шаг 2. Показ изображения

На этом этапе при нажатии кнопки "Get photo" (Получить фотографию) происходит получение изображения, но оно не отображается. Мы можем получить элементы для показа изображения и информации о нем для задания вручную, но давайте вместо этого используем для задания этих значений функцию привязки данных библиотеки Windows для JavaScript.

Привязка данных подключает объект-источник к объекту пользовательского интерфейса — цели.

На предыдущих этапах мы создали объект для сохранения информации о фотографии. Он является нашим объектом-источником.

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


Наши целевые объекты пользовательского интерфейса являются элементами файла 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>

Чтобы создать привязку данных, добавим атрибут data-win-bind в целевой элемент HTML. Этот атрибут использует в качестве своего значения имя целевого свойства, которое необходимо задать, и имя исходного свойства, являющегося источником данных:

targetPropertyName: sourcePropertyName

Можно выполнить привязку данных одновременно для нескольких свойств. Просто перечислите все пары цель/источник, разделяя их точкой с запятой:

targetPropertyName1: sourcePropertyName1; targetPropertyName2: sourcePropertyName2

В этом примере привязывается свойство innerHTML элемента div к свойству displayName объекта-источника.

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

Чтобы инициировать привязку данных, следует вызвать WinJS.Binding.processAll и передать в него целевой элемент или родительский элемент целевого элемента, а также объект-источник. В данном примере происходит вызов WinJS.Binding.processAll для элемента contentGrid, который содержит все элементы для привязки данных.

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

При выполнении декларативной привязки (как в предыдущем примере) обязательно задавайте в коде приложения значение WinJS.Binding.optimizeBindingReferences для свойства true. Если этого не сделать, такие привязки в вашем приложении могут вызвать утечку памяти.

WinJS.Binding.optimizeBindingReferences = true;

Воспользуемся привязкой данных для показа изображения и сопутствующей информации.

JJ856913.wedge(ru-ru,WIN.10).gif



Источник: http://msdn.microsoft.com/ru-ru/library/windows/apps/
Категория: Создание с помощью JavaScript | Добавил: expert1 (19.04.2013)
Просмотров: 1548 | Теги: Web, metro-приложения, Windows | Рейтинг: 0.0/0
Всего комментариев: 0