company_banner

Разработка Windows 8.1 приложений на XAML/С#. Часть 2. Работа с плитками

  • Tutorial
image

Продолжаем модернизировать приложение, которое мы создали в прошлой статье.

Сегодня мы разберем как создавать плитки (Tile) для Windows 8.1 приложений и каким образом можно реализовать динамическое изменение контента на них.

Плитки – это то, что вы видите, оказавшись на основном экране windows 8 или windows 8.1. Это не просто иконки. Они интерактивны. Могут содержать текстовую и графическую информацию о изменениях контента приложения, привлекать внимание пользователя и стимулировать использовать ваше приложение чаще.

image

Почему плитки – это так важно? Плитка – это дверь в ваше приложение, она должна нравиться пользователю и не раздражать его. Иначе он открепит её со стартового экрана и вскоре забудет про приложение.

Вы можете использовать следующие виды плиток для своих приложений:
  • Большая плитка (310 x 310 пикселей);
  • Средняя плитка (310 x 150 пикселей);
  • Средняя плитка (150 x 150 пикселей);
  • Маленькая плитка (30 x 30 пикселей).

Все они представлены на картинке ниже.

image

Готовые варианты плиток и размещения на них информации вы можете найти в каталоге шаблонов плиток.

Настройка плиток для приложения


Воспользуемся стандартными настройками для создания простых плиток.

1. Откройте приложение из прошлой статьи или создайте новое Windows 8.1 приложение в Visual Studio 2013.
2. Дважды щелкните на package.appxmanifest. Откроется окно редактора манифестов.
3. Укажите сведения о плитках:
  • Выберите закладку Visual Assets в редакторе манифестов.
  • Замените изображения по умолчанию на пути к вашим изображениям.
  • Укажите, отображать ли короткое имя приложения на плитке.
  • В зависимости от цвета фона, выберите светлый или темный шрифт текста названия.
  • Примите цвет фона по умолчанию или укажите собственную строку цвета.

image

4. Запустите приложение и поэкспериментируйте с плитками.

image

Как видите, плитки работают и отображают заготовленные картинки.

Теперь настало время добавить интерактивности и научиться динамически обновлять содержимое плитки.

Обновление информации на плитке


Существует несколько способов для того, чтобы реализовать обновление информации на плитке:
  • Локальное обновление – обновление плитки непосредственно во время работы самого приложения.
  • В заданное время – обновление плитки в указанное вами время.
  • Периодически – обновление плитки по расписанию, путем опроса внешних сервисов для получения нового содержимого.
  • Используя Push-уведомления – обновление плитки путем отправки уведомления из внешних сервисов или систем нашему приложению.

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

Теперь рассмотрим каждый из вариантов подробнее.

Локальное обновление плитки

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

1. Откройте приложение из прошлой статьи.
2. В Solution Explorer откройте файл HubPage.xaml и добавьте обработчик события Click для кнопки «Купить» и параметр с идентификатором заказываемого товара.

image

3. В файле HubPage.xaml.cs автоматически сгенерировался пустой обработчик события. Напишем туда следующий код:

private void Button_Click(object sender, RoutedEventArgs e)
        {
            string TileXmlString =   "<tile>"
                                   + "<visual version='2'>"
                                   + "<binding template='TileSquare150x150Text04' fallback='TileSquareText04'>"
                                   + "<text id='1'>{0}</text>"
                                   + "</binding>"
                                   + "<binding template='TileWide310x150Text03' fallback='TileWideText03'>"
                                   + "<text id='1'>{0}</text>"
                                   + "</binding>"
                                   + "<binding template='TileSquare310x310Text09'>"
                                   + "<text id='1'>{0}</text>"
                                   + "</binding>"
                                   + "</visual>"
                                   + "</tile>";

            var group = (SampleDataGroup)this.DefaultViewModel["Group1Items"];
            if (group != null && group.Items.Count > 0)
            {
                IEnumerable<SampleDataItem> dataItems = group.Items.Where(item => item.UniqueId == ((Button)sender).CommandParameter);
                if (dataItems != null && dataItems.Count() > 0)
                {
                    XmlDocument tileDOM = new XmlDocument();

                    tileDOM.LoadXml(string.Format(TileXmlString, "Ваш заказ: " + dataItems.FirstOrDefault().Title));

                    TileNotification tile = new TileNotification(tileDOM);

                    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
                }
            }
}


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

