Продолжаем модернизировать приложение, которое мы создали в прошлой статье.
Сегодня мы разберем как создавать плитки (Tile) для Windows 8.1 приложений и каким образом можно реализовать динамическое изменение контента на них.
Плитки – это то, что вы видите, оказавшись на основном экране windows 8 или windows 8.1. Это не просто иконки. Они интерактивны. Могут содержать текстовую и графическую информацию о изменениях контента приложения, привлекать внимание пользователя и стимулировать использовать ваше приложение чаще.
Почему плитки – это так важно? Плитка – это дверь в ваше приложение, она должна нравиться пользователю и не раздражать его. Иначе он открепит её со стартового экрана и вскоре забудет про приложение.
Вы можете использовать следующие виды плиток для своих приложений:
- Большая плитка (310 x 310 пикселей);
- Средняя плитка (310 x 150 пикселей);
- Средняя плитка (150 x 150 пикселей);
- Маленькая плитка (30 x 30 пикселей).
Все они представлены на картинке ниже.
Готовые варианты плиток и размещения на них информации вы можете найти в каталоге шаблонов плиток.
Настройка плиток для приложения
Воспользуемся стандартными настройками для создания простых плиток.
1. Откройте приложение из прошлой статьи или создайте новое Windows 8.1 приложение в Visual Studio 2013.
2. Дважды щелкните на package.appxmanifest. Откроется окно редактора манифестов.
3. Укажите сведения о плитках:
- Выберите закладку Visual Assets в редакторе манифестов.
- Замените изображения по умолчанию на пути к вашим изображениям.
- Укажите, отображать ли короткое имя приложения на плитке.
- В зависимости от цвета фона, выберите светлый или темный шрифт текста названия.
- Примите цвет фона по умолчанию или укажите собственную строку цвета.
4. Запустите приложение и поэкспериментируйте с плитками.
Как видите, плитки работают и отображают заготовленные картинки.
Теперь настало время добавить интерактивности и научиться динамически обновлять содержимое плитки.
Обновление информации на плитке
Существует несколько способов для того, чтобы реализовать обновление информации на плитке:
- Локальное обновление – обновление плитки непосредственно во время работы самого приложения.
- В заданное время – обновление плитки в указанное вами время.
- Периодически – обновление плитки по расписанию, путем опроса внешних сервисов для получения нового содержимого.
- Используя Push-уведомления – обновление плитки путем отправки уведомления из внешних сервисов или систем нашему приложению.
В зависимости от задач и требований к вашему приложению, вы можете выбирать один из этих вариантов или сочетать их использование.
Теперь рассмотрим каждый из вариантов подробнее.
Локальное обновление плитки
Для реализации обновления плитки, непосредственно из приложения, мы добавим обработчик события по кнопке «Купить» в каталоге товаров. При нажатии на кнопку, плитка приложения будет обновляться информацией о выбранном товаре.
1. Откройте приложение из прошлой статьи.
2. В Solution Explorer откройте файл HubPage.xaml и добавьте обработчик события Click для кнопки «Купить» и параметр с идентификатором заказываемого товара.
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. Теперь можно запустить приложение, нажать на кнопку «купить» и обнаружить на плитке информацию о выбранном товаре.
Обновление плитки в заданное время
Существует возможность изменять плитку не сразу, а через какое-то время.
Например, можно заставить её измениться через 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 и дайте ему название.
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 и укажите настройки обновления плитки:
- Адрес веб-сервиса;
- Интервал обращения к сервису.
2. Теперь можно запустить приложение, подождать 30 минут и увидеть произошедшие изменения на плитке.
Вызывать веб-сервис и обновлять плитки можно и программно.
Данный код создаёт или обновляет задачу периодического обновления плитки из веб-сервиса раз в пол часа:
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.
2. Заполните открывшийся визард. В процессе, вам необходимо будет использовать существующую или создать новую учетную запись разработчика Windows Store.
3. По окончании прохождения визарда, в Windows Azure будет создана мобильная служба. К ней мы вернемся чуть позже.
4. Обратите внимание, что произошло с проектом.
В проект был добавлен класс push.register.cs обеспечивающий взаимодействие с мобильной службой.
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/), далее Мобильные службы, выбрать мобильную службу, перейти на закладку Данные и выбрать доступный канал передачи данных.
8. На открывшейся странице нажать на закладку Скрипт.
9. Откроется JavaScript файл, в котором вы можете писать код и формировать уведомления.
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. Сохраните скрипт.
12. Вернитесь в Visual Studio и запустите приложение.
Плитка мгновенно изменится на то, что было указано в скрипте.
Итак, мы научились реализовывать динамически обновляющиеся плитки для Windows приложений различными способами. В следующих статьях мы продолжим постигать разработку Windows 8.1 приложений на простых примерах.
Скачать получившееся приложение можно на SkyDrive по ссылке: http://sdrv.ms/1gKm4IJ
Полезные материалы
Создание плиток
Каталог готовых шаблонов плиток
Выбор способа доставки уведомлений
Общие сведения о периодических уведомлениях
Общие сведения о push-уведомлениях
Автор: MissUFO
