Windows phone 8 - Développement de base

Windows Phone 8Patrick Grasseels

Développement Windows Phone 8 - Patrick Grasseels

Plan du cours

Chapitre 1 : Introduction

Chapitre 2 : Installation

Chapitre 3 : L’interface utilisateur

Chapitre 4 : Interface utilisateur avancée (Toolkit)

Chapitre 5 : Tuiles et Notifications

Chapitre 6 : Styles et animations

Chapitre 7 : Stockage de données

Chapitre 8 : Utilisations des composants téléphone


IntroductionChapitre 1


Introduction

Le monde du mobile

Avec l’émergence des smartphones qui deviennent de plus

en plus des micro ordinateurs, Microsoft face à la

concurrence (Apple, Google, etc ) doit lui aussi s’adapter.

Il sort donc en 2011 Windows Phone 7, suivit en 2013 de

Windows Phone 8 et Windows Phone 8.1 en 2014.


Introduction

iPhone OS : le concurrent numéro un pour Android. Il s’agit bien sûr du système présent sur les différentes générations d’iPhone, produites par Apple mais également sur ses tablettes iPad

Windows Mobile : tout autant propriétaire, le système pour mobile proposé par Microsoft est distribué sur de nombreux téléphones

Symbian : récemment passé en open source, ce système d’exploitation est la propriété de Nokia et est présent – entre autres – sur un grand nombre de téléphones de la firme finlandaise

BlackBerry OS : il est présent sur tout les téléphones de la marque RIM (Research In Motion)

Android : sorti en 2005 il est le pion maitre chez Google dans le monde du mobile. C’est également lui qui domine le marché des OS Mobile avec environ 70% de PDM.

Windows Phone 8 : Le dernier sorti de chez Microsoft, il est l’amélioration de WP7 avec une nouvelle interface Modern UI.


Parts de marché


Windows Phone

Windows Phone est un système d'exploitation mobile

développé par Microsoft pour succéder à Windows Mobile, sa

précédente plateforme logicielle qui a été renommée pour

l'occasion en Windows Phone Classic1'2. Contrairement au

système qu'il remplace, Windows Phone est d'abord

principalement destiné au grand public plutôt qu'au marché

des entreprises3. Cependant depuis Windows Phone 8,

Microsoft propose des fonctions avancées4 pour les entreprises

en offrant, par exemple, un espace d'applications réservé aux

entreprises. Il a été lancé le 21 octobre 2010 en Europe,

à Singapour, en Australie et en Nouvelle-Zélande,

le8 novembre 2010 aux États-Unis et au Canada, puis

le 24 novembre 2010 au Mexique5.


*Wikipédia

http://fr.wikipedia.org/wiki/Syst%C3%A8me_d'exploitation

http://fr.wikipedia.org/wiki/Microsoft

http://fr.wikipedia.org/wiki/Windows_Mobile

http://fr.wikipedia.org/wiki/Windows_Phone#cite_note-Q.26A-1

http://fr.wikipedia.org/wiki/Windows_Phone#cite_note-2



http://fr.wikipedia.org/wiki/21_octobre

http://fr.wikipedia.org/wiki/Octobre_2010

http://fr.wikipedia.org/wiki/2010

http://fr.wikipedia.org/wiki/Europe

http://fr.wikipedia.org/wiki/Singapour

http://fr.wikipedia.org/wiki/Australie

http://fr.wikipedia.org/wiki/Nouvelle-Z%C3%A9lande

http://fr.wikipedia.org/wiki/8_novembre

http://fr.wikipedia.org/wiki/Novembre_2010


http://fr.wikipedia.org/wiki/%C3%89tats-Unis

http://fr.wikipedia.org/wiki/Canada

http://fr.wikipedia.org/wiki/24_novembre

http://fr.wikipedia.org/wiki/Novembre_2010


http://fr.wikipedia.org/wiki/Mexique


Windows Phone Store

Pour l’installation d’application il existe deux

possibilités : soit installer directement un .xap sur

son téléphone, soit explorer le store pour installer

les applications qui y sont exposé.

Les applications présentes sur le store on subit

une batterie de test avant d’être approuvées et

disponible au public.


*Wikipédia

http://www.windowsphone.com/fr-be/store

http://www.windowsphone.com/fr-be/store

Windows Phone 8 SDK

Pour développer nous aurons besoin de :

Windows 8

Visual Studio 2013

SDK Windows Phone 8

http://dev.windows.com/en-us/develop/download-phone-sdk



InstallationChapitre 2


Installation

Télécharger le SDK Windows Phone 8

http://dev.windows.com/en-us/develop/download-phone-

sdk

Vérifier que l’Hyper-V est installé et activé.

Sinon, aller dans panneau de configuration.

Applications et fonctionnalités

Activer Hyper-V

Redémarrer

Lancer l’installation


*Wikipédia


Crée un projet

Fichier -> Nouveau -> Projet

Sélectionner C#

Applications du Windows Store

Applications Windows Phone

Application Vide (Silverlight)


*Wikipédia

L’interface utilisateurChapitre 3


L’interface utilisateur

L’interface utilisateur se compose de différents

contrôles, chacun ayant ses propres spécificités.

Il existe plusieurs type de contrôles utilisateur, certains

sont spécialement dédiés au placements d’éléments,

d’autre à la saisie utilisateur, ou encore aux interactions

ou listing.

Les Grid, Stackpanel permettent par exemple

d’organiser les éléments sans avoir besoin de les placer

avec des margin et autres. L’avantage de ce type de

construction d’interface est quelle s’adapte facilement

lorsque l’ont change l’orientation ou même la

résolution.


Grid

La Grid est un élément de placement, qui peut se découper en

colonne ou en ligne.

