Что нового в Windows 8.1 для разработчиков приложений Windows Store

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

Больше способов вывода окон и плиток

До Windows 8.1 ваше приложение могло отображаться в одном из трех режимов: полноэкранном (альбомном или портретном), с заполнением (filled view) или прикрепленном (snapped view). Пользователи Surfaces и других устройств требовали большего контроля над управлением окнами, чтобы, например, иметь возможность видеть на экране более двух приложений одновременно. Поэтому группа Windows отреагировала на эти требования, добавив больше способов управления и организации окон и экрана. Это означает, что пользователи могут размещать окна бок о бок с равными размерами или в любых нужных пропорциях, а приложение может создавать несколько представлений, которые пользователи могут независимо масштабировать и позиционировать.

Ранее в приложениях Windows 8, написанных на JavaScript, вам пришлось бы использовать media-запросы CSS для управления тем, как располагается страница в зависимости от режима отображения (полноэкранного, заполненного или прикрепленного). В Windows 8.1 вам понадобятся media-запросы CSS только для учета размеров и ориентации экрана:

@media screen and (min-width: 500px) and (max-width: 1023px) {
 /* CSS-стили для изменения разметки на основе ширины окна */
}
@media (min-width: 1024px) {
 /* CSS-стили для изменения разметки на основе ширины окна */
}
@media screen and (orientation: portrait) {
 /* CSS-стили для изменения разметки на основе ориентации */
}

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

Плитки обычно приводят к переходу пользователя на начальную страницу приложения. Размещенные в меню Start активные плитки (live tiles) — отличная современная функция Windows и Windows Phone. Никакая другая платформа не имеет точно такой поддержки отображения всех ваших данных на информационной панели в реальном времени, как в Windows. Как разработчик вы можете расширить свои приложения для использования четыре разных размеров плиток: small (малый), medium (средний), wide (широкий) и large (крупный), как показано на рис. 1.

Рис. 1. Новые активные плитки в Windows

Манифест пакета в Visual Studio содержит вкладку Visual Assets, где вы можете настраивать размеры плиток и другие визуальные элементы, такие как экран-заставку.

Новые шаблоны проектов Visual Studio 2013 помогают создавать современные приложения

Как и следовало ожидать, с каждым выпуском Visual Studio поставляются новые шаблоны проектов. Новые шаблоны проектов приложения Windows Store на JavaScript (с применением Windows Library for JavaScript, или WinJS) включают шаблон Hub, а новые шаблоны проектов на XAML — Hub, Portable Class Library и Coded UI Test.

Новый шаблон проекта Hub как в WinJS, так и в XAML инкапсулирует популярный проектировочный подход, который я называю современным. Его разметка по умолчанию содержит пять тщательно продуманных разделов, чтобы вы могли варьировать визуальные представления данных своим пользователям. Разметка Hub упрощает пользователям поиск и закрепление того, что важно им. Проектирование современного UI подразумевает, что вы представляете данные иначе, чем в предыдущих, несовременных (традиционных) приложениях, уделяя основное внимание удобству использования. Проект Hub делает именно это.

Внутри папки pages проекта Hub находятся три папки: hub, item и section. Каждая из них содержит свои файлы .html, .js и .css. В XAML-проектах в корневой папке имеются эквивалентные страницы с именами HubPage.xaml, SectionPage.xaml и ItemPage.xaml. На рис. 2 показано, как выглядит проект Hub с одноименным элементом управления в период выполнения.

Рис. 2. Проект Hub в период выполнения

Как видите, проект и элемент управления Hub показывают панорамное представление аккуратно организованного контента. Это элегантный и современный дизайн.

Новые и обновленные HTML- и XAML-элементы управления для современного UI

Новые и более совершенные элементы управления во всех типах проектов стали проще в использовании. Они облегчают создание и публикацию современного приложения. В HTML и XAML расширены возможности элементов управления в связывании с данными и повышена скорость их работы. Введение в элементы управления для приложений Windows Store см. в моей статье «Mastering Controls and Settings in Windows Store Apps Built with JavaScript» в журнале «MSDN Magazine» по ссылке msdn.microsoft.com/magazine/dn296546.

Шаблон проекта Hub поставляется с элементом управления Hub; это новый элементы и в WinJS, и в XAML. Шаблон элемента управления Hub по умолчанию организует разметку UI в пять разделов, прокручиваемых в горизонтальном направлении, и все это на стартовой странице приложения. Главный раздел (hero section) — самая важная часть приложения, зачастую применяемая для представления основных новостей, рецептов, результатов спортивных соревнований, метеоданных или чего угодно другого. Кроме того, это первое, что видит пользователь после экрана-заставки. Следующие четыре раздела, предоставляемые разработчикам в качестве отправной точки, просто содержат элементы данных варьируемых размеров. Пользователи могут переходить к списку в разделе 3 или к его индивидуальным элементам в другом разделе. Конечно, элемент управления Hub обладает гибкостью и позволяет включать любое количество разделов с любым контентом. Он спроектирован так, чтобы легко обрабатывать самый разнородный контент из разных источников, а не строго однородный контент из одного источника.

Шаблон Grid опирается только на элемент управления ListView. Теперь новый элемент управления Hub содержит встроенный элемент управления ListView, поэтому навигация работает, как и ожидает пользователь, — происходит переход либо к списку, либо к индивидуальному элементу в зависимости от того, какой элемент выбирает пользователь.

Этот ListView значительно усовершенствован и поддерживает, в частности, операции перетаскивания (drag-and-drop). Кроме того, ListView позволяет переупорядочивать элементы. Просто установите его свойство itemsReorderable в true, и никакого кода вам не потребуется. ListView включает и несколько других улучшений, в том числе более удобное развертывание ячеек, более качественные специальные возможности и более эффективное управление памятью.

Хотя ListView обрел много новых и привлекательных возможностей, есть еще один элемент управления, о котором стоит упомянуть: Repeater. Несколько UI-элементов управления в Microsoft .NET Framework используют такие элементы. Например, существует ASP.NET-элемент управления Repeater. Как вы, вероятно, догадались, Repeater можно использовать для генерации списка элементов на основе набора данных с применением стилей. В WinJS это означает, что Repeater будет корректно выполнять визуализацию почти любого встроенного HTML- или WinJS-элемента управления. На рис. 3 показан пример Repeater. Обратите внимание на то, что он работает во многом аналогично ListView с тем исключением, что группы больше не требуются. Как видно в примере данных на рис. 3, JavaScript-код создает простой массив.

Рис. 3. HTML и JavaScrip, создающие простой элемент управления Repeater

<!—HTML -- >
<div id="listTemplate" data-win-control="WinJS.Binding.Template">
  <li data-win-bind="textContent: title"></li>
</div>
<ul data-win-control="WinJS.UI.Repeater"
  data-win-options="{data: RepeaterExample.basicList,
  template: select('#listTemplate')}">
</ul>
// JavaScript
(function () {
  "use strict";
  var basicList2 = new WinJS.Binding.List(
    [
      { title: "Item 1" },
      { title: "Item 2" },
      { title: "Item 3" },
      { title: "Item 4" }
    ]);
  WinJS.Namespace.define("RepeaterExample",
    {
      basicList: basicList2
    });
})();

NavBar — еще один элемент управления, который улучшает пользовательскую среду (UX), предоставляя удобные для пользователя меню и его элементы. В отличие от JavaScript-меню на популярных в былые времена веб-сайтах современные элементы меню крупные и оптимизированы под самые разнообразные устройства ввода. Все мы видели, как неопытный пользователь неумело тыкает мышкой в эти крошечные каскадные меню на веб-сайтах прошлого. Как часть принципов дизайна UI современных приложений NavBar отлично работает с сенсорным вводом, что является обязательной функцией для планшетов. Пользователь вызывает панель навигации, скользя пальцем с верхнего или нижнего края, используя комбинацию клавиш Windows+Z или щелкая правой кнопкой мыши. Если вы пользовались элементом управления AppBar, то элемент управления NavBar работает практически так же.

Те, кто хотят интегрировать современный веб-сайт с клиентскими приложениями, могут задействовать новый элемент управления WebView. Он позволяет представлять данные из Интернета гораздо проще и удобнее, чем это делалось в прошлых версиях WinJS, которые использовали iframe. WebView — HTML-элемент, выглядящий так:

<x-ms-webview id="webview" src="http://rachelappel.com"
  style="width: 400px; height: 400px;"></x-ms-webview>

Это отличается от стандартного способа создания WinJS-элементов управления, используя элемент <div> и задавая атрибут data-win-options. Элемент управления WebView действует как контейнер для хостинга внешнего контента. Он также создает «песочницу» (изолированную среду), поэтому использование HTML-элемента в данном случае лучше, чем типичного элемента управления. WebView не является элементом управления, который вы просто реализуете из других HTML-элементов, и его нужно поддерживать непосредственно в хост-приложении. Заметьте, что элемент <webview> предложен в качестве стандарта на рассмотрение World Wide Web Consortium (W3C).

До этого выпуска Windows в XAML не было паритета с HTML, когда дело касалось элементов управления. Однако теперь XAML дополнен следующими новыми элементами управления.

• AppBar:  Строка меню внизу экрана.
• CommandBar:  Индивидуальный элемент строки меню.
• DatePicker:  Набор из трех раскрывающихся списков для ввода даты пользователем.
• Flyout: Немодальное диалоговое окно или элемент управления «настройки» (settings control).
• Hub: Позволяет отображать панораму элементов разного размера в группе.
• Hyperlink: Гиперссылка для перехода по URI.
• MenuFlyout: Предопределенный Flyout, специально стилизованный так, чтобы выводить список элементов меню.
• SettingsFlyout: Flyout, который появляется с правой стороны экрана при жесте пролистывания или при взаимодействии. Используется для управления параметрами приложения.
• TimePicker: Элемент управления, позволяющий выбирать часы, минуты, секунды и другие компоненты времени. Часто дополняет DatePicker.

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

В Windows 8.1 расширен выбор при поиске

В Windows 8 введена концепция чудо-кнопки (charm) — ярлыка для прямого доступа к часто выполняемой операции. У пользователей есть свои привычки, и поиск как способ запуска приложений или нахождения информации весьма распространен. Поиск настолько важен, что является частью операционной системы Windows и теперь в ней появился элемент управления для поиска в дополнение к чудо-кнопкам. Когда ваше приложение располагает локальными данными, где пользователям нужна возможность поиска, применяйте элемент управления SearchBox, а когда требуется более широкий поиск или поиск в Интернете — элемент управления SearchPane (чудо-кнопка Search Windows появилась в Windows 8). Настроив контракт поиска в package.appmanifest на вкладке declarations, вы можете предоставлять своим пользователям сервисы поиска. Однако в приложении может присутствовать либо SearchBox, либо SearchPane, но не оба одновременно.

Добавить SearchBox не сложнее, чем применить атрибут data­win-control к WinJS.UI.SearchBox:

<div id="searchBoxId"
  data-win-control="WinJS.UI.SearchBox"
  data-win-options="{focusOnKeyboardInput: true}">
</div>

XAML хранит определение класса SearchBox в пространстве имен Windows.UI.Xaml.Controls, и декларативный синтаксис выглядит так:

<SearchBox x:Name="SearchBox"
  FocusOnKeyboardInput="True"
  QuerySubmitted="SearchBox_QuerySubmitted"
  Height="35" />

