Как я и обещал, сегодня я расскажу вам больше о работе, проделанной нами после конференции //build/. В 1-ой части этой статьи я описал интеграцию DirectX и XAML, улучшения конструкторов Blend, независимые анимации CSS и многое другое. Но я уверен, что вам не терпится узнать и о других новинках, поэтому перейдем сразу к делу.

Иконки и всплывающие уведомления

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

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

    // update the tile with a poll URL
    var polledUri = new Windows.Foundation.Uri("http://www.fabrikam.com/tile.xml");
    var recurrence = Windows.UI.Notifications.PeriodicUpdateRecurrence.halfHour;
    var tileUpdater = Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication();
    tileUpdater.startPeriodicUpdate(polledUri, recurrence);

    Содержимое, возвращаемое вашей веб-службой, должно соответствовать XML-схеме иконок. Учтите, что изображения иконок также можно обновить с помощью опроса.

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

  2. Мы облегчили процесс создания красивого содержимого иконок и всплывающих уведомлений. Другая часть полученных нами отзывов касалась того, что работа с XML с помощью API-интерфейсов уведомлений была неоправданно сложной. Чтобы упростить работу с иконками и всплывающими уведомлениями, мы ввели объектную модель шаблона уведомления — библиотеку, которая поставляется вместе с Windows SDK. Эта библиотека позволяет добавить конструкторы (и IntelliSense) для шаблонов уведомлений иконок и всплывающих уведомлений. Вот простой пример на JavaScript:

    // create the wide template
    var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWideText03();
    tileContent.textHeadingWrap.text = "Hello world! My very own tile notification";

    // create the square template and attach it to the wide template
    var squareTileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquareText04();
    squareTileContent.textBodyWrap.text = "Hello world!";
    tileContent.squareContent = squareTileContent;

    // send the notification
    Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileContent.createNotification());


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

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

  3. Мы обновили каталог доступных шаблонов иконок и добавили возможность обновления как широких, так и квадратных представлений иконки. Теперь вы можете обновлять уменьшенные и более крупные представления иконки, используя текст и изображения. В показанном примере демонстрируется использование одного из новых шаблонов иконки (TileSquareText04). С полным списком доступных шаблонов можно ознакомиться в статье Выбор шаблона иконки.

Средства JavaScript

Со времени проведения конференции //build/ мы получили много отзывов разработчиков, касающихся создания приложений в стиле Metro с помощью JavaScript. Для платформы Windows 8 JavaScript является очень важным компонентом, и наша цель — гарантировать, что он также станет важной частью и наших средств. Используя выпуск Consumer Preview, при создании приложения в стиле Metro с помощью HTML, CSS и JavaScript вы заметите множество улучшений в Visual Studio и библиотеке Windows для JavaScript (WinJS). Например, шаблоны для приложений в стиле Metro на основе JavaScript более читабельны и используют новые API.

Кроме того, мы улучшили производительность и точность JavaScript IntelliSense в VS:

  • Улучшены результаты списков завершения, определения Goto и параметров.
  • Улучшена точность IntelliSense за счет более полного представления модели DOM, что позволяет вам получить завершение операторов на основе DOM.
  • Редактор JavaScript теперь поддерживает интеллектуальный стиль отступов с более удобным выбором расположения курсора в новых строках на основе контекста.
  • Наконец, мы улучшили расширяемость JavaScript IntelliSense в VS, упростив дополнение IntelliSense для любой библиотеки JavaScript, такой как jQuery.

Мы также значительно улучшили средства диагностики и отладки JavaScript:

  • С помощью окна стилей в проводнике DOM вы можете копировать и добавлять новые правила и свойства правил, чтобы проверить, как изменения стилей влияют на работающие приложения. Вы также можете привязать исходный CSS-файл непосредственно из правила.
  • Кроме того, в проводнике DOM есть новая вкладка («События»), позволяющая находить расположение источника обработчиков событий, связанных с элементами DOM.
  • VS теперь визуализирует области, прототипы, группы функций и исключения в контрольных значения и локальных окнах.
  • Добавлена поддержка первых экземпляров исключений для JavaScript.

Привязка данных в C++

В мире связанных приложений привязка данных очень важна. Мы получили много отзывов с просьбой упростить этот процесс в C++. Для ее реализации ранее вам приходилось писать множество интерфейсов, что приводило к получению большого объема стандартного кода для C++ и XAML. В версии Consumer Preview мы решили эту проблему, теперь вам нужно просто добавить атрибут [Windows::UI::Xaml::Data::Bindable] в класс, к которому требуется привязать данные. XAML выглядит при этом точно так же. Вот пример, демонстрирующий изменения:

Заголовок C++

namespace SimpleBlogReader
{
//To be bindable, a class must be defined within a namespace.
[Windows::UI::Xaml::Data::Bindable]
public ref class FeedItem sealed
{
public:
FeedItem(void){}
~FeedItem(void){}
property Platform::String^ Title;
property Platform::String^ Author;
property Platform::String^ Content;
property Windows::Foundation::DateTime PubDate;
};
}

XAML

<TextBlock x:Name="TitleText" Text="{Binding Path=Title}" 
VerticalAlignment="Center" FontSize="48" Margin="56,0,0,0"/>

    

Элементы управления HTML и JavaScript

В версии Consumer Preview мы упростили популярные элементы управления, которые используют почти все приложения. Они являются базовыми для приложений в стиле Metro. Эти элементы управления обеспечивают согласованность вашего приложения с остальной системой и позволяют пользователям легко переключаться между своими приложениями и Windows. ListView и AppBar для HTML и JS — это два элемента управления, в которые мы внесли значительную часть улучшений.

Элемент управления ListView

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

  1. Мы создали простой и мощный источник данных Binding.List специально для данных, хранимых в памяти.

    Binding.List предоставляет доступ к API, который почти полностью отражает объект Array JavaScript за исключением того, что вам нужно вызывать методы getAt и setAt для чтения и записи элементов, так как JavaScript не поддерживает переопределение операторов. Binding.List значительно упрощает работу с данными, хранимыми в памяти, например:    
    var data = [10, 20, 12, 7];
    var ds = new WinJS.Binding.List(data);
    ds.push(3);
    ds.splice(2, 1);

    var sorted = ds.createSorted(function (a, b) { return (a - b) });
    ds.push("1");
    console.log("original: " + ds.join(",") + "; sorted: " + sorted.join(","));


    Это дает следующий результат: “original: 10,20,7,3,1; sorted: 1,3,7,10,20

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

Элемент управления AppBar

После конференции //build/ мы получили много отзывов о том, что с элементами управления AppBar очень трудно работать. Итак, мы учли ваше мнение и переосмыслили AppBar для HTML, чтобы упростить его применение. В результате мы получили более простой процесс разработки. Взгляните на этот пример кода, и вы поймете, о чем я говорю:

<div class="win-left">
<button onclick="doClickPlay" class="win-command" role=’MenuItem>
<span class="win-commandicon win-large">&#xE112;</span>
<span class="win-label">Play</span>
</button>
</div>
<div class="win-right">
<button onclick="doClickAdd" class="win-command" role=’MenuItem>
<span class="win-commandicon win-large">&#xE112;</span>
<span class="win-label">Add</span>
</button>
</div>

         

Кнопки AppBar HTML в выпуске Consumer Preview:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
play',label:'Play',icon:'play',onclick:doClickPlay,section:'selection',tooltip: 'Play'}"
>
/button>

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
id:'add',label:'Add',icon:'add',onclick:doClickAdd,tooltip: 'Add'}"
>
/button>

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

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

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

На конференции //build/ мы продемонстрировали возможность создания гибридных приложений в стиле Metro с помощью сочетания различных языков, в том числе JavaScript, C++, C# и Visual Basic. В этом выпуске эти приложения можно создавать непосредственно в Visual Studio. Например, можно написать приложение на JavaScript, которое взаимодействует с библиотекой классов C#, или приложение на C#, использующее компонент на C++. Таким образом можно воспользоваться уникальными преимуществами каждого языка, повторно использовать существующие активы, а разработчики с разными навыками могут работать над одним проектом.

JavaScript

var customers = new CSClassLib.CustomerRepository();
var filtered = customers.getCustomersByState("WA");

C#

public IEnumerable<Customer> GetCustomersByState(string state)
{
return from c in this.Customers
where c.State == state
select c;
}

Если вы разработчик приложений на C++, вы заметите самые значительные улучшения, в частности касающиеся DirectX и XAML. DirectX прекрасно подходит для прямой обработки пикселей, а язык XAML идеально подходит для реализации элементов взаимодействия с пользователями, например меню и предупредительных сообщений. Как я уже описывал в 1-ой части этой статьи, приложения XAML теперь могут использовать DX. Эта возможность была бы неполной без первоклассной поддержки необходимых инструментов. В ответ на ваши отзывы бета-версия Visual Studio теперь поддерживает взаимодействие C++, XAML и DirectX.

Итоги

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

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

Чтобы усовершенствовать нашу документацию, мы:

  • завершили справочный раздел по среде выполнения Windows (у всех API теперь есть описание);
  • добавили более 30 примеров на нескольких поддерживаемых языках;
  • улучшили документацию примеров;
  • увеличили число страниц WinRT с фрагментами кода;
  • значительно улучшили руководство по UX, в том числе добавили предельные значения, каркасные фреймы и другие постоянно используемые активы для разработки;
  • улучшили навигацию и повысили релевантность результатов поиска;
  • добавили новый элемент боковой панели со ссылками на основные API и сводным описанием соответствующих разделов;
  • сделали краткие руководства более полезными на всех поддерживаемых языках.

Более подробно ознакомиться с новыми возможностями средств разработки можно в записи блога Джейсона Зандера (Jason Zander). Также для написания приложений в стиле Metro доступен ряд новых языковых возможностей в C# и Visual Basic.

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

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

Эта статья была создана благодаря совместным усилиям Кевина Вули (Kevin Woley), Джонатана Анеджи (Jonathan Aneja), Джонатана Гарригеса (Jonathan Garrigues), Джона Горднера (Jon Gordner), Райана Демопулоса (Ryan Demopoulos), Кита Бойда (Keith Boyd) и Иэна Легроу (Ian LeGrow).