Image
2.7.2016 0 Comments

Vývoj pre Windows 10 – Dynamické dlaždice II / 12. časť

Späť na úvod >> Späť na programovanie >> Späť na seriál

V predchádzajúcej časti seriálu sme preberali dynamické dlaždice UWP aplikácií pre Windows 10 z hľadiska funkcionality, teda možností zobrazovania informácií aj keď aplikácia nie je spustená a následne z pohľadu dizajnéra. V tomto pokračovaní sa zameriame na dynamické dlaždice z pohľadu vývojára, napríklad ako na dlaždici rotovať kolekciu obrázkov, alebo čo je ešte zaujímavejšie, ako na ploche dlaždice vypísať oznam v prípade ak je aplikácia neaktívna. Ukážeme ako tieto funkcie realizovať prostriedkami operačného systému a ako cez cloudovú službu. Vývojár musí samozrejme počítať aj s tým, že na rôznu veľkosť dlaždice a tento parameter je na ľubovôli používateľa sa zmestí rôzne množstvo informácií.

Aktualizácia informácií na dlaždici

Obsah dlaždice je možné meniť lokálne, kedy aplikácia vytvorí frontu, kde je definované, čo sa má na dlaždici objavovať, prípadne aké obrázky majú na dlaždici rotovať, prípadne môžete meniť obsah dynamickej dlaždice z cloudu. Dlaždica je definovaná v aplikačnom manifeste. V šablóne je prednastavená statická dlaždica, biele zubaté slniečko na čiernom pozadí. Pre oživenie dlaždice slúžia aj ikonky stavu (badge). Zobrazujú sa rohoch dynamickej dlaždice.

Po vytvorení projektu UWP aplikácie, v ktorej chcete využívať informácie na dynamických dlaždiciach je potrebné v zložke References pridať do projektu balíček NotificationsExtensions.Win10. Nie je to produkt tretej strany, ale oficiálna knižnica pre notifikácie v UWP aplikáciách od Microsoftu a umožňuje generovať notifikácie na dlaždiciach, toastové notifikácie a takzvané badge notifikácie pomocou pomocou ikoniek na dlaždiciach. Na dynamických dlaždiciach môžete prostredníctvom badge notifikácie zobraziť číslo, ktoré vyjadruje počet relevantných entít, alebo udalostí, napríklad počet prijatých správ a podobne. K dispozícii je aj niekoľko desiatok ikoniek  Dôležité je, že tieto ikonky prekrývajú prípadný obrázok na dlaždici a teda sú vždy čitateľné.

Pridanie NuGet balíčka NotificationsExtensions.Win10

Odporúčame nainštalovať si aplikáciu Notifications Visualizer. Je to UWP aplikácia, ktorú nájdete vo Windows obchode https://www.microsoft.com/sk-sk/store/apps/notifications-visualizer/9nblggh5xsl1 Ako vyplýva z názvu, aplikácia vám umožní vizualizovať vaše návrhy notifikácií, takže si ich môžete overiť jednoduchšie, rýchlejšie a interaktívnejšie v tejto testovacej aplikácii, než metódou pokus-omyl vo vlastnej aplikácii. Pre ilustráciu možností aplikácie ukážeme tri obrázky. XML kód návrhu dlaždíc týchto ukážok neuvádzame, môžete si ho skopírovať z aplikácie Notifications Visualizer a prípadne prispôsobiť pre kód svojej aplikácie.

Aplikácia Notifications Visualizer: Notifikácia na dlaždici o mailovej správe

Aplikácia Notifications Visualizer: Notifikácia na dlaždici o počasí

Aplikácia Notifications Visualizer: Notifikácia na dlaždici z hry

XML dokument pre aktualizáciu obsahu dynamickej dlaždice bude

<tile>
  <visual>

    <binding template="TileMedium">
      ...
    </binding>

    <binding template="TileWide">
      <text hint-style="subtitle">Jennifer Parker</text>
      <text hint-style="captionSubtle">Photos from our trip</text>
      <text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>

    </binding>
    <binding template="TileLarge">
      ...
    </binding>

  </visual>
</tile>

 

 

Príklad dlaždice

Testovacia aplikácia

Dlaždice sa aktualizujú pomocou preddefinovaných šablón, ktoré ponúkajú bohaté grafické možnosti. Ukážeme to na príklade jednoduchej aplikácie, ktorá bude mať len jediné tlačidlo na spustenie požadovanej činnosti. Vytvorte projekt UWP aplikácie. V XAML kóde na stránke MainPage.xaml je definovaný jediný ovládací prvok – tlačidlo:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="Aktualizuj dlaždicu"
            HorizontalAlignment="Left" Margin="185,210,0,0"
            VerticalAlignment="Top" Height="100" Width="300"     
            Click="Button_Click_1"/>
</Grid>

Do súboru MainPage.xaml.cs pridajte odkazy na menné priestory

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;
using NotificationsExtensions.Tiles;

V obsluhe udalosti zatlačenia tlačidla bude kód:

private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            // simulácia údajov reálnej aplikácie
            string from = "PC REVUE";
            string subject = "Novinka dňa";
            string body = "Skúšobná prevádzka Hyperloop Bratislava Košice!";

 

            // obsah dlaždice
            TileContent content = new TileContent()
            {
                Visual = new TileVisual()
                {
                    TileMedium = new TileBinding()
                    {
                        Content = new TileBindingContentAdaptive()
                        {
                            Children =
                {
                    new TileText()
                    {
                        Text = from
                    },

                    new TileText()
                    {
                        Text = subject,
                        Style = TileTextStyle.CaptionSubtle
                    },

                    new TileText()
                    {
                        Text = body,
                        Style = TileTextStyle.CaptionSubtle
                    }
                }
                        }
                    },

                    TileWide = new TileBinding()
                    {
                        Content = new TileBindingContentAdaptive()
                        {
                            Children =
                {
                    new TileText()
                    {
                        Text = from,
                        Style = TileTextStyle.Subtitle
                    },

                    new TileText()
                    {
                        Text = subject,
                        Style = TileTextStyle.CaptionSubtle
                    },

                    new TileText()
                    {
                        Text = body,
                        Style = TileTextStyle.CaptionSubtle
                    }
                }
                        }
                    }
                }
            };

            // vytvorenie notifikácie
            var notification = new TileNotification(content.GetXml());
            // odoslanie notifikácie na dlaždicu
            TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);

        }

 

Po zatlačení tlačidla môžete na domovskej obrazovke sledovať, ako sa zmení text dlaždici

Notifikácia na dlaždici

Zobrazit Galériu

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

ITPro

Linux súkromne i pracovne v2.0 (14. časť): Small Business Server

09.11.2016 14:57

Pojem Small Business Server (malý firemný server) začala používať spoločnosť Microsoft ešte v roku 2000 na označenie servera, ktorý ­dokázal plniť úlohy niekoľkých samostatných serverov. Aplikačná vrs ...

ITPro

Industry 4.0: Fikcia alebo už realita?

09.11.2016 14:52

Štvrtá priemyselná revolúcia je pomenovanie rozsiahlych zmien prudko vstupujúcich do súčasného priemyslu. Nositeľom týchto zmien je digitalizácia výroby a optimalizácia všetkých podnikových procesov v ...

ITPro

Vývoj aplikácií UWP pre Xbox One II.

09.11.2016 14:47

V predošlej časti sme ukázali postup, ako si ­vytvoriť vývojársky účet a aktivovať vývojársky režim na hernej konzole Xbox One, aby ste mohli testovať svoje aplikácie. Výhodou hernej konzoly Xbox je v ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá