Статьи

31 день Windows 8 для HTML5 | День № 7: Поделиться контрактом

Эта статья является 7-м днем ​​в серии под названием « 31 день Windows 8» . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти все ресурсы, инструменты и исходный код на нашем веб-сайте .

advertisementsample14222


За последние два дня мы погрузились в эту новую функцию Windows, слабо называемую контрактами. Мы ввели это понятие контрактов, изучая, как включить в наши приложения что-то под названием « Настройки» . Затем мы рассмотрели вопрос о расширении day5-амулеты сторонаприсутствия наших приложений для пользователей с помощью поиска . Сегодня мы собираемся сделать следующий шаг и исследовать одну из особенностей, которая по-настоящему взволновала нас с Джеффом, Шаринг.

Я просто выйду и скажу, что обмен — это действительно классная функция. По своему основному принципу предпосылка заключается в том, чтобы взять что-то интересное для пользователя и поделиться им. Как и другие контракты, основа обмена ничем не отличается. Наше приложение подключается к «интерфейсу», а Windows позаботится обо всем остальном. Но эта особенность отличается.

По большей части люди являются социальными существами. Мы общаемся, рассказываем интересные истории и любим быть любимыми. Windows 8 чувствует себя живым, приветствуя пользователей и их приложения для взаимодействия с другими приложениями или другими людьми.

Контракт о разделе является основой этого опыта. У современных разработчиков приложений есть огромная экосистема, к которой можно подключиться. Электронная почта, Bit.ly, Facebook, Twitter, [вставьте свой любимый это здесь], и это бесконечно и постоянно растет. Как разработчик, пытаться идти в ногу с этим может быть сумасшедшим. Что если бы был лучший способ. Можете ли вы угадать, да, Поделиться.

Когда вы устанавливаете приложения на свой компьютер с Windows 8, что-то начинает происходить. Ваши приложения могут стать более функциональными. Когда приложения реализуют контракт на совместное использование, другие приложения начинают становиться более живыми с возможностями. Давайте возьмем что-то вроде браузера. Я предполагаю, что любой, кто читает это, нашел веб-страницу, которой он хотел бы поделиться с кем-то. Это может быть Twitter, электронная почта или даже что-то вроде локального приложения, которое хранит закладки. Ни одно приложение не может пытаться идти в ногу с этой постоянно меняющейся экосистемой. Скорее, если мы все реализуем договор о совместном использовании для типов данных, которые каждый из нас может потреблять, то внезапно основные функции в наших приложениях начинают расти без нашей работы. Например, когда пользователь решает установить Twitter, потому что это то, что ему нравится,и Twitter реализует договор об обмене, после чего он автоматически появляется в списке вещей, которые разрешают делиться.

Это очень мощная функция, которая подстраивается под ее пользователей. Если Twitter не существует, но Facebook есть, скорее всего, у них не установлено приложение Twitter, и он не забивает их список приложений для обмена. Более того, вам никогда даже не приходилось писать что-либо из этого, а просто программировать контракт на акцию.

Определяемый обмен

Совместное использование происходит двумя способами: тот, кто делится (исходное приложение), и тот, кто получает (целевое приложение). Это происходит через брокера.

Изображение через: http://msdn.microsoft.com/en-us/library/windows/apps/hh758314.aspx

Итак, что вы можете поделиться? Существует 7 различных типов контента, которым вы можете поделиться с брокером:

  • Неформатированный простой текст
  • Ссылка на сайт
  • Форматированный контент / HTML
  • файл
  • Одиночное изображение
  • Несколько файлов и изображений
  • Пользовательский формат данных

Данные передаются через объект, называемый DataPackage .

Sharing

Давайте начнем с обмена (данные выходят из нашего приложения). Сегодня я хочу, чтобы мы начали с другого шаблона, который называется приложение навигации . Это приложение очень похоже на пустой шаблон приложения, за исключением добавления некоторых элементов в модель навигации. Лучший способ подумать об этой модели навигации — это просто модель одностраничного веб-сайта для Интернета. По умолчанию страница default.html может действовать как контейнер для остальной части сайта. Причиной здесь является создание более сложного «приложения», через которое мы будем работать. Совместное использование является контекстно-зависимым, поэтому, если пользователь перешел на страницу B стихов на страницу B, то, что он может или не может поделиться, может отличаться. Я подробно расскажу о навигации по приложению в следующей статье.

С нашим шаблоном на месте, давайте просто запустить. После того, как ваше приложение запустится, активируйте меню Charms и выберите «Поделиться». Windows скажет вам, что ваше приложение не может поделиться. Конечно, нет, мы ничего не сделали. Чтобы подключиться к Share Charm, нам нужно подключиться к событию из объекта DataTransfer .

var dataTransferManager =
    Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", dataRequested);

Теперь, когда пользователь находится в вашем приложении и активирует общий чарт, брокер в Windows отключит ваш обработчик. Когда ваша функция вызывается, она передает объект DataRequest для заполнения. Поскольку мы начинаем с простого, собирались заполнить три свойства; название, описание и текст.

