2

Migrer vers Windows Phone 7

depuis iOS, Android ou Windows Mobile8 février 2011

Fabien DecretMVP Device Application DevelopmentAdeneo Embedded

Stéphane Sibué MPV Windows Phone DevelopmentSoftélite

3

Les TechDays…

17 000 visiteurs sur 3 joursPlus de 300 conférences techniquesPlus de 300 speakersPlus de 140 exposantsPlus de 150 journalistesUne plénière chaque jour présentant la stratégie de MicrosoftDiffusion online en direct des conférences plénières tous les matinsDiffusion online en direct des conférences de l’amphithéâtre grand bleu

4

Plan de la session

Introduction aux plateformesTechPlayer, le fil conducteur

Architecture des applicationsTéléchargement et parsing XMLTéléchargement d’une imageCréation d’une liste d’objetsNavigation vers une autre pageLecture d’une vidéoLes APIsLe cycle de vie d’une application

5

Introduction aux plateformesWindows Phone 7Dernière génération mobile de Microsoft (10/2010)Rupture d’interface avec l’ancienne génération Style Metro (léger, sobre, typographie,

pas de chrome…)Interface 100% au doigt

Silverlight / XNA .NET / Compact Framework 4C# / VB

Technologies

VS2010 Express For Windows Phone (gratuit)Expression Blend (gratuit)

Outils de développement

6

Introduction aux plateformesWindows Mobile 6.X

Ancienne génération mobile de MicrosoftInterface au doigt si développement de

composants adaptés

SDK Windows Mobile 6.5 WinForms .NET / Compact Framework 3.5 C# / VB / code natif (C++)

Technologies

VS2008 Pro (payant)

Outils de développement

7

Introduction aux plateformesAndroid

OS mobile de GoogleInterface au doigt

Basé sur un noyau Linux VM spéciale Dalvik Java

Technologies

Eclipse (gratuit)

Outils de développement

8

Introduction aux plateformesiOS

OS mobile d’AppleInterface au doigt

Basé sur Mac OSX Objective C et C

Technologies

XCode (gratuit)Interface Builder (gratuit)

Outils de développement

9

Introduction aux plateformes

Un vocabulaire différent

Windows Phone 7 Windows Mobile Android iPhone

PhoneApplicationPage Form Activity UIView

ListBox ListView ListView UITableView

Image PictureBox ImageView UIImageView

TextBlock Label TextView UILabel

MediaElement ActiveX MediaPlayer

VideoView MPMoviePlayer

10

TechPlayer, le fil conducteurApplication de lecture vidéo Utilise un catalogue XML téléchargé depuis le net Affiche la liste des vidéos Affiche une page d’informations par vidéoJoue les vidéos

11

TechPlayer, le fil conducteurThèmes

Architecture générale Téléchargement et parsing XML Téléchargement d’images Affichage d’une liste d’objets Navigation entre pages Jouer une vidéo

12

Architecture générale

13

Architecture générale

Modèle-traitements des données- interactions avec la base de données…

Vue-présenter les résultats- traiter les actions utilisateur

Contrôleur- synchronisation de la vue et du modèle

Modèle MVC

Windows Mobile, iOS et Android

14

Architecture générale

Modèle MVVMSéparer IHM des traitements métiersAdapté pour le DataBinding

Modèle- objets de données métiers

Vue- s’occupe du rendu

INotifyPropertyChanged

UI en XAML / le moins possible de code-behind

VueModèle- Glue entre Vue et Modèle

Windows Phone 7

15

MVVM adapté à TechPlayer

MainPage

VideoItemViewModel- Name

- Length- Comment- ImageUrl

- File

VideoPage

VideoViewModel

Videos- download videos- parser vidéos

ObservableCollection

INotifyPropertyChanged

0..*

16

Téléchargement et parsing XML

17

Téléchargement et parsing XML

Windows Mobile Utilisation de la classe HttpWebRequest (synchrone)

Téléchargement réalisé via un XmlReader

HttpWebRequest web_request = (HttpWebRequest)HttpWebRequest.Create(@"http://...");