Класс TileNotification – создает объект сообщения для обновления плитки.

Непосредственно само обновление производится вызовом метода TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);

4. Теперь можно запустить приложение, нажать на кнопку «купить» и обнаружить на плитке информацию о выбранном товаре.

image

Обновление плитки в заданное время

Существует возможность изменять плитку не сразу, а через какое-то время.
Например, можно заставить её измениться через 3 часа после возникновения события. Для этого можно изменить обработчик события Button_Click добавив вместо последних строк следующий код:

Int16 dueTimeInHours = 3;
DateTime dueTime = DateTime.Now.AddHours(dueTimeInHours);
ScheduledTileNotification scheduledTile = new ScheduledTileNotification(tileXml, dueTime);
scheduledTile.Id = "Future_Tile";
TileUpdateManager.createTileUpdaterForApplication().AddToSchedule(scheduledTile);


Периодическое обновление плитки

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

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

Создание веб-сервиса:

1. Откройте Solution Explorer и в контекстном меню решения выберите Add New Project.
2. В качестве шаблона проекта выберите WCF Service Application и дайте ему название.

image

3. В результате создался проект веб-сервиса, содержащий интерфейс и непосредственно сам класс веб-сервиса.
4. Откройте файл Service1.cs и замените код интерфейса:
    [ServiceContract]
    public interface IService1
    {
        [WebGet(UriTemplate = "/Tile")]
        [OperationContract]
        XElement GetTile();
    }

5. Переименуйте файл Service1.svc в TileService.svc и замените его код:
    public class TileService : IService1
    {
        private const string TileXmlString = "<tile>"
                                  + "<visual version='2'>"
                                  + "<binding template='TileSquare150x150Text04' fallback='TileSquareText04'>"
                                  + "<text id='1'>{0}</text>"
                                  + "</binding>"
                                  + "<binding template='TileWide310x150Text03' fallback='TileWideText03'>"
                                  + "<text id='1'>{0}</text>"
                                  + "</binding>"
                                  + "<binding template='TileSquare310x310Text09'>"
                                  + "<text id='1'>{0}</text>"
                                  + "</binding>"
                                  + "</visual>"
                                  + "</tile>";

        public XElement GetTile()
        {
            string xml = string.Format(TileXmlString, "Ваш заказ находится в обработке" );

            return XElement.Parse(xml);
        }
    }

Этим кодом мы формируем xml в понятном для плиток формате.

4. Запустите проект веб-сервиса и вызовите метод. Веб-сервис должен отрабатывать и возвращать xml.

Настройка вызов веб-сервиса в Windows приложении:

1. В Solution Explorer откройте Package.appxmanifest и укажите настройки обновления плитки:
  • Адрес веб-сервиса;
  • Интервал обращения к сервису.

image

2. Теперь можно запустить приложение, подождать 30 минут и увидеть произошедшие изменения на плитке.

image

Вызывать веб-сервис и обновлять плитки можно и программно.
Данный код создаёт или обновляет задачу периодического обновления плитки из веб-сервиса раз в пол часа:
var tileupdater = TileUpdateManager.CreateTileUpdaterForApplication();
tileupdater.StartPeriodicUpdate(new Uri("http://localhost:32298/TileService.svc/Tile"), PeriodicUpdateRecurrence.HalfHour);

Внимание: задача будет выполняться даже если убрать плитку с основного экрана. Скорее всего у вас возникнет необходимость снимать задачу обновления плитки по каким-то событиям, для этого необходимо выполнить следующий код:
var tileupdater = TileUpdateManager.CreateTileUpdaterForApplication();
 tileupdater.StopPeriodicUpdate();

Обновление плитки используя Push-уведомления

Push-уведомления – идеально подходят для обновления плитки в реальном времени. Например, заказ в магазине поменял статус или в социальной сети появилось новое сообщение.
Для Push-уведомления необходимо наличие внешнего сервиса, который будет управлять потоком уведомлений и доставлять их в клиентские приложения пользователей, используя Windows Push Notification Services (WNS).

