Upload
lazare-gomes
View
104
Download
0
Tags:
Embed Size (px)
Citation preview
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