При написании приложений Магазина Windows на языке JavaScript, как только вы захотите создать что-либо, связанное с асинхронным API, вы столкнетесь с конструкциями, называемыми обещаниями (объектами отложенного результата). Пройдет немного времени, и написание цепочек обещаний для последовательных асинхронных операций станет для вас привычным делом.

При разработке приложений вам наверняка повстречаются и другие, не совсем очевидные способы использования обещаний. Хорошим примером этого является оптимизация функций отрисовки элементов для элемента управления ListView, представленная в примере оптимизации производительности HTML ListView. Мы рассмотрим эту тему подробнее в следующей статье. Или ознакомьтесь с крайне интересными сведениями, представленными Джошем Вильямсом (Josh Williams) в выступлении Подробный обзор WinJS на конференции //build 2012 (материал немного изменен):

list.reduce(function callback (prev, item, i) {
    var result = doOperationAsync(item);
    return WinJS.Promise.join({ prev: prev, result: result}).then(function (v) {
        console.log(i + ", item: " + item+ ", " + v.result);
    });
})

Этот фрагмент кода объединяет обещания для параллельных асинхронных операций и выдает результаты последовательно в соответствии с их порядком в списке. Если, глядя на этот код, вы можете сразу же описать его назначение, можете пропустить данную статью. Если нет, давайте подробнее рассмотрим работу обещаний и их выражение в WinJS — библиотеке Windows для JavaScript, чтобы понимать схему их действия.

Что собой представляет обещание? Отношения в случае обещания

Давайте начнем с основополагающего факта: обещание — это просто конструкция кода или, если желаете, соглашение о вызовах. Таким образом, обещания не имеют обязательной связи с асинхронными операциями — просто их крайне удобно использовать в этом отношении. Обещание — это просто объект, представляющий значение, которое может быть доступно в некоторый момент в будущем либо прямо сейчас. Получается, что сущность обещания соответствует смыслу данного термина, когда он употребляется для описания отношений между людьми. Если я говорю: "Я обещаю принести вам десять бубликов", — это не значит, что эти бублики есть у меня прямо сейчас, однако я определенно подразумеваю, что я получу их в некоторый момент в будущем. И когда это произойдет, я их принесу.

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

Между инициатором и потребителем лежит два этапа этого отношения — создание и исполнение. Все это приведено на следующей схеме.

Именно благодаря наличию двух этапов этого отношения, обещания отлично подходят для асинхронной доставки, как видно из приведенного на схеме потока. Основная идея заключается в том, что после получения подтверждения запроса, то есть обещания, потребитель может продолжать работу (асинхронный режим) вместо простого ожидания (синхронный режим). Это значит, что во время ожидания исполнения обещания потребитель может выполнять другие операции, например отвечать на другие запросы, в чем и заключается основная задача асинхронных API. А что если товары уже доступны? Тогда обещание исполняется моментально, как в случае соглашения о синхронных вызовах.

Конечно, это отношение имеет и другие особенности, которые нам следует учитывать. В своей жизни вы наверняка давали и принимали обещания. Хотя многие из них были выполнены, в реальности многие обещания нарушаются, например по пути к вам домой курьер из магазина может попасть аварию. Нарушенные обещания являются неотъемлемой частью жизни, поэтому нам следует принять это как должное и в личной жизни, и в асинхронном программировании.

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

Добавив эти требования в схему, мы получаем полноценное отношение:

Теперь давайте рассмотрим, как эти отношения проявляются в коде.

Конструкция обещания и цепочки обещаний

Для обещаний доступно множество разных предложений или спецификаций. Одним из них, используемым в Windows и WinJS, является Common JS/Promises A, где обещание описывается как нечто, возвращаемое инициатором для представления значения, предоставляемого в будущем, и является объектом с функцией then. Потребители подписываются на выполнение обещания, вызывая метод then. (В Windows обещания также поддерживают аналогичную функцию done, используемую, как мы скоро увидим, в цепочках обещаний.)

В эту функцию в качестве аргументов потребитель передает до трех дополнительных функций в следующем порядке:

1. Обработчик выполнения. Инициатор вызывает эту функцию, когда обещанное значение доступно, и если оно доступно прямо сейчас, обработчик выполнения сразу (синхронно) вызывается из метода then.
2. Дополнительный обработчик ошибок, вызываемый в случае сбоя при получении обещанного значения. Если для любого отдельного обещания был вызван обработчик ошибок, обработчик выполнения для него не вызывается никогда.
3. Дополнительный обработчик хода выполнения, который периодически вызывается с промежуточными результатами, если это поддерживает выполняемая операция. (В WinRT это означает, что API имеет возвращаемое значение IAsync[Action | Operation]WithProgress, а интерфейсы с IAsync[Action | Operation] — нет.)

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

Потребитель, находящийся на другой стороне отношения, может подписаться на любое число обработчиков для одного обещания, вызывая then несколько раз. Он также может использовать обещание совместно с другими потребителями, которые также имеют возможность вызывать метод then любое число раз. Все это полностью поддерживается.

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

Другое требование, следующее из спецификации Promises A, заключается в возвращении обещания самим методом then. Такое второе обещание выполняется, когда возвращает данные обработчик выполнения, назначенный первой функции promise.then, и это возвращаемое значение доставляется в качестве результата второго обещания. Рассмотрите следующий фрагмент кода:

var promise1 = someOperationAsync();
var promise2 = promise1.then(function completedHandler1 (result1) { return 7103; } );
promise2.then(function completedHandler2 (result2) { });

Здесь цепочка выполнения начинается с запуска someOperationAsync, возвращающего promise1. Во время выполнения этой операции мы вызываем функцию promise1.then, которая немедленно возвращает promise2. Следует понимать, что completedHandler1 вызывается только в тех случаях, когда результат асинхронной операции уже доступен. Предположим, что мы все еще ждем, поэтому выполняем вызов promise2.then, и снова completedHandler2 при этом не вызывается.

Немного позднее someOperationAsync завершается со значением, например 14618. Обещание promise1 теперь выполнено, поэтому оно вызывает completedHandler1 с этим значением, и результат result1 будет равен 14618. Теперь выполняется completedHandler1, возвращая значение 7103. При этом выполняется обещание promise2, поэтому оно вызывает completedHandler2 с результатом result2, равным 7103.

А что если обработчик выполнения возвращает еще одно обещание? Этот случай обрабатывается немного иначе. Предположим, что completedHandler1 из предыдущего кода возвращает следующее обещание:

var promise2 = promise1.then(function completedHandler1 (result1) {
    var promise2a = anotherOperationAsync();
    return promise2a;
});

В этом случае result2 в completedHandler2 будет не самим promise2a, а значением fulfillment для promise2a. Таким образом, поскольку обработчик выполнения возвращает обещание, promise2, как возвращенное из promise1.then, будет выполнено с результатами promise2a.

Именно это делает возможным объединение последовательных асинхронных операций в цепочки, где результаты каждой операции цепочки передаются в следующую операцию. Без промежуточных переменных или именованных обработчиков цепочки обещаний часто имеют следующую структуру:

operation1().then(function (result1) {
    return operation2(result1)
}).then(function (result2) {
    return operation3(result2);
}).then(function (result3) {
    return operation4(result3);
}).then(function (result4) {
    return operation5(result4)
}).then(function (result5) {
    //And so on
});

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

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

Кстати, одна из возможностей обещаний в WinJS заключается в том, что ошибки, возникающие в любой части цепочки, автоматически распространяются до ее конца. Это означает, что вместо использования обработчиков ошибок на каждом уровне, вы можете просто прикрепить отдельный обработчик ошибок к последнему вызову then. Здесь однако следует предупредить, что по различным причинам такие ошибки поглощаются в случае, если последним звеном цепочки является вызов then. Именно поэтому WinJS предоставляет для обещаний еще и метод done. Он принимает те же аргументы, что и метод then, однако указывает, что цепочка завершена (возвращает undefined вместо очередного обещания). Любой обработчик ошибок, прикрепленный к методу done, вызывается для всех ошибок во всей цепочке. Кроме того, если метод done не имеет обработчик ошибок, он выдает исключение на уровне приложений, где оно может быть обработано window.onerror событий WinJS.Application.onerror. Одним словом, в идеальном случае все цепочки должны заканчиваться методом done, чтобы обеспечить предоставление и правильную обработку исключений.

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

Создание обещаний: класс WinJS.Promise

Хотя вы всегда можете создать собственные классы обещаний на базе спецификации Promises A, это требует значительных усилий, которые можно сэкономить, используя библиотеку. Поэтому WinJS предоставляет надежный, протестированный и гибкий класс обещаний WinJS.Promise. Он позволяет легко создавать обещания для разных значений и операций, не вникая в тонкости управления отношениями инициатора и потребителя или работы функции then.

Когда потребуется, вы можете (и должны) использовать новый класс WinJS.Promise (либо подходящую вспомогательную функцию, как указано в следующем разделе) в целях создания обещаний как для асинхронных операций, так и для существующих (синхронных) значений. Помните о том, что обещание — это просто конструкция кода: нет никакого требования, предписывающего, чтобы обещание охватывало асинхронную операцию или что бы то ни было асинхронное. Аналогичным образом, сам факт заключения фрагмента кода в обещание еще не гарантирует асинхронности его выполнения. Эту работу вам придется сделать самостоятельно.

В качестве простого примера прямого использования класса WinJS.Promise давайте предположим, что требуется выполнить длинное вычисление — простое суммирование набора значений от единицы до некоторого максимума, делая это в асинхронном режиме. Мы могли бы разработать для такой подпрограммы свой механизм обратного вызова, но если мы заключим ее в обещание, мы обеспечим возможность связывания в цепочку или соединения с другими обещаниями из других API. (По этому принципу функция WinJS.xhr заключает асинхронный запрос XmlHttpRequest JavaScript в обещание, чтобы вам не пришлось разбираться в структуре событий такого запроса.)

Разумеется, мы можем использовать для длинного вычисления рабочий процесс JavaScript, но, чтобы проиллюстрировать этот пример, мы продолжим работать в потоке пользовательского интерфейса и воспользуемся setImmediate для разделения этой операции на этапы. Вот как это можно реализовать в структуре обещаний, используя WinJS.Promise:

function calculateIntegerSum(max, step) {
    //The WinJS.Promise constructor's argument is an initializer function that receives 
    //dispatchers for completed, error, and progress cases.
    return new WinJS.Promise(function (completeDispatch, errorDispatch, progressDispatch) {
        var sum = 0;

        function iterate(args) {
            for (var i = args.start; i < args.end; i++) {
                sum += i;
            };

            if (i >= max) {
                //Complete--dispatch results to completed handlers
                completeDispatch(sum);
            } else {
                //Dispatch intermediate results to progress handlers
                progressDispatch(sum);
                setImmediate(iterate, { start: args.end, end: Math.min(args.end + step, max) });
            }
        }
            
        setImmediate(iterate, { start: 0, end: Math.min(step, max) });
    });
}

При вызове нового класса WinJS.Promise единственным аргументом для его конструктора является функция initializer (в данном случае анонимная). Функция initializer инкапсулирует выполняемую операцию, однако очевидно, что сама эта функция в потоке пользовательского интерфейса выполняется синхронно. Если бы сейчас мы выполнили длинное вычисление, не используя setImmediate, то заблокировали бы поток пользовательского интерфейса на все время вычисления. Еще раз отметим — помещение кода внутрь обещания еще не делает этот код асинхронным, это необходимо настроить в функции initializer.

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

Я называю эти функции "диспетчерами", поскольку они отличаются от обработчиков, которые потребители подписывают на метод then обещания (или метод done, но я больше не буду напоминать об этом). Если разобраться, WinJS управляет массивами этих обработчиков, что позволяет любому числу потребителей подписаться на любое число обработчиков. Когда вы вызываете один из таких диспетчеров, WinJS выполняет итерации по своему внутреннему списку и вызывает все эти обработчики от вашего имени. Кроме того, WinJS.Promise проверяет, что метод then возвращает другое обещание, что необходимо для образования цепочки.

По сути, WinJS.Promise предоставляет все детали, окружающие и дополняющие обещание. Благодаря этому вы можете сконцентрироваться на основной операции обещания, которая помещается в функцию initializer.

Вспомогательные средства для создания обещаний

Основной вспомогательной функцией для создания обещания является статический метод WinJS.Promise.as, охватывающий любое значение в обещании Применение такой оболочки для уже существующего значения не привносит ничего нового и вызывает любой обработчик выполнения, переданный в then. Это позволяет обрабатывать произвольные известные значения как обещания, чтобы вы могли смешивать и сопрягать их с другими обещаниями (посредством присоединения или объединения в цепочку). Использование as для существующего обещания просто возвращает само это обещание.

Другой статической вспомогательной функцией является WinJS.Promise.timeout, которая предоставляет удобную оболочку для setTimeout и setImmediate. Вы также можете создать обещание, которое отменяет второе обещание, если это второе обещание не выполнено в течение заданного числа миллисекунд.

Обратите внимание, что обещания timeout для setTimeout и setImmediate сами исполняются с undefined. Часто спрашивают: "Как можно использовать их для предоставления других результатов после истечения времени ожидания?" В ответе используется тот факт, что функция then возвращает другое обещание, выполняемое с возвращаемым значением обработчика выполнения. Приведем в качестве примера следующую строку кода:

var p = WinJS.Promise.timeout(1000).then(function () { return 12345; });

Она создает обещание p, которое будет выполнено со значением 12345 через одну секунду. Другими словами, WinJS.Promise.timeout(…).then(function () { return <значение>} ) является шаблоном для предоставления <значения> после истечения времени ожидания. А если само <значение> является другим обещанием, оно служит для предоставления значения выполнения из этого обещания в определенный момент после истечения времени ожидания.

Ошибки при отмене и создании обещаний

В предыдущем коде вы могли заметить два недостатка. Первый заключается в отсутствии способа отмены операции после ее начала. Второй — в неудовлетворительной обработке ошибок.

В обоих случаях особенность состоит в том, что функции создания обещаний, такие как calculateIntegerSum, должны всегда возвращать обещание. Если операция не может быть выполнена или никогда не запускается, такое обещание находится в состоянии ошибки. Это значит, что обещание не имеет и никогда не будет иметь результат, который оно сможет передать в любой из обработчиков выполнения: оно просто постоянно вызывает свои обработчики ошибок. В самом деле, если потребитель вызывает then для обещания, которое уже находится в состоянии ошибки, это обещание немедленно (синхронно) вызывает обработчик ошибок, назначенный then.

