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

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

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

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)

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)

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)

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)

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

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

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

Architecture générale date

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

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

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

Téléchargement et parsing XML

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()); …

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();

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 @Override public void startElement(String uri, String localName, …

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 …

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 }

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();

Téléchargement d’une image

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());

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");

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];

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}"/> BitmapCache sur les éléments animables uniquement dans le thread de composition date

Création d’une liste d’objets

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

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

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

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

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"> …

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>

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…

Navigation vers une autre page

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

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

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(…

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

Lecture d’une vidéo

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

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

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.

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}"/>

Les APIs

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

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

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

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

Cycle de vie d’une application

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

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

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

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

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

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)

Q&R

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 http://technet.com http://msdn.com