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 ID: 754376
Download Presentation The PPT/PDF document "Migrer vers Windows Phone 7" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1Slide2
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éliteSlide3
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 bleuSlide4
Plan de la sessionIntroduction aux plateformesTechPlayer, 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 Slide5
Introduction aux plateformesWindows 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
Silverlight / XNA
.NET / Compact Framework 4
C# / VB
Technologies
VS2010 Express For Windows Phone (gratuit)Expression Blend (gratuit)
Outils de développementSlide6
Introduction aux plateformesWindows Mobile 6.X
Ancienne génération mobile de Microsoft
Interface 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++)
TechnologiesVS2008 Pro (payant)Outils de développementSlide7
Introduction aux plateformesAndroid
OS mobile de Google
Interface au doigt
Basé sur un noyau Linux
VM spéciale
Dalvik
Java
Technologies
Eclipse (gratuit)Outils de développementSlide8
Introduction aux plateformesiOS
OS mobile d’Apple
Interface au doigt
Basé sur Mac OSX
Objective C et C
Technologies
XCode
(gratuit)
Interface
Builder (gratuit)Outils de développementSlide9
Introduction aux plateformes
Un vocabulaire
différent
Windows
Phone 7
Windows Mobile
Android
iPhone
PhoneApplicationPage
Form
Activity
UIView
ListBoxListViewListView
UITableView
Image
PictureBox
ImageView
UIImageView
TextBlock
Label
TextView
UILabel
MediaElement
ActiveX
MediaPlayer
VideoView
MPMoviePlayerSlide10
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éo
Joue les vidéosSlide11
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 Slide12
Architecture généraleSlide13
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
AndroidSlide14
Architecture générale
Modèle MVVM
Séparer IHM des traitements métiers
Adapté 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 7Slide15
MVVM adapté à TechPlayer
MainPage
VideoItemViewModel
- Name
Length
Comment
ImageUrl
File
VideoPage
VideoViewModel
Videos
download
videos
parser
vidéos
ObservableCollection
INotifyPropertyChanged
0..*Slide16
Téléchargement et parsing XMLSlide17
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
());
…Slide18
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
();Slide19
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
,
…Slide20
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
…Slide21
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
}Slide22
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
();Slide23
Téléchargement d’une imageSlide24
Téléchargement d’une imageWindows 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
());Slide25
Téléchargement d’une imageAndroid
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
");Slide26
Téléchargement d’une imageiOS
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
];Slide27
Téléchargement d’une imageWindows 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}"/>Slide28
Création d’une liste d’objetsSlide29
Création d’une liste d’objetsWindows 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 listeSlide30
Création d’une liste d’objetsAndroid
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 listeSlide31
Création d’une liste d’objetsiOS
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 listeSlide32
Création d’une liste d’objetsWindows Phone 7
Utilisation du composant
ListBox
<
ListBox
x:Name="VideosList"
ItemsSource
="{
Binding
MyVideos}" ItemContainerStyle="{
StaticResource ItemTemplate
}"
Binding
à une
ObservableCollection
ItemsSource
="{
Binding
MyVideos
}"Slide33
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">
…Slide34
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>Slide35
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 :
Selected
UnSelected
MouseOver
Normal…Slide36
Navigation vers une autre pageSlide37
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 TabSlide38
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 ordreSlide39
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
(…Slide40
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’argumentsAssigner 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 tempsSlide41
Lecture d’une vidéoSlide42
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 wrappersSlide43
Lecture d’une vidéo iOS
Utilisation de
MPMoviePlayer
Dans sa propre vue grâce au contrôleur
MPMoviePlayerViewController
o
u inclus dans une vue composite.
Lecture en local ou en streaming sur le netSlide44
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.Slide45
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
SourceEvent DownloadProgressChanged
Binding de la scrollbar<
ProgressBar
Value=
"{
Binding
Position.TotalSeconds
,
ElementName
=mediaElement1, Mode=
OneWay
}"
Minimum="0"
Maximum ="{
Binding
Length
}"
Style="{
StaticResource
PerformanceProgressBar
}"/>Slide46
Les APIsSlide47
Les APIsWindows 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 WINCESlide48
Les APIsiOS
SDK complet
Les
fonctions d’accès
au
device
sont unifiées et nombreuses
Hardware
figé
, simplifiant le développementSlide49
Les APIsAndroid
SDK complet
Les fonctions d’accès aux infos du
device
sont
nombreuses
Hardware non figé, rendant complexe le
développementSlide50
Les APIsWindows 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érerSlide51
Cycle de vie d’une applicationSlide52
Cycle de vie d’une application Windows Mobile
Application en background et jamais fermée
Sauf demande explicite ou soft reset du téléphoneSlide53
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 rapidementSlide54
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
rapidementSlide55
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éesDeactivated / Closing : Sauvegarde des données dans dictionnaire ou fichiers XMLSlide56
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 Slide57
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)Slide58
Q&RSlide59
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éveloppeursSlide60