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

За время, прошедшее с момента проведения //build/, мы существенно улучшили средства Visual Studio, параллельно работая над операционной системой Windows. Кроме того, были внесены улучшения в разработку Metro-приложений и в другие сценарии. Здесь я расскажу о разработке Metro-приложений, но если вас интересуют другие компоненты Visual Studio, рекомендую обратиться к блогу Джейсона Зандера (Jason Zander).

Мы знаем, что все это время вы тоже не сидели сложа руки. Вы открыли более 5000 разных бесед на форумах MSDN Developer Preview и опубликовали почти 30 000 сообщений. Судя по нашим средствам телеметрии, вы также использовали Visual Studio, чтобы опробовать нашу платформу для разработки. С сентября вы создали тысячи пакетов приложений.

Вот здесь мы и подходим к теме данной статьи. Какие изменения вы ожидаете увидеть, когда начинаете создавать приложения на базе Consumer Preview? Для нас одной из главных задач в Consumer Preview было сделать платформу Windows еще удобнее для вас — для разработчиков. Мы упростили использование API и создание стандартных элементов управления пользовательского интерфейса в стиле Metro. Мы улучшили средства, чтобы вы могли работать эффективнее и создавать быстрые и гибкие приложения. Мы также разработали совершенно новые компоненты, чтобы вы могли полнее использовать богатство функций в Windows и эффективность работы оборудования.

В этой статье, состоящей из двух частей, я расскажу о той важной работе, которую мы проделали для улучшения платформы и средств в Consumer Preview. Стремясь улучшить ваш опыт разработки Metro-приложений, мы добавили несколько новых возможностей и усовершенствовали существующие компоненты. Мы думаем, что вам понравятся все эти изменения.

Поддержка DX в языке XAML

«Нам нужна очень быстрая прорисовка с помощью DirectX… Мы также хотим применять пользовательский интерфейс в стиле Metro, то есть нам не хочется с нуля создавать целый пользовательский интерфейс в DirectX».
– Разработчик Metro-приложений

Эта тема регулярно поднимается с самого выпуска Developer Preview. Другие разработчики, как и вы, хотели объединить высокопроизводительные возможности мгновенной прорисовки из DirectX с высоким уровнем интерактивности, управляемостью и взаимодействием во время разработки в XAML.

Мы услышали ваши просьбы. В Consumer Preview вы можете легко интегрировать XAML и DirectX 11 в одном Metro-приложении для реализации быстрого и гибкого взаимодействия. Например, теперь вы можете разрабатывать игру DirectX и использовать язык XAML для обработки ввода данных, создания графики для экранов и меню или привязки к модели данных приложения.

С этой целью мы добавили 3 новых типа XAML для поддержки обширного набора сценариев межпрограммного взаимодействия DirectX, каждый из которых имеет индивидуальные возможности:

  • SurfaceImageSource разрешает полное внедрение содержимого DirectX в приложение XAML. Это позволяет прорисовывать содержимое DirectX в визуальном дереве XAML, что удобно для комплексных эффектов, применяемых к изображению, визуализации данных и других сценариев с мгновенной прорисовкой.
  • VirtualSurfaceImageSource используется для объемного виртуализированного содержимого. Этот тип ориентирован на приложения, требующие панорамирования и масштабирования объемного содержимого, такие как средства просмотра карт и документов.
  • SwapChainBackgroundPanel предназначен для полноэкранных сценариев, ориентированных на DirectX. Этот тип отлично подходит для игр и других полноэкранных приложений DirectX с малой задержкой, имеющих накладываемый слой XAML.

Все это действительно мощные инструменты — воспользуйтесь всеми графическими возможностями DX, объединенными с простотой XAML. Если вы разделяете наш восторг по поводу этих новых возможностей, взгляните на наш учебник по DirectX и XAML на сайте MSDN.

Кроме того, доступны образцы приложений:

Blend и разработчики Visual Studio

XAML

У нас есть и другие отличные новости. Бета-версия Visual Studio включает в себя не только Blend для HTML, но и предварительную версию Blend для XAML. Теперь Blend поддерживает разработку как в HTML, так и в XAML. Вам просто нужно выбрать требуемый тип проекта. Blend для XAML позволяет объединить поддержку анимации и создание визуального состояния в основу для разработки Metro-приложений.