HttpWebResponse webResponse = (HttpWebResponse)web_request.GetResponse();

XmlReader xmlReader = XmlReader.Create(webResponse.GetResponseStream());

…

18

Téléchargement et parsing XML

Windows Mobile Parsing réalisé via du LINQ

XDocument xDoc = XDocument.Load(xmlReader);

List<Video> res = (xDoc.Descendants("video").Select( i => new VideoItemViewModel{ Name = root.Attribute("nom").Value, Length = root.Attribute("duree").Value, Icon = root.Attribute("vignette").Value, File = root.Attribute("chemin").Value, Comment = root.Attribute("commentaire").Value})).ToList();

19

Téléchargement et parsing XML

Android Utilisation de la classe SAXParser

Téléchargement réalisé via un InputStream

url = new URL("http://...);

InputStream input = Url.OpenStream();

Parsing réalisé par une classe spéciale (handler) invoquée par le parser

public class CatalogParser extends DefaultHandler

@Overridepublic void startElement(String uri, String localName, …

20

Téléchargement et parsing XML

iOS Utilisation de la classe NSXMLParser

Téléchargement réalisé par le parser directement

NSURL *url = [NSURL URLWithString:@”http://.....”];

NSXMLParser *parser = [[NSXMLParser alloc] initWithContentOfUrl:url];

Parsing réalisé par une classe spécial (délégué) invoquée par le parser

@interface CatalogParser : NSObject <NSXMLParserDelegate>

(void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName …

21

Téléchargement et parsing XML

Windows Phone 7 Utilisation de la classe WebClient (asynchrone)

Téléchargement asynchrone

var webclient = new WebClient();

webclient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webclient_DownloadStringCompleted);

webclient.DownloadStringAsync(new Uri(@"http://...", UriKind.Absolute));

void webclient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e){ // Parsing}

22

Téléchargement et parsing XML

Windows Phone 7Parsing réalisé via du LINQ

XDocument xDoc = XDocument.Parse(e.Result);

List<Video> res = (xDoc.Descendants("video").Select( i => new VideoItemViewModel{ Name = root.Attribute("nom").Value, Length = root.Attribute("duree").Value, Icon = root.Attribute("vignette").Value, File = root.Attribute("chemin").Value, Comment = root.Attribute("commentaire").Value})).ToList();

23

Téléchargement d’une image

24

Téléchargement d’une image

Windows Mobile Téléchargement via une HttpWebResquest

HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(URL);

myRequest.Method = "GET";

HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();

Création de l’image via la classe Bitmap

Bitmap bmp = new Bitmap(myResponse.GetResponseStream());

25

Téléchargement d’une image

Android

Téléchargement réalisé via un InputStream

url = new URL("http://...”);

InputStream input = (inputStream) Url.OpenStream();

Création de l’image via la classe Drawable

Drawable d = Drawable.createFromStream(input, “sourcename");

26

Téléchargement d’une image

iOS Téléchargement réalisé via un NSData

NSURL * url = [NSURL URLWithString:@”http://.....”];

NSData *data = [NSData dataWithContentsOfURL:url];

Création de l’image via la classe UIImage

UIImage *image = [UIImage imageWithData:data];

27

Téléchargement d’une image

Windows Phone 7 Téléchargement réalisé dans code behind

BitmapImage Image =new BitmapImage(new Uri(:@”http://...”, UriKind.Absolute));

Téléchargement réalisé dans XAML via du Binding

<Image Source="{Binding url}"/>

28

Création d’une liste d’objets

29

Création d’une liste d’objets

Windows Mobile

Utilisation du contrôle ListView

Utilisation du UIFrameworkClasse ListViewOwnerDrawn

Liste totalement personnalisable, il est possible de dessiner manuellement les items de la liste via le Graph de chaque item.

Liste à coupler avec les fonctions wrappées d’AlphaBlend ou IImage afin de gérer des Bitmaps transparents par exemple.

Scrollable grâce à l’API de Gesture

Utilisation de librairies de composants graphiques Remplissage manuel de la liste

30

Création d’une liste d’objets

Android

Utilisation du contrôle ListView Création d’un adapter héritant de BaseAdapter

public class VideoAdapter extends BaseAdapter

Connexion entre la ListView et son adapter

ListView lstVideos;VideoAdapter adapter;

lstVideos = (ListView)findViewById(R.id.lstVideos);this.adapter = new VideoAdapter(this);this.lstVideos.setAdapter(adapter);

L’adapter fournit les données à la listeL’adapter fournit les cellules (graphiquement) à la liste

31

Création d’une liste d’objets

iOS

Utilisation du contrôle UITableView Création d’un fournisseur de données

<UITableViewDataSource>

public class VideoAdapter extends BaseAdapter

Connexion entre la UITableView et son DataSource

maTableView.dataSource = monDataSource;

Le DataSource fournit les données à la listeLe DataSource fournit les cellules (graphiquement) à la liste

32

Création d’une liste d’objets

Windows Phone 7

Utilisation du composant ListBox

<ListBox x:Name="VideosList"ItemsSource="{Binding MyVideos}"ItemContainerStyle="{StaticResource ItemTemplate}" 

Binding à une ObservableCollection

ItemsSource="{Binding MyVideos}"

33

Création d’une liste d’objetsWindows Phone 7

Personnalisation de la liste (templates)

<Style x:Key="ItemTemplate" TargetType="ListBoxItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Grid x:Name="ItemGrid"  Background="Transparent«  HorizontalAlignment="Stretch"  MinHeight="110"  Margin="0,0,0,5" CacheMode="BitmapCache"> <Grid.ColumnDefinitions> <ColumnDefinition Width="110"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="{Binding BitmapUrl}"  Grid.Column="0«  Height="100" Width="100" Stretch="UniformToFill" HorizontalAlignment="Left" VerticalAlignment="Center"/> <StackPanel Orientation="Vertical" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center"> …

34

Création d’une liste d’objetsWindows Phone 7

Personnalisation de la liste (templates)… <TextBlock Text="{Binding Name}" Foreground="White" TextWrapping="Wrap" FontFamily="Segoe WP Light" Style="{StaticResource PhoneTextExtraLargeStyle}" /> <TextBlock Text="{Binding Length}" Foreground="White«  TextWrapping="Wrap" Style="{StaticResource PhoneTextBlockBase}" /> </StackPanel> </Grid> </ControlTemplate> </Setter.Value> </Setter></Style>

35

Création d’une liste d’objetsWindows Phone 7

Comportement dynamique VisualStateManager

Possibilité de définir des comportements pour les états ou lors du changement d’état :

SelectedUnSelectedMouseOverNormal…

36

Navigation vers une autre page

37

Navigation vers une autre page

Windows Mobile

Création des différentes Forms

Possibilité de créer des User Controls

Utilisation de singleton ou passage de données en paramètres du constructeur d’un Form

Composant Tab

38

Navigation vers une autre page

iOS

Création des différentes vues

Utilisation de UINavigationController

Fournit tous les outils pour gérer la navigationGère une pile de vues et leur ordre

39

Navigation vers une autre page Android

Création des différentes activités

Appel des activités dans l’ordre souhaité

Intent intent = new Intent(this, EntryInfoActivity.class);

startActivity(intent);

Gestion d’une valeur de retour si nécessaire

StartActivityForResult(…

40

Navigation vers une autre page

Windows Phone 7 Les bases

Une PhoneApplicationFrame Plusieurs PhoneApplicationPages

NavigationNavigationService.Navigate( new Uri("/VideoPage.xaml", UriKind.Relative));

Passage d’argumentsAssigner le DataContext à la page suivantePasser les arguments dans l’URI de la page destination

ComposantsPivot

Naviguer / séparer / trier / charger les items séparémentPanorama

Suggérer / explorer / tout charger en même temps

41

Lecture d’une vidéo

42

Lecture d’une vidéo

Windows Mobile

Utilisation du composant Media Player importé depuis l’ActiveX

MediaPlayer via un wrapper d’object COM

API disponibles :- Play- Url- event Buffering

Utilisation de DDSHOW via du code natifet des wrappers

43

Lecture d’une vidéo

iOS

Utilisation de MPMoviePlayer

Dans sa propre vue grâce au contrôleur MPMoviePlayerViewControllerou inclus dans une vue composite.

Lecture en local ou en streaming sur le net

44

Lecture d’une vidéo

Android

Utilisation du composant VideoView

Inclus dans la vueLecture en local ou en streaming sur le net

Associé au composant MediaController pour bénéficier des commandes de lecture sans programmation.

45

Lecture d’une vidéo Windows Phone 7

Le nouveau composant MediaElement est directement accessible depuis le code Silverlight et décode nativement les formats suivants:

H263WMVMPEG-4

FonctionnalitésPlay / PauseSourceEvent DownloadProgressChanged

Binding de la scrollbar

<ProgressBar Value="{Binding Position.TotalSeconds, ElementName=mediaElement1, Mode=OneWay}" Minimum="0" Maximum ="{Binding Length}" Style="{StaticResource PerformanceProgressBar}"/>

46

Les APIs

47

Les APIs

Windows Mobile

Fastidieux ca r besoin de récupérer les informations liées au téléphone

AccéléromètreGPSRadio FMGestion des boutons

Besoin de faire appel aux DLLs bas niveau du constructeur ou des APIs WINCE

48

Les APIs

iOS

SDK completLes fonctions d’accès au device sont unifiées et nombreusesHardware figé, simplifiant le développement

49

Les APIs

Android

SDK completLes fonctions d’accès aux infos du device sont nombreusesHardware non figé, rendant complexe le développement

50

Les APIs

Windows Phone 7

Gestion unifiée des APIsAccéléromètreGPSOrientation de l’écranRadio FMGestion des boutons du téléphone

Châssis standard pour tous les téléphones = Pas de cas particuliers à gérer

51

Cycle de vie d’une application

52

Cycle de vie d’une application

Windows Mobile

Application en background et jamais fermée

Sauf demande explicite ou soft reset du téléphone

53

Cycle de vie d’une application

iOS

Application endormie en background (sauf certaines parties / iOS 4)

Le système peut tuer l’application quand il le veut Les données doivent être enregistrées au bon moment et

rapidement

54

Cycle de vie d’une application

Android

Application endormie en background (sauf les services) Le système peut tuer l’application quand il le veut Les données doivent être enregistrées au bon moment et

rapidement

55

Cycle de vie d’une application

Windows Phone 7

Application fermée dès qu’on sort de l’application

Données non sauvegardées automatiquement

Mécanisme de « tombstonning »Sauvegarder état application avant de la fermerRestituer contexte application à son démarrage

Evenements à gérerLaunching / Activated : récupération et chargement des donnéesDeactivated / Closing : Sauvegarde des données dans dictionnaire ou fichiers XML

56

Conclusion Nouvelle plateforme de développement

Facilité de développement des applications

Expérience utilisateur amélioréeComposantsGesture…

APIs unifiés pour l’accès aux capteurs

Applications communicantes

57

Sessions connexesMardi

Une application en 3 jours. Solutions concrètes pour industrialiser et accélérer le développement Windows Phone 7 (WP7-204 à 16h)

Cloud pour Windows Phone (WP7-205 à 17h30)

Mercredi

Scénario de développement 3 écrans + 1 cloud : un jeu Windows Phone 7, Web et PC grâce à Silverlight, XNA et Azure (WP7-203 à 16h)

Jeudi

Ergonomie et design d’applications Windows Phone 7 – Comprendre Metro (WP7-103 à 13h)

Windows phone 7 en entreprise (WP7-104 à 14h30)

58

Q&R

59

MSDN et TechNet : l’essentiel des ressources techniques à portée de clic

http://technet.com http://msdn.com

Portail administration et infrastructure pour informaticiens

Portail de ressources technique pour développeurs