L’avantage d’une grille permet également de définir un

DataContext sur une partie précise de l’interface.


<Grid ShowGridLines=true DataContext=‘’{Binding}’’>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=‘’*’’/>

<ColumnDefinition Width=‘’*’’/>

</Grid.ColumnDefinitions>

</Grid>

• ShowGridLines affichera des lignes fictives qui représentent la

découpe définie pour la grille.

• DataContext offre donc la possibilité de définir un DataContext

précis sur la grille qui se propagera aux éléments à l’intérieur.

Grid


• Grid.ColumnDefinitions & Grid.RowDefinitions vont permettre de découper la grille

en lignes et colonnes. En spécifiant soit la largeur, soit la hauteur. Les valeurs

possibles sont des nombres entiers, auto pour une dimension qui s’adapte au

contenu ou * pour une répartition égale entre les éléments.

<Grid x:Name="LayoutRoot" Background="Transparent" ShowGridLines="True">

<Grid.RowDefinitions>

<RowDefinition Height="*" />



</Grid.RowDefinitions>

<Grid ShowGridLines="True">


<ColumnDefinition Width="*" />



</Grid>

<Grid Grid.Row="2" ShowGridLines="True">





<Grid Grid.Column="1" ShowGridLines="True">





</Grid>

</Grid>

</Grid>

Grid


• Exercice

1 :

• Exercice

2 :

StackPanel

Le StackPanel est un élément de placement, il ajoute simplement

les éléments les un à la suite des autres horizontalement ou

verticalement.

C’est un contrôle très utilise lorsqu’il est nécessaire d’empiler les

boutons, textbox etc …


<StackPanel Orientation="Horizontal">

<Button Content="1"></Button>





</StackPanel>

• DataContext offre comme pour la Grid de définir celui-ci uniquement

au StackPanel.

<StackPanel Orientation="Vertical">






</StackPanel>

TextBlock

Le TextBlock est un des éléments les plus simple de l’interface utilisateur, il sert

donc à afficher du texte.

Il est paramétrable pour accueillir tout type de texte, du mot seul au paragraphe

de plusieurs lignes



<TextBlock Text="Hello World !" />

<TextBlock Text="Hello World !" FontSize="40" />

<TextBlock Text="Hello World !" FontFamily="Arial"/>

<TextBlock Text="Hello World !" FontStyle="Italic"/>

<TextBlock Text="Hello World !" Foreground="Red"/>

</StackPanel>

TextBox

La TextBox contrairement au TextBlock ne s’occupe pas d’afficher

du texte, mais bien de récupérer la saisie utilisateur.

Sa principale utilisation est lorsqu’une interaction avec

l’utilisateur est demandée.

Saisie de nom d’utilisateur

Saisie de nom

Saisie de prénom

Saisie de message



<TextBox Foreground="Red" />

<TextBox FontSize="50"/>

<TextBox FontStyle="Italic"/>

</StackPanel>

PasswordBox

Elle a la même utilité que la TextBox à l’exception près que celle-ci va cacher le

contenu qui se trouve à l’intérieur et le remplacer par un caractère de substitution

qu’il est possible de choisir soit même lors du développement



<PasswordBox Foreground="Red"/>

<PasswordBox Foreground="Red" PasswordChar="#"/>

<PasswordBox Foreground="Red" PasswordChar="O"/>

<PasswordBox Foreground="Red" PasswordChar="X" FontSize="80"/>

</StackPanel>

Button

Le bouton est l’élément principal qui est utilisé par les utilisateurs

pour intéragir avec l’application. Un bouton peut signifier une

navigation entre page, une soumission de données, etc.



<Button Content="Button One" />

<Button Content="Button One" Foreground="Red" />

<Button Content="Button One" BorderBrush="Red" />

<Button Content="Button One" FontSize="38" />

<Button Content="Button One" Background="Red"/>

<Button Content="Button One" FontStyle="Italic"/>

<Button Content="Button One" FontWeight="Bold"/>

</StackPanel>

CheckBox

La CheckBox permet de récupérer un changement d’état simplement, son résultat

est une booléen nullable.



<CheckBox Content="MyValue"/>

<CheckBox Content="MyValue" Foreground="Red"/>

<CheckBox Content="MyValue" BorderBrush="Red"/>

<CheckBox Content="MyValue" FontFamily="Comic Sans MS"/>

<CheckBox Content="MyValue" BorderBrush="Red" Foreground="Red"/>

<CheckBox Content="MyValue">

<CheckBox.RenderTransform>

<ScaleTransform ScaleX="2" ScaleY="2" />

</CheckBox.RenderTransform>

</CheckBox>

</StackPanel>

Radio

Pareil que pour la CheckBox, à l’exception que les radios peuvent être groupés

dans un seul et même groupe limité à un le nombre d’éléments pouvant être

cochés. L’attribut GroupName permet de rassembler des RadioButton entre eux.



<RadioButton GroupName="Options" Content="Option 1"/>

<RadioButton GroupName="Options" Content="Option 2" Foreground="Red"/>

<RadioButton GroupName="Options" Content="Option 3" BorderBrush="Red"/>

<RadioButton GroupName="Options" Content="Option 4" FontFamily="Comic Sans MS"/>

<RadioButton GroupName="Options" Content="Option 5" FontSize="60"/>

<RadioButton GroupName="Options" Content="Option 6">

<RadioButton.RenderTransform>


</RadioButton.RenderTransform>

</RadioButton>

</StackPanel>

LongListSelector

Le LongListSelector est un contrôle qui permet d’afficher une liste d’éléments /

résultats.


<phone:LongListSelector ItemsSource="{Binding}" />

public partial class MainPage : PhoneApplicationPage