Полноэкранное представление конструктора Blend для XAML, показывающее, как можно изменять свойства кнопки

Новый конструктор Blend для XAML, входящий в комплект средств Visual Studio

В Visual Studio конструктор XAML поддерживает редактирование шаблонов управления и данных, а также обеспечивает улучшенную поддержку для Metro-приложений, таких как SemanticZoom, GridView и AppBar.

Предварительный просмотр разметки XAML в Visual Studio.  Представление конструктора находится в основной области просмотра, а соответствующая разметка XAML — в расположенной ниже области.

Воспользуйтесь преимуществами работы с конструктором XAML прямо в Visual Studio

HTML

В Blend для HTML было внесено множество улучшений для построения приложений HTML.

Элемент управления HTML ListView в конструкторе Blend для HTML. Элемент пользовательского интерфейса ListView в основной области просмотра. Разметки CSS и HTML, использованные для создания и стилизации элемента управления, приведены ниже в отдельных областях.

Воспользуйтесь преимуществами расширенных возможностей конструктора Blend для HTML

Среди прочего мы расширили возможности редактирования для элементов управления Metro-приложений. Например, стало возможным интерактивное редактирование шаблонов данных для ListView. Кроме того, теперь HTML-фрагменты можно редактировать прямо на той странице, где они используются, при этом они могут иметь любой необходимый уровень вложения. Также множество улучшений производительности внесено в инспектор свойств CSS и панель атрибутов HTML, включая выделение значений, переопределенных JavaScript.

Загрузите Visual Studio, включите конструкторы и сами опробуйте некоторые из этих усовершенствований.

Навигация по библиотеке Windows для JavaScript

Еще одной областью, которой было уделено особое внимание, является библиотека Windows для JavaScript (WinJS), где (кроме множества других улучшений) мы упростили модель навигации. Шаблоны Visual Studio, представленные на конференции //build/, явным образом вызывали API-интерфейсы WinJS.UI.Fragments для динамической загрузки новых блоков (фрагментов) HTML в модель DOM во время выполнения. Однако загрузчик фрагментов — это API очень низкого уровня, поэтому для реализации заданного сценария шаблоны должны были также содержать значительный объем достаточно сложного стандартного кода.

Если вы пробовали использовать код, созданный в шаблонах Developer Preview, вы знаете, что он может быть довольно запутанным.

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

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

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

  • Четко определенный жизненный цикл создания
  • Четко определенная область для ваших данных
  • Автоматическая активация элементов управления WinJS в нужное время
  • Автоматические родительские отношения содержимого с моделью DOM
  • API, который проще воспринимать и использовать

В рамках реализации данного компонента шаблоны проектов Visual Studio также создают новый файл navigator.js, который инкапсулирует всю высокоуровневую навигацию для вашего приложения. Он создан как пользовательский элемент управления WinJS, названный PageControlNavigator. Код навигации в этом файле гораздо проще кода, использованного в шаблонах Developer Preview.

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

Поддержка DRM

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

С помощью выпуска Silverlight корпорация Майкрософт сделала весь этот процесс гораздо проще и рациональнее. В Windows 8 мы вводим эту упрощенную модель для Metro-приложений. Если у вас уже есть служба лицензий, которая может предоставлять лицензии PlayReady, вы можете добавить поддержку для PlayReady DRM в приложение гораздо быстрее, чем раньше, и с минимальным объемом служебных данных. Вы также можете включить эту поддержку, используя HTML или XAML и C++, C# и JavaScript. Создание полнофункционального взаимодействия с защищенным содержимым Windows еще никогда не было настолько простым.

Чтобы помочь вам в этом, мы представили в Consumer Preview новую поверхность API Metro PlayReady. Вы можете использовать эти API для быстрой реализации поддержки воспроизведения DRM PlayReady в приложении. Благодаря этому вы можете сосредоточить усилия на создании других полезных возможностей и среды взаимодействия с пользователем, которые понравятся вашим клиентам. Для Metro-приложений предоставляется бесплатный пакет SDK, кроме того, вам не нужно отправлять приложение в PlayReady для тестирования на соответствие требованиям DRM. Вы можете просто сконцентрироваться на создании удобных возможностей взаимодействия с пользователем.