WinJS.Promise переходит в состояние ошибки по двум причинам: потребитель вызывает свой метод cancel, либо код в функции initializer вызывает диспетчер ошибок. Когда такое происходит, обработчики ошибок получают значение ошибки, которое было перехвачено или распространено в обещании. Если вы создаете операцию в WinJS.Promise, то можете также использовать экземпляр WinJS.ErrorFromName. Это просто объект JavaScript, содержащий свойство name, идентифицирующее ошибку, и свойство message, содержащее дополнительную информацию. Например, при отмене обещания обработчики ошибок получают объект ошибки, в котором как для name, так и для message установлено значение "Canceled".

Но что если вы не можете даже запустить операцию? Например, если вы вызываете функцию calculateIntegerSum с неправильными аргументами (например, 0, 0), она даже не должна пытаться начать считать, а должна возвратить обещание в состоянии ошибки. Именно для этого и служит статический метод WinJS.Promise.wrapError. Он принимает экземпляр WinJS.ErrorFromName и возвращает обещание в состоянии ошибки, которое нам требуется в данном случае вместо нового экземпляра WinJS.Promise.

Другая особенность заключается в том, что хотя вызов метода cancel обещания переводит само обещание в состояние ошибки, возникает вопрос: как остановить асинхронную операцию, которая уже выполняется? В предыдущей реализации calculateIntegerSum она просто продолжала вызывать setImmediate до выполнения операции, независимо от состояния созданного нами обещания. Фактически, если операция вызывает диспетчер выполнения после отмены обещания, это обещание просто игнорирует такое завершение.

Поэтому необходим способ, с помощью которого обещание сможет сообщить операции, что ее выполнение больше не требуется. Для этого конструктор WinJS.Promise использует второй аргумент функции, вызываемый при отмене обещания. В нашем примере при вызове этой функции потребовалось бы предотвратить следующий вызов setImmediate, что привело бы к остановке вычисления. Вот как это выглядит с правильной обработкой ошибок:

function calculateIntegerSum(max, step) {
    //Return a promise in the error state for bad arguments
    if (max < 1 || step < 1) {
        var err = new WinJS.ErrorFromName("calculateIntegerSum", "max and step must be 1 or greater");
        return WinJS.Promise.wrapError(err);
    }

    var _cancel = false;

    //The WinJS.Promise constructor's argument is an initializer function that receives 
    //dispatchers for completed, error, and progress cases.
    return new WinJS.Promise(function (completeDispatch, errorDispatch, progressDispatch) {
        var sum = 0;

        function iterate(args) {
            for (var i = args.start; i < args.end; i++) {
                sum += i;
            };

            //If for some reason there was an error, create the error with WinJS.ErrorFromName
            //and pass to errorDispatch
            if (false /* replace with any necessary error check -- we don’t have any here */) {
                errorDispatch(new WinJS.ErrorFromName("calculateIntegerSum (scenario 7)", "error occurred"));
            }

            if (i >= max) {
                //Complete--dispatch results to completed handlers
                completeDispatch(sum); 
            } else {
                //Dispatch intermediate results to progress handlers
                progressDispatch(sum);

                //Interrupt the operation if canceled
                if (!_cancel) {
                    setImmediate(iterate, { start: args.end, end: Math.min(args.end + step, max) });
                }
            }
        }
            
        setImmediate(iterate, { start: 0, end: Math.min(step, max) });
    },
    //Cancellation function for the WinJS.Promise constructor
    function () {
        _cancel = true;
    });
}

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

Таким образом довольно просто заключить рабочий процесс JavaScript в обещание, чтобы он выглядел и работал как другие асинхронные операции в WinRT. Возможно, вы уже знаете, что рабочие процессы предоставляют свои результаты посредством вызова postMessage, вызывающего событие message для объекта рабочего процесса в приложении. Следующий код связывает это событие с обещанием, которое выполняется при доставке любых результатов в этом сообщении:

// This is the function variable we're wiring up.
var workerCompleteDispatch = null;

var promiseJS = new WinJS.Promise(function (completeDispatch, errorDispatch, progressDispatch) {
    workerCompleteDispatch = completeDispatch;
});

// Worker is created here and stored in the 'worker' variable

// Listen for worker events
worker.onmessage = function (e) {
    if (workerCompleteDispatch != null) {
        workerCompleteDispatch(e.data.results); /* event args depends on the worker */
    }
}

promiseJS.done(function (result) {
    // Output for JS worker
});

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

Объединение параллельных обещаний

Поскольку обещания часто используются для представления асинхронных операций, вы определенно можете обеспечить параллельное выполнение нескольких операций. В этих случаях вам может потребоваться узнать, когда выполняется одно из обещаний в группе либо выполняются все обещания в группе. Для этого служат статические функции WinJS.Promise.any и WinJS.Promise.join.

Обе функции принимают массив значений или объект со свойствами значений. Эти значения могут быть обещаниями, а все отличные от обещаний значения описываются с помощью WinJS.Promise.as, в результате весь массив или объект состоит из обещаний.

Ниже представлены характеристики функции any:

• Функция any создает отдельное обещание, которое выполняется, когда выполняется или завершается с ошибкой одно из других обещаний (логическое ИЛИ). Фактически, функция any подключает обработчики выполнения ко всем этим обещаниям, и как только вызывается один из обработчиков выполнения, она вызывает все обработчики выполнения, принятые обещанием any.
• После выполнения обещания any (то есть после выполнения первого обещания в списке) остальные операции в списке продолжают выполняться, вызывая все обработчики выполнения, ошибок или хода выполнения, назначенные таким обещаниям в индивидуальном порядке.
• Если вы отменяете обещание из any, отменяются все обещания в этом списке.

Характеристики функции join:

• Функция join создает отдельное обещание, которое выполняется, когда выполняются или завершаются с ошибкой все другие обещания (логическое И). Фактически функция join подключает обработчики выполнения и ошибок ко всем этим обещаниям и ожидает вызова всех этих обработчиков, прежде чем вызывает все обработчики выполнения, получаемые ей самой.
• Обещание join также сообщает о ходе выполнения в любые предоставленные вами обработчики хода выполнения. Промежуточным результатом в этом случае является массив результатов из отдельных обещаний, выполненных на данный момент.
• Если вы отменяете обещание из join, отменяются все остальные ожидающие обещания.

Кроме any и join, имеется еще два статических метода WinJS.Promise, о которых следует знать, так как они могут оказаться полезными:

• is определяет, является ли произвольное значение обещанием, возвращая логическое значение. Если не вдаваться в подробности, он просто проверяет, что это объект с функцией "then"; наличие функции "done" он не проверяет.
• theneach применяет обработчики выполнения, ошибок и хода выполнения к группе обещаний (с использованием then), при этом возвращает результаты в виде другой группы значений внутри обещания. Любой из этих обработчиков может иметь значение null.

Параллельные обещания с последовательными результатами

Благодаря WinJS.Promise.joinи WinJS.Promise.any мы получаем возможность работать с параллельными обещаниями, то есть с параллельными асинхронными операциями. Еще раз отмечу, что обещание, возвращаемое функцией join, выполняется, когда выполнены все обещания в массиве. Однако такие обещания обычно выполняются в случайном порядке. А что если бы у вас был набор операций, выполняющихся подобным образом, но вам бы хотелось обрабатывать их результаты строго упорядоченным образом, а именно в порядке следования обещаний в массиве?

Для этого вам необходимо присоединить каждое последующее обещание к функции join из всех предыдущих. А ведь код, с которого мы начали настоящую статью, выполняет именно такую задачу. Еще раз приведем этот код, но переписанный таким образом, чтобы сделать обещания явными. (Предположим, что list — это массив значений определенного рода, использующихся в качестве аргументов для гипотетического асинхронного вызова с созданием обещаний doOperationAsync):

list.reduce(function callback (prev, item, i) {
    var opPromise = doOperationAsync(item);
    var join = WinJS.Promise.join({ prev: prev, result: opPromise});

    return join.then(function completed (v) {
        console.log(i + ", item: " + item+ ", " + v.result);
    });
})

Чтобы понять этот код, нам сначала нужно разобраться, как работает метод reduce этого массива. Для каждого элемента в массиве reduce вызывает аргумент функции, который здесь назван callback и принимает четыре аргумента (из которых только три используются в коде):

• prev — значение, возвращенное из предыдущего вызова callback (для первого элемента оно равно null).
• item — текущее значение из массива.
• i — индекс элемента в списке.
• source — исходный массив.

Для первого элемента в списке мы получаем обещание, которое назову opPromise₁. Поскольку prev равно null, мы присоединяем [WinJS.Promise.as(null), opPromise₁]. Однако обратите внимание на то, что мы не возвращаем саму функцию join. Вместо этого мы подключаем к этому объединению обработчик выполнения (который я назвал completed) и возвращаем обещание из его then.

Помните, что обещание, возвращенное из then, будет выполнено при возвращении обработчика выполнения. Это значит, что данные, возвращаемые из callback, являются обещанием, которое не исполняется до тех пор, пока обработчик completed первого элемента не обработает результаты из opPromise₁. И если вы посмотрите на результат объединения, оно выполняется с объектом, содержащим результаты из обещаний в исходном списке. Это значит, что значение выполнения v будет содержать как свойство prev, так и свойство result, при этом второе является результатом обещания opPromise₁.

Вместе со следующим элементом в list callback получает свойство prev, содержащее обещание из предыдущего join.then. После этого мы создаем новое объединение opPromise₁.then и opPromise₂. В результате такое присоединение не выполняется, пока не будет выполнено обещание opPromise₂ и обработчик выполнения для opPromise₁ не возвратит значение. Вуаля! Обработчик completed₂, который мы подключаем к этому join, не вызывается до тех пор, пока не будет возвращен completed₁.

Аналогичные зависимости продолжают создаваться для каждого элемента в списке — обещание из join.then для элемента n не выполняется, пока не будет возвращен completed_n. Таким образом гарантируется вызов обработчиков выполнения в том же порядке, что и в list.

Заключение

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

Библиотека Windows для JavaScript (WinJS) предоставляет надежную реализацию обещаний, которую вы можете использовать для описания своих операций любого вида. Она также предоставляет вспомогательные средства для распространенных сценариев, таких как объединение обещаний для реализации параллельных операций. Благодаря этому WinJS делает работу с асинхронными операциями более удобной и эффективной.

Крэйг Брокшмидт (Kraig Brockschmidt)
Руководитель программы, рабочая группа по экосистеме Windows
Автор книги Programming Windows 8 Apps in HTML, CSS, and JavaScript (Программирование приложений для Windows 8 на HTML, CSS и JavaScript)

Для многих приложений Магазина Windows, написанных на JavaScript и работающих с коллекциями, хорошее взаимодействие с элементом управления WinJS ListView просто необходимо для оптимизации производительности. И это неудивительно: когда вы занимаетесь отображением тысяч элементов и их управлением, ценится любое усилие по их оптимизации. Самое важное — как каждый из этих элементов отрисовывается, т.е. как и когда каждый элемент из ListView формируется в DOM и становится видимой частью приложения. Время (компонент "когда") в этом уравнении становится критически важным фактором, если пользователь быстро перемещается по списку и ожидает, что список будет "успевать" за его перемещениями.

Отрисовка элементов в ListView осуществляется с помощью декларативного шаблона, определенного в HTML, или настраиваемой функции отрисовки JavaScript, вызываемой для каждого элемента в списке. Хотя использование декларативного шаблона — самый простой путь, он не обеспечивает достаточно широких возможностей управления этим процессом. Функция отрисовки наоборот позволяет поэлементно настроить отрисовку и оптимизировать процесс, как показано в примере оптимизации производительности HTML ListView. Используются следующие возможности оптимизации:

• Асинхронная доставка данных элемента и отображаемого элемента с поддержкой базовых функций отрисовки.
• Раздельное создание формы элементы, необходимой для общей разметки ListView, и его внутренних компонентов. Это поддерживается с помощью средства отрисовки заполнителя.
• Повторное использование ранее созданного элемента (и дочерних элементов) с заменой данных, что позволяет пропустить большинство действий по созданию элемента. Предоставляется с помощью средства отрисовки заполнителя с повторным использованием.
• Задержка выполнения ресурсоемких визуальных операций, таких как загрузка изображений и анимация, до отображения элемента (если для ListView не используется быстрое панорамирование) с помощью средства многоэтапной отрисовки.
• Пакетное выполнение одинаковых визуальных операций, чтобы свести к минимуму повторную отрисовку DOM, с помощью средства многоэтапной пакетной отрисовки.

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

Для всех средств отрисовки всегда важно свести к минимуму базовое время отрисовки элемента (не учитывая отложенные операции). Поскольку конечная производительность ListView сильно зависит от того, насколько его обновления согласованы с интервалами обновления экрана, несколько лишних миллисекунд в отрисовке элемента могут значительно увеличить общее время визуализации ListView в течение следующего интервала обновления. Из-за этого могут пропадать кадры, а изображение будет казаться нестабильным. Другими словами, если вы хотите оптимизировать код JavaScript, делайте это в средствах отрисовки элементов.

Базовые средства отрисовки

Начнем с краткого обзора функции отрисовки элемента, которую я буду называть средством отрисовки. Средство отрисовки — это функция, которую вы назначаете свойству itemTemplate элемента управления ListView вместо имени шаблона. Она при необходимости вызывается для элементов, которые ListView хочет включить в DOM. (Кстати, базовую документацию по средствам отрисовки можно найти на странице itemTemplate. Но описанные возможности оптимизации демонстрируются именно в примере.)

Можно ожидать, что функция отрисовки просто получает элемент из источника данных ListView. Затем она создает необходимые HTML-элементы и возвращает корневой элемент, который ListView может добавить в DOM. В целом, именно эти и происходит, но стоит отметить два момента. Во-первых, сами данные элемента могут загружаться асинхронно, поэтому имеет смысл привязать создание элемента к доступности данных. Кроме того, в процесс отрисовки элемента могут входить другие асинхронные операции, например загрузка изображений из удаленных URI или чтение данных из других файлов, определенных в данных элемента. Как мы увидим, разные уровни оптимизации позволяют выполнять произвольный объем асинхронных операций между запросом компонентов элемента и их фактической доставкой.

Опять же, можно ожидать использования обещаний! ListView не просто напрямую передает данные элемента средству отрисовки, а предоставляет обещание об этих данных. А функция не возвращает корневой компонент элемента напрямую, а возвращает обещание об этом компоненте. Это позволяет ListView объединить множество обещаний отрисовки элемента и ждать (асинхронно) визуализации целой страницы. Так ListView будет интеллектуально управлять формированием разных страниц, сначала создавая страницу видимых элементов, а затем — предыдущую и следующую страницы, на которые вероятнее всего перейдут пользователи. Кроме того, наличие всех этих обещаний означает, что ListView может легко отменить отрисовку незаконченных элементов, если пользователь перейдет к другим элементам. Это позволит избежать создания ненужных элементов.