{

ObservableCollection<String> dc = new ObservableCollection<String>();

private const int MAXELEMENT = 105;

// Constructeur

public MainPage()

{

InitializeComponent();

for (int i = 0; i < MAXELEMENT; i++)

dc.Add("Item " + i);

this.DataContext = dc;

}

}

LongListSelector

Dans le premier exemple, il était simplement question de lister une liste de String.

A présent nous allons redéfinir l’ItemTemplate afin d’afficher les informations d’un

utilisateur.


<phone:LongListSelector ItemsSource="{Binding}">

<phone:LongListSelector.ItemTemplate>

<DataTemplate>

<StackPanel>

<TextBlock Text="{Binding Firstname}" />

<TextBlock Text="{Binding Lastname}" />

</StackPanel>

</DataTemplate>

</phone:LongListSelector.ItemTemplate>

</phone:LongListSelector>


{

ObservableCollection<User> dc = new ObservableCollection<User>();

private const int MAXELEMENT = 105;

public MainPage()

{


for (int i = 0; i < MAXELEMENT; i++)

dc.Add(new User()

{

Firstname = "FirstName " + i,

Lastname = "LastName " + i

});

this.DataContext = dc;

}

}

public class User

{

public string Firstname { get; set; }

public string Lastname { get; set; }

}

ProgressBar

La ProgressBar permet d’afficher l’état d’avancement d’une opération en

cours. (envoi de fichiers, requête HTTP pour mise à jour de données

distantes, etc.)

Ce type d’élément permet d’indiquer à l’utilisateur un avancement pour

éviter que celui-ci pense que l’application est figée ou aurait

potentiellement planté.



<ProgressBar Height="40" Value="20" />

<ProgressBar Height="40" Value="35" Background="Blue"/>

<ProgressBar Height="40" Value="40" Foreground="AliceBlue" />

<ProgressBar Height="40" Value="120" Maximum="200" />

<ProgressBar Height="40" Value="240" Minimum="200" Maximum="800"

/>

<ProgressBar Value="20" IsIndeterminate="True" >

<ProgressBar.RenderTransform>


</ProgressBar.RenderTransform>

</ProgressBar>

</StackPanel>

Slider

Le slider permet d’ajuster une quantité de type numérique entre un

minimum et un maximum.


<StackPanel>

<Slider Minimum="0" Maximum="40"/>

<Slider Minimum="20" Maximum="200"/>

<Slider Minimum="20" Maximum="200" Foreground="Orange" />

</StackPanel>

HyperLink

L’HyperLink a le même but que le TextBlock à l’exception près que celui-

ci va permettre d’y ajouter un lien vers une URL.


<StackPanel>

<HyperlinkButton Content="Google" TargetName="_blank" NavigateUri="http://google.fr" />

<HyperlinkButton Content="Microsoft" TargetName="_blank" NavigateUri="http://microsoft.com" Foreground="Red" />

<HyperlinkButton Content="Youtube" TargetName="_blank" NavigateUri="http://youtube.fr" FontSize="48"/>

<HyperlinkButton Content="Facebook" TargetName="_blank" NavigateUri="http://google.fr" FontWeight="Black"/>

</StackPanel>

Image

Le contrôle Image a pour unique but d’afficher une image, rendant ainsi

un visuel plus riche pour l’expérience utilisateur.


<StackPanel>

<Image Source="/Assets/Tiles/FlipCycleTileLarge.png"/>



</StackPanel>

Map

La Map est un contrôle un peu particulier, en effet celui-ci est une

intégration de la carte native du téléphone. Pour accéder à celle-ci il sera

nécessaire d’ajouter une permission dans le manifeste de l’application.


<Controls:Map />

Map

Il faudra donc ajouter une permission dans le manifeste. Pour cela

Double clique sur WMAppManifest.xml

Ensuite onglet Capacités

ID_CAP_MAP


WebBrowser

Le WebBrowser permet d’ajouter dans une application un « mini »

navigateur web.


<Grid x:Name="LayoutRoot" Background="Transparent“>

<Grid.RowDefinitions>



</Grid.RowDefinitions>

<phone:WebBrowser IsGeolocationEnabled="True"

IsScriptEnabled="True" Source="http://google.fr" />

<Button Grid.Row="1" Content="Click Me !"/>

</Grid>

AdControl

AdControl est un composant additionnel qui permet d’afficher des

publicités dans ces applications. Selon le nombre de vue / click une

certaine somme est rémunérée en fin de mois.


AdUnitId & ApplicationId

se récupèrent sur

PubCenter lorsqu’une

campagne publicitaire est

créée.

Exercice

Construire les interfaces suivantes

Ecran d’inscription

Ecran de connexion

Ecran de modification de profil avec photo

Ecran d’option


interface utilisateur

AvancéChapitre 4


L’interface utilisateur avancé

Toolkit

Malgré un Framework de base bien fourni, avec une

quantité de contrôle suffisante pour créer des

interfaces riches et interactives ce n’était pas suffisant

pour certains développeurs.

Certains contrôles étaient absents de base :

Combobox

DateTimePicker

AutoCompleteBox

…

Pour palier à ce manque il a été mis en place par une

équipe de développement indépendant de chez

Microsoft une Toolkit pour ajouter d’autres composants.


xmlns:toolkit="clr-

namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

ListPicker

Le ListPicker ou ComboBox à pour rôle de proposer dans une liste déroulante une série de

propositions et de sélectionner celle que l’on souhaite. C’est le même principe que le ListBox

sauf qu’ici seul l’élément sélectionné est visible.


<toolkit:ListPicker ItemsSource="{Binding}" />

DatePicker

Le DatePicker offre à l’utilisateur un visuel plus intuitif et plus simple pour l’encodage de date.

De plus le format étant locker il est impossible d’y introduire des données non conformes.


