AngelHack 2013 Deezer - Introduction to Windows Phone development

Transcript

1. Windows Phone 8
   workshop
   AngelHack 13 - Paris
   Christopher MANEU
   maneu.net | deezer.com
   

   View Slide

2. Hi, I’m
   Christopher Maneu
   Mobile UI Engineer@ Deezer
   Microsoft MVP & Nokia Developer Champion
   

   View Slide

3. http://maneu.net/godevwp8
   

   View Slide

4. ❶ Windows Phone ecosystem
   ❷ The tools and devices
   ❸ Get some {code} !
   

   View Slide

5. View Slide

6. REBOOT
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. 11/30/2014
    Windows Phone availability
    

    View Slide

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
    

    View Slide

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,
    …)
    

    View Slide

13. Let’s dev !
    

    View Slide

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
    

    View Slide

15. DirectX + C++ App
    • Best for games,
    • Maximize code reuse between multiple platforms
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

20. View Slide

21. A common core (it’s just a beginning…)
    

    View Slide

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
    

    View Slide

23. Some of the WP devices
    

    View Slide

24. Setup Dev environment & discover the tools
    

    View Slide

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
    

    View Slide

26. Let’s code something…
    

    View Slide

27. Microsoft design language principles
    Clean, Light, Open, Fast
    Celebrate Typography
    Alive in Motion
    Content, Not Chrome
    Authentically Digital
    

    View Slide

28. Les conteneurs
    • Grid
    • StackPanel
    • Canvas
    • ScrollViewer
    • WrapPanel
    28
    

    View Slide

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
    

    View Slide

30. Le StackPanel
    • Permet de positionner
    des éléments
    « empilés »
    • Horizontalement ou
    verticalement
    30
    

    View Slide

31. Le canvas
    • Permet un
    positionnement Absolu
    • Le positionnement le
    plus simple, mais pas le
    meilleur
    • Orientation
    • Resizing
    • Adaptation aux
    données
    31
    

    View Slide

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
    

    View Slide

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
    

    View Slide

34. Borders
    • Elles permettent
    d’encadrer / colorer
    une zone
    • Sont généralement
    utilisées autour d’un
    conteneur
    34
    

    View Slide

35. Marges, et alignement
    • Permettent de
    positionner un
    élément au sein de
    son conteneur
    • HorizontalAlignment
    et VerticalAlignment
    • Margin
    35
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. The Application bar
    

    View Slide

39. Let’s build an app: Main screen
    

    View Slide

40. Navigation
    • WP apps works like websites
    • Uri-based navigation
    • Query parameters
    • Go Back
    • History
    

    View Slide

41. View Slide

42. View Slide

43. Binding
    Cyril
    

    View Slide

44. Binding: how to ?
    • Define Binding in XAML
    
    • Définir data source
    Credential credential = new Credential();
    credential.UserName = "Cyril";
    DataContext = credential;
    

    View Slide

45. Let’s build an app: Data & Navigate
    

    View Slide

46. Navigate
    Uri secondPage = new Uri("/SecondPage.xaml",
    UriKind.RelativeOrAbsolute);
    NavigationService.Navigate(secondPage);
    NavigationService.GoBack();
    

    View Slide

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;
    

    View Slide

48. App lifecycle
    

    View Slide

49. Let’s build an app: Server, do you hear me ?
    

    View Slide

50. http://maneu.net/ah-workshopwp
    

    View Slide

51. Merci
    http://maneu.net/devcamps-cyclewin8
    

    View Slide