♪
1.Introduction▲
Windows Phone 7 (WP7) est la nouvelle plateforme de développement de Microsoft destinée aux smartphones.
Cet article est le troisième traitant du développement d'application sous WP7. N'hésitez pas à consulter le tutoriel d'introduction au développement d'applications Windows Phone 7 ainsi que le tutoriel sur l'utilisation de la ListBox et de l'Isolated Storage dans les applications Silverlight pour Windows Phone 7.
Dans cet article, à travers la création d'une application de météo, vous découvrirez comment faire appel à des ressources sur le web. Vous verrez également comment utiliser le contrôle Pivot, un des contrôles les plus importants lors du développement d'applications pour Windows Phone 7. Il permet de gérer facilement la navigation horizontale, avec ce qu'on appelle le swipe et qui permet de simuler un comportement où l'utilisateur pose son doigt sur l'écran et le fait glisser vers la droite ou la gauche, comme s'il tournait une page.
2.Création de l'application météo▲
2.1.Le web service météo▲
Comme déjà évoqué, l'application de démonstration va aller interroger un service web qui va nous retourner la météo des quatre prochains jours pour une ville d'un pays.
Il y a plusieurs services web de météo, j'ai choisi d'utiliser celui de worldweatheronline. Pour pouvoir utiliser ce service web, il faut obtenir une clé (gratuite), que vous pouvez obtenir sur le site http://www.worldweatheronline.com.
2.2.Utiliser le contrôle Pivot▲
Comme déjà dit, le contrôle Pivot est un des contrôles les plus importants lorsque l'on développe des applications pour WP7. Il permet de gérer automatiquement glissement horizontal (swipe ou panning). Il ressemble beaucoup à son frère, le contrôle Panorama mais est utilisé généralement pour présenter plusieurs « pages » de la même donnée, alors que le contrôle Panorama présente plutôt une navigation sur plusieurs pages d'un écran qui occuperait une trop grande place.
Le contrôle Pivot est aussi particulièrement adapté à une alimentation dynamique de son contenu et on l'utilise généralement avec des données que l'on lie par code.
Pour l'utiliser, créons donc une nouvelle application WP7.
Avant tout chose, pour pouvoir utiliser le contrôle Pivot, il faut référencer l'assembly Microsoft.Phone.Controls.dll.
Pour avoir accès à ce contrôle, modifions l'entête de MainPage.xaml pour ajouter :
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"Modifions ensuite le Xaml de la page pour avoir :
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Quel temps fait-il ?" FontSize="35" HorizontalAlignment="Center"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Canvas Grid.Row="0">
<TextBlock Height="45" HorizontalAlignment="Left" Margin="29,47,0,0"
Name="tbVile" Text="Ville" VerticalAlignment="Top" Width="73" FontSize="35" />
<TextBlock Height="45" HorizontalAlignment="Left" Margin="29,127,0,0"
Name="tbPays" Text="Pays" VerticalAlignment="Top" Width="73" FontSize="35" />
<TextBox Height="78" HorizontalAlignment="Left" Margin="108,33,0,0"
Name="ville" VerticalAlignment="Top" Width="313" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="108,117,0,0"
Name="pays" VerticalAlignment="Top" Width="313" />
<Button Content="Voir le temps" Height="78" HorizontalAlignment="Left"
Margin="127,252,0,0" Name="button1" VerticalAlignment="Top"
Width="213" Click="button1_Click" />
<TextBlock Height="38" HorizontalAlignment="Center" Margin="43,195,0,0"
Name="errorTb" VerticalAlignment="Top" Width="378" Foreground="Red" />
</Canvas>
<controls:Pivot Name="pivotCtrl" Grid.Row="1">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock />
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Height="38" HorizontalAlignment="Left"
Margin="29,321,0,0" Name="date" VerticalAlignment="Top"
Width="200" Text="{Binding Date}" />
<TextBlock Height="38" HorizontalAlignment="Left"
Margin="29,381,0,0" Name="querytb" VerticalAlignment="Top"
Width="200" Text="{Binding Emplacement}" />
<TextBlock Height="38" HorizontalAlignment="Left"
Margin="29,441,0,0" Name="tempMini" VerticalAlignment="Top"
Width="200" Text="{Binding TemperatureMin}" />
<TextBlock Height="38" HorizontalAlignment="Left"
Margin="29,494,0,0" Name="tempMaxi" VerticalAlignment="Top"
Width="200" Text="{Binding TemperatureMax}" />
<TextBlock Height="38" HorizontalAlignment="Left"
Margin="29,547,0,0" Name="temps" VerticalAlignment="Top"
Width="200" Text="{Binding Temps}" />
<Image Height="150" HorizontalAlignment="Left"
Margin="245,398,0,0" Name="image1" Stretch="Fill"
VerticalAlignment="Top" Width="150" Source="{Binding UrlIcon}" />
</Grid>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
</Grid>
</Grid>On y remarque notamment deux textbox, « ville » et « pays » qui vont devenir les paramètres d'appel du service web de météo.
L'élément important ici est le contrôle Pivot juste en dessous.
Un peu comme une ListBox, il possède une propriété ItemTemplate qui contient plusieurs contrôles (Textblock et Image) qui vont nous permettre de restituer les informations météo.
Le but est de lier le contrôle Pivot à une liste qui contient les informations météo pour le jour en cours et les jours suivants.
Ainsi, nous aurons une « page » par jour avec ses informations météo. Et nous pourrons naviguer de page en page avec un swipe horizontal…
Facile à faire et tellement élégant pour une application téléphone.
Par défaut, le contrôle Pivot génère un entête qui contient le titre de chaque page. Comme je n'avais pas besoin de cette fonctionnalité ici, j'ai surchargé le comportement du HeaderTemplate pour ne rien n'y inscrire. Mais il aurait été tout à fait envisageable de mettre un titre, par exemple la date du jour observé.
2.3.Appeler le service web▲
Le code behind de la page principale va récupérer les informations saisies dans les textbox lors du clic sur le bouton et va appeler le web service :
private const string key = "5fb41XXXXXXXXXXXXXX110"; // remplacer ici par votre clé
private void button1_Click(object sender, RoutedEventArgs e)
{
try
{
if (string.IsNullOrEmpty(ville.Text))
{
errorTb.Text = "Merci de saisir une ville";
return;
}
string paysStr = string.Empty;
if (!string.IsNullOrEmpty(pays.Text))
paysStr = "," + pays.Text;
var helper = new WebClientHelper(string.Format(
"http://www.worldweatheronline.com/feed/weather.ashx?q={0}{1}&format=xml&num_of_days=5&key={2}",
ville.Text, paysStr, key));
helper.DownloadComplete += DonwloadComplete;
helper.Execute();
}
catch (Exception ex)
{
errorTb.Text = ex.Message;
}
}Pour appeler le service web, j'utilise une classe Helper (WebClientHelper : que vous pourrez retrouver dans le code source de l'application) qui fait un appel à une URL via la classe WebClient et me retourne le résultat de l'appel sous la forme d'une chaîne de caractères. Cette chaîne contient du xml avec les informations météo.
Première chose à faire, parser ce XML :
private void DonwloadComplete(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null)
{
errorTb.Text = e.Error.Message;
}
else
{
XDocument xmlElements = XDocument.Parse(e.Result);
var request = from data in xmlElements.Descendants("request")
select new
{
Query = (string)data.Element("query"),
};
var elements = from data in xmlElements.Descendants("weather")
select new
{
Date = (string)data.Element("date"),
TemperatureMin = ((string)data.Element("tempMinC")).Trim(),
TemperatureMax = ((string)data.Element("tempMaxC")).Trim(),
UrlIcon = ((string)data.Element("weatherIconUrl")).Trim(),
Temps = ((string)data.Element("weatherDesc")).Trim(),
};
pivotCtrl.ItemsSource = elements.OrderBy(elt => elt.Date).Select(elt => new Meteo
{
Date = elt.Date,
Emplacement = request.FirstOrDefault().Query,
TemperatureMax = "Température max : " + elt.TemperatureMax,
TemperatureMin = "Température min : " + elt.TemperatureMin,
Temps = Translate(elt.Temps),
UrlIcon = elt.UrlIcon
});
}
}Comme on peut le voir, on utilise Linq to XML pour ce faire (ne pas oublier de rajouter la référence à System.Xml.Linq.dll).
Puis on construit une liste d'objet Meteo qui contient les informations météo, triées par date.
L'objet Meteo est un simple objet qui contient les propriétés que l'on souhaite afficher :
public class Meteo
{
public string Emplacement { get; set; }
public string Date { get; set; }
public string TemperatureMin { get; set; }
public string TemperatureMax { get; set; }
public string UrlIcon { get; set; }
public string Temps { get; set; }
}J'utilise enfin une petite fonction pas très élégante qui retourne une chaîne en français à partir du temps annoncé par le web service en anglais.
Surement incomplète, cette fonction contient quelques traductions à partir des valeurs obtenues lors du développement de l'application.
private string Translate(string s)
{
switch (s)
{
case "Partly Cloudy":
return "Partiellement nuageux";
case "Sunny":
return "Soleil";
case "Cloudy":
return "Nuageux";
case "Light rain":
return "Faible pluie";
case "Light rain shower":
case "Light drizzle":
case "Patchy light drizzle":
return "Bruine légère";
default:
return s;
}
}On remarque à la fin de la méthode où l'on parse le XML que la liste construite est affectée à la propriété ItemsSource du contrôle Pivot qui va enfin pouvoir nous afficher le temps qu'il va faire.
pivotCtrl.ItemsSourceDémarrons l'application. Voici ce que l'on peut observer :
3.Démonstration de l'application▲
Une petite vidéo est toujours meilleure qu'un long discours :
L'élément nouveau à constater est que lors du clic sur le bouton « voir le temps » on voit se remplir le contrôle Pivot.
Lorsque l'on maintient la pression de la souris sur l'émulateur et que l'on fait glisser vers la droite alors on passe aux prévisions du jour suivant.
Lorsque l'on arrive à la fin, le contrôle Pivot repasse automatiquement au premier élément de la liste.
L'effet visuel du contrôle Pivot est élégant et vous avez pu vous rendre compte qu'il n'y a pratiquement rien à faire.
Notez également que l'émulateur peut accéder à Internet, ce qui le rend particulièrement adapté pour le développement d'applications Windows Phone 7 utilisant des ressources sur le web. C'est une des grandes forces de l'émulateur.
4.Téléchargements▲
Vous pouvez télécharger ici les sources du projet : version rar (157 Ko) , version zip (166 Ko).
5.Conclusion▲
Nous avons donc vu dans ce tutoriel comment créer une application Windows Phone 7 qui tire parti des contrôles donnant une expérience utilisateur intéressante sur un smartphone.
Nous avons construit une application météo qui utilise le contrôle Pivot et sa navigation horizontale. Nous avons également vu comment faire appel à des ressources sur Internet via la classe WebClient. Enfin, nous avons construit une application de prévision météo regroupant ces notions.
J'espère que ce tutoriel a pu vous être utile et vous a donné envie de vous perfectionner dans la création d'applications pour Windows Phone 7.
Remerciements▲
Je remercie les membres de l'équipe Dotnet pour leurs relectures attentives du document et leurs remarques ainsi que jpcheck et Sepia pour leurs relectures orthographiques.
Contact▲
Si vous constatez une erreur dans le tutoriel, dans le code source, dans la programmation ou pour toute information, n'hésitez pas à me contacter par le forum.