<StackPanel>

<toolkit:DatePicker />

<toolkit:DatePicker Foreground="Red"/>

<toolkit:DatePicker BorderBrush="Orange"/>

</StackPanel>

AutoCompleteBox

L’ AutoCompleteBox va proposer des résultats selon les caractères qui auront été

précédemment introduit dans la box. La source doit être une liste de String, dans le cas où on

souhaite faire une recherche sur une liste d’Objet il suffira de redéfinir la méthode toString()

de l’objet en question.


<StackPanel>

<toolkit:AutoCompleteBox ItemsSource="{Binding}"

/>

</StackPanel>

Tuiles et notificationsChapitre 5


Les Tuiles

Les tuiles sont les raccourcis représentant notre application, elles sont

disponibles sur la page d’accueil ou dans la liste des applications

installées.

Il existe plusieurs type de Tuile que ce soit en taille ou en animations.

Il est également possible de créer plusieurs tuiles pour une même

application, mais qui auraient pour impact de lancer une page différente.

Il est également possible de passer des paramètres.

FlipTile

CycleTile

IconicTile


FlipTile

Les tuiles ne doivent pas être réalisées sans prendre en compte certains

paramètres notamment graphiques. En effet, les tuiles devront s’adapter

à 3 dimensions :

Petite

Normal

Grande


FlipTile

Une fois le contenu défini, il existe également des régles au niveau des

propriétés, notamment liées au padding, etc …


FlipTile


FlipTile

Reste alors le code C# pour modifier la tuile de notre Application


FlipTileData TileData = new FlipTileData() {

Title = "[title]",

BackTitle = "[back of Tile title]",

BackContent = "[back of medium Tile size content]",

WideBackContent = "[back of wide Tile size content]",

Count = [count],

SmallBackgroundImage = [small Tile size URI],

BackgroundImage = [front of medium Tile size URI],

BackBackgroundImage = [back of medium Tile size URI],

WideBackgroundImage = [front of wide Tile size URI],

WideBackBackgroundImage = [back of wide Tile size URI]

};

CycleTile

La CycleTile modifie son template entre 1 et 9 fois.


CycleTile

La CycleTile se créer donc selon un template bien précis et légèrement

différent de la FlipTile.


CycleTile



CycleTileData cycleTile = new CycleTileData() {

Title = "Contoso",

Count = 10,

SmallBackgroundImage = new Uri("/Assets/Tiles/smallBackgroundImage.jpg", UriKind.Relative),

CycleImages = new Uri[] {

new Uri("/Assets/Tiles/cycleImage1.jpg", UriKind.Relative),









}

};

IconicTile

L’ IconicTile ressemble fortement à la FlipTile à l’exception près qu'elle

affichera un contenu plus léger, mais également que son image sera

remplacée par un icone / pictogramme.


IconicTile

L’ IconicTile a également son propre template de mise en forme.


IconicTile



IconicTileData TileData = new IconicTileData() {

Title = "[title]",

Count = [count],

WideContent1 = "[1st row of content]",

WideContent2 = "[2nd row of content]",

WideContent3 = "[3rd row of content]",

SmallIconImage = [small Tile size URI],

IconImage = [medium/wide Tile size URI],

BackgroundColor = [.NET color type of Tile]

};

Les Notifications

Il existe deux type de notifications :

Les local : Ce sont des notifications liées au téléphone lui-même, pour par exemple

modifier une tuile, envoyer une notification Toast, une alarme, etc … elles peuvent être

récurrentes ou non.

Les push : Les notifications push ont la même utilité que les local, sauf que celles-ci

proviennent du cloud et avertissent donc l’application / utilisateur qu’il a par exemple

reçu un nouveau message.

Les notifications locales se décomposent en 4 possiblités:

Tiles

Toasts / Background Agent

Alarms

Reminders


Les Notifications

Les Tiles Notifications, vont permettre de notifier périodiquement

l’utilisateur en modifiant le contenu image de notre tuile.

Ce sont des tâches récurrentes qui peuvent s’exécuter une ou plusieurs

fois. Les tâches peuvent également être paramétrées sur une durée

temporelle.

Il est possible de les stopper et les relancer ultérieurement.

La classe ShellTileSchedule permet de créer des Tiles Notifications.


Les Notifications

Créer une Tile Notifications a utilisation unique.



{

public ShellTileSchedule sch = new ShellTileSchedule();

private void OneTime(object sender, System.Windows.Input.GestureEventArgs e)

{

sch.Recurrence = UpdateRecurrence.Onetime;

sch.StartTime = DateTime.Now;

sch.RemoteImageUri = new Uri("http://lorempixel.com/320/320/");

sch.Start();

}

}

Les Notifications

Créer une Tile Notifications a utilisation indéfinie.



{


private void IndefiniteTime(object sender, System.Windows.Input.GestureEventArgs e)

{

sch.Recurrence = UpdateRecurrence.Interval;

sch.Interval = UpdateInterval.EveryHour;



sch.Start();

}

}

Les Notifications

Créer une Tile Notifications à utilisation définie par un nombre

d’occurences.



{


private void CountTime(object sender, System.Windows.Input.GestureEventArgs e)

{

sch.Recurrence = UpdateRecurrence.Interval;

sch.Interval = UpdateInterval.EveryHour;

sch.MaxUpdateCount = 10;



sch.Start();

}

}

Les Notifications

Arrêter une Tile Notifications.



{


private void StopTime(object sender, System.Windows.Input.GestureEventArgs e)

{

sch.Stop();

}

}

Les Notifications

Les tâches d’arrière plan (Background Agent) permettent d’exécuter des

traitements en arrière plan, lorsque l’application n’est pas lancée.

Il est nécessaire de lier une tâche à une application, c’est cette même

application qui sera chargée d’ajouter la tâche dans la pile des agents du

téléphone.

Il existe deux types de tâches planifiées :

Les tâches périodiques : ce sont des tâches qui seront exécutées par le téléphone environ

toutes les 20 minutes, mais sans avoir de délai exact. En effet, c’est selon les ressources

disponibles dans le téléphone que celles-ci sont exécutées.

Les tâches à ressources intensives : ce sont des tâches qui nécessitent une consommation

de ressources supérieures. CPU / Batterie / Wifi …


Les Notifications

Tout d’abord, il faut donc créer le BackgroundAgent.


Les Notifications

Une fois le projet crée. La méthode OnInvoke contiendra la portion de

code qu’il sera nécessaire d’exécuter en arrière-plan.


public class ScheduledAgent : ScheduledTaskAgent

{

protected override void OnInvoke(ScheduledTask task)

{

NotifyComplete();

}

}

Les Notifications

Exemple concret, dans la méthode OnInvoke à chaque exécution de la

tâche, l’image de la tuile sera modifier et une image aléatoire sera

récupérée.



{


{

ShellTile tuileParDefaut = ShellTile.ActiveTiles.First();

if (tuileParDefaut != null)

{

FlipTileData flipTileData = new FlipTileData

{

BackContent = "Dernière MAJ " + DateTime.Now.ToShortTimeString(),

Count = new Random().Next(0, 20),

BackgroundImage = new Uri("http://lorempixel.com/320/320/")

};

tuileParDefaut.Update(flipTileData);

}

NotifyComplete();

}

}

Les Notifications

Une fois la tâche paramétrée, il reste à l’enregistrer sur le système, pour

cela nous aurons besoin de notre application principale



{

private const string TaskName = “BackgroundTask";

// Constructeur

public MainPage()

{


PeriodicTask task = new PeriodicTask(TaskName);

if (ScheduledActionService.Find(TaskName) != null)

ScheduledActionService.Remove(TaskName);

task.Description = "My Task";

try

{

ScheduledActionService.Add(task);

ScheduledActionService.LaunchForTest(TaskName, new TimeSpan(0, 0, 1));

}

catch (InvalidOperationException e)

{

MessageBox.Show("Impossible d'ajouter la tâche périodique, car il y a déjà trop d'agents dans le téléphone");

}

}

}

Les Notifications

Un autre type de notifications, les Toasts sont tout simplement des

notifications qui apparaissent en haut de l’écran. Si l’utilisateur décide

d’appuyer dessus, celui-ci est rediriger vers une page de l’application qui

à lancer la notification. Une notification Toast se lance depuis une tâche

d’arrière plan.



{


{

ShellToast toast = new ShellToast

{

Title = " Ceci est une notification Toast",

NavigationUri = new Uri("/MainPage.xaml?dateinfo=" + DateTime.Now.ToShortTimeString(),

UriKind.Relative),

Content = "Il est " + DateTime.Now.ToShortTimeString()

};

toast.Show();

NotifyComplete();

}

}

Les Notifications

Les Alarmes permettent d’enregistrer dans le system un rappel. Une

alarme se paramètre selon une date et une heure, mais également avec

une récurrence et une date d’expiration. Il est également possible

d’utiliser un son personnalisée qui sera joué au moments de déclencher

l’alarme.


Alarm alarm = new Alarm(’’Mon Alarme’’);

alarm.BeginTime = DateTime.Now;

ScheduledActionService.Add(alarm);

Les Notifications

Les Reminders ressemblent fortement aux Alarms, sauf que ceux-ci on un

paramètre supplémentaire qui permet lorsque l’ont click sur l’alerte sur

le téléphone de lancer l’application liée au Reminder.


Reminder reminder = new Reminder(ReminderName.Text)

{

BeginTime = BeginTime,

Content = ‘’My Reminder’’,

RecurrenceType = RecurrenceInterval.Daily

};

ScheduledActionService.Add(reminder);

Style et animationsChapitre 6


Style et animations

Lors du développement d’une application, il est souvent nécessaire

d’adapter le style de base des contrôles utilisateurs a celui de la charte

graphique de l’entreprise et/ou projet pour lequel on développe.

Comme vu précédemment, il est très simple de modifier la couleur de

fond, la couleur d’écriture, etc. d’un contrôle. Cependant, dans une

application complète, il est nécessaire de structurer les changements et

de les centraliser.

Ainsi, si un jour la couleur de base change et passe de vert à bleu, il n’y

aura qu’une seule valeur à changer.

Les animations permettent de donner vie à l’interface, en offrant à

l’utilisateur une expérience plus intéressante et plus interactive.


Style

Dans un premier temps, nous allons centraliser les ressources dans le

fichier XAML de la vue. Les ressources seront donc locales à notre page.


<phone:PhoneApplicationPag.Resources >



</phone:PhoneApplicationPage.Resources >

Style

Il existe plusieurs moyens de styliser soit avec des propriétés simples

qu’on appliquent à chaque contrôle.

Soit avec des styles qui s’appliquent à tout contrôle de ce type. Ce qui

permet d’harmoniser son interface.



<SolidColorBrush x:Name=‘’BackgroundColor’’

Color=‘’Red’’ />


Ici, nous définissons simple

une brush qui auras la

couleur rouge, ensuite nous

allons l’applique à notre

élément.<Button Background=‘’{StaticResource BackgroundColor}’’ Content=‘’Mon Bouton Rouge’’/>

<TextBlock Background=‘’{StaticResource BackgroundColor}’’ Text=‘’Mon Contenu Rouge’’/>

Style



<Style x:Key=‘’MyButtonStyle’’ TargetType=‘’Button’’>

<Setter Property=‘’Background’’ Value=‘’Red’’/>

