Быстрый старт

Стилизация в Blend

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

Закладки около верхнего левого угла окна программы дают вам доступ к файлам вашего проекта, к Активам (Assets), таким, как элементы управления, которые вы можете добавить в ваш пользовательский интерфейс, и средство просмотра для всех правил стилей (Style Rules), определенных в текущем окружении. В левой нижней части присутствует область Динамическая DOM (Live DOM), которая позволяет вам просматривать элементы в иерархии, и закладка Устройство (Device), которая позволяет вам задавать ориентацию, разрешение экрана и состояние просмотра. Щёлкая на элементе в области Динамическая DOM (Live DOM), вы выделяет его в монтажной панели, так же, как щелчок по элементу в монтажной панели, выделяет его в области Динамическая DOM (Live DOM).

В правой части вы видите то, с чем близко подружитесь: области Атрибуты HTML (HTML Attributes) и Свойства CSS (CSS Properties). Последняя отображает в верхней своей части все источники стилей, которые были применены к выделенному элементу и точное расположение этих стилей (вечная головная боль при работе с CSS). То, что выбрано в данной области. помните, определяет, куда будут записаны изменения, внесенные в панель свойств ниже, поэтому очень внимательно следите за тем, что именно вы выделяете.

Теперь, чтобы привести нашу исходную страницу к виду, напоминающему каркас приложения, нам нужно поработать с элементами и создать необходимые селекторы и стили. Для начала, я рекомендую создать сетку из одной ячейки (1х1) в теле (body) страницы, так как это улучшит отображение контента на монтажной панели Blend. Поэтому, добавьте display: -grid; -ms-grid-rows: 1fr; -ms-grid-columns: 1fr; в default.css для данного элемента.

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

Установите позицию вставки правила стиля в виде жёлто-оранжевой линии на закладке Правила стилей (Style Rules) в Blend. Это точно определяет, где именно будет создано новое правило.

Щёлкните правой кнопкой мыши по элементу, который вы хотите стилизовать в панели Динамическая (Live DOM) и выберите команду Создать правило стиля на основе ID элемента (Create Style Rule From Element Id) или команду Создать правило стиля на основе класса элемента (Create Style Rule From Element Class). Примечание. Если оба эти варианта не активны, перейдите на панель Атрибуты HTML (HTML Attributes) (в верхней правой части окна) и добавьте ID, класс, или и то и другое. В противном случае вам придётся вручную править таблицы стилей для управления стилями (особенно в случае с встроенными стилями), так что это избавит вас от сложностей в будущем. Данные действия приведут к созданию нового правила стиля в таблице стилей приложения (в default.css). В панели свойств CSS, в правой части экрана, найдите правило, которое было создано и добавьте необходимые свойства стиля в панель, которая расположена ниже.

Повторите эти действия для остальных элементов.

Так, для элемента div mainContent мы создаем правило из Id и настраиваем его, задавая display: -ms-grid;-ms-grid-columns: 1fr; и -ms-grid-rows: 128px 1fr 60px;. (Рис. 2.11) Эти действия позволят нам создать базовые вертикальные области каркаса приложения. Обычно, вам не захочется устанавливать правые или левые поля прямо в данной сетке, так как нижняя часть часто имеет горизонтально прокручиваемое содержимое, которое выступает за левый и правый края. В нашем случае, мы можем использовать одну сетку, но вместо этого мы добавим эти поля во вложенной сетке внутри элементов заголовка и раздела.

Показ работы над стилями, настройки различных уровней разметки и подходящих стилей для медиазапросов, соответствующих различным состояниям просмотра, лучше всего выглядит на видео. В частности, в файле Video 2-2 (оно находится среди дополнительных данных к курсу) вы можете увидеть этот процесс, начиная с создания проекта, настройки стилей для различных состояний просмотра, до переход в Visual Studio (для этого нужно щёлкнуть правой кнопкой проект в Blend и выбрать команду Изменить в Visual Studio (Edit In Visual Studio)) и запуска приложения в имитаторе для того, чтобы убедиться в том, что всё настроено верно. Кроме того, в видео вы можете оценить объем времени, который нужен для работы со стилями, если вам хорошо знакомы инструменты разработки.

В результате всех этих действий вид программа в имитаторе соответствует ранее разработанному каркасу, смотрите рисунки 2.12., 2.13., 2.14. - и все настройки стилей полностью включены в соответствующие медиа-запросы файла default.css. Гораздо важнее то, что Blend отображает нам результаты работы в реальном времени, тем самым сохраняя огромное количество времени в сравнении с тем, если бы нам нужно было, после правок, внесенных в CSS, каждый раз запускать приложение - уверен, вы знакомы с этим неприятным процессом! (И экономия времени даже больше с Интерактивным режимом; обратитесь к видеофайлу Video 4-1, который находится среди дополнительных материалов к лекции 4, "Элементы управления, их стилизация и привязка данных").

Добавление кода

Завершим реализацию приложения в Visual Studio. Щёлкните правой кнопкой по имени проекта на панели Проекты (Projects) в Blender и выберите команду Изменить в Visual Studio (Edit In Visual Studio), если вы этого еще не сделали. Обратите внимание на то, что если ваш проект уже загружен в Visual Studio, когда вы переходите в эту среду, вы (по умолчанию) увидите предложение перезагрузить измененные файлы. Ответьте утвердительноС другой стороны, обратите внимание на то, что Blend не сохраняет файлы автоматически при входе в Интерактивный режим (Interactive Mode) и выходе из него. Если вы сделали изменения в тех же самых файлах, открытых в Visual Studio, перешли в Blend и перезагрузили файлы, вы можете потерять изменения. В данный момент у нас есть макет приложения и стили для всех необходимых режимов просмотра, и мы можем не беспокоиться о коде, за исключением внесения в него небольших улучшений, о которых мы скоро поговорим.

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

На Рис. 2.15 показано, на что будет похоже приложение, когда мы завершим работу.

Создание карты с информацией о текущем местоположении

Для отображения карты мы используем веб-элемент управления карт Bing, экземпляр которого создан на странице map.html, которая загружена в элемент iframe главной страницы. Страница загружает скрипт элемента управления карт Bing из удалённого источника и исполняется в веб-контексте. Обратите внимание на то, что мы, кроме того, можем воспользоваться SDK для карт Bing (лекции 2 курса "Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript".

Таким образом, разместим файл map.html в папке html. Для этого щёлкните правой кнопкой мыши по проекту, выберите команду Добавить > Создать папку (Add > New Folder), введите для неё имя html. Затем щёлкните правой кнопкой по этой папке, выберите команду Добавить > Создать элемент (Add > New Item) и выберите HTML-страницу (HTML Page). Когда новая страница отобразится на экране, замените её содержимое на следующееОбратите внимание на то, что вы должны заменить значение параметра credentials в функции init на собственный ключ, полученный на https://www.bingmapsportal.com/ :

<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">
//Глобальные переменные
var map = null;

document.addEventListener("DOMContentLoaded", init);
window.addEventListener("message", processMessage);

//Функция для преобразования строки к синтаксису { functionName: ..., args: [...] }
//в вызове именованной функции с такими аргументами. Основана на стандартном
//диспетчере, который позволяет коду в iframe быть вызванным посредством
//postMessage. 
function processMessage(msg) {
//Проверяет данные и источник (в данном случае - страницу, работающую в локальном
//контексте)
if (!msg.data || msg.origin !== "ms-appx://" + document.location.host) {
return;
}

var call = JSON.parse(msg.data);

if (!call.functionName) {
throw "Message does not contain a valid function name.";
}

var target = this[call.functionName];

if (typeof target != 'function') {	
throw "The function name does not resolve to an actual function";
}	
	
return target.apply(this, call.args);	
}	


function notifyParent(event, args) {	
//Добавляет имя события к аргументам обекта и преобразует в строку в
//качестве сообщения.
args["event"] = event;	
window.parent.postMessage(JSON.stringify(args),	
"ms-appx://" + document.location.host);	
}	



//Создает карту (хотя пространство имен не может быть определено без возможности связи)
function init() {	
if (typeof Microsoft == "undefined") {	
return;	
}	

map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
//Замените эти учетные данные на свои, полученные на 
//http://msdn.microsoft.com/en-us/library/ff428642.aspx 
credentials: "...",
//zoom: 12,
mapTypeId: Microsoft.Maps.MapTypeId.road
});
}

