Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngelHack 2013 Deezer - Introduction to Windows Phone development

AngelHack 2013 Deezer - Introduction to Windows Phone development

Christopher MANEU

October 19, 2013
Tweet

More Decks by Christopher MANEU

Other Decks in Technology

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