<Setter Property=‘Foreground’’ Value=‘’Green’’/>

</Style>


Ici, nous définissons un

style qui s’appliquera à tout

les boutons dont nous

aurons défini la clé comme

style.<Button Style=‘’{StaticResource MyButtonStyle}’’ Content=‘’Mon Bouton Rouge Et Vert’’/>

Animation

Les animations permettent d’ajouter de la vie dans les interfaces et

également d’enrichir l’expérience utilisateur.

Il faut cependant faire attention à ne pas abuser de ces animations, en

effet l’une ou l’autre interaction peut être suffisante, tenter d’animer

chaque élément rendrait l’utilisation lourde et longue pour l’utilisateur.

Il est possible d’appliquer plusieurs type d’animations, qui sont des

simples (changement d’une propriété (couleurs, etc.)) à d’autres plus

complexes (changement de position, transformation, scale, rotation etc.)

Chaque animation se trouve dans un Storyboard qui permet de paramètrer

facilement une animation.

Les storyboards se trouvent en temps que ressources dans un panel, une

grid ou même la page.


<Storyboard x:Name=‘’MyAnimation’’>

<!– Animation -->

</Storyboard>

Animation

Il existe 3 types d’animations :

ColorAnimation : Le type d’animation le plus basique, il permet d’animer une propriété en

modifiant sa valeur entre deux valeurs cibles grâce à une interpolation linéaire. Cela

fonctionne sur les propriétés qui acceptent System.Windows.Media.Color comme type de

paramètres.

(Foreground, Background, etc .)

DoubleAnimation : Il permet d’animer toujours avec une interpolation linéaire, une

propriété mais cette fois-ci qui accepte comme type des valeurs numériques. (Opacity,

Width, etc.)

PointAnimation : Toujours à l’aide d’une interpolation linéaire, on peut cette fois-ci

animer une propriété qui prendra comme paramètre un type System.Windows.Point et

donc modifier la position de notre élément.Développement Windows Phone 8 - Patrick Grasseels

<ColorAnimation From=’’Red’’ To=‘’Blue’’ Duration=‘’0:0:1’’ Storyboard.TargetName=‘’Brush’’

Storyboard.TargetProperty=‘’Color’’ />

<DoubleAnimation From=’’0’’ To=‘’1’’ Duration=‘’0:0:1’’ Storyboard.TargetName=‘’MyButton’’

Storyboard.TargetProperty=‘’Opacity’’ />

<PointAnimation Storyboard.TargetProperty="Center’’ Storyboard.TargetName="MyAnimatedEllipseGeometry"

Duration="0:0:0.1" From="100,300" AutoReverse="True" To="400,100" RepeatBehavior="Forever" />

Stockage de donnéesChapitre 7


Introduction

Lors du développement d’une application, il sera nécessaire de stocker

des données.

Il existe plusieurs façons de stockage :

Les fichiers

Les base de données

Les flux distants


Les fichiers

Les fichiers sont les éléments les plus simples pour le stockage

d’informations

Pour garder une structure et ainsi restaurer les données facilement, il est

préférable d’utiliser du XML

Grâce à LinqToXML il est donc simple de faire des requêtes sur ces fichiers

depuis un Windows Phone


Les fichiers

Pour stocker les fichiers XML il sera nécessaire de faire appel au

composant IsolatedStorageFile

Développement Windows Phone 8 - Patrick Grasseels(*) http://msdn.microsoft.com/fr-

fr/library/windows/apps/windows.storage.aspx

http://msdn.microsoft.com/fr-fr/library/windows/apps/windows.storage.aspx

Les fichiers


IsolatedStorageFile représente une zone de stockage isolée contenant des

fichiers et des répertoires. Certaines méthodes seront donc nécessaires pour

travailler sur les fichiers. Mais également d’un StreamWriter pour écrire le

contenu. Et des méthodes LinqToXML.

• IsolatedStorageFile

• CreateDirectory

• CreateFile

• DeleteDirectory

• DeleteFile

• DirectoryExists

• FileExists

• MoveDirectory

• MoveFile

• OpenFile

• GetUserStoreForApplicatio

n

• StreamWriter • XDocument

• XDeclaration

• XELement

Les fichiers


Pour pouvoir utiliser les IsolatedStorageFile il est nécessaire de récupérer ceci:

IsolatedStorageFile ISF =

IsolatedStorageFile.GetUserStoreForApplication()

L’appel de GetUserStoreForApplication sur IsolatedStorageFile va nous

renvoyer un objet qui correspond à la zone de stockage autorisée pour

l’application. (Obtenu grâce au code de l’application – ApplicationId)

Une fois cet objet récupéré il sera donc possible d’effectuer des opérations

sur les fichiers dans l’IsolatedStorageFile, avec la liste des méthodes

évoquées au slide précédent.

Les fichiers


Une fois récupérée nous allons l’utiliser pour instancier un StreamWriter pour

écrire le fichier XML.

StreamWriter s = new StreamWriter(ISF.CreateFile("ISO.xml"))

Le constructeur de StreamWriter attend un Stream en paramètre, celui-ci lui

sera donc fourni par la méthode CreateFile(‘’FileName’’) de

l’IsolatedStorageFile instancié juste avant.

La méthode OpenFile retourne également un flux de type Stream, dans le

cas où nous souhaitons ré-ouvrir un fichier déjà existant.

Les fichiers


Ecrire simplement dans un fichier XML qui n’existe pas encore

// Instanciation d'un IsolatedStorageFile dans un using pour disposer les ressources une fois finis

using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())

