7. diel - Dlaždice a hrianok notifikácia

Vitajte u ďalšieho dielu tutoriálu o tvorbe Modern UI aplikácií v HTML, JavaScriptu a CSS. Dnes pridáme ďalšie dlaždicu, oživíme ju a doručíme užívateľmi toastový notifikáciu.

Dlaždice

Naše dlaždice nie je len ikonou pre našu aplikáciu, môžeme si ju doladiť a to veľmi široko. Dlaždicu môžete nastaviť inú ikonu, iné pozadie a pridať rôzne informácie.

Pozadia dlaždice

Prejdite do manifestu aplikácie (package.appxma­nifest) na záložku Visual Assets. Background color nastavte na # 12AA10. Keďže by ste mali poznať CSS (dobre), tak asi tušíte, že je to farba a bystrejší aj odhadli k prevahe AA, že to je zelená. Aplikáciu spustite. Pri načítaní aplikácie si všimnite, že spashscreen už je zelený (# 12AA10). Pripnite si novú aplikáciu na štart a pozrite sa na ňu, taky bude zelená.

Na tejto dlaždicu je tiež jeden obrázok, ktorý ste si mohli v manifeste aplikácie vybrať. Všimnite si teraz v manifeste však ešte obrázkov, chce po vás každý hneď v niekoľkých rozlíšeniach. Len tak zo srandy to nerobí, má na to dôvod. Vaše aplikácie musí bežať na všetkých zariadeniach s Windows 8.1, inak neprejde certifikáciou. Aplikácia tak musí podporovať všetky rôzne rozlíšenia a ich hustotu pixelov na palec. A to sa rôznia. Asi tušíte, že výrobcovia monitorov sú schopní dať Full HD (1920 × 1080) ako do 27 "monitora, tak do 10" tabletu. Zatiaľ čo u toho 27 "sú jednotlivé body vidieť aj voľným okom, u tabletu sú tak nahustené, že je mnohokrát ani pod lupou nespoznáte. Ďalšie záludnosťou pre vás možno bude, že už musíte podporovať rozlíšenie 2K, čo je dvojnásobok Full HD. Toto rozlíšenie zatiaľ nie je príliš rozšírené, ale predpokladá sa, že sa v budúcnosti stane štandardom.

Badge hodnota

Asi ste to u aplikácie Store už videli. Keď vyjde aktualizácie, aplikácia vás o tom upozorní a to tak, že sa na dlaždicu objaví číslo s počtom aktualizácií. Toto číslo môže byť v rozmedzí 1-99, viac ako 99 sa zobrazí ako 99+ a menej ako 0 sa nezobrazí vôbec.

Týmto číslam sa hovorí Badge notifikácia. Zobrazovať ich môžete dvoma spôsobmi. Prvé, ktorým sa budeme aj zaoberať je, že hodnotu jednoducho zmeníte za behu aplikácie. Druhá je, že ju budete dynamicky meniť z cloudu a to aj v okamihu, keď aplikácia nebeží. U čítačiek RSS sa napríklad hodí práve druhá varianta.

Teraz si to vyskúšame. Do stránky HTML si pridajte textové políčko (id = badgeNumber) a tlačidlo (id = sendBadge).

V JavaScriptu pridajte tlačidle obsluhu udalosti kliknutia. Najprv si definujeme objekt notifikácií, aby sme ho nemuseli stále vypisovať.

var notifikace = Windows.UI.Notifications;

Vytvorte si obsluhu udalosti pre kliknutie na tlačidlo. V obsluhu budeme následne potrebovať hodnotu, jednoducho si ju uložíme do premennej hodnota.

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

Badge notifikácia má dva typy, celočíselná (tú som už spomínal) alebo posunková, tam je však obmedzený počet znakov, ktoré môžeme použiť. Typ šablóny je vo výpočte BadgeTemplateType.

var typBadge = notifikace.BadgeTemplateType.badgeNumber;

Badge notifikácia sa posielajú vo formáte XML. Aby sme nemuseli celej XML skladať sami, BadgeUpdateManager nám s tým metódou getTemplateContent pomôže. Metóda vráti základné XML, ktoré obsahuje element badge. Hodnota je očakávaná v Attribut value tohto elementu. Do tohto XML doplníme hodnotu.

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

Teraz musíme vytvoriť samotnú notifikáciu. Deklarujeme nový objekt BadgeNotification a ako parameter konstruktoru mu odovzdáme našej šablónu XML s hodnotou.

var badgeNotifikace = new notifikace.BadgeNotification(sablona)

No a nakoniec musíme notifikáciu odoslať. K tomuto účelu opäť použijeme BadgeUpdateManager, z BadgeUpdateManager musíme získať buď primárny alebo sekundárny dlaždicu (sekundárne sa naučíme používať neskôr). Na túto získanú dlaždicu zavoláme metódu update a ako parameter ju odovzdáme notifikáciu.

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

Aplikáciu si vyskúšajte, potom sa pozrite na dlaždicu, že sa hodnota skutočne zmenila.

Ešte viac dlaždíc

Naša aplikácia má teraz iba jednu jedinú dlaždicu a to tú, cez ktorú ju spúšťate. Teraz nastal čas pre pridávanie ďalších dlaždíc. Tieto dlaždice sa pridávajú za behu aplikácie a vždy to ešte musí potvrdiť používateľ. Každá dlaždice má svoje id, cez ktoré sa k nej spätne dostaneme a argument, ktorý nám odovzdá, keď sa aplikácia spustí cez ňu.

Teraz opustíme Windows.UI.No­tifications a prejdeme k Windows.UI.Star­tScreen. Metóda secondaryTile, ktorá ako argument prijíma id dlaždice, nám ju vygeneruje a ďalej pracujeme len s ňou. Intellisense vám napovie, čo ktorá jej vlastnosť znamená, alebo to už podľa názvu vycítite. Vlastnosť logo nastavíte na Windows.Founda­tion.Uri (), ktorému v argumentu odovzdáte cestu k obrázku v priečinku Assets. Musíte uviesť absolútnu cestu, preto použite protokol ms-appx: ///, s tým ste sa učili v jednom z predchádzajúcich dielov. Vlastnosť arguments nastavte na celkom ľubovoľný text, ten sa vám odovzdá spätne po spustení aplikácie, keď sa spúšťa cez záložný dlaždicu. No a nakoniec ešte zobrazíme text na dlaždicu a to tak, že to odovzdáme do tileOptions, ktoré nastavte na TileOptions.show­NameOnLogo. Nakoniec už dlaždicu prezrite, úplne jednoducho zavolajte requestCreateAsync (). Celý kód našej obsluhy odosielajúci dlaždicu by mohol vyzerať nasledovne.

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()
}

Spustenie aplikácie z inej dlaždice

Ako som už v predchádzajúcom odseku a prvom diele zmienil, aplikácie sa nemusia spúšťať klasicky. Systém nám to oznámi v obsluhe udalosti onactivated, ktorá je v súbore default.js. Predaný argument má vlastnosť detail a tá arguments, kde je náš argument. Do aplikácie si pridajte podmienku, ktorá overí, či je tvrdenie ten čo sme pridali dlaždicu a v tom prípade užívateľovi zobrazte nejaký dialóg.

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()
}

Aplikáciu si vyskúšajte. Najprv ju spustite normálne, dialóg sa nezobrazí. Pridajte dlaždicu a kliknite na ňu, aplikácie sa spustí a zobrazí dialóg.

Živé dlaždice

Aby dlaždice bola naozaj živá, je potreba na nej ukazovať dáta, s ktorými aplikácie bežne pracuje. Emailový klient napríklad ukazuje predmety emailov a pomocou badge hodnoty ich počet. Počasie ukazuje predpoveď počasia. Aj dlaždice sa posielajú systému vo formáte XML, ktorý nám manager vygeneruje. Do šablóny XML si doplníme hodnoty, vytvoríme notifikáciu dlaždice a odošleme ju. To je ten najprimitívnejšie postup. My si ale dlaždicu načasujeme. Nebudeme preto vytvárať TileNotificaion, ale ScheduledTile­Notification, tá na rozdiel od bežnej notifikácia potrebuje ešte odovzdať informáciu o tom, kedy sa má notifikácia zobraziť. Novovytvorená časovaná notifikácia má vlastnosť ExpirationTime, kde nastavíme, kedy notifikácia skončí. Celý kód by mohol vyzerať nasledovne.

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 premennej štart dátum a čas, ktorý je posunutý oproti aktuálnemu o 6 sekúnd, po 6 sekundách od vyvolania sa notifikácie prejaví. Expiračná čas je nastavený po 12 sekundách od vyvolania, po 12 sekundách sa notifikácia schová.

Hrianok notifikácia

Hrianok notifikácia sú notifikácia, ktoré sa užívateľovi zobrazí v pravej hornej časti obrazovky. Tieto notifikácia môžete posielať opäť buď z aplikácie alebo z cloudu. Ak je posielate z aplikácie tak si samozrejme môžete notifikáciu načasovať, tentoraz však nemôžete určiť koniec, notifikácia priebehu niekoľkých sekúnd sama zmizne.

Toastových notifikácií je niekoľko typov (popis všetkých je v dokumentácii). Notifikácia môžu mať buď jenom text alebo aj obrázok. Aj hrianok notifikácia sa posielajú systému vo formáte XML a opäť ho nebudeme stavať svojpomoci, ale necháme si vygenerovať základné XML automaticky. Do tohto XML si len doplníme hodnoty.

Do stránky HTML si pridajte textové pole (id = toastText) a tlačidlo (id = sendToast). Najprv si definujeme notifikácia nech nemusíme dookola opisovať Windows.UI.No­tifications.

var notifikace = Windows.UI.Notifications;

Pridajte si obsluhu udalosti pre kliknutie na tlačidlo sendToast, potom budeme musieť získať text z textového poľa, ktorý pošleme do notifikácia.

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

Musíme si určiť, či bude mať notifikácia len text alebo aj obrázok, pre demonštráciu nám bude stačiť iba text a vyberie tú najjednoduchšiu šablónu. Z tohto typu si vygenerujeme základné XML notifikácia. Dobre nám k tomu poslúži ToastNotifica­tionManager s metódou getTemplateContent, ktorá nám vráti XML podľa typu odovzdaného v prvom parametri.

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

Do šablóny musíme doplniť text a to tak že do elementu <text> doplníme text, ktorý sa zobrazí v notifikácii, výsledný (poskladaný) element môže vyzerať nasledovne.

<text>Hello world</text>

Ak poznáte prácu s XML v Javascriptu tak viete, že text do elementu sa vkladá pomocou TextNode.

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

XML máme hotové, teraz musíme vytvoriť samotnú notifikáciu. Jednoducho vytvoríme novú ToastNotification a ako prvý parameter odovzdáme naše XML.

var toastNotifikace = new notifikace.ToastNotification(sablona)

Nakoniec už nezostáva než notifikáciu odoslať systému. ToastNotifica­tionManager.cre­ateToastNotifi­er () nám vytvorí objekt, ktorý má metódu show, tá prijíma v prvom parametri našej notifikáciu a okamžite ju zobrazí.

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

Aplikáciu skúste a vyskúšajte, budete ale prekvapení, aplikácia bude fungovať a nevydá nám nechránenú výnimku, napriek tomu sa notifikácia nezobrazí. Prečo? My sme síce notifikáciu správne pripravili a odoslali, ale nepovedali sme o tom systéme dopredu a tak nám notifikáciu nezobrazí. Prejdite do aplikačného manifestu au Toast capable vyberte yes. Teraz už nám systém notifikácia zobrazí.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.