Использование таких обещаний можно увидеть в функции simpleRenderer в примере:

function simpleRenderer(itemPromise) {
    return itemPromise.then(function (item) {
        var element = document.createElement("div");
        element.className = "itemTempl";
        element.innerHTML = "<img src='" + item.data.thumbnail +
            "' alt='Databound image' /><div class='content'>" + item.data.title + "</div>";
        return element;
    });
}

Этот код сначала присоединяет обработчик выполнения к itemPromise. Этот обработчик вызывается, когда данные элемента доступны, и создает в ответ компоненты. Но снова обратите внимание, что мы не возвращаем компонент напрямую, а возвращаем обещание, которое будет выполнено с этим компонентом. Следовательно возвращаемое itemPromise.then() значение — это обещание, выполняемое с компонентом, когда и если он потребуется ListView.

Возвращая обещания, мы можем при необходимости выполнять другие асинхронные операции. В этом случае средство отрисовки может объединять промежуточные обещания, возвращая обещания от последней функции then в цепочке. Например:

function someRenderer(itemPromise) {
    return itemPromise.then(function (item) {
        return doSomeWorkAsync(item.data);
    }).then(function (results) {
        return doMoreWorkAsync(results1);
    }).then(function (results2) {
        var element = document.createElement("div");
        // use results2 to configure the element
        return element;
    });
}

Обратите внимание, что в этом случае мы не используем функцию done в конце цепочки, поскольку мы возвращаем обещание от последнего вызова функции then. ListView отвечает за обработку всех ошибок, которые могут возникнуть.

Средства отрисовки заполнителя

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

Средство отрисовки заполнителя возвращает объект с двумя свойствами, а не обещание:

• element — компонент верхнего уровня в структуре отображаемого элемента. Его достаточно для определения размера и формы, и он не зависит от данных элемента.
• renderComplete — обещание, которое выполняется после формирования оставшихся частей компонента, т. е. когда возвращается обещание из цепочки, начинающейся с itemPromise.then, как и ранее.

ListView реализован достаточно интеллектуально, поэтому он проверяет, возвращает ли средство отрисовки обещание (базовая ситуация, как описано ранее) или объект со свойствами element и renderComplete (более сложные ситуации). Таким образом, эквивалентное средство отрисовки заполнителя (в примере) для предыдущей функции simpleRenderer выглядит следующим образом:

function placeholderRenderer(itemPromise) {
    // create a basic template for the item that doesn't depend on the data
    var element = document.createElement("div");
    element.className = "itemTempl";
    element.innerHTML = "<div class='content'>...</div>";

    // return the element as the placeholder, and a callback to update it when data is available
    return {
        element: element,

        // specifies a promise that will be completed when rendering is complete
        // itemPromise will complete when the data is available
        renderComplete: itemPromise.then(function (item) {
            // mutate the element to include the data
            element.querySelector(".content").innerText = item.data.title;
            element.insertAdjacentHTML("afterBegin", "<img src='" +
                item.data.thumbnail + "' alt='Databound image' />");
        })
    };
}

Обратите внимание на то, что назначение element.innerHTML можно было бы переместить в renderComplete, поскольку класс itemTempl в файле css/scenario1.css примера напрямую определяет ширину и высоту элемента. Это назначение указано в свойстве element, потому что оно задает в заполнителе текст по умолчанию "…". Вы можете так же просто использовать компонент img, который ссылается на небольшой ресурс в пакете, общий для всех элементов (и поэтому быстро визуализируемый).

Средства отрисовки заполнителя с повторным использованием

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

ListView может предоставить повторно используемый компонент, если для его свойства loadingBehavior задано значение "randomaccess". Если указан параметр recycled, можно просто удалить данные этого компонента (и его дочерних компонентов), вернуть его как заполнитель, а затем вставить в него данные и создать дополнительные дочерние компоненты (при необходимости) в renderComplete. Если повторно используемый компонент не указан (как при первом создании ListView или если для параметра loadingBehavior задано значение "incremental"), компонент создается заново. Вот код из примера для этого варианта:

function recyclingPlaceholderRenderer(itemPromise, recycled) {
    var element, img, label;
    if (!recycled) {
        // create a basic template for the item that doesn't depend on the data
        element = document.createElement("div");
        element.className = "itemTempl";
        element.innerHTML = "<img alt='Databound image' style='visibility:hidden;'/>" +
            "<div class='content'>...</div>";
    }
    else {
        // clean up the recycled element so that we can reuse it 
        element = recycled;
        label = element.querySelector(".content");
        label.innerHTML = "...";
        img = element.querySelector("img");
        img.style.visibility = "hidden";
    }
    return {
        element: element,
        renderComplete: itemPromise.then(function (item) {
            // mutate the element to include the data
            if (!label) {
                label = element.querySelector(".content");
                img = element.querySelector("img");
            }
            label.innerText = item.data.title;
            img.src = item.data.thumbnail;
            img.style.visibility = "visible";
        })
    };
}

В renderComplete необходимо проверить наличие компонентов, которые не создаются для нового заполнителя, например label, и создать их при необходимости.

Если вы хотите очистить повторно используемые элементы с помощью более общего процесса, можно создать функцию для свойства resetItem элемента управления ListView. Эта функция будет содержать код, аналогичный приведенному выше. То же относится и к свойству resetGroupHeader, поскольку вы можете использовать функции шаблона для заголовков групп и элементов. Мы не обсуждали их подробно, поскольку заголовков групп не так много и обычно они не так сильно влияют на производительность. Но тем не менее такая возможность существует.

Средства многоэтапной отрисовки

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

ListView предоставляет необходимые обработчики как члены item, полученного от itemPromise: свойство ready (обещание) и два метода, loadImage и isOnScreen, также возвращающие обещания. Т. е.:

renderComplete: itemPromise.then(function (item) {
    // item.ready, item.loadImage, and item.isOnScreen available
})

Вот как они используются:

• ready — возвращайте это обещание из первого обработчика выполнения в цепочке. Это обещание выполняется, когда полная структура элемента отрисована и видима. Это значит, что другой метод then можно объединить с обработчиком выполнения, в котором выполняются другие операции, такие как загрузка изображений.
• loadImage — загружает изображение по URI и отображает его в указанном компоненте img, возвращая обещание, которое выполняется с тем же элементом. Обработчик выполнения присоединяется к этому обещанию, которое само возвращает обещание от isOnScreen. Обратите внимание, что loadImage создает компонент img, если он не указан, и предоставляет его обработчику выполнения.
• isOnScreen — возвращает обещание с логическим значением выполнения, указывающим, видим элемент или нет. В текущих реализациях это известное значение, поэтому обещание выполняется синхронно. Однако, заключив в обещание, его можно использовать в более длинной цепочке.

Все это видно в функции multistageRenderer в примере, где завершение загрузки изображения используется для начала анимации исчезания. Здесь я просто покажу, что возвращает обещание renderComplete:

renderComplete: itemPromise.then(function (item) {
    // mutate the element to update only the title
    if (!label) { label = element.querySelector(".content"); }
    label.innerText = item.data.title;

    // use the item.ready promise to delay the more expensive work
    return item.ready;
    // use the ability to chain promises, to enable work to be cancelled
}).then(function (item) {
    // use the image loader to queue the loading of the image
    if (!img) { img = element.querySelector("img"); }
    return item.loadImage(item.data.thumbnail, img).then(function () {
        // once loaded check if the item is visible
        return item.isOnScreen();
    });
}).then(function (onscreen) {
    if (!onscreen) {
        // if the item is not visible, don't animate its opacity
        img.style.opacity = 1;
    } else {
        // if the item is visible, animate the opacity of the image
        WinJS.UI.Animation.fadeIn(img);
    }
})

Хотя и происходит много всего, здесь используется всего лишь базовая цепочка обещаний. Первая асинхронная операция в средстве отрисовки обновляет простые части структуры компонентов элемента, такие как текст. Затем она возвращает обещание в item.ready. Когда это обещание выполняется или, говоря точнее, если оно выполняется, мы используем асинхронный метод loadImage элемента, чтобы инициировать загрузку изображения. Обработчик выполнения возвращает обещание item.isOnScreen. Это значит, что флаг видимости onscreen передается в конечный обработчик выполнения в цепочке. Если и когда обещание isOnScreen выполняется (элемент полностью видим), мы можем заняться соответствующими операциями, например анимацией.

Я подчеркиваю часть с "если", так как есть вероятность, что пользователь быстро перемещается по элементу управления ListView, когда все это происходит. Объединив все обещания в цепочку, мы позволяем ListView отменять асинхронные операции, если эти элементы выходят из поля зрения или за пределы страниц, хранящихся в буфере. Достаточно сказать, что производительность элемента управления ListView была тщательно протестирована!

Также важно напомнить еще раз, что во всех этих цепочках мы используем then, потому что функция отрисовки в свойстве renderComplete возвращает обещание. Эти функции отрисовки никогда не будут концом цепочки, поэтому done никогда не будет использоваться.

Пакетная обработка эскизов

Последняя возможность оптимизации — это воистину Священный Грааль для элемента управления ListView. В функции batchRenderer мы находим следующую структуру для renderComplete (большая часть кода опущена):

renderComplete: itemPromise.then(function (item) {
    // mutate the element to update only the title
    if (!label) { label = element.querySelector(".content"); }
    label.innerText = item.data.title;

    // use the item.ready promise to delay the more expensive work
    return item.ready;
    // use the ability to chain promises, to enable work to be cancelled
}).then(function (item) {
    // use the image loader to queue the loading of the image
    if (!img) { img = element.querySelector("img"); }
    return item.loadImage(item.data.thumbnail, img).then(function () {
        // once loaded check if the item is visible
        return item.isOnScreen();
    });
}).then(function (onscreen) {
    if (!onscreen) {
        // if the item is not visible, don't animate its opacity
        img.style.opacity = 1;
    } else {
        // if the item is visible, animate the opacity of the image
        WinJS.UI.Animation.fadeIn(img);
    }
})

Она практически совпадает со структурой для multistageRenderer, за исключением загадочного вызова функции thumbnailBatch между вызовом item.loadImage и проверкой свойства item.isOnScreen. Наличие thumbnailBatch в цепочке указывает на то, что возвращаемым значением должен быть обработчик выполнения, возвращающий еще одно обещание.

Запутались? Ничего страшного, мы во всем разберемся. Но сначала мы должны побольше узнать о том, чего пытаемся добиться.

Если бы в ListView был всего один элемент, различные способы оптимизации загрузки были бы незаметны. Но в ListView обычно содержится множество элементов, и функция отрисовки вызывается для каждого из них. В функции multistageRenderer из предыдущего раздела отрисовка каждого элемента инициирует асинхронную операцию item.loadImage для загрузки эскиза из произвольного URI. Каждая такая операция может занять определенное время. Поэтому для всего списка может одновременно выполняться много вызовов loadImage, причем отрисовка каждого элемента будет ожидать завершения обработки соответствующего эскиза. Пока все понятно.

Важная характеристика, которая совсем не видна в multistageRenderer, состоит в том, что компонент img для эскиза уже находится в DOM, а функция loadImage устанавливает атрибут src этого изображения после завершения загрузки. Это в свою очередь инициирует обновление модуля отрисовки после возврата из оставшейся цепочки обещаний, которая после этой точки выполняется синхронно.

Может случиться так, что множество эскизов вернутся в поток пользовательского интерфейса через короткое время. Это приведет к усложнению работы модуля отрисовки и низкой производительности визуализации. Чтобы избежать этого, компоненты img необходимо полностью создать до их помещения в DOM, а затем добавить в пакеты для обработки в одном цикле отрисовки.

В примере это реализуется с помощью обещаний — функции createBatch. createBatch вызывается один раз для всего приложения, а ее результат (другая функция) сохраняется в переменной thumbnailBatch:

var thumbnailBatch;
thumbnailBatch = createBatch();

Вызов этой функции thumbnailBatch, как я ее буду теперь называть, снова вставляется в цепочку обещаний функции отрисовки. Цель этой вставки с учетом природы кода пакетной обработки (как мы скоро увидим) — сгруппировать набор загруженных компонентов img, освободив их для дальнейшей обработки через подходящие интервалы. Если посмотреть на цепочку обещаний в функции отрисовки, вызов thumbnailBatch() должен вернуть функцию обработчика выполнения, возвращающую обещание. Значением выполнения этого обещания (если посмотреть на следующее звено в цепочке) должен быть компонент img, который можно добавить в DOM. Добавляя изображения в DOM после пакетной обработки, мы обрабатываем эту группу в одном цикле отрисовки.

В этом состоит важное отличие batchRenderer от функции multistageRenderer из предыдущего раздела: в последней из этих двух функций компонент img уже существует в DOM и передается в loadImage как второй параметр. Поэтому когда loadImage устанавливает атрибут src изображения, инициируется обновление отрисовки. А в функции batchRenderer элемент img создается отдельно в loadImage (где атрибут src также установлен), но элемента img еще нет в DOM. Он будет добавлен в DOM только после выполнения thumbnailBatch, что делает его частью группы на этом этапе разметки.

Теперь рассмотрим, как действует пакетная обработка. Далее представлена полная функция createBatch:

function createBatch(waitPeriod) {
    var batchTimeout = WinJS.Promise.as();
    var batchedItems = [];

    function completeBatch() {
        var callbacks = batchedItems;
        batchedItems = [];
        for (var i = 0; i < callbacks.length; i++) {
            callbacks[i]();
        }
    }

    return function () {
        batchTimeout.cancel();
        batchTimeout = WinJS.Promise.timeout(waitPeriod || 64).then(completeBatch);

        var delayedPromise = new WinJS.Promise(function (c) {
            batchedItems.push(c);
        });

        return function (v) {
            return delayedPromise.then(function () {
                return v;
            });
        };
    };
}

Опять функция createBatch вызывается всего один раз, а ее результат, функция thumbnailBatch, вызывается для каждого отрисованного элемента в списке. Обработчик выполнения, формируемый thumbnailBatch, вызывается после завершения каждой операции loadImage.

Такой обработчик выполнения можно было бы легко вставить в функцию отрисовки, но мы хотим скоординировать операции для разных элементов, а не для каждого из них. Для этого в начале функции createBatch создаются и инициализируются две переменные: batchedTimeout, инициализируемая как пустое обещание, и batchedItems, инициализируемая как изначально пустой массив функций. createBatch также объявляет функцию completeBatch, которая просто очищает batchedItems, вызывая каждую функцию в массиве:

function createBatch(waitPeriod) {
    var batchTimeout = WinJS.Promise.as();
    var batchedItems = [];

    function completeBatch() {
        var callbacks = batchedItems;
        batchedItems = [];
        for (var i = 0; i < callbacks.length; i++) {
            callbacks[i]();
        }
    }

    return function () {
        batchTimeout.cancel();
        batchTimeout = WinJS.Promise.timeout(waitPeriod || 64).then(completeBatch);

        var delayedPromise = new WinJS.Promise(function (c) {
            batchedItems.push(c);
        });

        return function (v) {
            return delayedPromise.then(function () {
                return v;
            });
        };
    };
}

Теперь посмотрим, что происходит в функции thumbnailBatch (возвращаемой createBatch), которая опять вызывается для каждого отображаемого элемента. Сначала мы отменяем любую существующую функцию batchedTimeout и сразу же повторно создаем ее:

batchTimeout.cancel();
        batchTimeout = WinJS.Promise.timeout(waitPeriod || 64).then(completeBatch);

Во второй строке показан шаблон будущей доставки или выполнения, описанный в записи "Все об обещаниях" <TODO: link>: функция completeBatch вызывается после задержки в waitPeriod мс (значение по умолчанию — 64 мс). Это значит, что если thumbnailBatch опять вызывается в течение waitPeriod с момента предыдущего вызова, batchTimeout сбрасывается и устанавливается другое значение waitPeriod. Поскольку функция thumbnailBatch вызывается только после завершения вызова item.loadImage, можно сказать, что все операции loadImage, завершающиеся в течение waitPeriod предыдущего вызова, будут включены в один пакет. Если задержка превышает waitPeriod, выполняется обработка пакета (изображения добавляются в DOM) и начинается следующий пакет.

После этого thumbnailBatch создает новое обещание, которое просто записывает функцию диспетчера выполнения в массив batchedItems:

var delayedPromise = new WinJS.Promise(function (c) {
         batchedItems.push(c);
     });

Помните, в записи "Все об обещания" <TODO: link> было сказано, что обещание — это просто конструкция кода. Это можно сказать и сейчас. Новое обещание не содержит асинхронных операций: мы просто добавляем функцию диспетчера выполнения, c, в batchedItems. Но, разумеется, мы ничего не делаем с диспетчером, пока batchedTimeout не будет выполнена асинхронно. Так что здесь есть асинхронная связь. Когда истекает период ожидания и мы очищаем пакет (в функции completeBatch), мы вызываем все указанные обработчики выполнения в методе delayedPromise.then.

Перейдем к последним строкам кода в createBatch — функции, возвращаемой thumbnailBatch. Эта функция — обработчик выполнения, вставляемый в цепочку обещаний функции отрисовки:

return function (v) {
           return delayedPromise.then(function () {
               return v;
           });
       };

Давайте добавим этот фрагмент кода напрямую в цепочку обещаний, чтобы увидеть полученные связи:

return item.loadImage(item.data.thumbnail);
          }).then(function (v) {
              return delayedPromise.then(function () {
                  return v;
              });
          ).then(function (newimg) {

Теперь мы видим, что аргумент v — это результат item.loadImage, т. е. компонент img, созданный для нас. Если бы мы не хотели выполнять пакетную обработку, мы могли бы просто добавить выражение return WinJS.Promise.as(v), и вся цепочка все равно бы работала: аргумент v передавался бы асинхронно и отображался как newimg на следующем этапе.

Вместо этого мы возвращаем обещание из delayedPromise.then, которое не будет выполнено (с аргументом v), пока не выполнено обещание batchedTimeout. В это время (если между завершением операций loadImage есть задержка не меньше waitPeriod) данные компоненты img передаются на следующий этап цепочки, где они добавляются в DOM.

Вот и все!

Заключение

У пяти разных функций отрисовки, продемонстрированных в примере оптимизации производительности HTML ListView, есть одна общая черта: они показывают, как асинхронная связь между ListView и функцией отрисовки, выраженная обещаниями, делает функцию отрисовки невероятно гибкой с точки зрения способа и времени создания элементов в списке. При написании собственных приложений стратегия оптимизации ListView сильно зависит от размера источника данных, сложности самих элементов, объема получаемых асинхронно данных для них (например, при загрузке удаленных изображений). Очевидно, для достижения необходимой производительности функции отрисовки элементов должны быть максимально простыми. Но в любом случае теперь у вас есть все инструменты, необходимые для обеспечения оптимальной производительности ListView (и вашего приложения).

Крэйг Брокшмидт (Kraig Brockschmidt)
Руководитель программы, рабочая группа по экосистеме Windows
Автор книги Programming Windows 8 Apps in HTML, CSS, and JavaScript (Программирование приложений для Windows 8 на HTML, CSS и JavaScript)

Игры составляют ключевой класс приложений в Магазине Windows. Если вы собираетесь создать игру для Магазина Windows, мы поможем вам на этом виртуальном мероприятии, посвященном созданию игр. В этом бесплатном мероприятии могут принять участие как начинающие разработчики игр, так и профессионалы.

Мы будем использовать GameMaker: Studio от компании YoYo Games, чтобы показать вам, как создавать и публиковать высококачественные игры, тратя на это меньше времени. В GameMaker:Studio есть встроенные варианты разработки и инструменты, используемые с помощью перетаскивания, благодаря которым можно быстро приступить к работе над игрой, даже если вы еще не придумали идею игры или не имеете опыта разработки игр. Однако более опытные разработчики игр могут использовать более развитые инструменты для создания уникального игрового пространства.

Это интернет-мероприятие начнется в субботу 15 июня в 10 утра по Тихоокеанскому летнему времени с открывающего сеанса и интерактивного чата. Вы узнаете о различных видах игр и о том, как добавлять графику, уровни и звук к базовым играм и использовать способы, позволяющие сделать вашу игру своеобразной и неповторимой. На протяжении недели будет предоставляться техническая поддержка в виде индивидуальной помощи через форумы GameMaker.

Независимо от того, являетесь ли вы студентом, начинающим разработчиком или опытным профессионалом, это мероприятие поможет вам приступить к созданию, загрузке и публикации игр в Магазине Windows. Узнайте подробности, зарегистрируйтесь для участия и ознакомьтесь с бесплатными инструментами и ресурсами на сайте http://msdnevents.com/gameon/.

-- Роберт Родригез-Лоусон (Robert Rodriguez-Lawson), ведущий руководитель по публикации контента, отдел контента для разработчиков для Windows

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

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

Теперь вы хотите упростить жизнь пользователям вашего приложения и сохранить их учетные данные в безопасном месте, чтобы им не приходилось выполнять вход каждый раз при использовании вашего приложения. Воспользуйтесь для этого хранилищем учетных данных. Несколько простых вызовов API-интерфейса Credential Locker позволяют сохранить имя пользователя и пароль и легко получить эти данные для выполнения входа в следующий раз, когда пользователь откроет ваше приложение.

Безопасное хранилище

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

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

Перемещение учетных данных

Ваши пользователи получают еще и дополнительное преимущество: когда вы сохранили для них имя пользователя и пароль в хранилище учетных данных, сохраненные учетные данные перемещаются вместе с их учетной записью Майкрософт на любой другой доверенный компьютер, используемый ими с этой учетной записью Майкрософт. Благодаря этому ваше безопасное приложение становится еще более удобным для пользователей, поскольку может обеспечить для них автоматический вход — без повторного ввода учетных данных — с любого доверенного компьютера, на котором они установили ваше приложение и который связан с их учетной записью Майкрософт.

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

Сохранение учетных данных пользователя

Сохранение учетных данных пользователя в хранилище учетных данных — быстрый процесс, состоящий из двух этапов. Сначала вы получаете ссылку на хранилище учетных данных, используя объект PasswordVault из пространства имен Windows.Security.Credentials. Затем вы создаете объект PasswordCredential, содержащий идентификатор для вашего приложения, имя пользователя и пароль, и передаете эту информацию методу PasswordVault.Add(), чтобы добавить эти учетные данные в хранилище.

C#

var vault = new Windows.Security.Credentials.PasswordVault();
vault.Add(new Windows.Security.Credentials.PasswordCredential(
    "My App", username, password));

JavaScript

var vault = new Windows.Security.Credentials.PasswordVault();
vault.add(new Windows.Security.Credentials.PasswordCredential(
    "My App", username, password));

Получение учетных данных пользователя

У вас есть несколько вариантов получения учетных данных пользователя из хранилища учетных данных, когда у вас есть ссылка на объект PasswordVault.

• Вы можете получить все учетные данные, предоставленные пользователем для вашего приложения в хранилище, с помощью метода PasswordVault.RetrieveAll().
• Если вы знаете имя пользователя для сохраненных учетных данных, то можете получить все учетные данные для этого имени пользователя с помощью метода PasswordVault.FindAllByUserName().
• Если вы знаете имя ресурса для сохраненных учетных данных, то можете получить все учетные данные для этого имени ресурса с помощью метода PasswordVault.FindAllByResource().
• Наконец, если вы знаете и имя пользователя, и имя ресурса для учетных данных, то можете получить нужные учетные данные с помощью метода PasswordVault.Retrieve().

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

C#

private string resourceName = "My App";
private string defaultUserName;

private void Login()
{
    var loginCredential = GetCredentialFromLocker();

    if (loginCredential != null)
    {
        // There is a credential stored in the locker.
        // Populate the Password property of the credential
        // for automatic login.
        loginCredential.RetrievePassword();
    }
    else
    {
        // There is no credential stored in the locker.
        // Display UI to get user credentials.
        loginCredential = GetLoginCredentialUI();
    }

    // Log the user in.
    ServerLogin(loginCredential.UserName, loginCredential.Password);
}


private Windows.Security.Credentials.PasswordCredential GetCredentialFromLocker()
{
    Windows.Security.Credentials.PasswordCredential credential = null;

    var vault = new Windows.Security.Credentials.PasswordVault();
    var credentialList = vault.FindAllByResource(resourceName);
    if (credentialList.Count > 0)
    {
        if (credentialList.Count == 1)
        {
            credential = credentialList[0];
        }
        else
        {
            // When there are multiple usernames,
            // retrieve the default username. If one doesn’t
            // exist, then display UI to have the user select
            // a default username.

            defaultUserName = GetDefaultUserNameUI();

            credential = vault.Retrieve(resourceName, defaultUserName);
        }
    }

    return credential;
}

var resourceName = "My App";
var defaultUserName;

function login() {
    var loginCredential = getCredentialFromLocker();

    if (loginCredential != null) {
        // There is a credential stored in the locker.
        // Populate the Password property of the credential
        // for automatic login.
        loginCredential.retrievePassword();
    } else {
        // There is no credential stored in the locker.
        // Display UI to get user credentials.
        loginCredential = getLoginCredentialUI();
    }

    // Log the user in.
    serverLogin(loginCredential.userName, loginCredential.password);
}


function GetCredentialFromLocker() {
    var credential = null;

    var vault = new Windows.Security.Credentials.PasswordVault();
    var credentialList = vault.findAllByResource(resourceName);
    if (credentialList.length > 0) {
        if (credentialList.length == 1) {
            credential = credentialList[0];
        } else {
            // When there are multiple usernames,
            // retrieve the default username. If one doesn’t
            // exist, display UI to have the user select
            // a default username.

            defaultUserName = getDefaultUserNameUI();
            credential = vault.retrieve(resourceName, defaultUserName);
        }
    }

    return credential;
}

Удаление учетных данных пользователя

Удаление учетных данных пользователя из хранилища учетных данных также является быстрым процессом, выполняемым в два этапа. Вы получаете ссылку на хранилище учетных данных с использованием объекта PasswordVault из пространства имен Windows.Security.Credentials. Затем вы передаете учетные данные, которые требуется удалить, методу PasswordVault.Remove().

C#

var vault = new Windows.Security.Credentials.PasswordVault();
vault.Remove(new Windows.Security.Credentials.PasswordCredential(
    "My App", username, password));

JavaScript

var vault = new Windows.Security.Credentials.PasswordVault();
vault.remove(new Windows.Security.Credentials.PasswordCredential(
    "My App", username, password));

Просто и безопасно

Как видите, хранилище учетных данных — удобный компонент, упрощающий проверку подлинности пользователей и хранение их учетных данных для последующего использования и обеспечивающий высокий уровень безопасности.

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

Дополнительную информацию можно найти в следующих статьях:

• Управление сведениями о пользователях (JavaScript)
• Управление сведениями о пользователях (приложения Магазина Windows на языках C#/VB/C++ и XAML)
• Пример хранилища учетных данных
• Windows.Security.Credentials

– Дуг Ротхаус (Doug Rothaus), старший разработчик контента, отдел контента для разработчиков для Windows

Выражаем отдельную благодарность Яшару Бахману (Yashar Bahman) за помощь при создании этой статьи.

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

Давайте подробнее рассмотрим, как ваше приложение может использовать службу определения местоположения для предоставления пользователям информации с учетом их местоположения по таким показателям, как IP-адрес, сеть Wi-Fi или данные GPS. После определения расположения вы можете использовать пакет SDK для приложения "Карты Bing", чтобы показать пользователю, где он находится.

Получение информации о расположении

Для получения информации о расположении используется пространство имен Windows.Devices.Geolocation. Что именно используется для определения расположения пользователя — GPS, сеть Wi-Fi или IP-адрес, зависит от двух основных факторов:

1. Требуемый уровень точности. Это оптимальный уровень точности, удовлетворяющий потребностям вашего приложения.
2. Доступность данных о расположении. Ведь датчиком GPS оснащены не все устройства. Кроме того, в момент запроса данных о местоположении подключение к сети или Wi-Fi может быть недоступно.

Требуемая точность

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

• GPS — GPS обеспечивает наибольшую точность с погрешностью около 10 метров. Однако когда датчик GPS включается после длительного периода неактивности, ему требуется получить данные со спутника и затем триангулировать их, поэтому получение данных о расположении может занимать одну или две минуты. После установки соединения со спутниками GPS может получать данные о новом расположении гораздо быстрее. Конечно, чем дольше вы используете GPS, тем больше энергии на это расходуется. Чтобы разрешить системе GPS получать данные, следует установить для свойства Geolocator.DesiredAccuracy значение High.
• Wi-Fi — подключение по Wi-Fi обеспечивает уровень точности с погрешностью от 300 до 500 метров. Если подключение уже установлено, данные о расположении можно получить быстрее, чем система GPS установит соединение со спутниками. Установите для свойства DesiredAccuracy значение Default, чтобы получить данные о расположении с помощью подключения по Wi-Fi.
• IP — уровень точности при использовании IP-адреса может иметь погрешность до 1 километра. При наличии установленного подключения к сети данные о расположении можно получить быстрее, чем система GPS установит соединение со спутниками. Чтобы получить данные о расположении по IP-адресу, следует также установить значение Default для свойства DesiredAccuracy. Служба определения местоположения возвращает данные о расположении с максимально доступной точностью и указывает соответствующий уровень точности с помощью свойства Geocoordinate.Accuracy.

Тщательно обдумайте и проанализируйте то, какой именно уровень точности вам необходим. Это может оказать влияние на показатели производительности и энергопотребления вашего приложения. Например, если приложение служит для получения прогноза погоды, высокая точность GPS в большинстве случаев не требуется. Кроме того, обязательно указывайте точность своих данных, отображая границы погрешности для возвращенных данных о расположении. Ниже приведен код C#, задающий требуемый уровень точности:

C#

Geolocator geolocator = new Geolocator();
geolocator.DesiredAccuracy = Windows.Devices.Geolocation.PositionAccuracy.High;

C#

Geoposition pos = await geolocator.GetGeopositionAsync().AsTask(token);

Ниже приведен код JavaScript, который создает экземпляр класса Geolocator, задает требуемую точность, а затем определяет текущее расположение. Обратите внимание на то, что переменная "promise" в этом коде является объектом WinJS.Promise, поэтому для доступа к данным из вызова getGeopositionAsync вам потребуется использовать метод done.

JavaScript

var geolocator = Windows.Devices.Geolocation.Geolocator();
geolocator.desiredAccuracy =
Windows.Devices.Geolocation.PositionAccuracy.high;

// Get the geoposition, capturing the request in a 'promise' object.
var promise = geolocator.getGeopositionAsync();

Карты Bing

Карты Bing — это хороший пример приложения, адаптирующегося к изменениям точности доступных данных о расположении. На настольном компьютере, который обычно не имеет GPS и Wi-Fi, это приложение определяет расположение по IP-адресу и выполняет масштабирование до уровня региона при отображении текущего местоположения на карте. На ноутбуках, которые обычно имеют адаптер беспроводных сетей, это приложение использует сеть Wi-Fi для получения более точного расположения и дополнительного увеличения масштаба при просмотре карты текущего местоположения. Если пользователь еще больше увеличивает масштаб, значок текущего расположения показывает границы погрешности. На устройстве с системой GPS приложение "Карты Bing" получает данные о расположении с высокой точностью от GPS и более точно отображает это место на карте.

Погода Bing

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

Отображение данных о расположении с помощью пакета SDK для приложения "Карты Bing"

После получения информации о расположении из вызова GetGeopositionAsync вам потребуется отобразить ее на карте.

• Сначала преобразуйте класс Geoposition в класс Location, который можно использовать в приложении "Карты Bing". Для этого используйте следующий код:

C#

Location location = new Location(pos.Coordinate.Latitude, pos.Coordinate.Longitude);

JavaScript:

promise.done(
  function (pos) {
    // Get the coordinates of the current location.
    var coord = pos.coordinate,
    location = new Microsoft.Maps.Location(coord.latitude, coord.longitude);
 
  },
  function (err) {
    // Handle the error.
  });

• Затем отобразите местоположение с помощью приложения "Карты Bing". Пакет SDK для приложения "Карты Bing" можно получить здесь. Вам также потребуется получить ключ "Карты Bing", зарегистрировавшись на портале "Карты Bing" и выполнив инструкции по получению ключа "Карты Bing". Во время регистрации обязательно ознакомьтесь с ограничениями на использование каждого из типов ключей и выберите тот тип, который оптимально подходит для вашего приложения.
  Добавьте элемент управления "Карты Bing" в свой конструктор и вставьте ключ в учетные данные.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SimpleMapping"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Maps="using:Bing.Maps"
    x:Class="SimpleMapping.MainPage"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Maps:Map x:Name="Map" Margin="0,120,0,0" Credentials="Insert Your Bing Maps Key Here"/>
    </Grid>
</Page>

• Теперь вы можете использовать следующий код на странице приложения, где отображается карта. Он задает уровень масштабирования карты и отображает расположение. Подробнее об уровне масштабирования рассказано в статье Отображение местоположения на карте Bing:

C#

double zoomLevel = 13.0f;

Map.SetView(location, zoomLevel);

<script type="text/javascript" 
   src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js">
/script>

После этого необходимо создать тег <div>, содержащий карту, и задать атрибут id для доступа к ней.

<div id=’map-div’></div>

Затем необходимо инициализировать элемент управления map на HTML-странице. Вот код JavaScript, который это делает:

// Load the Microsoft.Maps.Map module and then call getMap when the 
// module has loaded.
function initMap() {
  Microsoft.Maps.loadModule('Microsoft.Maps.Map', 
    { 
      callback: getMap, 
      culture: "en", 
      homeRegion: "US" 
  });
}

// Get the div to contain the map from the interface of the app.
function getMap() {

  // Create a new instance of the Map class, passing in the app ID.
  var map = new Microsoft.Maps.Map(
    document.getElementById(mapDivId), 
    { credentials: “Insert your credentials here” });

  // Set the initial zoom level and type of map.
  map.setView({
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    zoom: 3
  });
}

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

Подробное описание использования пространства имен geolocation и пакета SDK для приложения "Карты Bing" приведено в новых материалах — видеоролике, практических инструкциях и примере кода, где рассматриваются этапы асинхронного получения данных о расположении и использование пакета SDK для приложения "Карты Bing" для визуального представления текущего местоположения. Из этих материалов вы узнаете о том, как включить возможность определения расположения, как асинхронно получать данные о расположении, отображать заданное местоположение на карте и изменять значок расположения в зависимости от точности получаемых данных. Дополнительную информацию можно найти в статье, посвященной использованию карт Bing в приложениях Магазина Windows (возможно, на английском языке).

Заключение

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

– Росс Хейзе (Ross Heise), старший разработчик контента, отдел контента для разработчиков для Windows

   Выражаем отдельную благодарность Йону Кэю (Jon Kay) и Эрику Шмидту (Eric Schmidt) за их помощь при создании этой статьи.

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

Новые возможности

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

Для достижения этих целей Центр разработки был видоизменен следующим образом:

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

В дополнение к необходимым разработчикам материалам, примерам и скачиваемым файлам мы упросили доступ к ресурсам для дизайнеров и коммерческих организаций.

В зависимости от того, над чем вы работаете, можно перейти к одной из четырех областей: приложение Магазина Windows, Internet Explorer, рабочий стол Windows и оборудование. Для каждой из них предлагается новый интерфейс, соответствующий указанным выше пунктам. В этой статье мы подробно рассмотрим конкретные изменения, внесенные для приложений Магазина Windows.

Подходящий контент для вашей роли

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

Разработчики

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

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

Дизайнеры

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

Организации

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

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

Впереди еще много интересного, поэтому нам нужны ваши отзывы

Учитывая, что до начала конференции BUILD 2013 осталось чуть больше одного месяца, предстоит еще многое обсудить. Мы упорно работаем над созданием нового контента, рассказывающего о том, что будет представлено на конференции в этом году. Кроме данного блога, для получения актуальной информации можно использовать следующие источники: @windevs в Twitter и подписку на информационный бюллетень Магазина Windows.

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

Кейт Бойд (Keith Boyd), руководитель по публикации контента, отдел контента для разработчиков для Windows

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

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

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

• Ваше приложение всегда будет отображаться в списке целевых приложений. Оно всегда актуально и находится на связи с другими приложениями, которые могут предоставлять необходимые вам данные.
• Контракт отправки данных создает связь между вашим приложением и исходным приложением без необходимости их взаимной интеграции.
• Поскольку чудо-кнопка "Общий доступ" всегда присутствует и доступна в операционной системе, она обеспечивает целевому приложению представление в операционной системе, выходящее за рамки самого приложения. Все это может привлечь к вашему приложению еще больше клиентов!

Получение общего контента

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

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

На следующих двух рисунках показан процесс обмена данными, где фотография из приложения "Фотографии" передается в PuzzleTouch — игру, превращающую изображение в мозаичную головоломку.

Рисунок 1. Исходное приложение слева; список отфильтрованных целевых приложений, которые могут принять фотографии, на панели общего доступа справа.
Приложение PuzzleTouch является одним из получателей данных, которые могут принять изображение из приложения "Фотографии".

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

Что такое целевое приложение для обмена данными?

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

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

Рисунок 3. Передача ссылки из приложения "Фотографии" с использованием приложения "Почта" в качестве получателя данных

Сценарии для приложения "Ужин с друзьями"

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

Создание плана на вечер

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

Добавление в список предпочтений

Этот сценарий является хорошим примером короткой и целенаправленной задачи в получателе данных. Вот некоторые особенности его реализации в этом приложении:

• Люди находят рестораны в других приложениях, например в приложениях для планирования поездок, путеводителях по городу, кулинарных блогах и т. д. Приложение "Ужин с друзьями" отлично подходит для получения контента и вывода сводных сведений о ресторанах в разделе "Мои пожелания".
• Представление целевого приложения предназначено для того, чтобы пользователь мог быстро выполнить действие, находясь в контексте другого приложения. Таким образом, добавление ресторана в список предпочтений отлично подходит для использования в получателе данных.
• Хотя пользователь может переключиться на другое приложение, повторить поиск ресторана и добавить найденный ресторан в свой список предпочтений, значительно проще коснуться чудо-кнопки "Общий доступ".

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

Просматривая приложение, показывающее местные кафе-фургоны, я нахожу кафе-фургон с хорошими рекомендациями. Я хочу добавить этот кафе-фургон из текущего приложения в раздел "Мои предпочтения" приложения "Ужин с друзьями" для последующего использования при планировании.

Рисунок 4. Просмотр приложения, показывающего местные кафе-фургоны и рекомендующего интересные места для посещения

На этом изображении приведено представление целевого приложения для обмена данными, которое мы хотим использовать:

Рисунок 5. Представление целевого приложения для обмена данными

Осуществляя обмен данными в представлении целевого приложения, пользователи могут управлять ресторанами в приложении "Ужин с друзьями" без выхода из контекста текущего иммерсивного приложения.

Реализация получателя данных

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

Какие форматы данных следует поддерживать?

С помощью контракта отправки данных вы можете реализовать поддержку данных в стандартных форматах (текст, URI, HTML, растровое изображение, файлы и т. п.), а также в пользовательских форматах данных, приведенных на сайте http://schema.org . Операционная система Windows отбирает целевые приложения по поддерживаемым ими форматам данных, чтобы отобразить отфильтрованный список целевых приложений на панели общего доступа. Ваше приложение должно поддерживать те форматы данных, которые нужны при работе с ним. Например, если ваше приложение посвящено просмотру фотографий, поддержка текстовых форматов может оказаться лишней. Если вы объявляете поддержку нескольких форматов данных, определите, какой из них позволяет наилучшим образом представить данные, предоставляемые в общий доступ, чтобы вы могли выбрать этот формат из пакета данных первым.

Поскольку приложение "Ужин с друзьями" реализует режим получателя данных, позволяющий пользователям отправлять в это приложение данные о ресторанах, мы воспользуемся форматом данных Restaurant, приведенным на сайте http://schema.org. Приложение "Ужин с друзьями" может воспользоваться контрактом получателя данных, чтобы зарегистрироваться для получения данных в этом формате. Затем, используя данные из полученного пакета, оно может обеспечить удобный опыт работы в своем представлении целевого приложения, позволяющем пользователю добавить ресторан в свой список предпочтений.

В то время как некоторые исходные приложения могут специально использовать формат данных Restaurant для предоставления контента в общий доступ, другие исходные приложения могут представлять аналогичную информацию в других форматах, таких как Place, LocalBusiness и FoodEstablishment, приведенных на сайте schema.org. Таким образом, в контракте отправки данных приложение "Ужин с друзьями" может поддерживать прием данных в нескольких форматах, чтобы охватить больше исходных приложений.

Приложение "Ужин с друзьями" поддерживает следующие форматы в объявлениях получателя данных в манифесте приложения:

• Restaurant;
• Place;
• LocalBusiness;
• FoodEstablishment.

Для краткости в этой статье мы уделяем основное внимание типу данных Restaurant, однако изложенные здесь понятия применимы и к другим типам данных.

Какие форматы данных и сценарии следует исключить?

Приложение "Ужин с друзьями" поддерживает добавление ресторана в список предпочтений пользователя только в том случае, когда полученная информация соответствует ресторану, о котором приложению уже известно. Это сделано намеренно для предотвращения дублирования ресторанов в приложении.

Мы не поддерживаем стандартные типы данных, так как большая часть текста, файлов, фотографий, URI или HTML, предоставляемых для общего доступа из исходных приложений, не будет сопоставлена с каким-либо рестораном или местным предприятием. Например, если бы приложение "Ужин с друзьями" поддерживало прием текста, оно бы отображалось в списке целевых приложений для исходного приложения, посвященного ведению заметок. В этом случае приложению "Ужин с друзьями" потребовалось бы отобразить сообщение об ошибке, информирующее пользователя о том, почему оно не работает с данным исходным приложением. По сути, именно форматы данных соединяют исходное приложение, предлагающее определенную информацию, с целевым приложением. Если форматы данных не совпадают, обмен данными не происходит.

Убедитесь, что вы учли все форматы данных, необходимые для работы с приложением, и исключили те форматы, которые ухудшают опыт обмена данными.

Поддержка контракта получателя данных

Чтобы обеспечить поддержку форматов данных, объявите их для своего приложения в конструкторе манифестов Visual Studio. Вот что происходит, когда пользователь выбирает ваше приложение в качестве целевого для операций общего доступа:

1. В окне получателя данных поверх исходного приложения запускается новый экземпляр приложения.
2. Возникает событие активации получателя данных, и в результате ваше приложение получает объект ShareOperation.
3. Ваше приложение может извлечь данные, предоставленные пользователем для общего доступа, из этого объекта.
4. Эти данные можно использовать для отображения представления целевого приложения и завершения процедуры обмена данными.

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

Кроме того, Visual Studio поддерживает шаблон для получателей данных. Щелкните свой проект правой кнопкой мыши, выберите пункт Добавить элемент, щелкните Добавить новый элемент и выберите элемент Контракт получателя данных в списке, чтобы добавить код для поддержки данного контракта. В примере кода для получателя данных показано, как именно следует принимать контент, предоставленный в общий доступ.

Разработка настроенного представления целевого приложения

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

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

Рисунок 6. Передача данных из приложения "Фотографии" в целевое приложение "Почта" справа

Рисунок 7. Составление нового сообщения в представлении основного приложения "Почта"

Обратите внимание на то, что представление получателя данных у приложения "Почта" проще его полного представления. Оно обеспечивает понятное и легко воспринимаемое представление контента, которым пользователь собирается поделиться, в виде эскиза и соответствующего текста и HTML-кода. В нем есть строка Кому для добавления получателей, область для ввода короткого текстового сообщения и простое средство подтверждения отправки в виде кнопки Отправить.

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

Использование приложения "Ужин с друзьями" в качестве целевого приложения для обмена данными

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

Когда приложение "Ужин с друзьями" получает пакет с данными в формате Restaurant из исходного приложения, оно может использовать сведения из формата Restaurant, чтобы определить, какой ресторан из имеющейся базы данных соответствует полученному пакету данных. Затем приложение может осуществить предварительный просмотр этого ресторана в представлении получателя данных. Это позволяет убедиться в целостности контента, предлагаемого для общего доступа.

На этом изображении приведено представление получателя данных для приложения "Ужин с друзьями":

Рисунок 8. Представление получателя данных для приложения "Ужин с друзьями"

Как вы сами можете убедиться, это простое представление приложения "Ужин с друзьями", созданное специально, чтобы делиться, для целевого приложения. Оно обеспечивает предварительный просмотр информации о ресторане, которой пользователь собирается поделиться, и содержит простую кнопку Добавить в список предпочтений, поясняющую, где в основном приложении будет использоваться общий контент. Когда пользователь нажимает эту кнопку или касается ее, он подтверждает операцию предоставления в общий доступ. Предусмотрев обязательное участие пользователя, мы помогаем предотвратить случайную отправку данных и повышаем надежность всего процесса предоставления контента в общий доступ.

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

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

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

Создание объекта QuickLink

QuickLink — это реализация API-интерфейса Share, позволяющая быстро делиться контентом с известными адресатами в целевом приложении. QuickLink выступает в качестве настраиваемой ссылки на целевое представление, предлагая выполнение определенных действий. Когда Windows выполняет фильтрацию списка доступных пользователю целевых приложений, список объектов QuickLink отображается в верхней части панели общего доступа в качестве списка доступных назначений. Эти известные адресаты или пользовательские действия могут включать в себя места или людей, с которыми часто осуществляется обмен данными посредством этого целевого приложения. Например, приложение "Почта" возвращает объекты QuickLink для контактов, которым ранее уже отправлялись сообщения. Аналогичным образом вы можете добавить объекты QuickLink для папок, групп, записных книжек и списков воспроизведения, которые вы часто отправляете для общего доступа в целевое приложение.

Рисунок 10. На панели общего доступа показан объект QuickLink, предоставленный целевым приложением "Почта" для контактов,
которым уже отправлялись сообщения с помощью этого целевого приложения

Целевое приложение может предоставить объект QuickLink, вызвав метод reportCompletedобъекта ShareOperation. Объект QuickLink должен иметь заголовок, значок и идентификатор. Заголовок (например, "Сообщение для мамы") и значок отображаются, когда пользователь касается чудо-кнопки "Общий доступ". Идентификатор используется приложением для доступа к любой пользовательской информации, например адресу электронной почты, расположению папки и т. п. Подробнее об этом средстве рассказано в статье, посвященной созданию объекта QuickLink. 

Примечание. Объекты QuickLink удобно использовать, когда приложение поддерживает выполнение нескольких действий из получателя данных. Поскольку приложение "Ужин с друзьями" поддерживает в получателе данных только одно действие — Добавить в список предпочтений, объекты QuickLink в нем не используются.

Расширенный обмен данными и отчеты об ошибках

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

Поскольку делиться информацией необходимо быстро и плавно, а представление получателя данных с упрощенной структурой размещается поверх основного приложения, пользователи могут вернуться в основное приложение из представления получателя данных. Поэтому целевые приложения не должны зависеть от выполнения пользователем действий в представлении получателя данных после начала процесса обмена данными или ожидать выполнения таких действий. Целевые приложения могут использовать объект ShareOperation и его методы, чтобы уведомить Windows о том, что приложение обрабатывает данные.

• reportStarted — вызовите этот метод, чтобы уведомить Windows о том, что приложение начало извлекать данные из объекта DataPackage исходного приложения.
• reportDataRetrieved— вызовите этот метод, чтобы уведомить Windows о том, что приложение закончило делиться данными.
• reportCompleted — вызовите этот метод, чтобы уведомить Windows о том, что приложение закончило операцию общего доступа.

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

Рисунок 11. Представление получателя данных приложения "Почта" показывает индикатор хода выполнения расширенного обмена данными, например при отправке больших вложений

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

Если в примере с получателем данных "Ужин с друзьями" приложению не удается найти в своей базе данных ресторан, соответствующий предоставленному в общий доступ из исходного приложения в формате Restaurant, приложение должно сообщить об ошибке.

Подведем итоги!

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

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

Ишита Капур (Ishita Kapur)

Руководитель программы

Рабочая группа по взаимодействию с пользователями Windows

Радиочастотная связь ближнего действия (NFC) — это набирающая популярность технология беспроводной связи малого радиуса действия. Требуемое расстояние составляет 2 сантиметра, поэтому люди могут соприкасаться своими устройствами для отправки и приема контента. При этом вы можете быстро выбрать нужный объект или человека. Такой способ не только быстр, но и прост в освоении. Не нужно читать руководство — достаточно один раз увидеть все своими глазами.

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

Рисунок 1. На изображении показан динамик Nokia 360, обменивающийся с устройством
Windows Phone информацией о связывании по каналу Bluetooth

Аналогично Bluetooth и Wi-Fi технология NFC представляет собой стандартный протокол беспроводной связи, определенный ассоциацией NFC Forum. Ваш компьютер должен быть оснащен радиопередатчиком NFC. Множество компьютеров с Windows 8 уже имеют встроенный радиопередатчик NFC. Если ваш компьютер еще не оборудован таким радиопередатчиком, вы можете приобрести аппаратные ключи NFC, подключаемые к компьютеру.

NFC предоставляет несколько замечательных возможностей. С помощью касания люди могут отправить фотографии, открыть меню и заказать блюдо в ресторане или даже выполнить связывание с устройством Bluetooth. Эти сценарии существенно отличаются друг от друга, однако их объединяет взаимодействие с помощью касания. NFC используется в различных устройствах, таких как компьютеры, телефоны, динамики, гарнитуры, беспроводные экраны и т. д., чтобы сделать соединение устройств простым и интуитивно понятным. Кроме того, NFC использует метки RFID — это дешевые и легкие пассивные антенны, которые могут содержать довольно большой объем данных и размещаться практически где угодно, чаще всего их помещают на плакаты и афиши. Например, для покупки билета в кинотеатр достаточно коснуться афиши фильма! Мы рассмотрим простейший пример с касанием метки NFC, чтобы продемонстрировать основные принципы API NFC.

Но сначала давайте подробнее разберемся с касанием устройствами.

Определение термина "касание"

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

1. Место для соприкосновения устройств — это место определяется с помощью сенсорной метки, также называемой визуальной меткой "Поднести и сделать", обозначающей место расположения антенны NFC. В зависимости от модели для касания используются разные части компьютера. Например, на планшете это может быть задняя панель, а на универсальном компьютере — передняя. Вот как выглядит метка на любом компьютере с Windows 8 с поддержкой NFC:
   
   

   Рисунок 2. Визуальная метка "Поднести и сделать"

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

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

Когда использовать NFC

Используйте NFC, когда пользователю нужно выбрать что-то или кого-то в вашем приложении. NFC обеспечивает интуитивно понятный способ выбора, который часто оказывается быстрее (и удобнее), чем поиск вручную. Касание активирует процедуру, зависящую от используемого приложения. Это может быть что угодно, начиная от получения фотографии и заканчивая воспроизведением первого элемента списка воспроизведения. Конкретные действия, выполняемые после касания, определяются исключительно самим приложением. Поэтому для краткости мы назвали такое взаимодействие "Поднести и сделать".

Ниже приведено несколько примеров использования NFC для выбора объектов в приложении. Вы можете коснуться и…

• Получить информацию с афиши: метки NFC — легкие и недорогие метки RFID, их стоимость составляет около 0,15–1,00 долл. США (цена зависит от затрат на печать). Они похожи на QR-коды, однако проще и быстрее в использовании. Касание метки удобнее фотографирования штрихкода (для которого требуется еще и правильный угол съемки). Производители все чаще помещают метки на афиши и плакаты в многолюдных местах, таких как аэропорты, станции метро и автобусные остановки. Такие метки могут содержать от 48 байт до 4 килобайт данных. Вы можете запрограммировать метку на открытие определенной страницы приложения.

• Обменяться контактными данными: вместо того, чтобы по буквам диктовать свои контактные данные другу и надеяться на отсутствие ошибок, коснитесь устройствами для обмена соответствующей информацией. По аналогии с предыдущим сценарием вы можете занести свою информацию на визитку/метку с поддержкой технологии NFC либо обменяться этой информацией напрямую через приложение.
• Воспроизвести любимую музыкальную радиостанцию: собираетесь ли вы заняться спортом, садитесь в машину или просто отдыхаете дома, воспользуйтесь меткой NFC для прослушивания радиостанции. Вы даже можете запрограммировать разные радиостанции на разных метках, например использовать одну метку для спортзала, другую — для отдыха, третью — для сна.
• Заказать ужин в популярном ресторане: заказ блюд в таком ресторане в вечерние часы может занять достаточно много времени. Вместо этого коснитесь метки на столе для заказа блюд.
• Сыграть в многопользовательскую игру с другом: вы можете легко подключиться к многопользовательской игре, например "Морской бой", "Шахматы" или "Эрудит", вместе с другом, просто соприкоснувшись устройствами. После касания соединение поддерживается по внеполосному каналу с более широким диапазоном и более высокой пропускной способностью, например Bluetooth или Wi-Fi Direct.

Теперь мы имеем более-менее четкое представление о том, когда использовать NFC. Пришло время для по-настоящему интересной задачи — разработки приложения, использующего API-интерфейсы близкого взаимодействия (NFC) в Windows 8.

Как реализовать NFC

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

1. Установка сигнала на метке: метки NFC могут использоваться многократно, поэтому приложение должно предоставлять пользователю возможность программирования сигнала. Например, пользователь может запрограммировать разные сигналы — один для рабочих дней, а другой для выходных. Эта процедура называется публикацией данных в метке.
2. Установка сигнала из метки: после касания метки пользователем приложение должно подтвердить установку сигнала. Это означает, что приложение может запускаться с контекстом (аргументами).

API NFC предоставляет несколько способов добиться желаемого, но для данного сценария я бы воспользовалась самым простым из них.

Давайте рассмотрим процедуру установки сигнала на метке NFC:

1. Дмитрий запускает приложение будильника и задает время, например "7:00". Ничего необычного и требующего использования NFC здесь нет.
2. Дмитрий выбирает параметр "Установка сигнала на метке NFC". При этом приложение вызывает API-интерфейсы NFC для публикации информации, а именно строки идентификатора приложения и "07:00", на радиопередатчике NFC. Метки NFC используют стандартизированный формат сообщений под названием NDEF (NFC Defined Exchange Format). Вашему приложению не требуется самостоятельно преобразовывать данные в формат сообщения NDEF, поскольку за это отвечает операционная система Windows. Теперь пользователь может коснуться метки NFC.
3. Дмитрий соприкасается меткой с компьютером, и приложение подтверждает программирование метки. После касания метки важно дать пользователям понять, что приложение успешно запрограммировало метку. Как было указано ранее, большинство людей незнакомо с принципом касания компьютера, поэтому такое подтверждение придает пользователю уверенности в выполнении нужной операции. Приложение "узнает" об успешной передаче сообщения благодаря регистрации обработчика переданных сообщений.

API-интерфейсы NFC расположены в пространстве имен Windows.Networking.Proximity. Они вступают в игру на втором этапе, то есть после того, как пользователь выберет параметр "Установка сигнала на метке NFC". Сначала приложение инициализирует объект близкого взаимодействия. Он используется для определения появления метки (или устройства) в пределах радиуса действия или выхода за его пределы. Затем мы добавляем обработчик событий DeviceArrival. Этот обработчик распознает момент касания метки, после чего мы можем начинать запись информации в метку. Полезно сообщить пользователям о выполнении записи в метку, чтобы они не перемещали устройство из радиуса действия. Вы можете использовать это же событие для распознавания момента касания любого устройства с поддержкой близкого взаимодействия.

В следующем фрагменте кода показано, как инициализировать и добавить обработчик событий DeviceArrival.

JavaScript

var proximityDevice;

function initializeProximityDevice() {
    proximityDevice = Windows.Networking.Proximity.ProximityDevice.getDefault();

    if (proximityDevice) {
        proximityDevice.addEventListener("devicearrived", proximityDeviceArrived);
       
}
   else {
        // No NFC radio on the PC, display an error message
    }


function proximityDeviceArrived(device) {
        // Let the user know we’re ‘Writing to Tag’

}
}

private void InitializeProximityDevice()
{

Windows.Networking.Proximity.ProximityDevice proximityDevice;
    proximityDevice = Windows.Networking.Proximity.ProximityDevice.GetDefault();

    if (proximityDevice != null) {
        proximityDevice.DeviceArrived += ProximityDeviceArrived;
    
    }
    else
    {
        // No NFC radio on the PC, display an error message
    }
}

private void ProximityDeviceArrived(Windows.Networking.Proximity.ProximityDevice device)
{
            // Let the user know we’re ‘Writing to Tag’

}

Затем мы публикуем информацию в метке. Приложение публикует два элемента: строку идентификатора приложения, состоящую из идентификатора и платформы приложения, и аргументы запуска. Для Windows 8 идентификатор приложения — <имя семейства пакета>!<идентификатор приложения>, а платформа приложения — "Windows". Вам следует скопировать значение идентификатора приложения из атрибута ID элемента Application в манифесте пакета приложения. Аргументом запуска является "07:00", то есть установленный пользователем сигнал. Давайте назовем все это сообщением.

Если приложение предназначено для работы на нескольких платформах, Windows позволяет опубликовать альтернативные значения идентификатора и платформы приложения. То есть вы можете касаться той же метки на другом устройстве, поддерживающем NFC, например на устройстве под управлением Windows Phone 8. Дополнительную информацию об альтернативных идентификаторах можно найти на сайте MSDN.

Приложение публикует данные в метку с помощью метода publishBinaryMessage. Этот метод принимает три параметра — messageType, message и функцию messageTransmittedHandler. Мы установим для messageType значение "LaunchApp:WriteTag", чтобы сообщить Windows о том, что приложению требуется записать информацию в метку NFC. Параметр message — это то сообщение, которое мы определили ранее (строка идентификатора приложения и аргументы запуска); нам потребуется хранить его в двоичном виде в буфере. Функция messageTransmittedHandler регистрируется для обратных вызовов. Это позволяет приложению узнать об успешной записи сообщения в метку. Мы будем это использовать, чтобы сообщить пользователю две вещи: мы успешно записали сообщение в метку, и метку можно больше не удерживать в пределах радиуса действия.

Сообщения публикуются до тех пор, пока мы не вызовем функцию StopPublishingMessage или не будет освобожден объект ProximityDevice. В данном примере мы будем использовать функцию останова. PublishBinaryMessage возвращает идентификатор публикации, этот же идентификатор публикации используется для остановки публикации сообщения на радиопередатчике NFC.

В следующем фрагменте кода показано, как записать данные в метку NFC:

JavaScript

var proximityDevice;

function getAlarmTime(){

    // Grab time set by the user, call this variable ‘Alarm’
    return Alarm;

}

function publishLaunchApp() {
    proximityDevice = Windows.Networking.Proximity.ProximityDevice.GetDefault();

if (proximityDevice) {
        // The format of the app launch string is: "<args>\tWindows\t<AppName>".
        // The string is tab or null delimited.

        // The <args> string can be an empty string ("").
        var launchArgs = getAlarmTime();

        // The format of the AppName is: PackageFamilyName!PRAID.
        var praid = "AlarmApp"; // The Application Id value from your package.appxmanifest.

        var appName = Windows.ApplicationModel.Package.current.id.familyName + "!" + praid;

        var launchAppMessage = launchArgs + "\tWindows\t" + appName;

        var dataWriter = new Windows.Storage.Streams.DataWriter();
        dataWriter.unicodeEncoding = Windows.Storage.Streams.UnicodeEncoding.utf16LE;
        dataWriter.writeString(launchAppMessage);
        var launchAppPubId =
             proximityDevice.publishBinaryMessage(
                 "LaunchApp:WriteTag", 
                 dataWriter.detachBuffer(), 
                 proximityWriteTagLaunchAppMessageTransmitCallback);
        
    if (launchAppPubId != -1) {
            // Stop publishing the message on NFC radio
        proximityDevice.stopPublishingMessage(launchAppPubId);
    }

     }
}

function proximityWriteTagLaunchAppMessageTransmitCallback() {
    // Inform the user that: the message has been successfully written to a tag & the tag no longer needs to be in range
}

Windows.Networking.Proximity.ProximityDevice proximityDevice;

private string GetAlarmTime(){

    // Grab time set by the user, call this variable ‘Alarm’
    return Alarm;
}

private void PublishLaunchApp()
{
    proximityDevice = Windows.Networking.Proximity.ProximityDevice.GetDefault();

if (proximityDevice != null)
    {
        // The format of the app launch string is: "<args>\tWindows\t<AppName>".
        // The string is tab or null delimited.

        // The <args> string can be an empty string ("").
        string launchArgs = getAlarmTime();

        // The format of the AppName is: PackageFamilyName!PRAID.
        string praid = "MyAppId"; // The Application Id value from your package.appxmanifest.

        string appName = Windows.ApplicationModel.Package.Current.Id.FamilyName + "!" + praid;

        string launchAppMessage = launchArgs + "\tWindows\t" + appName;

        var dataWriter = new Windows.Storage.Streams.DataWriter();
        dataWriter.UnicodeEncoding = Windows.Storage.Streams.UnicodeEncoding.Utf16LE;
        dataWriter.WriteString(launchAppMessage);
        var launchAppPubId =
        proximityDevice.PublishBinaryMessage(
            "LaunchApp:WriteTag", dataWriter.DetachBuffer(), 
            proximityWriteTagLaunchAppMessageTransmitCallback);
    
    if (launchAppPubId!= -1)
    {
        proximityDevice.StopPublishingMessage(launchAppPubId);
    // Stop publishing the message on NFC radio
    }

    }
}

private void proximityWriteTagLaunchAppMessageTransmitCallback(
    Windows.Networking.Proximity.ProximityDevice sender,
    long messageId)
{
        // Inform the user that: the message has been successfully written to a tag & the tag no longer needs to be in range
}

1. Дмитрий просматривает информацию на домашнем экране (составляет сообщение электронной почты, играет в игру или использует Windows) и понимает, что ему нужно установить сигнал будильника на утро понедельника. Он берет метку "Сигнал для рабочего дня" и касается ей своего компьютера. Отображается всплывающее уведомление, предлагающее запустить ваше приложение будильника. До этого момента всю работу выполняет Windows, ваше приложение бездействует.
2. Дмитрий соглашается, и ваше приложение открывает экран "Подтвердить сигнал?" со временем "7:00". После принятия всплывающего уведомление Дмитрием Windows передает аргументы запуска (которые были описаны выше) в ваше приложение во время активации. Это называется контекстным запуском и соответствует запуску приложения, открытого на определенной странице.
3. Дмитрий устанавливает сигнал. Ничего необычного и требующего использования NFC здесь нет.

Получение аргументов запуска из метки NFC не вызывает никаких трудностей. Приложению требуется обработать контекстный запуск из метки NFC. Контекстный запуск аналогичен запуску приложения, открытого на определенной странице. Наши аргументы запуска задают сигнал "7:00" и используются приложением для отображения предлагаемого сигнала. Кроме того, если ваше приложение не установлено на компьютере, Windows предлагает Дмитрию установить его из Магазина Windows в автоматическом режиме.

В следующем фрагменте кода показано, как реализовать контекстный запуск.

JavaScript

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.arguments == "Windows.Networking.Proximity.PeerFinder:StreamSocket") {
            //do nothing here.
        }
        else {
    // Use args.detail.arguments to parse out ’07.00’ string, and display to the user
        }

        args.setPromise(WinJS.UI.processAll());
    }
}

async protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            if (args.Arguments == "Windows.Networking.Proximity.PeerFinder:StreamSocket")
            {
                _isLaunchedByTap = true;
            }
            else
            {
// Use args.Arguments to parse out ’07.00’ string, and display to the user

            }
            Window.Current.Activate();
        }

Вот и все, что требуется от вашего приложения для поддержки чтения и записи метки NFC. Довольно просто для передовых технологий, не так ли? В завершение статьи рассмотрим еще один важный аспект — обработку ошибок.

Обработка ошибок

Существует несколько распространенных ошибок, с которыми может столкнуться ваше приложение.

• Метка, к которой совершено касание, имеет формат, отличный от NDEF. Windows 8 не поддерживает автоматическое переформатирование метки в NDEF, поэтому вам требуется загрузить и установить модуль форматирования NDEF.
• Метка, к которой совершено касание, доступна только для чтения. Некоторые метки NFC могут быть заблокированы и доступны только для чтения (аналогично старым видеокассетам VHS).
• Метка, к которой совершено касание, слишком мала и не может вместить все данные.
• Компьютер пользователя не оснащен средствами NFC. Как я уже упоминала в начале, NFC — это развивающаяся технология, время повсеместного внедрения которой еще не настало. Чтобы проверить, поддерживает ли компьютер близкое взаимодействие, воспользуйтесь методом ProximityDevice.getDefault(), который возвращает значение NULL, когда установленные радиопередатчики NFC отсутствуют.

Это интересно и интуитивно понятно!

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

NFC объединяет в себе множество различных аспектов, поэтому следите за новыми публикациями о других возможностях NFC в Windows 8 для разработчиков.

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