{

// Instanciation d'un StreamWriter dans un using pour disposer les ressources une fois finis, on récupére le flux IsolatedStorageFileStream grace à la méthode CreateFile

// sur notre IsolatedStorageFile instancié juste avant

using (StreamWriter s = new StreamWriter(ISF.CreateFile("ISO.xml")))

{

// On crée une document XML valide

XDocument doc = new XDocument(

new XDeclaration("1.0", "UTF-8", null),

new XElement("Contacts",

new XElement("Contact", "Thierry Morre"),

new XElement("Contact", "Caroline herssens"),

new XElement("Contact", "Jonathan Hibben"),

new XElement("Contact", "Dominic Collart"),

new XElement("Contact", "Stéphane Faulkner")

)

);

// On sauve grace au flux le document crée au préalable

doc.Save(s);

}

// Dispose du StreamWriter

}

// Dispose du IsolatedStorageFile

Solution :

IsolatedStorageFile

Les fichiers


Pour lire dans un fichier XML, la procédure de départ reste la même, seul le

reader change

StreamReader s = new StreamReader(ISF.OpenFile("ISO.xml“,

FileMode.Open))

Le constructeur de StreamReader attend un Stream en paramètre, celui-ci

lui sera donc fourni par la méthode OpenFile(‘’FileName’’, OpenMode) de

l’IsolatedStorageFile instancié juste avant.

Par précaution, il est préfèrable de vérifier si le fichier existe avant même

d’essayer de le lire, la méthode FileExists(‘’FileName’’) de

l’IsolatedStorageFile permet de le faire simplement.

if (ISF.FileExists("ISO.xml"))

{

// Mon fichier existe

}

Les fichiers


Lecture simplement dans un fichier XML

// Instanciation d'un IsolatedStorageFile dans un using pour disposer les ressources une fois finis

using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())

{// On vérifie que le fichier existe, dans le cas contraire il est impossible de le lire

if (ISF.FileExists("ISO.xml"))

{// Instanciation d'un StreamReader cette fois-ci, avec OpenFile

using (StreamReader s = new StreamReader(ISF.OpenFile("ISO.xml", FileMode.Open)))

{// Chargement du document XML

XDocument doc = XDocument.Load(s);

}// Dispose du StreamReader

}

}// Dispose du IsolatedStorageFile

Solution :

IsolatedStorageFile

Les fichiers


Exemple : Nous souhaitons sauver la liste des contacts d’une personne. Chaque

contact aura comme propriétés celles-ci :

Contact :

• String Username

• String FirstName

• String LastName

• DateTime BirthDate

• String PhoneNumber

• String Email

public class Contact{

public String Username { get; set; }

public String FirstName { get; set; }

public String LastName { get; set; }

public DateTime BirthDate { get; set; }

public String PhoneNumber { get; set; }

public String Email { get; set; }

}

Les bases de données

Les bases de données permettent de stocker des informations de manière

structurée

On peut facilement créer des relations entre les éléments

Grâce à LinqToSql Runtime & LinqToObject on peut aisément lier des

objets au databinding



Pour générer une base de données, on utilise la notion de CodeFirst.

On lie ensuite nos classes à un DataContext, celui-ci s’occupera de créer

les tables, mais également d’effectuer les requêtes nécessaires sur la

base de données.



Créer un DataContext est donc la première étape pour interroger une base

de données interne.

Notre classe hérite donc du DataContext fourni par le framework.


public class MonContext : DataContext


Une fois que nous avons crée une classe qui devient donc notre

DataContext, nous allons le lier à une source de données


public class MonContext : DataContext {

public static string DBConnectionString = "Data Source=isostore:/MaBD.sdf";

public MonContext(string connectionString) : base(connectionString) { }

}


Une fois le DataContext crée, nous allons dans notre constructeur rajouter

une vérification pour qu’au premier chargement, si la base de données

n’existe pas, il puisse la créer.

Pour cela, nous allons faire appel à deux méthode de notre DataContext.


• DataContext

• DatabaseExists

• CreateDatabas

e


DatabaseExists() va vérifier si la base de données est présente et renvoit

une booléen.

CreateDatabase va se servir des informations de mapping fournies pour

générer la base de données. (vide)


public ContactContext(string ConnectionString)

: base(ConnectionString)

{

if (!DatabaseExists())

{

CreateDatabase();

}

}


Une fois le DataContext correctement configuré, il reste donc une chose à

effectuer, mapper nos tables grâce aux attributs pour quelles puissent

être générer par notre DataContext.

Pour mieux comprendre, nous allons reprendre la classe Contact créée

précédemment pour l’exemple en XML.



Les principaux attributs sont les suivants :


[Table]

Désigne une entité qui sera liée à une table dans la base de données.

Table n’a qu’un seul paramètre disponible, c’est Name qui permet

donc de choisir le nom de la table, si celui-ci n’est pas spécifié le

system prendra le nom de l’entité pour nommer la table de la même

façon.[Column]

Permet de mapper les propriétés que l’ont désire dans la table, celui-ci

accepte plusieurs paramètres nommés. Ceux-ci sont expliqués dans le

slide suivant.


Les paramètres de Column


[Column]

• IsPrimaryKey : Permet de déterminer si la propriété est une clé

primaire.

• IsDbGenerated : Défini si la colonne est auto-générée.

• CanBeNull : Défini si la colonne peut contenir une valeur null.

• DbType : Permet de définir le type de la colonne.

• Expression : Permet de créer une colonne composée.

• IsVersion : Si la colonne est générée en temps que Timestamp pour

la mise à jour.

• AutoSync : Défini de quelle façon la valeur est récupérée après une

Insert ou un Update.

• Name : Permet de choisir le nom de la colonne.

• Storage : Permet de lier la colonne a un attribut privé de l’entité.

http://msdn.microsoft.com/en-

us/library/system.data.linq.mapping.columnattribute_properties(v=vs.110).aspx