function dataRequested(e) {
    var request = e.request;

    request.data.properties.title =
        "31 Days of Windows 8";

    request.data.properties.description =
        "Have you heard of 31 Days of Windows 8?";

    request.data.setText(
        "Check out 31 Days of Windows 8 at http://31DaysOfWindows8.com"); }

Теперь в обработчике dataRequested, приведенном выше, я просто жестко кодирую данные, которые мы предоставляем через общий доступ . В реальном приложении мы, вероятно, выберем что-то, относящееся к тому, что пользователь делал в приложении, или, может быть, что-то, что они выбрали.  Как только ваша функция вернется, брокер и целевой ресурс будут заполнять эти данные или элемент в соответствующих местах. Это включает в себя сам шарм акций, а затем выбранную цель обмена. Как видно из изображения ниже, заголовок и описание свойств фактически используются в верхней части Шарма общего доступа.

образ

Затем мы представляем список приложений (так называемые цели общего доступа), которые примут, что данные пытаются поделиться, в нашем случае — просто текст. Давайте выберем почтовое приложение из нашего списка.

образ

Теперь вы можете видеть, что почтовое приложение было открыто от имени Windows. Кроме того, почтовое приложение получило доступ к тому DataPackage, который мы создали ранее.

Теперь для любой страницы нашего приложения, которой мы хотели бы поделиться, мы повторили бы этот процесс. (или так я думал)

Чего ждать?

Так что последнее утверждение не совсем верно. Я всегда думал, что очень важно делить свои камни преткновения вместе со всем остальным. Итак, здесь идет мой полуночный шарить.

Я начал с использования home.html для осуществления обмена. Все было готово и все работало нормально. Итак, пришло время перейти к добавлению обмена на другую страницу. Как и следовало ожидать, я добавил notHome.html в проект, и, как и любой хороший дизайн, вернулся к home.html и добавил эту якорную ссылку для перенаправления.

Так как мы начали с проекта шаблона навигации, я решил стать хорошим гражданином и подключил обработчик щелчка к нашему тегу привязки, чтобы я мог использовать структуру навигации.

WinJS.Utilities.query("a").listen("click",
    function (eventInfo) {
        eventInfo.preventDefault();
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href);
    }, false);

Достаточно просто и все работает как ожидалось. Далее, добавьте общий доступ к этой странице, верно? После добавления обмена я увидел следующее:

SNAGHTML18e2b84

Уже подключен, а? Да, навигационные рамки . Важно понимать модель навигации и ее влияние на ваши страницы и \ или API, которые вы можете использовать. В этом сценарии мы просто меняем страницу на внешнюю страницу, и WinRT это не понравилось.

Решение? Ну, я думаю, это действительно зависит. Это может зависеть от вашей модели страницы. Это может зависеть от того, как вы структурировали свою разметку и как вы ее выбрали, это может зависеть от того, что вы хотите поделиться.

В этом случае предположим, что вы хотите поделиться чем-то другим на двух разных страницах. Так как мы находимся в этой одностраничной модели навигации, то наше решение (или «а») состоит в том, чтобы просто удалить наши обработчики событий, когда страница выгружает их, воссоздайте их на следующей странице.

var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager;

WinJS.UI.Pages.define("/pages/notHome/notHome.html", {
    ready: function (element, options) {
        var dataTransferManager = dtm.getForCurrentView();
        dataTransferManager.addEventListener("datarequested", dataRequested);
    },
    unload: function () {
        var dataTransferManager = dtm.getForCurrentView();
        dataTransferManager.removeEventListener("datarequested", dataRequested);
    }
});

Достаточно просто, но опять же, это зависит только от вашей ситуации. Разгрузка таких элементов, как ваши обработчики событий, — это то, что вы должны внимательно следить за любым создаваемым приложением.

— случайный совет —

В следующий раз вы запустите свое приложение и внесете небольшие изменения, например, обновите CSS. Нажмите «CTRL + Shift + R», чтобы обновить его на месте. Это хороший способ работать в вашем исходном коде, и вам не нужно перезапускать отладчики и еще много чего. Думайте об этом как f5 в браузере.

Поделиться целью

С другой стороны, противоположность совместного использования — это цель общего доступа, то есть вещь, которой делятся. Как и в других контрактах, мы должны заявить, что наше приложение может получать общий контент от брокера. Это делается через нашего приятеля appxmanifest.

образ

После объявления о возможности получения контента нам нужно настроить именно то, на что мы собираемся подписаться, в частности, форматы данных и, возможно, типы файлов, если мы на самом деле обмениваемся файлами. Это, конечно, говорит брокеру, когда выставлять ваше приложение в качестве возможного целевого ресурса. Для нашего сегодняшнего разговора мы собираемся принять URI. Конечно, вы можете принять более одного типа.

образ

На данный момент давайте запустим наше приложение. Запустите браузер, выберите, а затем выберите «Обмениваться». Вы увидите, что мы сейчас перечислены в качестве возможного выбора. Если мы выберем его, вы увидите наш красивый экран-заставку, прежде чем перейти на пустую страницу. Помните этот маленький самородок на прозрачных PNG и правильно настроил цвет фона?