Ресурсы

Спасибо за внимание!

Прия Дандавейт (Priya Dandawate)
Руководитель программы, устройства и сетевые возможности

Соавторы: Макс Моррис (Max Morris), Марзена Макута (Marzena Makuta), Майк Лохорт (Mike Loholt), Джейк Сабульски (Jake Sabulsky) и Вишал Матре (Vishal Mhatre)

Нас повсюду окружают устройства, подключенные к сети. Даже новые модели холодильников и стиральных машин могут подключаться к Интернету и домашним сетям. Поэтому нет ничего удивительного в том, что пользователи ожидают от своих приложений аналогичного поведения. Такие "подключенные приложения" используют наиболее актуальный контент из Интернета — социальные сети, электронные СМИ, блоги и другие типы контента. Разработка подключенных приложений стала нормой, однако распространенные проблемы, такие как потеря подключения к сети, затраты в сети с лимитным тарифным планом или снижение производительности, все еще могут вызывать определенные трудности. Windows 8 существенно упрощает создание подключенных приложений.

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

• Выбирайте подходящий API для ваших сценариев.
• Выбирайте правильные сетевые возможности.
• Адаптируйте работу приложения для сетей с лимитным тарифным планом.
• Реагируйте на изменения состояния сети.
• Кэшируйте данные для обеспечения плавной работы.

А теперь давайте подробно рассмотрим каждую из этих рекомендаций.

Выбор подходящего API

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

Наиболее распространенный сценарий работы с сетью заключается в доступе к веб-сайту для получения или сохранения информации. В качестве простого примера можно привести игру, использующую веб-сайт для сохранения информации о пользователе и игрового счета. Более сложным примером является приложение, подключающееся к веб-службе на базе REST и использующее библиотеку, предоставляемую этой веб-службой, для считывания или сохранения информации. В Windows 8 есть несколько API, обеспечивающих подключение к веб-службам и веб-сайтам. С помощью этих API ваше приложение может осуществлять доступ к веб-службам, поддерживающим REST, или отправлять простые команды протокола HTTP (такие как GET и POST) на веб-сервер. API для обеспечения веб-доступа выбирается в зависимости от языка, используемого для разработки приложения:

• XMLHTTPRequest и WinJS.xhr — приложения, написанные на JavaScript и HTML.
• HttpClient — приложения, написанные на C# или Visual Basic .NET и XAML.
• XML HTTP Request 2 (IXHR2) — приложения, написанные на C++ и XAML.

В следующем фрагменте кода показано, как выполнить базовый запрос и ответ с использованием веб-службы на базе REST. В данном случае веб-служба может выполнить сценарий ASP.NET на веб-сервере.

JavaScript