http://msdn.microsoft.com/en-us/library/system.data.linq.mapping.columnattribute_properties(v=vs.110).aspx


Voici donc la classe de base sans Attribut


public class Contact{







}


Voici donc la classe de base avec Attribut


[Table]

public class Contact{[Column(IsPrimaryKey = true, IsDbGenerated = true, DbType = "INT NOT NULL Identity", CanBeNull = false)]


[Column(CanBeNull = false)]


[Column(DbType = "NVARCHAR(MAX)", CanBeNull = false)]






[Column(DbType = "NVARCHAR(MAX)", CanBeNull = false)]


}

Les flux distants

Les flux distants, (XML, JSON) sont une autre manière d’obtenir

l’information.

Ils permettent d’avoir des données partagées ou qui sont mises à jour

régulièrement depuis l’extérieur.

L’exemple le plus utilisé est celui des API qui renvois pour la plus part du

JSON.


Les flux distants

La manière la plus simple est donc d’interroger une URL qui se chargera

de renvoyer du JSON ou du XML.

Si le retour est de type XML, LinqToXML est adapté pour traiter le flux

reçu. Dans le cas d’un retour JSON, le plus simple et le plus performant

est d’utiliser la librairie JSON.Net de NewtonSoft. Cette dernière permet

de désérializer un flux JSON sous forme d’Objet.


Les flux distants

Pour interroger une URL, il sera nécessaire d’utiliser la classe HttpClient

L’installation se fera simplement grâce aux packages Nuge


Les flux distants

Pour envoyer une requête, il est nécessaire de lui passer des paramètres.

Il faudra donc créer une liste de paramètres de type clé / valeur.

La méthode la plus simple est de faire appel à une liste de type

KeyValuePair<TKey,TValue>


List<KeyValuePair<string, string>>values = new List<KeyValuePair<string,

string>>

{

new KeyValuePair<string, string>("Username", "Toto"),

new KeyValuePair<string, string>("Password", "Titi")

};

Les flux distants

Une fois les paramètres crées, nous allons instancier un objet de type

HttpClient, lui passer l’URL et les paramètres.

Pour tester, nous allons envoyer nos requêtes sur Requestb.in


http://Requestb.in

Utilisations des

composants téléphoneChapitre 8


Introduction

Les téléphones sont pourvus de fonctionnalités propres, comme l’Appareil

Photo, le GPS, l’accélèrométre, etc …


Le GPS

Le GPS permet donc de se localiser en récupérant les coordonnées

géographiques.

Altitude, Longitude, Latitude.

Il existe plusieurs type de détection de la position, celle par défaut ou

celle avec une acuité accrue.


Le GPS

Pour utiliser le GPS c’est un Object de type Geolocator qui est nécessaire


Event• PositionChanged

• StatusChanged

Methods• GetGeopositionAsync

• GetGeopositionAsync(TimeSpan,TimeSpa

n)

Properties• DesiredAccuracy

• DesiredAccuracyInMeters

• LocationStatus

• MovementThreshold

• ReportInterval

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.positionchanged.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.statuschanged.aspx

http://msdn.microsoft.com/en-us/library/br225537.aspx

http://msdn.microsoft.com/en-us/library/hh973537.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.desiredaccuracy.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.desiredaccuracyinmeters.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.locationstatus.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.movementthreshold.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.reportinterval.aspx

Le GPS

Les événements permettent d’attacher ces méthodes à l’objet Geolocator


• PositionChanged

• Se déclenche quand la propriété est mise à jour. (Déplacement)

• StatusChanged

• Se déclenche quand la fonctionnalité de géolocalisation change d’état.

(Actif/inactif)

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.positionchanged.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.statuschanged.aspx

Le GPS

Les méthodes permettent d’appeler directement les fonctionnalités de

l’objet Geolocator


• GetGeopositionAsync

• Lance une opération asynchrone pour tenter de récupérée la position

actuelle du téléphone / device.

• GetGeopositionAsync(TimeSpan,TimeSpan)

• Lance une opération asynchrone pour tenter de récupérée la position

actuelle du téléphone / device.

• Le premier paramètre permet de spécifier un age maximum à la

position, en effet la dernière position peut-être stocker en cache et

réutilisé si le GPS échoue pour se rélocaliser.

• Le second est un Timeout sur la récupération.

http://msdn.microsoft.com/en-us/library/br225537.aspx

http://msdn.microsoft.com/en-us/library/hh973537.aspx

Le GPS

Les propriétés permettent de configurer l’objet Geolocator


Properties• DesiredAccuracy

• Permet de définir la précision avec laquelle la position sera récupérée.

• DesiredAccuracyInMeters

• Permet de définir la précision en métre avec laquelle la position sera

récupérée.

• LocationStatus

• Permet de récupérée si la Geolocalisation est activée ou non sur le

téléphone.

• MovementThreshold

• Configure la distance en mètre depuis la dernière position et lance

l’évenement PositionChanged.

• ReportInterval

• Configure le temps minimale entre deux mise à jour de la position du

téléphone.

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.desiredaccuracy.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.desiredaccuracyinmeters.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.locationstatus.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.movementthreshold.aspx

http://msdn.microsoft.com/en-us/library/windows.devices.geolocation.geolocator.reportinterval.aspx

Le GPS

Utiliser le GPS :


Geolocator geo = new Geolocator();

geo.MovementThreshold = 10;

geo.StatusChanged += statusChanged;

geo.PositionChanged += positionChanged;

private void positionChanged(Geolocator sender, PositionChangedEventArgs

args)

{

double Latitude = args.Position.Coordinate.Latitude;

…

}

Windows phone 8 - Développement de base

Software

Transcript of Windows phone 8 - Développement de base