Microsoft рекомендует добавлять в приложения поддержку мгновенного поиска (instant search). Его суть в том, что пользователи просто набирают символы текста и тем самым активизируют и запускают запрос поиска. Перейдите на экран Start в Windows 8 и начните набирать какой-нибудь текст. Вы заметите, что SearchPane мгновенно инициирует запрос поиска на устройстве, а также в Интернете. Конечно, вы можете эмулировать это поведение в своих приложениях, как это делается в предыдущих примерах кода, задавая HTML-атрибут data-win-option для focusOnKeyboardInput или устанавливая значение XAML FocusOnKeyboardInput в true.

Используйте Contact API и Calendar API, чтобы постоянно оставаться на связи

С появлением Windows 8.1 вы получили удобные API для взаимодействия с контактами и календарем пользователя, если он разрешит это. Contacts API позволяет приложению-источнику (source app) запрашивать хранилище данных по адресу электронной почты или номеру телефона и предоставлять пользователю релевантную информацию. Calendar API дает возможность добавлять, заменять, удалять или выполнять другие операции с назначенными встречами (appointments) и показывать пользователю приложение-провайдер по умолчанию (например, встроенное приложение-календарь или Outlook) на экране рядом с вашим приложением в период выполнения. Это означает, что ваше приложение может бесшовно интегрироваться со встроенными приложениями.

В Contact API в Windows 8.1 для представления контакта используется класс Windows.ApplicationModel.Contacts.Contact, а прежний класс ContactInformation, применявшийся в Windows 8, считается устаревшим. К счастью, в документации на API каждый член устаревших пространств имен четко помечается сообщением: «<member name> may be altered or unavailable for releases after Windows 8.1» (<имя_члена> может быть изменено или оказаться недоступным в выпусках после Windows 8.1), так что вы сможете легко избежать их использования. На рис. 4 показано, насколько легко получать адрес электронной почты или телефонный номер и показывать пользователю соответствующую карточку контакта из хранилища данных. Добавив еще немного кода, вы могли бы сохранять или показывать этот контакт в другой части приложения.

Рис. 4. Отображение карточки контакта

<label for="emailAddressInput">Email Address</label>
<input id="emailAddressInput" type="text"/>
<label for="phoneNumberInput">Phone Number</label>
<input id="phoneNumberInput" type="text" />
<button id="addToContactsButton" onclick=
  "addContactWithDetails()">Add to Contacts</button>
function showContactWithDetails() {
  var ContactsAPI = Windows.ApplicationModel.Contacts;
  var contact = new ContactsAPI.Contact();
  var email = new ContactsAPI.ContactEmail();
  email.address = document.querySelector("#emailAddressInput");
  contact.emails.append(email);
  var phone = new ContactsAPI.ContactPhone();
  phone.number = document.querySelector("#phoneNumberInput");
  contact.phones.append(phone);
  ContactsAPI.ContactManager.showContactCard(
    contact, {x:120, y:120, width:250, height:250},
    Windows.UI.Popups.Placement.default);
}

Как видите, Contacts API прост в использовании, но обеспечивает глубокую интеграцию с Windows. Calendar API весьма похож. Вы создаете в своем коде экземпляры объектов встреч и назначаете значения свойствам, которые представляют детали этих встреч (например, дату и время), а затем сохраняете их. После этого ваше приложение в полной мере поддерживает контакты и календари.

Новые API поддержки сетей и защиты

Ни одно системное обновление не было бы полным без улучшений в поддержке сетей и безопасности. Эта расширенная поддержка сетей позволяет вам делать через код больше, чем раньше, и в то же время обеспечивает безопасность. В Windows Runtime (WinRT) в пространстве имен Windows.Web.Http появились новые объекты и методы, которые эффективнее связывают с HTTP- и REST-сервисами, чем это было возможно при использовании предыдущих API, таких как WinJS.xhr и System.Net.HttpClient. В следующем коде показано, как подключиться к RESTful-сервису:

var uri = new Uri("http://example.com/data.svc");
var httpClient = new HttpClient();
httpClient.GetStringAsync(uri).done(function () {
 // Обработка JSON
}, error);
function error(reason) {
  WinJS.log && WinJS.log("Oops!");
}

Как и в случае любой другой библиотеки, в пространстве имен Windows.Web.Http есть члены, которые выполняют свои задачи асинхронно, а в случае JavaScript это означает использование функции done, запускаемой после возврата объекта обещания (promise). Однако, если вы хотите создавать актуальные приложения реального времени, то можете задействовать Windows.Web.Http для программ, выполняемых в фоне. Кроме того, заметьте, что Windows.Web.Http обеспечивает все виды других возможностей, например управление кешем и файлами cookie, выдачу других видов запросов и вставку фильтров в конвейер для выполнения любых интересующих вас операций, на описание которых в этой статье просто нет места.

Если вы обращаетесь к REST-сервисам, которые требуют удостоверений пользователя, то (как пользователь) можете теперь управлять ими как несколькими учетными записями в Settings. Также поддерживается аутентификация по отпечатку пальца с помощью Windows Fingerprint Authentication API.

Современные приложения работают со всеми устройствами

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

• Human Interface Devices (HID): Протокол, который способствует взаимодействию аппаратного и программного обеспечения, упрощая программирование.
• Point of Service (PoS): Независимый от конкретных поставщиков API для приложений Windows Store, позволяющий обращаться к таким устройствам, как сканеры штрих-кодов или средствам считывания магнитных полос.
• USB: Обеспечивает взаимодействие со стандартными USB-устройствами.
• Bluetooth: Обеспечивает взаимодействие со стандартными Bluetooth-устройствами.
• Трехмерная печать: Это расширения двухмерной печати в C++, которые служат основой поддержки трехмерных принтеров. Вы можете обращаться к подсистеме печати в Windows для отправки контента с трехмерным форматом на соответствующий принтер из приложения.
• Сканирование: Обеспечивает поддержку сканеров.

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

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

var audio = new Audio();
var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
var input = document.querySelector("#input");
synth.synthesizeTextToStreamAsync(input).then(function (markersStream) {
  var blob = MSApp.createBlobFromRandomAccessStream(
    markersStream.ContentType, markersStream);
  audio.src = URL.createObjectURL(blob, { oneTimeOnly: true });
  audio.play();
});

Кроме работы с простыми текстовыми данными, можно использовать W3C-стандарт Speech Synthesis Markup Language (SSML) для конструирования фраз и распознавания слов. Этот язык, основанный на XML, позволяет выполнять синтез ввода и вывода в более четко определенном стиле, что заметно сказывается на восприятии синтезируемой речи.

Новые средства упаковки приложений Windows Store

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

При развертывании приложения в Windows Store обратите внимание на некоторые изменения, в том числе на улучшенный UI на портале для разработчиков. Поскольку Bing теперь интегрирован в операционную систему, пользователям будет легче находить ваши приложения. Благодаря интеграции с Bing пользователи могут обнаруживать ваши приложения (или любой файл) через Windows Store, веб-сайт или с помощью поиска. Кроме того, устанавливаемые пользователями приложения теперь автоматически обновляются, если только пользователи не отключают автоматическое обновление.

В этой статье недостаточно места, чтобы перечислить все новые и улучшенные средства в Windows Runtime и Visual Studio. Настоятельно рекомендую изучить новшества в DirectX по ссылке bit.ly/1nOp0Ds. Помимо этого в журнале «MSDN Magazine» Чарльз Петцольд ведет рубрику по DirectX, так что можно ожидать больше подробностей о новых возможностях DirectX (bit.ly/1c37bLI). Наконец, всю необходимую информацию о том, чего можно ожидать от Windows 8.1, вы найдете в Windows 8.1 Feature Guide по ссылке bit.ly/1cBHgxu.