function makeXHRCall() {
    WinJS.xhr({ uri: "http://www.microsoft.com/en-us/default.aspx” }).done(
 function onComplete(result) {
 print(result.responseText);
 },
 function onError(err) {
 print("Error: " + err.responseText);
        });
}

C#

private async void MakeHttpCall()
{
    HttpClient httpClient = new HttpClient();
    try {
        string response = await httpClient.GetStringAsync("http://www.microsoft.com/en-us/default.aspx");
    }
    catch (Exception) {
        // Handle exception.
    }
}

Подробнее о WinJS.xhr можно прочитать в статьеПодключение к веб-службам (приложения Магазина Windows с использованием JavaScript и HTML). Дополнительную информацию об HttpClient можно найти в статье Краткое руководство: подключение с использованием HttpClient (приложения Магазина Windows на C#, VB, C++ и XAML) и в примере HttpClient.

Еще одним распространенным сценарием работы в сети является такая загрузка или отправка файлов, когда передача может занимать некоторое время. В качестве примера можно привести приложение фотоальбома или галереи камеры, которому требуется отправлять фотографии или фотоальбомы в веб-службу или загружать их оттуда. Такая передача файлов может занимать много времени, поэтому совершенно незачем заставлять пользователя дожидаться ее окончания. API Windows.Networking.BackgroundTransfer позволяет загружать или отправлять файлы даже в том случае, когда само приложение уже не работает. Приложение запускает передачу файлов, когда оно выполняется на переднем плане и находится в фокусе внимания, после чего Windows 8 продолжает передачу файлов в фоновом режиме, даже если само приложение уже не работает.

Более узкоспециализированным сценарием является доступ к сводному контенту. API Windows.Web.Syndication может получать веб-каналы в форматах RSS или Atom. Кроме того, API Windows.Web.AtomPub позволяет приложению публиковать данные в различных форматах AtomPub.

Для сценариев, для которых особый сетевой протокол более высокого уровня недоступен через API, среда выполнения Windows также поддерживает сокеты TCP и UDP (наряду с многоадресной рассылкой). API Windows.Networking.Sockets предоставляет StreamSocket (TCP) и DatagramSocket (UDP) для реализации других протоколов более высокого уровня.

Примечание. В Windows 8 представлен новый тип сокетов — WebSocket. Дополнительную информацию о сокетах WebSocket и их использовании можно найти в статье Подключение с использованием WebSocket.

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

Выбор правильных сетевых возможностей

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

Приложения должны объявлять возможности сетевой изоляции, чтобы определить область сетевого доступа. Без объявления этих возможностей приложение не получит доступ к сетевым ресурсам. Дополнительную информацию о том, как Windows обеспечивает сетевую изоляцию приложений, можно прочитать в статье Настройка сетевых возможностей.

Обратите внимание на то, что вы не можете использовать сеть в качестве механизма межпроцессного взаимодействия между приложениями Магазина Windows и классическими приложениями, находящимися на одном устройстве. Таким образом, вы не можете использовать петлевые IP-адреса в приложении Магазина Windows. В процессе разработки можно воспользоваться ограниченным числом исключений, позволяющих использовать петлевые IP-адреса при работе в отладчике Visual Studio. Подробнее можно прочитать в статье Включение замыкания на себя и устранение неполадок сетевой изоляции.

Запросы на доступ к сети делятся на две категории:

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

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

В следующей таблице приведены сведения о возможностях сетевой изоляции и других связанных с ними возможностях, которые часто требуются подключенным приложениям. Первые три из перечисленных возможностей сетевой изоляции — это основные возможности, используемые подключенными приложениями. На практике подключенное приложение должно реализовывать хотя бы одну из этих трех возможностей. Остальные элементы таблицы отражают дополнительные возможности, которые часто требуются некоторым подключенным приложениям.

Используйте следующий контрольный список, чтобы убедиться, что для вашего приложения настроена сетевая изоляция:

• Определите направление доступа к сети, необходимого вашему приложению. Приложению могут требоваться только исходящие запросы, инициированные клиентом, незапрошенные входящие запросы или запросы обоих типов.
• Определите тип сетевых ресурсов, с которыми будет взаимодействовать ваше приложение: надежные ресурсы в домашней или рабочей сети, ресурсы в Интернете или ресурсы обоих этих типов.
• Настройте минимально необходимые возможности сетевой изоляции в манифесте приложения. Для этого вы можете использовать конструктор манифеста приложения в Microsoft Visual Studio 2012 либо добавить их вручную.
• Выполните развертывание приложения и запустите его, чтобы протестировать с применением доступных диагностических средств сетевой изоляции. Подробнее можно прочитать в статье Включение замыкания на себя и устранение неполадок сетевой изоляции.

На следующих снимках экрана показано, как включить сетевые возможности с помощью конструктора манифеста приложения в Microsoft Visual Studio 2012.

Выбор сетевых возможностей в package.appxmanifest вашего приложения в Visual Studio 2012

Адаптация работы приложения для сетей с лимитным тарифным планом

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

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

API-интерфейс Windows.Networking.Connectivity предоставляет сведения о типе и стоимости сетевого подключения. Это позволяет вашему приложению определить, имеет ли смысл использовать сетевые ресурсы в обычном режиме, умеренно или с запросом разрешения у пользователя.

API-интерфейс ConnectionProfile представляет сетевое подключение. Потребность в адаптации режима работы ваше приложение может определять с помощью ConnectionCost из ConnectionProfile. Свойство NetworkCostType указывает тип сетевого подключения. Возможны четыре значения:

• Unrestricted — использование этого сетевого подключения не ограничивается. Оно не связано с затратами на использование или ограничениями объема передаваемых данных.
• Fixed — использование этого сетевого подключения не ограничивается до определенного предела.
• Variable — использование этого сетевого подключения оплачивается по количеству байт.
• Unknown — информация о стоимости использования этого сетевого подключения недоступна.

Несколько логических свойств для ConnectionCost предоставляют дополнительную информацию.

• Roaming — подключение к сети за пределами зоны охвата домашнего поставщика услуг Интернета.
• ApproachingDataLimit — для подключения почти исчерпан лимит использования, предусмотренный тарифным планом.
• OverDataLimit — для подключения исчерпан лимит использования, предусмотренный тарифным планом.

Предусмотрите в своем приложении реагирование на ситуации, обозначенные этими свойствами. Если подключение имеет свойство Roaming, затраты на передачу данных по сети могут быть очень высокими. Когда NetworkCostType имеет значение Variable, используется сеть с лимитным тарифным планом, где пользователь платит за объем данных, отправленных или принятых по этой сети. Если NetworkCostType имеет значение Fixed, следует уделить внимание ситуации, когда пользователь превысил либо почти превысил лимит трафика.

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

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

JavaScript

var CostGuidance = { Normal: 0, Conservative: 1, OptIn: 2 };
// GetCostGuidance returns an object with a Cost (with value of CostGuidance), 
// CostName (a string) and Reason, which says why the cost is what it is.
function GetCostGuidance() 
{
    var connectionCost = Windows.Networking.Connectivity.NetworkInformation.getInternetConnectionProfile().getConnectionCost();
    var networkCostConstants = Windows.Networking.Connectivity.NetworkCostType;
    var Retval = new Object();
    if (connectionCost.roaming || connectionCost.overDataLimit)
    {
        Retval.Cost = CostGuidance.OptIn;
        Retval.CostName = "OptIn";
        Retval.Reason = connectionCost.roaming
            ? "Connection is roaming; using the connection may result in additional charge."
            : "Connection has exceeded the usage cap limit.";
    }
    else if (connectionCost.networkCostType == networkCostConstants.fixed
        || connectionCost.networkCostType == networkCostConstants.variable)
    {
        Retval.Cost = CostGuidance.conservative;
        Retval.CostName = "Conservative";
        Retval.Reason = connectionCost.networkCostType == NetworkCostType.fixed
            ? "Connection has limited allowed usage."
            : "Connection is charged based on usage. ";
    }
    else
    {
        Retval.Cost = CostGuidance.Normal;
        Retval.CostName = "Normal";
        Retval.Reason = connectionCost.networkCostType == networkCostConstants.unknown
            ? "Connection is unknown."
            : "Connection cost is unrestricted.";
    }

    return Retval;
}

C#

public enum NetworkCost { Normal, Conservative, OptIn };
public class CostGuidance
{
    public CostGuidance()
    {
        var connectionCost = NetworkInformation.GetInternetConnectionProfile().GetConnectionCost();
        Init(connectionCost);
    }
    public NetworkCost Cost { get; private set; }
    public String Reason { get; private set; }


    public void Init(ConnectionCost connectionCost)
    {
        if (connectionCost == null) return;
        if (connectionCost.Roaming || connectionCost.OverDataLimit)
        {
            Cost = NetworkCost.OptIn;
            Reason = connectionCost.Roaming
                ? "Connection is roaming; using the connection may result in additional charge."
                : "Connection has exceeded the usage cap limit.";
        }
        else if (connectionCost.NetworkCostType == NetworkCostType.Fixed
            || connectionCost.NetworkCostType == NetworkCostType.Variable)
        {
            Cost = NetworkCost.Conservative;
            Reason = connectionCost.NetworkCostType == NetworkCostType.Fixed
                ? "Connection has limited allowed usage."
                : "Connection is charged based on usage. ";
        }
        else
        {
            Cost = NetworkCost.Normal;
            Reason = connectionCost.NetworkCostType == NetworkCostType.Unknown
                ? "Connection is unknown."
                : "Connection cost is unrestricted.";
        }
    }
}

Используйте пример сетевой информации, чтобы больше узнать об адаптации поведения приложения к работе в сетях с лимитным тарифным планом.

Пользователи также могут запустить диспетчер задач для просмотра объема сетевых данных, используемых каждым из приложений. На этом снимке экрана приведен соответствующий пример.

На вкладке "Журнал приложений" в диспетчере задач пользователи могут просмотреть данные об использовании ресурсов центрального процессора и сети различными приложениями

Реагирование на изменения состояния сети

В любом сценарии работы мобильного устройства сети могут как появляться, так и пропадать. В гараже или доме пользователя мобильная широкополосная сеть 3G или 4G, в отличие от сети Wi-Fi, может становиться недоступной. Аналогичным образом подключение к сети Wi-Fi может прерываться, когда пользователь выходит из дома. Иногда доступные сети могут вообще отсутствовать. Учитывая распространение Wi-Fi и мобильных широкополосных сетей, такие изменения в состоянии сетевого подключения будут возникать достаточно часто.

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

Потеря подключения из-за ошибки

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

Потеря подключения к сети

Уведомите пользователя о потере подключения к сети, затем зарегистрируйтесь и дождитесь события NetworkStatusChanged.

Доступность новой сети

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

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

Если вы считаете, что ваше приложение будет часто сталкиваться с необходимостью смены сетей, при обнаружении новой сети следуйте приведенным ниже рекомендациям:

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

Изменение стоимости сетевого подключения

Изменение стоимости сетевого подключения может произойти, когда NetworkCostType имеет значение Fixed и пользователь превысил либо почти превысил лимит трафика. Кроме того, изменение стоимости сетевого подключения может произойти, когда для NetworkCostType устанавливается значение Variable или для Roaming устанавливается значение true. В этих случаях адаптируйте поведение приложения, следуя рекомендациям из предыдущего пункта.

В следующих примерах кода используется событие NetworkStatusChanged для обеспечения удобного опыта работы с приложением при различных изменениях состояния сети. В обоих примерах используется глобальная логическая переменная registeredNetworkStatusNotification, для которой изначально задано значение false.

JavaScript

// Register for NetworkStatusChanged notifications, and display new 
// Internet ConnectionProfile info upon network status change.
function registerForNetworkStatusChange() {
    try {

        // Register for network status change notifications.
        if (!registeredNetworkStatusNotification) {
            var networkInfo.addEventListener("networkstatuschanged", onNetworkStatusChange);
            registeredNetworkStatusNotification = true;
        }
    }
    catch (e) {
        print("An unexpected exception occurred: " + e.name + ": " + e.message);
    }
}

// Event handler for NetworkStatusChanged event
function onNetworkStatusChange(sender) {
    try {
        // Get the ConnectionProfile that is currently used to connect 
        // to the Internet.
        var internetProfile = networkInfo.getInternetConnectionProfile();
        if (internetProfile === null) {
            print("Not connected to Internet\n\r");
        }
        else {
            internetProfileInfo += getConnectionProfileInfo(internetProfile) + "\n\r";
            print(internetProfileInfo);
        }
        internetProfileInfo = "";
    }
    catch (e) {
        print("An unexpected exception occurred: " + e.name + ": " + e.message);
    }
}

C#

// Register for NetworkStatusChanged notifications, and display new 
// Internet ConnectionProfile info upon network status change.
void NetworkStatusChange()
{
    // Register for network status change notifications.
    try
    {
        var networkStatusCallback = new NetworkStatusChangedEventHandler(OnNetworkStatusChange);
        if (!registeredNetworkStatusNotification)
        {
            NetworkInformation.NetworkStatusChanged += networkStatusCallback;
            registeredNetworkStatusNotification = true;
        }
    }
    catch (Exception ex)
    {
        rootPage.NotifyUser("Unexpected exception occurred: " + ex.ToString(), NotifyType.ErrorMessage);
    }
}

// Event handler for NetworkStatusChanged event
async void OnNetworkStatusChange(object sender)
{
    try
    {
        // Get the ConnectionProfile that is currently used to connect 
        // to the Internet 
        ConnectionProfile InternetConnectionProfile = NetworkInformation.GetInternetConnectionProfile();

        if (InternetConnectionProfile == null)
        {
            await _cd.RunAsync(CoreDispatcherPriority.Normal, () =>
            {
                rootPage.NotifyUser("Not connected to Internet\n", NotifyType.StatusMessage);
            });
        }
        else
        {
            connectionProfileInfo = GetConnectionProfile(InternetConnectionProfile);
            await _cd.RunAsync(CoreDispatcherPriority.Normal, () =>
            {
                rootPage.NotifyUser(connectionProfileInfo, NotifyType.StatusMessage);
            });
        }
        internetProfileInfo = "";
    }
    catch (Exception ex)
    {
        rootPage.NotifyUser("Unexpected exception occurred: " + ex.ToString(), NotifyType.ErrorMessage);
    }
}

Чтобы больше узнать о событии NetworkStatusChanged, ознакомьтесь со статьей Краткое руководство: управление событиями подключения и изменениями доступности и примером сетевой информации.

Кэширование данных для обеспечения плавной работы

Кэширование контента на диск обеспечивает быструю и плавную работу приложения. Например, приложение для чтения RSS-каналов может мгновенно отображать веб-каналы, кэшированные на диск во время предыдущего сеанса. По мере получения новых веб-каналов приложение обновляет этот контент. Кэширование позволяет сразу после запуска приложения отобразить некоторый контент, который пользователь может изучать, пока загружается новый контент.

Windows 8 предоставляет класс ApplicationData в пространстве имен Windows.Storage. Этот класс предоставляет доступ к хранилищу данных приложения. Это хранилище состоит из файлов и параметров, являющихся локальными по отношению к устройству, перемещаемых между несколькими устройствами или являющихся временными.

Файлы оптимально подходят для хранения больших наборов данных, баз данных или данных в распространенном формате. Файлы могут находиться в перемещаемых, локальных или временных папках. Вот что это значит:

• Перемещаемые файлы синхронизируются на нескольких компьютерах и устройствах, где пользователи выполнили вход с использованием подключенных учетных записей. Перемещение файлов осуществляется не мгновенно. Система анализирует несколько факторов, определяя подходящий момент для отправки данных. Старайтесь не допускать превышения квоты (доступной через свойство RoamingStorageQuota) на объем перемещаемых данных, так как в противном случае операции перемещения данных будут приостановлены. Файлы нельзя перемещать, пока приложение записывает в них данные, поэтому обязательно закрывайте объекты файлов своего приложения, которые больше не нужны.
• Локальные файлы между компьютерами не синхронизируются. Они остаются на том компьютере, где были изначально созданы.
• Неиспользуемые временные файлы подлежат удалению. При принятии решения об удалении временного файла система учитывает такие факторы, как свободное место на диске и возраст файла.

В следующих примерах кода выполняется кэширование данных на диск. Кэширование ответа сервера позволяет приложению мгновенно отображать контент после завершения его работы и повторного запуска. Для краткости в этих примерах не показано, как записывать параметры в хранилище данных приложения или реагировать на события перемещения. Эти аспекты подробно рассмотрены в примере данных приложения.

JavaScript

var roamingFolder = Windows.Storage.ApplicationData.current.roamingFolder;
var filename = "serverResponse.txt";

function cacheResponse(strResponse) {
    roamingFolder.createFileAsync(filename, Windows.Storage.CreationCollisionOption.replaceExisting)
        .done(function (file) {
            return Windows.Storage.FileIO.writeTextAsync(file, strResponse);
        });
}

function getCachedResponse() {
    roamingFolder.getFileAsync(filename)
        .then(function (file) {
            return Windows.Storage.FileIO.readTextAsync(file);
        }).done(function (response) {
            print(response);
        }, function () {
            // getFileAsync or readTextAsync failed. 
            // No cached response.
        });
}

C#

MainPage rootPage = MainPage.Current;
StorageFolder roamingFolder = null;
const string filename = "serverResponse.txt";

async void cacheResponse(string strResponse)
{
    StorageFile file = await roamingFolder.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting);
    await FileIO.WriteTextAsync(file, strResponse);
}

async void getCachedResponse()
{
    try
    {
        StorageFile file = await roamingFolder.GetFileAsync(filename);
        string response = await FileIO.ReadTextAsync(file);
    }
    catch (Exception)
    {
        // getFileAsync or readTextAsync failed.
        // No cached response.
    }
}

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

Заключение

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

- Сухаил Халид (Suhail Khalid), руководитель программы II, Windows

Соавторы: Стивен Бейкер (Steven Baker) и Питер Смит (Peter Smith)

На прошлой неделе Стив Гагенхеймер (Steve Guggenheimer) объявил о проведении конференции //build/ 2013. Она состоится 26–28 июня 2013 года в Moscone Center в Сан-Франциско. Конференция //build/ предоставляет отличную возможность подробнее узнать о разработке приложений Магазина Windows. Программа конференции включает интересные презентации, демонстрации, информационные встречи и обсуждения, представляющие интерес для широкого круга разработчиков. Многие члены нашей рабочей группы технических специалистов прибудут в Сан-Франциско, чтобы принять участие в этих демонстрациях и ответить на ваши вопросы. Только здесь вы сможете получить новейшую и самую достоверную информацию о разработке приложений Магазина Windows.

Регистрация начинается сегодня, во вторник 2 апреля. Ознакомиться с более подробной информацией и зарегистрироваться для участия в конференции вы можете на сайте www.buildwindows.com.

До встречи на конференции!