Migrer vers Windows Phone 7 depuis iOS, Android ou Windows Mobile

Présentation au sujet: "Migrer vers Windows Phone 7 depuis iOS, Android ou Windows Mobile"— Transcription de la présentation:

1

2 Migrer vers Windows Phone 7 depuis iOS, Android ou Windows Mobile
8 février 2011 Fabien Decret MVP Device Application Development Adeneo Embedded Stéphane Sibué MPV Windows Phone Development Softélite

3 Les TechDays… 17 000 visiteurs sur 3 jours
Plus de 300 conférences techniques Plus de 300 speakers Plus de 140 exposants Plus de 150 journalistes Une plénière chaque jour présentant la stratégie de Microsoft Diffusion online en direct des conférences plénières tous les matins Diffusion online en direct des conférences de l’amphithéâtre grand bleu

4 Plan de la session Introduction aux plateformes
TechPlayer, le fil conducteur Architecture des applications Téléchargement et parsing XML Téléchargement d’une image Création d’une liste d’objets Navigation vers une autre page Lecture d’une vidéo Les APIs Le cycle de vie d’une application

5 Introduction aux plateformes
Windows Phone 7 Derniè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 Technologies Silverlight / XNA .NET / Compact Framework 4 C# / VB Outils de développement VS2010 Express For Windows Phone (gratuit) Expression Blend (gratuit)

6 Introduction aux plateformes
Windows Mobile 6.X Ancienne génération mobile de Microsoft Interface au doigt si développement de composants adaptés Technologies SDK Windows Mobile 6.5 WinForms .NET / Compact Framework 3.5 C# / VB / code natif (C++) Outils de développement VS2008 Pro (payant)

7 Introduction aux plateformes
Android OS mobile de Google Interface au doigt Technologies Basé sur un noyau Linux VM spéciale Dalvik Java Outils de développement Eclipse (gratuit)

8 Introduction aux plateformes
iOS OS mobile d’Apple Interface au doigt Technologies Basé sur Mac OSX Objective C et C Outils de développement XCode (gratuit) Interface Builder (gratuit)

9 Introduction aux plateformes
Un vocabulaire différent Windows Phone 7 Windows Mobile Android iPhone PhoneApplicationPage Form Activity UIView ListBox ListView UITableView Image PictureBox ImageView UIImageView TextBlock Label TextView UILabel MediaElement ActiveX MediaPlayer VideoView MPMoviePlayer

10 TechPlayer, le fil conducteur
Application 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éo Joue les vidéos date

11 TechPlayer, le fil conducteur
Thè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 date

12 Architecture générale
date

13 Architecture générale
Windows Mobile, iOS et Android Modèle MVC Contrôleur - synchronisation de la vue et du modèle Vue -présenter les résultats - traiter les actions utilisateur Modèle traitements des données interactions avec la base de données… Ce modèle d'architecture impose la séparation entre les données, la présentation et les traitements, ce qui donne trois parties fondamentales dans l'application finale : le modèle, la vue et le contrôleur. La vue n'effectue aucun traitement, elle se contente d'afficher les résultats des traitements effectués par le modèle et d'interagir avec l'utilisateur. Exemple d’un clic : vue avertit le controleur qui demande au modèle un changement des données, le contrôleur demande la modification des données au modèle, ce dernier avertit la vue que les données ont changé pour qu'elle se mette à jour. date

14 Architecture générale
Windows Phone 7 Modèle MVVM Séparer IHM des traitements métiers Adapté pour le DataBinding UI en XAML / le moins possible de code-behind Vue - s’occupe du rendu VueModèle - Glue entre Vue et Modèle INotifyPropertyChanged Adaptation du modèle à la vue Code de déclenchements des actions / logique des inetractions avec utilisateurs / navigation / tombstonning Objets métiers / interations avec les sources de données Modèle - objets de données métiers date

15 MVVM adapté à TechPlayer
MainPage VideoPage VideoItemViewModel - Name Length Comment ImageUrl File VideoViewModel ObservableCollection 0..* Videos download videos parser vidéos INotifyPropertyChanged

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 = 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(" InputStream input = Url.OpenStream(); Parsing réalisé par une classe spéciale (handler) invoquée par le parser public class CatalogParser extends DefaultHandler @Override public 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 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 UriKind.Absolute)); void webclient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { // Parsing }

22 Téléchargement et parsing XML
Windows Phone 7 Parsing 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(" 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 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 UriKind.Absolute)); Téléchargement réalisé dans XAML via du Binding <Image Source="{Binding url}"/> BitmapCache sur les éléments animables uniquement dans le thread de composition date

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 UIFramework Classe 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 liste L’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 liste Le 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

33 Création d’une liste d’objets
Windows 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’objets
Windows 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’objets
Windows Phone 7 Comportement dynamique VisualStateManager Possibilité de définir des comportements pour les états ou lors du changement d’état : Selected UnSelected MouseOver Normal…

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 navigation Gè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 Navigation NavigationService.Navigate( new Uri("/VideoPage.xaml", UriKind.Relative)); Passage d’arguments Assigner le DataContext à la page suivante Passer les arguments dans l’URI de la page destination Composants Pivot Naviguer / séparer / trier / charger les items séparément Panorama 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 natif et des wrappers

43 Lecture d’une vidéo iOS Utilisation de MPMoviePlayer
Dans sa propre vue grâce au contrôleur MPMoviePlayerViewController ou 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 vue Lecture 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: H263 WMV MPEG-4 Fonctionnalités Play / Pause Source Event 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ètre GPS Radio FM Gestion des boutons Besoin de faire appel aux DLLs bas niveau du constructeur ou des APIs WINCE

48 Les APIs iOS SDK complet
Les fonctions d’accès au device sont unifiées et nombreuses Hardware figé, simplifiant le développement

49 Les APIs Android SDK complet
Les fonctions d’accès aux infos du device sont nombreuses Hardware non figé, rendant complexe le développement

50 Les APIs Windows Phone 7 Gestion unifiée des APIs Accéléromètre GPS
Orientation de l’écran Radio FM Gestion 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 fermer Restituer contexte application à son démarrage Evenements à gérer Launching / Activated : récupération et chargement des données Deactivated / Closing : Sauvegarde des données dans dictionnaire ou fichiers XML Simuler l’expérience mutitâche Sauvegarde dans Isolated Storage date

56 Conclusion Nouvelle plateforme de développement
Facilité de développement des applications Expérience utilisateur améliorée Composants Gesture… APIs unifiés pour l’accès aux capteurs Applications communicantes

57 Sessions connexes Mardi Mercredi Jeudi
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
Portail administration et infrastructure pour informaticiens Portail de ressources technique pour développeurs

60