AngelHack 2013 Deezer - Introduction to Windows Phone development

Transcript

1. Windows Phone 8 workshop AngelHack 13 - Paris Christopher MANEU maneu.net | deezer.com
2. Hi, I’m Christopher Maneu Mobile UI Engineer@ Deezer Microsoft MVP & Nokia Developer Champion
3. http://maneu.net/godevwp8
4. ❶ Windows Phone ecosystem ❷ The tools and devices ❸ Get some {code} !
6. REBOOT
10. 11/30/2014 Windows Phone availability
11. Windows Phone Dev. availability 11/30/2014 © 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved. 38 countries Windows Phone 7.x 180+ countries Windows Phone 8.0
12. Great opportunities through store •All paid apps integrate try before buy, •Revenue share: 30%. After $20000, 20%, •In-app purchase, •MO billing, multiple payment options (great for emerging markets) •Many promotions options (Microsoft, Nokia, operators, …)
13. Let’s dev !
14. XAML + C#, a perfect match • The prefered development option • Access to all the .net and WinRT platform and phone features • Ideal for non-games apps • Can be used for some games
15. DirectX + C++ App • Best for games, • Maximize code reuse between multiple platforms
16. Mix XAML/C# and C++/DirectX • Best for games, • Maximize code reuse between multiple platforms • Develop a classic XAML app, and get DirectX content in a control.
17. HTML Development • Nothing really supported out-of-box • All phonegap APIs are supported on Windows Phone • No restrictions to deploy a native app that embeed HTML
18. iPhone developer ? • C# language is, well, quite different from Objective-C (Managed, a Garbage collector, …) • Interface is XML based (XAML) • Expression Blend is equivalent to Expression Builder • We can use MVVM, a design pattern close to MVC (but no needs to create outlets :p)
19. Android developer ? • C# language is close to Java • But we have great surprises for you (LINQ, real generics, …) • Interface is XML based (XAML), a bit more « integrated » than the android XML layout, • No need to create AVHDs :p
21. A common core (it’s just a beginning…)
22. Windows Phone devices • Hi-res 4 points capacitive screen • 3 (or 4) screen resolutions from 480x800 to 720p • 3 hardwares buttons • 5M px camera • Consistent CPU/GPU • Same available RAM • A/V processing capabilities
23. Some of the WP devices
24. Setup Dev environment & discover the tools
25. Recap • Download tools from http://maneu.net/godevwp8 • Everything is included • You can unlock one device per Microsoft Account. Register for a Windows Phone Developer account for more (http://dev.windowsphone.com), • Emulator includes tools for location & network tests
26. Let’s code something…
27. Microsoft design language principles Clean, Light, Open, Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital
28. Les conteneurs • Grid • StackPanel • Canvas • ScrollViewer • WrapPanel 28
29. La grid • Permet de positionner des éléments dans un système ligne/colonne • Possibilité de s’étendre sur plusieurs lignes/colonnes • Par défaut, les éléments prennent tout l’espace de la cellule 29
30. Le StackPanel • Permet de positionner des éléments « empilés » • Horizontalement ou verticalement 30
31. Le canvas • Permet un positionnement Absolu • Le positionnement le plus simple, mais pas le meilleur • Orientation • Resizing • Adaptation aux données 31
32. Le scrollviewer • Permet de faire défiler un contenu lorsque la place allouée n’est pas suffisante • Les ListBox utilisent par défaut un scrollviewer 32
33. Le wrappanel • Fait partie de la Silverlight Toolkit (http://silverlight.codeplex.co m) • Permet de positionner les élémenents les uns après les autres 33
34. Borders • Elles permettent d’encadrer / colorer une zone • Sont généralement utilisées autour d’un conteneur 34
35. Marges, et alignement • Permettent de positionner un élément au sein de son conteneur • HorizontalAlignment et VerticalAlignment • Margin 35
36. Z-Order • Par défaut, le dernier élément déclaré se situe au dessus • On peut changer cette situation avec la propriété z-order • Plus la valeur est grande, plus l’objet sera positionné haut 36
37. Organiser son écran • Choisir le/les conteneurs • Placer les bordures • Placer les éléments • Ajuster les marges et alignements • Ajuster le Z-Order si nécessaire • Fixer la propriété SupportedOrientations • Portrait, Landscape ou PortraitOrLandscape • Ne pas fixer/se baser sur 480/800 37
38. The Application bar
39. Let’s build an app: Main screen
40. Navigation • WP apps works like websites • Uri-based navigation • Query parameters • Go Back • History
43. Binding Cyril
44. Binding: how to ? • Define Binding in XAML <TextBox Text="{Binding UserName, Mode=TwoWay}" /> • Définir data source Credential credential = new Credential(); credential.UserName = "Cyril"; DataContext = credential;
45. Let’s build an app: Data & Navigate
46. Navigate Uri secondPage = new Uri("/SecondPage.xaml", UriKind.RelativeOrAbsolute); NavigationService.Navigate(secondPage); NavigationService.GoBack();
47. Navigate with parameters NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=hello", UriKind.Relative)); string msg = ""; if (NavigationContext.QueryString.TryGetValue("msg", out msg)) textBlock1.Text = msg;
48. App lifecycle
49. Let’s build an app: Server, do you hear me ?
50. http://maneu.net/ah-workshopwp
51. Merci http://maneu.net/devcamps-cyclewin8