Ниже приведен фрагмент кода с запросом на обслуживание индивидуализации (JS):

var indivSr = new Microsoft.Media.PlayReadyClient.PlayReadyIndividualizationServiceRequest();
indivSr.beginServiceRequest().then(indivSrOnComplete, indivSrOnError);

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

Независимые анимации

В Developer Preview мы предоставили вам доступ к набору разнообразных анимаций CSS, которые вы могли использовать для создания собственных привлекательных переходов в Metro-приложении, написанном на языке HTML/CSS/JS. В Consumer Preview мы добились кардинального улучшения этих анимаций благодаря отрисовке интерфейса в Internet Explorer с аппаратным ускорением. Основные анимации теперь могут выполняться независимо от потока пользовательского интерфейса и полностью обрабатываться графическим процессором. Мы называем их независимыми анимациями, и они предельно упрощают создание быстродействующих и гибких структур в стиле Metro.

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

Традиционный способ создания анимаций с помощью JavaScript подразумевает обработку в потоке пользовательского интерфейса. Вы просто меняете координаты объекта в модели DOM для его перерисовки. Хотя это относительно удобно, в данном случае блокируется поток пользовательского интерфейса и нагружается ЦП, ресурсы которого имеют высокую ценность. Вот как это выглядит:

<script type="text/javascript">
function doAnimation() {
foo.style.left = parseInt(foo.style.left) + 1 + 'px';
if (foo.style.left != '100px')
{ setTimeout(doMove, 20); }
}

function init() {
foo = document.getElementById('fooObject');
foo.style.left = '0px';
doAnimation();
}
</script>

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

<style>

.doAnimation{
-ms-transition-property: -ms-transform;
-ms-transition-duration: 2s;
-ms-transform: translateX(100px);
}
</style>

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

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

Усовершенствования процедуры отладки

Мы понимаем, насколько важно иметь первоклассную поддержку отладки для Metro-приложений, поэтому мы внесли несколько улучшений для упрощения этой задачи.

В отдельные объекты C++ внесены значительные улучшения, которые можно просмотреть в окнах контрольных значений. Вместо обычного просмотра COM-объекта вы можете развернуть его, чтобы открыть множество нужных свойств и полей. (Чтобы обеспечить удобство отладки для C++, загрузите отладочные символы с сервера символов Windows). В просмотр объектов Visual Basic и C# также внесены определенные улучшения.

Увеличенное представление окна контрольных значений для проекта C++ с примером COM-объекта, а также с развернутыми полями и свойствами из окна контрольных значений.

Просматривайте больше объектов в окнах контрольных значений

Мы также улучшили отладку для асинхронных методов в Visual Basic и C#. В частности, теперь отладчик считает исключения, вызываемые асинхронными void-методами, не обработанными пользовательским кодом, что позволяет отладчику прерывать асинхронный void-метод. Кроме того, теперь и в C++ при обнаружении исключения WinRT вы можете просматривать подробные сведения об ошибке, так же как и в Visual Basic, C# и JavaScript.

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

Увеличенное представление кнопок приостановки, возобновления и завершения в Visual Studio. Слева от кнопок расположен раскрывающийся список, в котором вы можете выбрать процесс для отправки сообщений.

Пользовательский интерфейс для активации событий времени жизни приложения

Со времени проведения конференции //build/ мы также добавили в «Имитатор» несколько компонентов, например:

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


Начальный экран Windows 8 в окне компонента «Имитатор» с узкой панелью кнопок, расположенной вдоль правой стороны.

Обновленный пользовательский интерфейс компонента «Имитатор» с более изящным оформлением

Впереди еще много интересного

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

-- Джейк Сабульски (Jake Sabulsky), руководитель программы, Windows

В работе над этой статьей участвовало несколько специалистов. Я выражаю благодарность следующим людям: Джесси Бишоп (Jesse Bishop), Джонатан Аньежа (Jonathan Aneja), Крис Таварес (Chris Tavares), Эрик Салерно (Eric Salerno), Анжелина Гамбо (Angelina Gambo) и Иен Легро (Ian LeGrow)