function pinLocation(lat, long) {
if (map === null) {
throw "No map has been created";
}

var location = new Microsoft.Maps.Location(lat, long);
var pushpin = new Microsoft.Maps.Pushpin(location, { draggable: true });

Microsoft.Maps.Events.addHandler(pushpin, "dragend", function (e) {	
var location = e.entity.getLocation();	
notifyParent("locationChanged",	
{ latitude: location.latitude, longitude: location.longitude });
});	

map.entities.push(pushpin);	
map.setView({ center: location, zoom: 12, });
return;	
}	

function setZoom(zoom) {	
if (map === null) {	
throw "No map has been created";
}	

map.setView({ zoom: zoom });
}
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>

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

В верхней части страницы вы можете видеть ссылку на удалённый скрипт элемента управления карт Bing. Мы можем здесь ссылаться на удалённые скрипты, так как страница загружается в веб-контексте внутри элемента iframe (ms-appx-web:// в default.html). Затем вы можете видеть, как функция init вызывается DOMContentLoader и создаёт элемент управления карты. Далее, у нас есть еще пара методов, pinLocation и setZoom, которые, если понадобятся, могут быть вызваны из основного приложения.

Конечно, так как эта страница загружена в iframe в веб-контексте, мы не можем просто вызвать эти функции напрямую из кода нашего приложения. Вместо этого мы используем функцию HTML5 postMessage, которая вызывает событие message в iframe. Это важный момент: локальный и веб-контексты разделены, поэтому произвольный веб-контент не может управлять приложением или получать доступ к API WinRT. Эти два контекста разделены границей между приложением и веб'ом, которую может пересечь лишь postMessage.

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

Для того, чтобы посмотреть на то, как это работает, взглянем на то, как мы вызываем pinLocation из default.js. Для того, чтобы выполнить этот вызов, нам нужны некоторые координаты, которые мы можем получить из API для определения местоположения (Geolocation) WinRT. Мы делаем это в обработчике события onactivated, поэтому местоположение пользователя задаётся при старте приложения (и сохраняется в переменной lastPosition позже для организации общего доступа):

//Поместите это после строки: var activation = Windows.ApplicationModel.Activation;
var lastPosition = null;


//Поместите это после args.setPromise(WinJS.UI.processAll());
var gl = new Windows.Devices.Geolocation.Geolocator();

gl.getGeopositionAsync().done(function (position) {	
//Сохраним для общего доступа	
lastPosition = { latitude: position.coordinate.latitude,
longitude: position.coordinate.longitude };	

callFrameScript(document.frames["map"], "pinLocation", [position.coordinate.latitude, position.coordinate.longitude]);
});

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

//Поместите это перед app.start();	
function callFrameScript(frame, targetFunction, args) {	
var message = { functionName: targetFunction, args: args };	
frame.postMessage(JSON.stringify(message), "ms-appx-web://" + document.location.host);
	}

Некоторые замечания по этому коду. Для того чтобы получить координаты, вы можете использовать API WinRT для определения местоположения или API HTML5 для определения местоположения. Они почти одинаковые, с небольшими различиями, описанными в лекции 3 курса "Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript", "Ввод данных и сенсоры", во врезке: "Определение местоположения в HTML5". Это API присутствует в WinRT, так как другие поддерживаемые языки (C# и C++) не имеют доступ к API определения местоположения HTML5. Мы, в этом курсе, сосредоточены на API WinRT, поэтому мы просто используем функции в пространстве имен Windows.Devices.Geolocation.

Далее, в качестве второго параметра postMessage, вы можете видеть комбинацию из ms-appx[-web]:// и document.location.host. Это означает: "текущее приложение из локального [или веб] контекста", которое является подходящим источником сообщения. Обратите внимание на то, что мы используем то же самое значение для того, чтобы проверить источник сообщения при его получении: код в map.html проверяет, пришло ли сообщение из локального контекста приложения, тогда как код в default.js проверяет, что сообщение пришло из веб-контекста приложения. всегда будьте уверены в том, что соответствующим образом проверяете источники сообщения; посмотрите материал "Разработка безопасных приложений" (http://msdn.microsoft.com/library/windows/apps/hh849625.aspx).

Наконец, вызов getGeoPositionAsync содержит интересную конструкцию, где мы делаем вызов и используем внутри него цепочку из функции done, аргумент которой - еще одна функция. Это - весьма распространённый подход, который мы можем видеть, работая с API WinRT, для любого API, которому может потребоваться более 50 мс для завершения асинхронной операции. Подобное решение было принято так, что использование API ведет к созданию быстрых и динамичных приложений по умолчанию.

В JavaScript подобные API возвращают то, что называется promise-объектом, он представляет результаты, которые будут получены когда-нибудь в будущем. Каждый такой объект имеет метод done, первый аргумент которого - функция, которая будет вызвана по завершении операции, обработчик завершения (completed handler). В учебном курсе мы еще коснёмся данной темы, в частности, поговорим о функции then, которая похожа на done, но поддерживает дальнейшее объединение функций в цепочку (лекция 3) и о том, как promise-объекты в более общем виде используются в асинхронных операциях (лекция 5 курса "Программная логика приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript и их взаимодействие с системой").

Аргумент, который передается обработчику завершения содержит результат асинхронного вызова, в нашем случае это объект Маркер местоположения можно перемещать, однако сейчас это не окажет никакого влияния на наше приложение. Смотрите раздел "Исключительное доверие: Принимаем сообщения из iframe" ниже для того, чтобы узнать, как мы можем получить сведения об изменении местоположения с карты.

Еще одно, последнее, примечание по асинхронным API. Внутри API WinRT все асинхронные функции имеют "Async" в своих именах. Так как подобная практика не принята в среде JavaScript или DOM API, асинхронные функции внутри WinJS не используют данный суффикс. Другими словами, WinRT создана нейтральной по отношению к языкам программирования, а WinJS разработана с учетом языковых соглашений, характерных для JavaScript.

О, подождите, манифест!

Сейчас вы уже могли испытать тот код, который приведен выше, и столкнуться с исключением "Доступ запрещен" при попытке вызова getGeoPositionAsync. Почему это так? Исключение говорит о том, что мы не указали возможность Расположение (Location) в манифесте. Без включения этой возможности, вызов вроде этого, зависящий от возможности, вернет исключение.

Если вы запускаете пример в отладчике, это исключение покажет диалоговое окно. Если вы запускаете его вне отладчика - с плитки на Начальном экране - вы увидите, что приложение просто прекратило работать, не показав ничего, кроме экрана-заставки. Это - обычное поведение для необработанных исключений. Для того, чтобы предотвратить подобное поведение, добавим функцию для обработки ошибок в качестве второго параметра метода done асинхронного promise-объекта:

gl.getGeopositionAsync().done(function (position) {
//...	
}, function(error) {	
console.log("Unable to get location.");	
});

Функция console.log записывает строку в окно Консоли JavaScript (JavaScript Console) в Visual Studio, а это, очевидно, хорошая идея. Сейчас запустите приложение вне отладчика, и вы увидите, что оно запустилось, так как исключение теперь признано "обработанным". В отладчике установите точку останова на строку console.log и точка останова сработает после того, как появится исключение и вы нажмете Далее (Continue). (Пока это всё, что мы делаем с появляющимися ошибками; в лекции 1 курса "Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript" мы добавим более подходящее сообщение и команду повтора действия).

Если диалоговое окно исключения вам надоело, вы можете управлять тем, информацию о каких исключениях показывать во всплывающих окнах с помощью диалогового окна Отладка > Исключения (Debug > Exceptions), показанного на Рис. 2.16, в разделе Исключения JavaScript времени выполнения (JavaScript Runtime Exceptions). Если вы снимете флажки в колонке Необработанное пользовательским кодом (User-unhandled), вы не увидите диалоговое окно, когда происходит то или иное исключение.

Вернемся к возможностям: для того, чтобы это приложение правильно себя вело, откройте package.appmanifest вашего проекта, выберите закладку Возможности (Capabilities) и включите Расположение (Location), как показано на Рис. 2.17.

Теперь, даже если мы объявили возможность, геолокация всё еще требует разрешения пользователя, как было указано в лекции 1. При первом запуске приложения с установленной возможность вы увидите всплывающее окно, похожее на то, что изображено на Рис. 2.18. Если пользователь запретит доступ в этом окне, обработчик ошибки снова будет запущен, так как API снова выдаст исключение запрета доступа.

Врезка: как сбросить информацию о решении пользователя для целей тестирования?

При отладке вы можете заметить, что данное всплывающее окно появляется лишь однажды, даже при выполнении следующих отладочных сессий. Для того, чтобы очистить данное состояние, откройте средства чудо-кнопки Параметры (Settings) в выполняющемся приложении и выберите Разрешения (Permissions). Вы увидите переключатели для соответствующих возможностей. Если по каким-то причинам вы не можете запустить приложение, перейдите на Начальный экран и деинсталлируйте приложение, воспользовавшись его плиткой. После этого вы увидите запрос о разрешении при следующем запуске приложения.

Обратите внимание на то, что когда пользователь изменяет настройки разрешений, приложение никак не оповещается об этом. Приложение может обнаружить это изменение, лишь попытавшись использовать API снова. Мы вернемся к этому в лекции 2 курса "Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript".

Получение фотографии с камеры

Хоть это и необычно, я надеюсь, что идея добавить описание получений фотографий с камеры в раздел "быстрый старт", заставит вас сомневаться во вменяемости автора. Не потребуется ли для этого огромного количества кода? Да, так было, но в Windows 8 это не так. Все сложные особенности захвата данных с камеры отлично инкапсулированы внутри API Windows.Media.Capture, так что, в итоге, мы можем добавить в приложение эту возможность с помощью нескольких строк кода. Это хороший пример того, как небольшой динамичный код, наподобие JavaScript комбинируется с отлично спроектированными компонентами WinRT - и то и другое в системе, и тем и другим вы можете пользоваться - создавая мощный союз.

Для того, чтобы реализовать эту возможность, сначала нам нужно вспомнить, что камера, как и GPS-приёмник, относится к устройствам, от которых может пострадать приватность пользователя, поэтому возможность, связанную с ней, так же нужно объявлять в манифесте, Рис. 2.19.

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

Теперь нам нужно настроить элемент img для того, чтобы он мог реагировать на жест прикосновения. Для этого нам нужно просто добавить прослушиватель события click, который срабатывает для любых способов ввода (сенсорный интерфейс, мышь, перо), как мы увидим в лекции 3 курса "Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript".

var image = document.getElementById("photo");
image.addEventListener("click", capturePhoto.bind(image));

Здесь мы указываем capturePhoto в качестве обработчика события и используем функциональность объектного метода bind для того, чтобы объект this внутри capturePhoto был напрямую связан с элементом img. В результате, этот обработчик может быть использован для любого количества элементов, так как он не ссылается на DOM.

//Расположите это под var lastPosition = null;
var lastCapture = null;


//Расположите это после callFrameScript	
function capturePhoto() {	
//В соответствии с вызовом .bind() в addEventListener, "this" будет элементом image,
//но нам нужна копия для асинхронно завершившегося обработчика ниже.	
var that = this;	

var captureUI = new Windows.Media.Capture.CameraCaptureUI();

//Показывает, что мы хотим получить PNG-изображение не больше, чем целевой элемент -	
//пользовательский интерфейс автоматически обрежет изображение под этот размер	
captureUI.photoSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
captureUI.photoSettings.croppedSizeInPixels =	
{ width: this.clientWidth, height: this.clientHeight };	

captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo)
.done(function (capturedFile) {
//Убедитесь, что проверили, подходит ли вам возвращенный элемент: он может содержать null, если
//пользователь отменил действие.
if (capturedFile) {
lastCapture = capturedFile; //Сохраняем для целей Общего доступа (Share)
that.src = URL.createObjectURL(capturedFile, {oneTimeOnly: true});
}
}, function (error) {
console.log("Unable to invoke capture UI.");
});
}

Нам необходимо создать локальную копию this внутри обработчика click, так как, как только мы оказываемся внутри функции завершения асинхронного запроса (посмотрите функцию внутри captureFileAsync.done) мы оказываемся в новой области видимости и объект this изменяется. Принято такую копию this называть that. Берем это?

Для того чтобы запустить интерфейс камеры, нам лишь нужно создать экземпляр Windows.Media.Capture.CameraCaptureUI с ключевым словом new (обычный способ создания экземпляров динамических объектов WinRT), настроить его на желаемый формат и размер изображения (это одни из многих других возможных параметров, которые обсуждаются в лекции 4 курса "Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript") и вызвать captureFileAsync. Здесь будет произведена проверка манифеста, и, если необходимо, будет запрошено разрешение пользователя.

Это асинхронный вызов, поэтому мы используем .done в конце с обработчиком завершения, который в данном случае принимает объект Параметр {oneTimeOnly: true} показывает, что URI не подлежит повторному использованию и должен быть аннулирован с помощью URL.revokeObjectURL, когда он больше не используется, как в случае, когда мы заменяем img.src на новое изображение. Без использования данного подхода мы столкнёмся с утечкой памяти при отображении каждого нового изображения. Если ранее вы использовали URL.createObjectURL, вы увидите, что второй параметр теперь представляет собой неупорядоченный набор свойств (property bag), что объединяет его с наиболее свежими спецификациями W3C!

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

Делимся удовольствием!

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

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

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

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

Этот запрос приходит через событие Так как мы, когда приложение выполняется, постоянно прослушиваем событие datarequested и добавляем прослушиватель события лишь один раз, нам не нужно беспокоиться о том, чтобы удалять его, вызывая removeEventListener. Подробности смотрите в разделе "События WinRT и removeEventListener" в лекции 3. Для начала, нам лишь нужно установить соответствующий прослушиватель события, разместив нижеприведенный код в событии activated в файле default.js после установки прослушивателя для события click элемента img:

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

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

В данном событии обработчик принимает объект Windows.ApplicationModel.DataTransfer.DataRequest в параметрах события (e.request), которые хранятся в объекте DataPackage (e.request.data). Для того чтобы сделать данные доступными для целей общего доступа, вы заполняете пакет данных (data package) информацией в доступном вам формате. (Мы сохраняем данные в lastPosition и lastCapture.) В нашем случае, мы убеждаемся в том, что имеем фотографию и информацию о местоположении и заполняем свойства текста и изображения (если вы хотите получить карту от сервиса Bing для передачи её в другое приложение, посмотрите материал "Получение статической карты" (http://msdn.microsoft.com/library/ff701724.aspx):

//Поместите это после capturePhoto 
function provideData(e) {
var request = e.request;
var data = request.data;

if (!lastPosition || !lastCapture) {
//Нечего передавать, поэтому выходим
 return;
}

data.properties.title = "Here My Am!";

data.properties.description = "At ("	
+ lastPosition.latitude + ", " + lastPosition.longitude + ")";	
	
//Передавая изображение, добавляем миниатюру	
var streamReference =	
Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(lastCapture);
data.properties.thumbnail = streamReference;	
// Рекомендовано использовать и setBitmap и setStorageItems при передаче отдельного изображения
//так как целевое приложение может поддерживать лишь что-то одно.

//Поместим файл изображения в массив и передадим его setStorageItems data.setStorageItems([lastCapture]);

//Методу setBitmap требуется RandomAccessStream. data.setBitmap(streamReference);
}

Последняя часть этого кода представляет собой стандартную реализацию возможности по передаче изображения из файла (которое находится в lastCapture). Я взял большую часть этого кода из примера "Приложение-источник для общего доступа", (лекции 1 курса "Программная логика приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript и их взаимодействие с системой".

С этим последним дополнением, и с подходящим приложением-приемником (таким, как в примере "Приложение-цель для общего доступа", (http://code.msdn.microsoft.com/windowsapps/Sharing-Content-Target-App-e2689782), как показано на Рис. 2.22), сейчас мы получили весьма функциональное приложение, которое состоит из 35 строк HTML-кода, 125 строк CSS и 100 JavaScript-строк!

Исключительное доверие: Принимаем сообщения из iframe

Вот еще один фрагмент кода, который я включил в программу "Here My Am!" для того, чтобы завершить пример базового взаимодействия между приложением и iframe: возможность отправлять сообщения из iframe назад, в приложение. В нашем случае, мы хотим знать, когда изменилось положение маркера местоположения для того, чтобы обновить lastPosition.

Для начала, вот простая стандартная функция, которую я добавил в map.html для того, чтобы включить в неё подходящий вызов postMessage, направленный к приложению, из iframe:

function function notifyParent(event, args) {
Добавляем имя события к объекту, содержащему аргументы, и конвертируем в строку для формирования сообщения
args["event"] = event;	
window.parent.postMessage(JSON.stringify(args), "ms-appx://" + document.location.host);

Эта функция берет имя события, добавляет его к объекту, содержащему параметры, конвертирует всё это в строку и отправляет результат туда, откуда её вызвали.

Когда маркер перетащили, карта Bing генерирует событие dragend, к которому мы прикрепим обработчик и обработаем событие в функции setLocator сразу после того, как маркер был создан (так же в map.html):

var pushpin = new Microsoft.Maps.Pushpin(location, { draggable: true });

Microsoft.Maps.Events.addHandler(pushpin, "dragend", function (e) {	
var location = e.entity.getLocation();	
notifyParent("locationChanged",	
{ latitude: location.latitude, longitude: location.longitude });
});

Вернемся назад, в default.js (то есть - в приложение) и добавим прослушиватель для входящих messages (сообщений) внутрь app.onactivated:

window.addEventListener("message", processFrameEvent);

Обработчик processFrameEvent ищет в сообщении информацию о событии и поступает соответствующим образом:

function processFrameEvent (message) {	
//Проверяем данные и источник (в нашем случае это - страница из веб-контекста)	
if (!message.data || message.origin !== "ms-appx-web://" + document.location.host) {
return;	
}	

if (!message.data) {
return;
}

var eventObj = JSON.parse(message.data);

switch (eventObj.event) {	
case "locationChanged":	
lastPosition = { latitude: eventObj.latitude, longitude: eventObj.longitude };
break;	

default:
break;
}
};

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

Другие шаблоны

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

Приложение с фиксированным макетом (Fixed Layout Template)

"Проект приложения для Магазина Windows, которое масштабируется с использованием макета с фиксированными пропорциями" (Описание из Blend/Visual Studio).

Недавно мы видели приложение, которое подстраивается под изменения отображаемой области, изменяя свой макет. В "Here My Am!" мы использовали CSS-сетку с автоматически настраиваемыми областями (значения 1fr в строках и столбцах). Такой подход хорошо работает для приложений с содержимым, которое хорошо поддаётся масштабированию и для приложений, которые могут показывать дополнительный контент, такой, как заголовки новостей или результаты поиска, когда у них больше места.

Как мы увидим в лекции 6, другие виды приложений не обладают такой же гибкостью. Например, игры, где соотношение сторон игровой области должно оставаться постоянным. (Было бы несправедливо, если бы игроки, устройства которых имеют большие экраны, увидели бы большее пространство игрового мира!). Так, когда размер отображаемого пространства приложения изменяется - либо при изменении состояния просмотра, либо разрешения экрана - такое приложение скорее масштабирует своё окно, увеличив его или уменьшив, нежели будет настраивать свой макет.

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

<body>	
<div data-win-control="WinJS.UI.ViewBox">
<div class="fixedlayout">	
<p>Content goes here</p>	
</div>	
</div>	
</body>

В файле default.css вы можете видеть элемент body, которому задан стиль "резинового" блока CSS, центрированного на экране, и элемент fixedLayout, установленный на размер 1024х768 (минимальный размер окон полноэкранных альбомных приложений и приложений в режиме заполняющего просмотра). Размещая содержимое внутри дочернего элемента div, который принадлежит элементу ViewBox, вы можете быть уверены в том, что работаете с этими фиксированными размерностями. ViewBox автоматически настроит масштаб того, что находится внутри, и, при необходимости, добавит пустые пространства сверху и снизу или справа и слева для сохранения пропорций.

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

Приложение навигации (Navigation Template)

"Проект приложения для Магазина Windows, которое содержит предопределенные элементы управления для навигации" (Описание из Blend/Visual Studio).

Шаблон Приложение навигации построен на базе шаблона Пустое приложение путём добавления к нему системы навигации по страницам. Как было сказано в лекции 1, приложения для Магазина Windows, написанные на JavaScript, лучше реализовать в виде единственной HTML-страницы, выступающей в роли контейнера, в который динамически загружаются другие страницы. Это позволяет организовать плавные переходы (так же, как и анимации) между этими страницами и сохранить скриптовый контекст.

Этот шаблон, и другие оставшиеся, использует элемент управления Page Navigator, который облегчает загрузку (и отправку) страниц таким способом. Вам нужно лишь создать сравнительно простую структуру для описания каждой страницы и её поведения. Мы рассмотрим это в лекции 3.

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

Приложение таблицы (Grid Template)

"Трехстраничный проект приложения для Магазина Windows, которое осуществляет переходы между группами элементов, расположенных в сетке. Сведения о группах и элементах отображаются на выделенных страницах" (Описание из Blend/Visual Studio).

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

В дополнение к навигации, шаблон Приложение таблицы показывает пример управления коллекциями данных посредством класса WinJS.Binding.List. Эту тему мы подробно рассмотрим в лекции 5, "Коллекции и элементы управления для коллекций". Кроме того, он предоставляет структуру для создания панели приложения и показывает, как упростить поведение приложения в прикрепленном режиме.

Имя шаблона, кстати, получилось от особого табличного (сеточного) макета, который используется для отображения коллекций данных, а не от CSS-сетки (CSS grid).

Приложение с разделением (Split Template)

"Двухстраничный проект приложения для Магазина Windows, которое осуществляет переходы между группированными элементами. Первая страница позволяет выбрать группу, а вторая отображает список элементов вместе со сведениями о выбранном элементе" (Описание из Blend/Visual Studio).

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

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

Что мы только что изучили: