Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

Wyskakujące powiadomienia w Windows 10 — aplikacja portalowa w UWP

Ostatnio pokazałem pierwszą działającą wersję aplikacji w UWP (Universal Windows Platform), która posiadała logowanie i wyświetlała prosty, niesformatowany tekst powiadomień. W dzisiejszym wpisie przedstawię kolejne nowe rzeczy, jakie dodałem do programu.

Toast notifications w Windows 10

Microsoft w nowej wersji okienek udostępnił znacznie poprawiony system powiadomień. Opiera się on na dokumencie XML i umożliwia całkiem sporą konfigurację. Oczywiście notyfikacje dostępne są zarówno na Windows 10, jak i na mobilnych okienkach.

W tej wersji dostaliśmy większe pole do popisu, jeśli chodzi o dostosowanie powiadomienia do własnych potrzeb. Możemy dodawać przyciski, zmieniać ułożenie tekstu czy grafiki, a także umieścić pole tekstowe (idealne do szybkich odpowiedzi na SMSa). Powiadomienia trafiają również do Centrum Akcji i mogą posiadać własny schemat dźwiękowy.

Zobaczmy zatem jak wygląda to w praktyce, na przykładzie tworzonej aplikacji.

Wyskakujące powiadomienia z dobreprogramy.pl

Zacznijmy zatem od szablonu XML, jaki będzie użyty w naszym przypadku. Na tę chwilę jest on jawne wklejony jako string. Do operacji na XML używać będę klasy XmlDocument:

XmlDocument toastXml = new XmlDocument(); toastXml.LoadXml( $@" <toast> <visual> <binding template='ToastGeneric'> <text></text> <text></text> <text></text> <image placement='appLogoOverride'></image> </binding> </visual> <actions> <action content='pokaż' activationType='foreground' arguments='show'/> <action content='anuluj' activationType='foreground' arguments='hide'/> </actions> </toast>" );

Oczywiście można nie bawić się i użyć, któregoś z dostępnych szablonów. Przykładowy schemat z grafiką i 3 linijkami tekstu (ToastImageAndText04) ładujemy w następujący sposób:

toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastImageAndText04);

Nasz szablon składa się z trzech pól tekstowych (pierwsze będzie pogrubione) i grafiki. Obrazek posiada atrybut placement='appLogoOverride', określa on w tym przypadku, iż będziemy nadpisywali ikonę w powiadomieniu (domyślną ikonę aplikacji) własną grafiką. Dwa przyciski action: pokaż i anuluj będą odpowiednio otwierały stronę www do przypisanego powiadomienia lub zamykały notyfikację (ewentualnie oznaczały powiadomienia jako przeczytane). Atrybut activationType z foreground określa, że akcje będą działały na uruchomionej aplikacji w głównym planie. Atrybuty arguments w przyciskach pozwolą na rozróżnienie w jaki element kliknęliśmy.

Mając zatem zmienną notification, która jest pojedynczym powiadomieniem, powyższy szablon uzupełniamy w następujący sposób:

XmlNodeList toastImageAttributes = toastXml.GetElementsByTagName("image"); ((XmlElement)toastImageAttributes[0]).SetAttribute("src", notification.Avatar); ((XmlElement)toastImageAttributes[0]).SetAttribute("alt", "img"); XmlNodeList toastTextAttributes = toastXml.GetElementsByTagName("text"); toastTextAttributes[0].InnerText = notification.Title; toastTextAttributes[1].InnerText = notification.AddedDate. ToString("dd.MM.yyyy HH:mm:ss", CultureInfo.InvariantCulture); toastTextAttributes[2].InnerText = notification.FullText; toastTextAttributes = toastXml.GetElementsByTagName("actions"); ((XmlElement)toastTextAttributes[0]).SetAttribute("url", notification.TargetUrl);

Dodatkowo dodaję atrybut url, który posiada adres www, związany z powiadomieniem.

Podczepienie zdarzenia na kliknięcie w przycisk jest tworzone poprzez event Activated:

ToastNotification toast = new ToastNotification(toastXml); toast.Activated += Toast_Activated;

obsługa eventu:

private async void Toast_Activated(ToastNotification sender, object args) { if ((args as ToastActivatedEventArgs).Arguments == "show") { string url=((XmlElement)sender.Content.GetElementsByTagName("actions").First()) .GetAttribute("url"); if (!string.IsNullOrEmpty(url)) { await Launcher.LaunchUriAsync(new Uri(url)); } } }

W przypadku kliknięcia przycisku pokaż (arguments=show), pobieramy url powiadomienia i otwieramy domyślną przeglądarkę.

Notyfikacja pokazuje się po wywołaniu funkcji Show:

ToastNotificationManager.CreateToastNotifier().Show(toast);

Powiadomienia w akcji

Jak zatem wyglądają notyfikacje "na żywo"? Sprawdźmy:

Windows 10

Windows 10 Mobile

Myślę, że prezentuje się to już całkiem zacnie i od strony UI jestem całkiem zadowolony. Kod C# jeszcze zapewne będzie się zmieniał. Kliknięcie na przycisk przenosi już do odpowiedniej strony www.

Jeszcze na koniec dwa screeny z delikatnie odświeżonej listy z powiadomieniami w aplikacji (pierwszy screen to aplikacja na Windows 10, drugi pochodzi z wersji mobilnej):

Kolejny wpis

Następne posty będą związane już z działaniem aplikacji w tle i pobieraniem/uzyskiwaniem powiadomień przy wyłączonym programie. Temat już wstępnie przejrzałem i będzie ciężko. Domyślnie aplikacje UWP mogą uruchamiać wątek minimalnie co 15 minut (!!??) lub odbierać powiadomienia "na żywo", ale wymaga to wykupienia miejsca na Azure. Na pewno kolejne odsłona serii będzie ciekawa :) Zachęcam do substytucji ;)

Sam wpis może pojawić się trochę później, gdyż w ten weekend jadę do Dębna na maraton :) Trzymajcie kciuki ;)

Do kolejnego :)

Aktualne źródła można znaleźć na GitHub pod adresem:https://github.com/djfoxer/dp.notification
 

windows programowanie urządzenia mobilne

Komentarze

0 nowych
WODZU   17 #1 31.03.2016 23:41

Widzę że rozpędziłeś się z aplikacją :) Kawał świetnej roboty :)

AntyHaker   18 #2 01.04.2016 00:01

Oj oj, załapałem się na zrzut xP

Czekam na wersję gotową do otwartych (lub zamkniętych ^^) testów :D

lukezaa   4 #3 01.04.2016 00:29

@AntyHaker: Mogę ci skompilować po znajomości bo źródła są :P

klonek_wp   6 #4 01.04.2016 04:02

z tym działaniem w tle to może jednak spróbować w oparciu o nowości w RS1 - z tego co pokazali będzie teraz znacznie łatwiej

PC MASTER RACE   7 #5 01.04.2016 07:39

Nie mogę się doczekać finalnej aplikacji. Mam nadzieję że będzie ona zaprojektowana pod PC i dobrą obsługę myszki a nie tak jak poprzednia aplikacja pod dotyk.

W poprzedniej aplikacji brakowało możliwości ustawiania wielkości czcionek i gdy ją uruchomiłem to tekst był zbyt duży na moim monitorze a sama nawigacja po aplikacji była bardzo niewygodna. Artykuły przewijały się w prawo ukrywając menu co uniemożliwiało przejście do innego artykułu itp. Jeżeli nowa aplikacja będzie zaprojektowana pod PC to na pewno będę z niej korzystał. Choćby dla samych powiadomień. Ale musi być ona równie wygodna w nawigacji po artykułach jak wersja w przeglądarce (jakieś zakładki etc).

Autor edytował komentarz.
Zielpak   4 #6 01.04.2016 09:35

propsy za mvvm a nie code-behind :p

przemek1234   7 #7 01.04.2016 11:17

Czekam, aż zagości w Windows Store. Względnie na paczkę .appx.

  #8 01.04.2016 12:09

uwp nie uap. po za tym artykul bardzo fajny

mordzio   15 #9 01.04.2016 13:01

@AntyHaker: Ja też się załapałem na zrzut! Szkoda, że foxer nie powiedział wcześniej, bo wyszedłem jakiś taki rozczochrany :)

djfoxer   18 #10 01.04.2016 15:39

@AntyHaker: @lukezaa Wersja jeszcze jest mocno testowa. Obecnie można się zalogować, a po tej czynności apka zaczyta powiadomienia i wyświetli je na ekranie, a także w formie wyskakujących powiadomień. Muszę zadbać o zapamiętywanie powiadomień i użytkownika oraz o działanie w tle. Wówczas będzie można taką wersję opublikować w markecie do testów :)

djfoxer   18 #11 01.04.2016 15:40

@klonek_wp: Ciekawe. Coś możesz więcej powiedzieć, jakiś link?

djfoxer   18 #12 01.04.2016 15:41

@PC MASTER RACE: Na ten czas zajmę się tylko powiadomieniami. Inne elementy będą dodawane w zależności od zainteresowania. Aczkolwiek myślę, że spróbuję może coś z multiplatformowością się pobawić Xamarinem.

djfoxer   18 #13 01.04.2016 15:43

@przemek1234: Na pewno pojawi się w markecie.
czl: faktycznie :P thx!

mktos   10 #14 01.04.2016 16:37

Ale opcje "pokaż" i "anuluj" dla tego powiadomienia są IMHO bez sensu - kliknięcie na nie powinno automatycznie robić "pokaż", a systemowe odwołanie (swipe w prawo, kliknięcie w x) - anulowanie.

Over F.A.   5 #15 01.04.2016 17:14

Wpis jak zawsze super. Powodzenia na maratonie.

AntyHaker   18 #16 01.04.2016 19:04

@lukezaa: To nie to samo - czekam na WinStore :P Niemniej dzięki xD


@djfoxer Czekam z niecierpliwością :D

@mordzio Spontaniczne zdjęcie jest zawsze najciekawsze ^^

klonek_wp   6 #17 02.04.2016 02:53

@djfoxer: na buildzie chwalili się że teraz "background tasks" nie będą wymagały osobnego agenta i wszystko będzie można napchać w jednym procesie

darek719   38 #18 02.04.2016 21:22

Powodzenia w maratonie! :D

MrBeckham666   19 #19 04.04.2016 02:02

oby tak dalej :D

djfoxer   18 #20 06.04.2016 13:18

@mktos: Pokaż będzie przechodziło do www, zaś kliknięcie bezpośrednio otwierało apkę. To jeszcze jest do dyskusji.

@klonek_wp Czekamy w takim razie na nowe SDK :)

@Over F.A. @darek719 Dzięki :) Nie poszło tak jak zaplanowałem, ale dobiegłem poniżej 4h :)

Over F.A.   5 #21 06.04.2016 17:51

@djfoxer: Gratulacje.

darek719   38 #22 06.04.2016 18:57

@djfoxer: Gratulacje, Nie jest zle, ja to chciałbym chociaż jeden zaliczyć :D nawet nie skojarzyłem że to ten najstarszy a kiedyś planowałem atak na korone.... :D
http://sport.tvp.pl/24735299/ulice-w-polsce-pelne-biegaczy

Autor edytował komentarz w dniu: 06.04.2016 18:57
djfoxer   18 #23 10.04.2016 23:21

@darek719: Właśnie planuję zdobyć koronę :) Mam już Poznań i właśnie Dębno, w tym roku jeszcze Wrocław zostaje :)

darek719   38 #24 11.04.2016 14:34

@djfoxer: No to trzymam kciuki, trochę zdrowia na to potrzeba a poza tym trzeba się najeździć i swoje wpisowe zapłacić :) No ale radość nie ma ceny :)

tester1   1 #25 11.04.2016 19:49

super wpis :)