AngelHack 2013 Deezer - Introduction to Windows Phone development

by Christopher MANEU

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

http://maneu.net/godevwp8

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

REBOOT

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

11/30/2014 Windows Phone availability

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Let’s dev !

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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)

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Some of the WP devices

Slide 24

Slide 24 text

Setup Dev environment & discover the tools

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Let’s code something…

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

The Application bar

Slide 39

Slide 39 text

Let’s build an app: Main screen

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Binding Cyril

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Let’s build an app: Data & Navigate

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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;