Мы воспользуемся мобильными службами Windows Azure для создания и управления Push-уведомлениями. Вы можете воспользоваться бесплатным пробным месяцем использования Windows Azure.

Настраивать мобильную службу Windows Azure для Windows приложений можно не покидая Visual Studio:

1. Откройте Solution Explorer. В контекстном меню проекта выберите Add / Push Notification.

image

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

image

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

image

4. Обратите внимание, что произошло с проектом.
В проект был добавлен класс push.register.cs обеспечивающий взаимодействие с мобильной службой.

image

5. В файл App.xaml.cs, в событие запуска приложения, тоже было внесено изменение.
Там выполняется инициализация канала передачи Push-уведомлений.
public static Microsoft.WindowsAzure.MobileServices.MobileServiceClient nokiaproductsClient = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient(
        "https://nokiaproducts.azure-mobile.net/",
        "LKcaeBgDWQTEJFiifTiRzhZBdfIkLM35");
//…
protected override async void OnLaunched(LaunchActivatedEventArgs e)
{
//…
  eShop.nokiaproductsPush.UploadChannel();
//…
}

6. Теперь нам необходимо научить мобильную службу отправлять уведомления приложению.
7. Для этого идем в панель управления Windows Azure (https://manage.windowsazure.com/), далее Мобильные службы, выбрать мобильную службу, перейти на закладку Данные и выбрать доступный канал передачи данных.

image

8. На открывшейся странице нажать на закладку Скрипт.
9. Откроется JavaScript файл, в котором вы можете писать код и формировать уведомления.

image

10. Отредактируйте файл, заменив код на следующий:
function insert(item, user, request) {
    request.execute({
        success: function() {
            request.respond();
            sendNotifications();
        }
    });
function sendNotifications() {
    var channelsTable = tables.getTable('channels');
    channelsTable.read({
        success: function(devices) {
            devices.forEach(function(device) {                              
                push.wns.sendTileWideText04(device.channelUri, {
                    text1: 'Ваш заказ принят'
                }, {
                    success: function(pushResponse) {
                        console.log("Sent tile:", pushResponse);
                    }
                });
            });
        }
    });
}
}

11. Сохраните скрипт.

image

12. Вернитесь в Visual Studio и запустите приложение.

image

Плитка мгновенно изменится на то, что было указано в скрипте.

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

Скачать получившееся приложение можно на SkyDrive по ссылке: http://sdrv.ms/1gKm4IJ

Полезные материалы


Создание плиток
Каталог готовых шаблонов плиток
Выбор способа доставки уведомлений
Общие сведения о периодических уведомлениях
Общие сведения о push-уведомлениях
  • +21
  • 13,7k
  • 3
Microsoft
714,00
Microsoft — мировой лидер в области ПО и ИТ-услуг
Поделиться публикацией

Комментарии 3

    +1
    По-моему все эти плитки с динамическим контентом крайне неудобны, постоянно рябят в глазах и каждый раз приходится напрягаться при поиске нужного приложения. У себя сделал бы максимально статичную узнаваемую картинку, чтобы не парить пользователю мозг.
      +1
      Позволю с вами не до конца согласиться. Если плитки — центр вселенной (WinRT, WP), то пользователь будет подходить с умом к их расположению и тогда путаницы не будет. Как пример мой рабочий стол:
      1) Телефон, чатики/люди, сообщения, магазин, социальные сети — показывают в зависимости от размера либо число уведомлений, либо их текст.
      2) Батарейка, погода — показывают актуальную информацию крупно и красиво.
      3) Фотографии, Nokia Music, TVShow — показывают красивые и актуальные картинки.


      И никакого разрыва мозга.
      Но если же плитки не центр вселенной (WinPro) и за ними не ухаживать — получится не хилое месиво из пиксельного ужаса и эпилепсического ада.
      0
      Побольше бы таких статей, Майкрософт. А еще побольше бы статей про директ икс. А то тема интересная, а даже документация до сих пор не переведена на русский.
      Плитки — это хорошая идея, но к ней тоже надо подходить с умом.

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

      Самое читаемое