образобраз

Та пустая страница, которую мы видим, на самом деле ничего не значит. Нам нужно настроить это. В той декларации о доле акций мы только что объявили. Внизу вы найдете раздел « Настройки приложения» . Там вы увидите стартовую страницу. Это, конечно, определяет, какую страницу мы хотим запустить, когда вызывается Share. Конечно, это означает, что мы должны создать его, поэтому я создал не только его, но и связанные файлы JavaScript и CSS.

  • /pages/shareTarget/shareTarget.html
  • /pages/shareTarget/shareTarget.js
  • /pages/shareTarget/shareTarget.css

Теперь, если вы перезапустите, вы должны перейти на свою страницу. С нашими трубами течет какой-то крутой соус, давайте подключимся к правильным событиям и возьмем в руки этот объект DataPackage. Мы еще не говорили о PLM или управлении жизненным циклом процесса, я упоминал об этом. Это именно то место, где мы собираемся подключить нашу акцию Target.

Когда наше приложение будет запущено, мы будем проверять ActivationKind на предмет поиска shareTarget. Вы можете разместить эту логику на своей странице default.js, но я решил поместить ее в мой файл shareTarget.js, просто чтобы сгруппировать логические объекты. (Лучшая практика, время покажет) Давайте соберем нашу основную структуру.

(function () {
    'use strict';

    var _app = WinJS.Application,
        _activation = Windows.ApplicationModel.Activation;

    var _shareOperation,
        _dt = Windows.ApplicationModel.DataTransfer;

    _app.addEventListener("activated", function (args) {

        if (args.detail.kind === _activation.ActivationKind.shareTarget) {
            args.setPromise(WinJS.UI.processAll());

        }
    });

    WinJS.Application.start();

})();

Самым большим отличием от того, что мы видели раньше, является использование ActivationKind. Теперь, когда наша структура создана, во время нашей активации нам нужно запустить операцию общего доступа и запустить асинхронное событие для обработки общего ресурса. Мы делаем это асинхронно так, чтобы не блокировать процесс активации.

_shareOperation = args.detail.shareOperation;

WinJS.Application.addEventListener("shareready", shareReady, false);
WinJS.Application.queueEvent({ type: "shareready" });

Теперь давайте реализуем нашу функцию shareready . Эта функция послужит рабочей лошадкой для заполнения нашего экрана информацией, с которой мы столкнулись.

function shareReady(args) {
    if (_shareOperation.data.contains(_dt.StandardDataFormats.uri)) {
        _shareOperation.data.getUriAsync().done(function (uri) {
            document.querySelector("#results").innerText =
                "Uri: " + uri.absoluteUri;
        });
    }
}

Теперь наш сценарий прост. Просто отображали некоторую основную информацию на экране. Как только мы закончим делать то, что хотим, нам нужно будет вызвать reportCompleted на shareOperation , сообщив брокеру, что мы закончили. Существует несколько различных методов в shareOperation, с которыми мы должны взаимодействовать, особенно в случае длительных сценариев и ошибок. Хотя я не буду вдаваться в них здесь, я включил ссылки ниже.

Больше, чем просто дисплей

На данный момент мы успешно поделились с нами. Остальное действительно зависит от вас. Это «маленькое» окно общего доступа может стать важной функцией в вашем приложении. Если вы такая компания, как Twitter или Facebook, это может послужить окном для публикации обновлений в социальной сети.

Также не забывайте, как мы отбросили это понятие контрактов, настроек. Опять же, если вы такая компания, как Twitter , то сохранение этого профиля пользователя, так что, когда они делятся, им не нужно вводить свои дескрипторы, укорачиватели URL-адресов и т. Д., Пользователи получат очень плавный опыт. Еще лучше, бродить по нему, чтобы, когда они попадают на другую машину, он уже настроен. Мы поговорим о роуминге и хранении завтра.

Что дальше?

Сегодня мы рассмотрели еще один контракт под названием «Обмен». Контракт об обмене предоставляет вашему приложению новый удивительный способ показать себя своим пользователям. Теперь вам просто нужно определить, что именно вы хотите поделиться или принять. Если вы предстанете перед своими пользователями, люди будут вовлечены в ваше приложение. Чем больше способов они используют, тем лучше.

Как я уже упоминал ранее в этой статье, существует несколько различных типов данных, которыми вы можете поделиться, и хотя я не стал подробно останавливаться на них здесь, предпосылка та же. Это просто разные данные, которые устанавливаются и впоследствии извлекаются. Ниже я перечислил несколько замечательных ссылок с dev.windows.com, которые подробно их освещают.

Вы можете скачать весь пример решения и инструменты здесь:

downloadHTMLdownloadTheTools

Завтра мы собираемся сосредоточиться на хранении данных, как локально на устройстве пользователя, так и на перемещении этих данных в облаке. Увидимся позже!