Lekce 7 - Dlaždice a toastové notifikace

V předchozí lekci, WinJS - Nastavení a fotoaparát, jsme si ukázali, jak zpřístupníme uživateli nastavení naše aplikace.

Dnes oživíme dlaždici a doručíme uživateli toastovou notifikaci.

Dlaždice

Naše dlaždice není jen ikonou pro naši aplikaci, můžeme si ji doladit a to velmi široce. Dlaždici můžete nastavit jinou ikonu, jiné pozadí a přidat různé informace.

Pozadí dlaždice

Přejděte do manifestu aplikace (package.appxma­nifest) na záložku Visual Assets. Background color nastavte na #12AA10. Jelikož byste měli znát CSS (dobře), tak asi tušíte, že je to barva a bystřejší i odhadli k převaze AA, že to je zelená. Aplikaci spusťte. Při načítaní aplikace si všimněte, že spashscreen již je zelený (#12AA10). Připněte si novou aplikaci na start a podívejte se na ni, taky bude zelená.

Na této dlaždici je také jeden obrázek, který jste si mohli v manifestu aplikace vybrat. Všimněte si teď v manifestu však ještě obrázků, chce po vás každý hned v několika rozlišeních. Jen tak z legrace to nedělá, má k tomu důvod. Vaše aplikace musí běžet na všech zařízeních s Windows 8.1, jinak neprojde certifikací. Aplikace tak musí podporovat všechny různé rozlišení a jejich hustotu pixelů na palec. A to se různí. Asi tušíte, že výrobci monitorů jsou schopni dát Full HD (1920×1080) jak do 27" monitoru, tak do 10" tabletu. Zatímco u toho 27" jsou jednotlivé body vidět i pouhým okem, u tabletu jsou tak nahuštěné, že je mnohdy ani pod lupou nepoznáte. Další záludností pro vás možná bude, že již musíte podporovat rozlišení 2K, což je dvojnásobek Full HD. Toto rozlišení zatím není příliš rozšířené, ale předpokládá se, že se v budoucnu stane standardem.

Badge hodnota

Asi jste to u aplikace Store již viděli. Když vyjde aktualizace, aplikace vás o tom upozorní a to tak, že se na dlaždici objeví číslo s počtem aktualizací. Toto číslo může být v rozmezí 1-99, víc jak 99 se zobrazí jako 99+ a méně než 0 se nezobrazí vůbec.

Těmto číslům se říká Badge notifikace. Zobrazovat je můžete dvěma způsoby. První, kterým se budeme i zabývat je, že hodnotu jednoduše změníte za běhu aplikace. Druhá je, že ji budete dynamicky měnit z cloudu a to i v okamžiku, kdy aplikace neběží. U čteček RSS se například hodí právě druhá varianta.

Teď si to vyzkoušíme. Do stránky HTML si přidejte textové políčko (id=badgeNumber) a tlačítko (id=sendBadge).

V JavaScriptu přidejte tlačítku obsluhu události kliknutí. Nejprve si definujeme objekt notifikací, abychom ho nemuseli pořád vypisovat.

var notifikace = Windows.UI.Notifications;

Vytvořte si obsluhu události pro kliknutí na tlačítko. V obsluze budeme následně potřebovat hodnotu, jednoduše si ji uložíme do proměnné hodnota.

var hodnota = document.getElementById("badgeNumber").value;

Badge notifikace má dva typy, celočíselná (tu jsem již zmiňoval) anebo znaková, tam je však omezený počet znaků, které můžeme použít. Typ šablony je ve výčtu BadgeTemplateType.

var typBadge = notifikace.BadgeTemplateType.badgeNumber;

Badge notifikace se posílají ve formátu XML. Abychom nemuseli celé XML skládat sami, BadgeUpdateManager nám s tím metodou getTemplateContent pomůže. Metoda vrátí základní XML, které obsahuje element badge. Hodnota je očekávána v attributu value tohoto elementu. Do tohoto XML doplníme hodnotu.

var sablona = notifikace.BadgeUpdateManager.getTemplateContent(typBadge);
sablona.getElementsByTagName("badge")[0].setAttribute("value", hodnota)

Nyní musíme vytvořit samotnou notifikaci. Deklarujeme nový objekt BadgeNotification a jako parametr konstruktoru mu předáme naší šablonu XML s hodnotou.

var badgeNotifikace = new notifikace.BadgeNotification(sablona)

No a nakonec musíme notifikaci odeslat. K tomuto účelu opět použijeme BadgeUpdateManager, z BadgeUpdateManager musíme získat buďto primární nebo sekundární dlaždici (sekundární se naučíme používat později). Na tuto získanou dlaždici zavoláme metodu update a jako parametr ji předáme notifikaci.

notifikace.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotifikace)

Aplikaci si vyzkoušejte, pak se podívejte na dlaždici, že se hodnota skutečně změnila.

Ještě více dlaždic

Naše aplikace má nyní pouze jednu jedinou dlaždici a to tu, přes kterou ji spouštíte. Nyní nastal čas pro přidávání dalších dlaždic. Tyto dlaždice se přidávají za běhu aplikace a vždy to ještě musí potvrdit uživatel. Každá dlaždice má svoje id, přes které se k ní zpětně dostaneme a argument, který nám předá, když se aplikace spustí přes ni.

Nyní opustíme Windows.UI.No­tifications a přejdeme k Windows.UI.Star­tScreen. Metoda secondaryTile, která jako argument přijímá id dlaždice, nám ji vygeneruje a dále pracujeme jenom s ní. Intellisense vám napoví, co která její vlastnost znamená, nebo to už podle názvu vycítíte. Vlastnost logo nastavíte na Windows.Founda­tion.Uri(), kterému v argumentu předáte cestu k obrázku ve složce Assets. Musíte uvést absolutní cestu, proto použijte protokol ms-appx:///, s tím jste se učili v jednom z předchozích dílů. Vlastnost arguments nastavte na celkem libovolný text, ten se vám předá zpětně po spuštění aplikace, když se spouští přes záložní dlaždici. No a nakonec ještě zobrazíme text na dlaždici a to tak, že to předáme do tileOptions, které nastavte na TileOptions.show­NameOnLogo. Nakonec už dlaždici zobrazte, úplně jednoduše zavolejte requestCreate­Async(). Celý kód naší obsluhy odesílající dlaždici by mohl vypadat následovně.

document.getElementById("sendTile").onclick = function () {
    var start = Windows.UI.StartScreen;
    var text = document.getElementById("tileText").value;
    var dlazdice = start.SecondaryTile("idDlazdice");

    dlazdice.shortName = text
    dlazdice.tileOptions = start.TileOptions.showNameOnLogo
    dlazdice.arguments = "showMsg"
    dlazdice.logo = new Windows.Foundation.Uri("ms-appx:///images/logo.scale-100.png")
    dlazdice.requestCreateAsync()
}

Spuštění aplikace z jiné dlaždice

Jak jsem již v předchozím odstavci a prvním díle zmínil, aplikace se nemusí spouštět klasicky. Systém nám to sdělí v obsluze události onactivated, která je v souboru default.js. Předaný argument má vlastnost detail a ta arguments, kde je náš argument. Do aplikace si přidejte podmínku, která ověří, jestli je argument ten co jsme přidali dlaždici a v tom případě uživateli zobrazte nějaký dialog.

if (args.detail.arguments == "showMsg") {
    var dlg = new Windows.UI.Popups.MessageDialog("Vítej zpět, nyní jsi aplikaci otevřel z sekundární dlaždice.");
    dlg.showAsync()
}

Aplikaci si vyzkoušejte. Nejprve ji spusťte normálně, dialog se nezobrazí. Přidejte dlaždici a klikněte na ni, aplikace se spustí a zobrazí dialog.

Živé dlaždice

Aby dlaždice byla opravdu živá, je potřeba na ní ukazovat data, s kterými aplikace běžně pracuje. Emailový klient například ukazuje předměty emailů a pomocí badge hodnoty jejich počet. Počasí ukazuje předpověď počasí. I dlaždice se posílají systému ve formátu XML, který nám manager vygeneruje. Do šablony XML si doplníme hodnoty, vytvoříme notifikaci dlaždice a odešleme ji. To je ten nejprimitivnější postup. My si ale dlaždici načasujeme. Nebudeme proto vytvářet TileNotificaion, ale ScheduledTile­Notification, ta na rozdíl od běžné notifikace potřebuje ještě předat informaci o tom, kdy se má notifikace zobrazit. Nově vytvořená časovaná notifikace má vlastnost ExpirationTime, kde nastavíme, kdy notifikace skončí. Celý kód by mohl vypadat následovně.

var text = "Ahoj"
var xml = notifications.TileUpdateManager.getTemplateContent(notifications.TileTemplateType.tileSquare150x150Text01)
xml.getElementsByTagName("text")[0].innerText = text

var now = new Date();
var start = new Date(now.getTime() + 6000)

var tile = new notifications.ScheduledTileNotification(xml, start)
tile.expirationTime = new Date(start.getTime() + 12000)
notifications.TileUpdateManager.createTileUpdaterForApplication().addToSchedule(tile)

Tento kód v proměnné start datum a čas, který je posunut oproti aktuálnímu o 6 sekund, po 6 sekundách od vyvolání se notifikace projeví. Expirační čas je nastaven po 12 sekundách od vyvolání, po 12 sekundách se notifikace schová.

Toastové notifikace

Toastové notifikace jsou notifikace, které se uživateli zobrazí nahoře napravo obrazovky. Tyto notifikace můžete posílat opět buďto z aplikace anebo z cloudu. Pokud je posíláte z aplikace tak si samozřejmě můžete notifikaci načasovat, tentokrát však nemůžete určit konec, notifikace během několika sekund sama zmizí.

Toastových notifikací je několik typů (popis všech je v dokumentaci). Notifikace mohou mít buďto jenom text nebo i obrázek. I toastové notifikace se posílají systému ve formátu XML a opět ho nebudeme stavět svépomoci, ale necháme si vygenerovat základní XML automaticky. Do tohoto XML si jen doplníme hodnoty.

Do stránky HTML si přidejte textové pole (id=toastText) a tlačítko (id=sendToast). Nejprve si definujeme notifikace ať nemusíme dokola opisovat Windows.UI.No­tifications.

var notifikace = Windows.UI.Notifications;

Přidejte si obsluhu události pro kliknutí na tlačítko sendToast, pak budeme muset získat text z textového pole, který pošleme do notifikace.

var text = document.getElementById("toastText").value;

Musíme si určit, zdali bude mít notifikace jenom text nebo i obrázek, pro demonstraci nám bude stačit pouze text a vybere tu nejjednodušší šablonu. Z tohoto typu si vygenerujeme základní XML notifikace. Dobře nám k tomu poslouží ToastNotifica­tionManager s metodou getTemplateContent, která nám vrátí XML podle typu předaného v prvním parametru.

var typNotifikace = notifikace.ToastTemplateType.toastText01;
var sablona = notifikace.ToastNotificationManager.getTemplateContent(typNotifikace);

Do šablony musíme doplnit text a to tak že do elementu <text> doplníme text, který se zobrazí v notifikaci, výsledný (poskládaný) element může vypadat následovně.

<text>Hello world</text>

Pokud znáte práci s XML v Javascriptu tak víte, že text do elementu se vkládá pomocí TextNode.

var textVSablone = sablona.getElementsByTagName("text")[0]
textVSablone.appendChild(sablona.createTextNode(text));

XML máme hotové, nyní musíme vytvořit samotnou notifikaci. Jednoduše vytvoříme novou ToastNotification a jako první parametr předáme naše XML.

var toastNotifikace = new notifikace.ToastNotification(sablona)

Nakonec už nezbývá než notifikaci odeslat systému. ToastNotifica­tionManager.cre­ateToastNotifi­er() nám vytvoří objekt, který má metodu show, ta přijímá v prvním parametru naší notifikaci a okamžitě ji zobrazí.

notifikace.ToastNotificationManager.createToastNotifier().show(toastNotifikace);

Aplikaci zkuste a vyzkoušejte, budete ale překvapeni, aplikace bude fungovat a nevydá nám neošetřenou výjimku, přesto se notifikace nezobrazí. Proč? My jsme sice notifikaci správně připravili a odeslali, ale neřekli jsme o tom systému dopředu a tak nám notifikaci nezobrazí. Přejděte do aplikačního manifestu a u Toast capable vyberte yes. Nyní již nám systém notifikace zobrazí.

V další lekci, AJAX ve Windows Store aplikacích, se naučíme používat XHR a naprogramujeme si čtečku RSS jako Windows 8 aplikaci. Implementujeme si také živé dlaždice hned pro dvě různé velikosti.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.