Інтеграція додатків в стилі Metro з платформою

При розробці додатків необхідно враховувати особливості середовища, в якій буде відбуватися взаємодія користувача з додатком і по можливості максимально інтегрувати свій продукт з платформою Це допоможе створити відчуття, що ваш продукт є невідємною частиною платформи, для якої ви його розробляєте

Створюючи програми для Windows 8, ми можемо використовувати різні повідомлення (Tile, Toast), інтеграцію з пошуком, ділитися інформацією зі своїми друзями через соціальні сервіси і зручно налаштовувати програми під свої потреби У цьому розділі ми розглянемо можливості інтеграції наших додатків з Windows 8

Плитка є невідємною частиною додатки в стилі Metro і дозволяє користувачам запускати додатки зі стартового екрана ОС За замовчуванням плитка – статичне зображення Але ми можемо додати йому динаміки, тим самим зацікавивши користувача, повідомляючи про зміни, коли додаток знаходиться в неактивному стані Динамічні плитки дозволяють Windows 8 здаватися «живою»

Для додатків ми можемо використовувати два режими відображення плиток (Мал 61) Користувач сам вибирає, який з них використовувати на стартовому екрані:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Стандартний – може містити бренд додатки – назву або логотип продукту, а також значок Через те, що даний режим відображення плитки може містити обмежений набір контенту, доступний тільки один шаблон для його створення

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Розширений – цей режим відображення плитки може містити ті ж дані, що і стандартний режим, а також ще більш деталізований опис і візуально інтригуюче оформлення У цьому режимі існує широкий вибір шаблонів, які дозволять зробити контент більш привабливим При використанні цього режиму додаток обовязково повинно мати плитку стандартного розміру, щоб користувач міг у будь-який момент переключитися на компактну плитку

Рис 61

Вміст плитки визначається в документі XML, який вибирається з безлічі шаблонів Плитка може містити зображення і текст, в залежності від того, який шаблон був обраний, а також відображати значок, логотип або коротке імя додатка (Мал 62) Значок відображається в правому нижньому кутку плитки Коротке імя розташовується в лівому нижньому кутку У маніфесті додатки ми вибираємо, що хочемо відображати: коротке імя програми або його логотип

Рис 62

При налаштуванні плитки можна вказати можливість повторення до 5 останніх повідомлень Кожному повідомленню можна привласнювати ідентифікатор, за допомогою якого система буде вирішувати, чи необхідні оновлення або заміна одного з існуючих повідомлень на клієнті Якщо Windows знаходить повідомлення із таким же ідентифікатором, відбувається заміна Якщо такого ідентифікатора в черги немає, то з неї витісняється найбільш старе повідомлення

Коли додаток встановлюється в перший раз, на стартовому екрані відображається плитка програми за замовчуванням Це статична картинка визначена в маніфесті додатка зазвичай вона відображає логотип продукту Ця картинка замінюється лише в разі відправки відповідного повідомлення Фактично ми створюємо плитки при вказівці їх у маніфесті додатки Подальші його модифікації можливі тільки через повідомлення

Плитка додатку може повернутися в початковий стан, якщо відсутні повідомлення, які необхідно відобразити Це можливо, якщо користувач знаходиться в автономному режимі або закінчився термін дії сповіщень

Статичні плитки промальовувалися поверх встановленого кольору фону додатки в маніфесті Якщо плитка містить прозорі області, то в цих місцях буде відображатися встановлений фон

До плиткам програми за замовчуванням є кілька вимог:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp зображення повинно бути в форматі png або jpg

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp розмір стандартної плитки 150 x 150 пікселів

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp размеррасширеннойплитки310x150пикселей(являетсядополнительным)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp маленька версія стандартної плитки 30 х 30 пікселів Використовується на сторінці пошуку

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp розмір файлу до 150 KB

Для використання плиток необхідно додати їх до проекту і налаштувати маніфест проекту на їх використання (Мал 63)

Рис 63

Отже, ми вміємо налаштовувати статичні плитки для наших додатків Давайте подивимося, як можна додати плитках динаміки

Вище ми обговорювали можливі шаблони плиток У поточній версії Windows 8 у нас є на вибір 30 шаблонів Щоб вибрати один із заготовлених шаблонів, необхідно використовувати методGetTemplateContent   класу WindowsUINotificationsTileUpdateManager Нижче наведено приклад коду, що надсилає повідомлення «Tile Message» на розширену плитку нашого застосування (додаток повинен містити картинку розширеної плитки):

XmlDocument tileXml = TileUpdateManager

GetTemplateContent(TileTemplateTypeTileWideText04) XmlNodeList textElements = tileXmlGetElementsByTagName(&quottext&quot) textElementsItem(0)AppendChild(tileXmlCreateTextNode(&quotTile Message&quot)) TileNotification tile = new TileNotification(tileXml) TileUpdateManagerCreateTileUpdaterForApplication()Update(tile)

Параметр методу GetTemplateContent вказує на те, який шаблон ми хочемо використовувати Кожен шаблон представлений у вигляді розмітки xml Так, розмітка нашого шаблону наступна:

&lt?xml version=&quot10&quot encoding=&quotutf-16&quot?&gt&lttile&gt

&ltvisual lang=&quoten-US&quot&gt

&ltbinding template=&quotTileWideText04&quot&gt

&lttext id=&quot1&quot&gt&lt/text&gt

&lt/binding&gt

&lt/visual&gt

&lt/tile&gt

Після додавання необхідного повідомлення шаблон буде відображатиметься таким чином:

&lt?xml version=&quot10&quot encoding=&quotutf-16&quot?&gt&lttile&gt

&ltvisual lang=&quoten-US&quot&gt

&ltbinding template=&quotTileWideText04&quot&gt

&lttext id=&quot1&quot&gtTile Message&lt/text&gt

&lt/binding&gt

&lt/visual&gt

&lt/tile&gt

За допомогою останнього рядка коду з наведеного вище прикладу оновлюється плитка додатки

Обраний нами шаблон дозволяє відображати зазначене повідомлення на розширеній плитці додатки Повний список можливих шаблонів наведено на сторінці MSDN (http://msdnmicrosoftcom/en-us/library/windows/ apps/windowsuinotificationstiletemplatetypeaspx)

Розглянуті вище можливості по зміні плитки додатку можна виконувати як локально (вищенаведений приклад), так і з сервісу, який знаходиться в хмарі і повязаний з додатком Другий спосіб буде розглянуто далі в цьому розділі

Крім основної плитки додаток може мати додаткову Додаткова плитка дозволяє користувачеві створювати ще один інтерактивний елемент на стартовому екрані Windows 8, а також відкрити програму на сторінці, на якій була створена додаткова плитка Додаткову плитку можуть створювати тільки користувачі, сам додаток не може її створити При цьому користувачеві необхідно підтвердити, що він дійсно бажає створити додаткову плитку додатки Ця плитка дає можливість користувачеві швидко потрапити в часто використовувану частину програми Це може бути сторінка з часто оновлюваних контентом або сторінка, що знаходиться глибоко всередині програми Приклади використання додаткової плитки:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp швидкий перехід на сторінку важливого контакту в соціальних додатках

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp стрічка для програми RSS Reader

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp користувальницькі події в додатку Календар і тд

Ситуація, в якій користувачеві необхідно мати швидкий доступ до часто поновлюваному контенту або сторінці в глибині навігації програми, є чудовою можливістю для використання додаткової плитки Для застосування додаткової плитки добре підходять наступні сценарії:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp відображення останніх новин з RSS

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp дані про погоду

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp оновлення статусів друзів у соціальних мережах

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp журнал подій з календаря користувача

Будь часто змінюється контент нашого застосування може бути розміщений у додатковій плитці Вимоги до додаткової плитці додатки переважно збігаються з вимогами до основної:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp зображення розміром 150 х 150 пікселів

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp використання шаблонів плитки для визначення внутрішнього контенту

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp може містити розширений логотип розміром 310 х 150 пікселів

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp автоматичне видалення при видаленні програми

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp розміщення як на робочому столі, так і при перегляді списку всіх додатків

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp може відображати повідомлення і значки

Хоча в основної та додаткової плитки багато спільного, є і ряд відмінностей:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp додаткова плитка створюється користувачем під час виконання додатку

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp при додаванні плитки користувач повинен підтвердити дану дію

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp додаткову плитку користувач може видалити в будь-який момент без видалення програми

Для додавання плитки необхідно створити обєкт класуWindows

UIStartScreenSecondaryTile і вказати мінімальний набір даних:

var secondaryTile = new WindowsUIStartScreenSecondaryTile() secondaryTileTileId = &quot3gFDG34GFS456FER" secondaryTileShortName = &quot2nd Tile"

secondaryTileDisplayName = &quotSecondary Tile" secondaryTileArguments = &quotSome arguments"

secondaryTileLogo = new Uri(&quotms-resource:Assets/secondLogopng&quot) secondaryTileWideLogo = new Uri(&quotms-resource:Assets/secondWideLogopng&quot)

Для обєктаSecondaryTile  обовязково повинні бути ініціалізовані такі властивості:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp TileId  – Ідентифікатор плитки За допомогою цього значення можна надалі отримувати доступ до плитки і оновлювати її вміст Статичний метод FindAllAsync класу SecondaryTile дозволяє отримати доступ до плитки, а метод примірника UpdateAsync – Оновити його

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ShortName -Скорочене імя, яке відображається безпосередньо на плитці

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp DisplayName – Повна назва додатку, який відображається в підказці плитки, в списку всіх встановлених додатків і в панелі управління

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Arguments – Параметри, які передаються в додаток при запуску з додатковою плитки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Logo – Логотип програми для додаткової плитки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp WideLogo – Розширений логотип для додаткової плитки

Властивість WideLogo необхідно ініціалізувати, тільки якщо потрібно використовувати розширену додаткову плитку для нашого застосування Після ініціалізації всіх обовязкових даних необхідно викликати метод RequestCreateAsync екземпляра класу SecondaryTile:

secondaryTileRequestCreateAsync()

Цей метод може приймати обєкт типуPoint, Який вказує координати відображення діалогу (Мал 64) про підтвердження розміщення додаткової плитки додатки Можна також використовувати метод RequestCreateForSelectionAsync,  який дозволяє більш гнучко управляти місцем розташування і розмірами діалогу підтвердження

Рис 64

Крім обовязкових даних, які ми ініціалізували, є ряд параметрів для додаткової плитки:

secondaryTileBackgroundColor = &quotYellow" secondaryTileForegroundText = WindowsUIStartScreenForegroundTextDark secondaryTileTileOptions = WindowsUIStartScreenTileOptionsShowNameOnLogo secondaryTileSmallLogo = new Uri(&quotms-resource:Assets/secondSmallLogopng&quot)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp BackgroundColor – Фоновий колір додаткової плитки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ForegroundText – Колір тексту плитки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp TileOptions   – Отримання скороченого імені на додатковій плитці

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp SmallLogo – Логотип додаткової плитки розміром 30 x 30 пікселів

Кожна програма може мати кілька таких плиток При цьому необхідно памятати, що користувач вирішує – розміщувати додаткові плитки додатки чи ні У нас же залишається можливість вирішувати, які частини програми користувач може використовувати як додаткові плитки

Під час розробки функціоналу по додаванню додаткової плитки бажано дотримуватися ряду рекомендацій А саме, кнопку додавання / видалення плитки розміщувати у вбудованому меню програми і використовувати стандартні значки (Мал 65) для цієї кнопки Якщо користувач знаходиться на сторінці додатка, посилання на яку не може бути розміщена як додаткова плитка, кнопку додавання відображати не слід В окремих

сценаріях можливі варіанти розміщення кнопки додавання / видалення плитки поза меню програми У таких випадках кнопка не повинна дублюватися в меню програми або повинна бути неактивна

Рис 65

При розробці логіки розміщення додаткової плитки слід подумати про алгоритм формування ідентифікаторів для плиток Це допоможе вирішити, що з ними робити при повторній установці програми на іншому пристрої користувача

Не слід застосовувати додаткову плитку додатки як посилання на статичний контент або як команду для запуску програми

Говорячи про можливості роботи з плиткою, необхідно згадати про роботу з емблемою Використовуючи емблему, додатки може повідомляти користувачеві про свій стан Вона може відображатися на обох типах плитки У ролі емблеми можуть виступати цифри від 0 до 99, а також системні картинки Для розміщення картинки необхідно використовувати одне із зарезервованих значень:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp none

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp activity

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp alert

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp available

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp away

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp busy

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp newMessage

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp paused

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp playing

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp unavailable

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp error

Для відображення емблеми на плитці додатка необхідно сформувати відповідну розмітку xml, вибравши один з підготовлених шаблонів Приклад створення запропонований нижче:

var xmlDocument = WindowsUINotificationsBadgeUpdateManager

GetTemplateContent(WindowsUINotificationsBadgeTemplateTypeBadgeGlyph)

var xmlNodeList = xmlDocumentGetElementsByTagName(&quotbadge&quot) foreach (XmlElement xmlElement in xmlNodeList)

{

xmlElementSetAttribute(&quotvalue&quot, &quotactivity&quot)

}

var badgeUpdater = WindowsUINotificationsBadgeUpdateManager

CreateBadgeUpdaterForApplication()

badgeUpdaterUpdate(new WindowsUINotificationsBadgeNotification(xmlDocument))

МетодGetTemplateContent           класуWindowsUINotifications BadgeUpdateManager повертає один з існуючих шаблонів Параметр типуWindowsUINotificationsBadgeTemplateType  вказує, який саме шаблон необхідний BadgeGlyph вказує, що необхідний шаблон для картинки, BadgeNumber  – Шаблон для відображення числа Після відповідної конфігурації документа xml методCreateBadgeUpdaterForApplication класуWindowsUINotificationsBadgeUpdateManager   створює екземпляр типу BadgeUpdater, Який, у свою чергу, відображає емблему на плитці додатки

Крім цього, можна налаштувати емблему на періодичне оновлення Для цього випадку необхідно викликати метод StartPeriodicUpdate класу BadgeUpdater замість методу Update

Сергій Лутай, Сергій Байдачний, Windows 8 для C # розробників

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*