Slides from my NT konferenca 2013 talk, covering Windows 8 and Windows Phone aspects of making your app come to life.

1. 300
Kako narediti vašo aplikacijo
ţivo?
Andrej Tozon
Microsoft MVP
ANT Andrej Tozon s.p, Ljubljana
andrej@tozon.info | @andrejt

2. 300
Vsebina
 Ţive ploščice (Live tiles)
 Opečena obvestila (Toast notifications)
 Surova obvestila
 Windows 8 in Windows Phone 8

3. 300
Ploščice

4. 300
Ploščico lahko oţivimo
 Posodobimo jo neposredno iz aplikacije
 Takoj ali ob določenem času
 Posodobi jo pritajeni agent
 Več pogojev in proţilcev zagona agentov
 Posodablja se lahko v vnaprej določenih intervalih
 Informacije o vsebini se prenesejo s streţnika
 Posodobi se ob prejetju potisnjenega obvestila

5. 300
Kaj postaviti za vsebino ploščice?
 Čemu je aplikacija namenjena?
 Kontekst
 Katera informacija je uporabniku najbolj pomembna
 Mobilnost - lokacija najbliţje pomembne točke
 Aktualnost – zadnje novice
 Upoštevajmo različne velikosti ploščice
 Uporabnik med velikostmi, ki so mu na voljo, izbira sam
 Za največjo ploščico se pričakujejo ţive posodobitve

6. 300
Ploščice – Windows 8
Kvadratne ploščice z besedilom
Kvadratne ploščice s sliko

7. 300
Ploščice – Windows 8
Kukajoče kvadratne ploščice

8. 300
Ploščice – Windows 8
Široke ploščice z besedilom

9. 300
Ploščice – Windows 8
Široke ploščice s sliko

10. 300
Ploščice – Windows 8
Široke ploščice z besedilom in sliko

11. 300
Ploščice – Windows 8
Široke kukajoče ploščice #1

12. 300
Ploščice – Windows 8
Široke kukajoče ploščice #2

13. 300
Ploščice – Windows 8
Široke kukajoče ploščice #3

14. 300
Ploščice – Windows 8
TileSquarePeekImageAndText04
<tile>
<visual>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src="image1.png" alt="alt text"/>
<text id="1">Text Field 1</text>
</binding>
</visual>
</tile>
TileWideImageAndText01
<tile>
<visual>
<binding template="TileWideImageAndText01">
<image id="1" src="image1.png" alt="alt text"/>
<text id="1">Text Field 1</text>
</binding>
</visual>
</tile>

15. 300
Ploščice – Windows 8
„Branding“
Značka
 Številka
 Pismenka
 None
 Logo
 Title
 None
 Logo
 Title

16. 300
Ploščice – Windows 8
„Branding“
Značka
 Številka
 Pismenka
<badge value="5"/>
<badge value="busy"/>
<tile>
<visual branding=“Logo”>
<binding template="TileWideImageAndText01">
<image id="1" src="image.png“ />
<text id="1">Srhljivo-magična harmonija…</text>
</binding>
</visual>
</tile>
<tile>
<visual branding=“Logo”>
<binding template="TileWideImageAndText01">
<image id="1" src="image.png“ />
<text id="1">Srhljivo-magična harmonija…</text>
</binding>
</visual>
</tile>

17. 300
Kako torej oţivimo ploščico?
 Posodobimo jo neposredno iz aplikacije
 Posodobi jo pritajeni agent
TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml));
TileUpdateManager.CreateTileUpdaterForApplication()
.AddToSchedule(new ScheduledTileNotification(
tileXml, time));

18. 300
Kako torej oţivimo ploščico?
TileUpdateManager.CreateTileUpdaterForApplication()
.StartPeriodicUpdate(uri,
PeriodicUpdateRecurrence.Hour);
 Posodobimo jo neposredno iz aplikacije
 Posodobi jo pritajeni agent
 Posodablja se lahko v vnaprej določenih intervalih
TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml));
TileUpdateManager.CreateTileUpdaterForApplication()
.AddToSchedule(new ScheduledTileNotification(
tileXml, time));

19. 300
Kako torej oţivimo ploščico?
TileUpdateManager.CreateTileUpdaterForApplication()
.StartPeriodicUpdate(uri,
PeriodicUpdateRecurrence.Hour);
 Posodobimo jo neposredno iz aplikacije
 Posodobi jo pritajeni agent
 Posodablja se lahko v vnaprej določenih intervalih
 Posodobi se ob prejetju potisnjenega obvestila
 XML ustvarimo na streţniku in potisnemo k odjemalcem
TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml));
TileUpdateManager.CreateTileUpdaterForApplication()
.AddToSchedule(new ScheduledTileNotification(
tileXml, time));

20. 300
demo
Ţive ploščice – Windows 8

21. 300
Ploščice – Windows Phone 8
Prevratne ploščice

22. 300
Ploščice – Windows Phone 8
Ikonske ploščice

23. 300
Ploščice – Windows Phone 8
Ciklične ploščice
1
.
.
.
9 sličic

24. 300
Ploščice – Windows Phone 8
Prevratne ploščice
<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
<wp:Tile Id="tile id" Template="FlipTile">
<wp:Title>Title</wp:Title>
<wp:BackTitle>Back Title</wp:BackTitle>
<wp:BackContent>Back Text</wp:BackContent>
<wp:WideBackContent>Wide Back Text</wp:WideBackContent>
<wp:Count>5</wp:Count>
<wp:SmallBackgroundImage>smallTileUri</wp:SmallBackgroundImage>
<wp:BackgroundImage>tileUri</wp:BackgroundImage>
<wp:BackBackgroundImage>backTileUri</wp:BackBackgroundImage>
<wp:WideBackgroundImage>wideTileUri</wp:WideBackgroundImage>
<wp:WideBackBackgroundImage>wideBackTileUri</wp:WideBackBackgroundImage>
</wp:Tile>
</wp:Notification>

25. 300
Ploščice – Windows Phone 8
Prevratne ploščice
FlipTileData tileData = new FlipTileData
{
Title = "Title",
BackTitle = "Back Title",
BackContent = "Back Text",
WideBackContent = "Wide Back Text",
Count = 5,
SmallBackgroundImage = smallTileUri,
BackgroundImage = tileUri,
BackBackgroundImage = backTileUri,
WideBackgroundImage = wideTileUri,
WideBackBackgroundImage = wideBackTileUri,
};

26. 300
Kako torej oţivimo ploščico?
 Posodobimo jo neposredno iz aplikacije
 Posodobi jo pritajeni agent
ShellTile.ActiveTiles.First().Update(tileData);

27. 300
Kako torej oţivimo ploščico?
var tls = new ShellTileSchedule(tileId, tileData);
tls.Recurrence = UpdateRecurrence.Interval;
tls.Interval = UpdateInterval.EveryHour;
tls.Start();
 Posodobimo jo neposredno iz aplikacije
 Posodobi jo pritajeni agent
 Posodablja se lahko v vnaprej določenih intervalih
ShellTile.ActiveTiles.First().Update(tileData);

28. 300
Kako torej oţivimo ploščico?
var tls = new ShellTileSchedule(tileId, tileData);
tls.Recurrence = UpdateRecurrence.Interval;
tls.Interval = UpdateInterval.EveryHour;
tls.Start();
 Posodobimo jo neposredno iz aplikacije
 Posodobi jo pritajeni agent
 Posodablja se lahko v vnaprej določenih intervalih
 Posodobi se ob prejetju potisnjenega obvestila
 XML ustvarimo na streţniku in potisnemo k odjemalcem
ShellTile.ActiveTiles.First().Update(tileData);

29. 300
Potisna obvestila – Windows 8

30. 300
Zaklenjen zaslon

31. 100300
Zaklenjen zaslon

32. 300
Zaklenjen zaslon – Windows 8

33. 300
Zaklenjen zaslon – Windows 8

34. 300
Zaklenjen zaslon – Windows 8
var status = await
BackgroundExecutionManager.RequestAccessAsync();
var status = BackgroundExecutionManager.GetAccessStatus();
if ((status ==
BackgroundAccessStatus.AllowedWithAlwaysOnRealTimeConnectivity)
||
(status ==
BackgroundAccessStatus.AllowedMayUseActiveRealTimeConnectivity))
{
...
}

35. 300
Zaklenjen zaslon – Windows Phone 8
<Extensions>
<Extension
ExtensionName="LockScreen_Background"
ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}"
TaskID="_default" />
<Extension
ExtensionName="LockScreen_Notification_IconCount"
ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}"
TaskID="_default" />
<Extension
ExtensionName="LockScreen_Notification_TextField"
ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}"
TaskID="_default" />
</Extensions>

36. 300
demo
Zaklenjen zaslon – Windows 8

37. 300
Popečeni kruhki – Windows 8

38. 300
Popečeni kruhki – Windows 8
<toast>
<visual>
<binding template="ToastImageAndText02">
<image id="1" src="image1"
alt="image1"/>
<text id="1">headlineText</text>
<text id="2">bodyText</text>
</binding>
</visual>
</toast>

39. 300
Popečeni kruhki – Windows 8

40. 300
Popečeni kruhki – Windows Phone 8

41. 300
Popečeni kruhki – Windows Phone 8
<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification">
<wp:Toast>
<wp:Text1>[string]</wp:Text1>
<wp:Text2>[string]</wp:Text2>
<wp:Param>[string]</wp:Param>
</wp:Toast>
</wp:Notification>

42. 300
Popečeni kruhki – Windows Phone 8
ShellToast toast = new ShellToast();
toast.Title = "[title]";
toast.Content = "[content]";
toast.Show();

43. 300
demo
Popečeni kruhki – Windows 8

44. 300
Surova obvestila
 Vrsta potisnih obvestil
 Brez vizualne komponente
 Prejme jih lahko odprta aplikacija ali pritajeni agent
 PushNotificationReceived
 PushNotificationTrigger
 SignalR 

45. 300
Povzetek – kdaj uporabiti?
 Obvestila in stanje v realnem času
 Potisnjeno obvestilo
 Naročništvo na vsebino po meri
 Potisnjeno obvestilo
 Odziv na uporabnikovo akcijo ali zagon aplikacije
 Neposredna posodobitev (ali potisnjeno obvestilo)
 Periodična obvestila (novice, vreme, …)
 Periodično posodabljanje z določenim intervalom
 Komunikacija „v ţivo“
 Surova obvestila ali potisnjena obvestila

46. 300
Viri
 Windows 8 Tile Templates
 http://msdn.microsoft.com/en-
us/library/windows/apps/hh761491.aspx
 Windows Phone Tile Templates
 http://msdn.microsoft.com/en-
us/library/windowsphone/develop/hh202948(v=vs.105).aspx
 Windows 8 Toast Templates
 http://msdn.microsoft.com/library/windows/apps/hh761494.aspx
 Windows Phone Toast Template
 http://msdn.microsoft.com/en-
us/library/windowsphone/develop/jj662938(v=vs.105).aspx
 NotificationsExtensions.WinRT
 http://nuget.org/packages/NotificationsExtensions.WinRT

47. 300
Vprašanja?
Kako narediti vašo aplikacijo ţivo?
Andrej Tozon
Microsoft MVP
ANT Andrej Tozon s.p, Ljubljana
andrej@tozon.info | @andrejt

48. 300
VPRAŠANJA
Prosimo vas, da po koncu predavanja izpolnite
vprašalnike. Nekoga izmed vas bomo nagradili
z Nokio Lumia 820.
Vprašalniki bodo poslani na vaš e-naslov,
dostopni pa bodo tudi preko profila na spletnem
mestu www.ntk.si
Najlepša hvala!
Iščete kakovostno izobraţevanje? Obiščite Microsoftove izobraţevalne centre:
Uspeh = Znanje = Microsoftovi uradni tečaji + predavatelji Microsoft Certified Trainer