My Resume

[FR] Windows Phone 7 et une architecture orientée service (WCF)

By at June 16, 2010 11:21
Filed Under: WCF, Windows Phone 7
Le but de cet article est de réussir à afficher la liste des clients qui sont en base de données tout cela à travers un web service WCF.   Pour suivre cet article, voici les outils que j’ai utilisé : - Microsoft Visual Studio 2010 - Microsoft Visual Studio 2010 Express for Windows Phone que vous pouvez télécharger par ici : http://developer.windowsphone.com/Default.aspx - SQL Server 2008 et la base de données Northwind - L’accès aux données : Entity Framework 4   1) Création de la couche accès aux données   Nous allons déjà dans un premier temps créer notre accès aux données. Cela sera tout simplement une bibliothèque de classe. Dans cette bibliothèque de classe, créer votre “ADO.NET Entity Data Model” qui pointera vers la base de données Northwind. Les tables utilisées seront “Customers” et “Orders”.   Voici à quoi ressemble la bibliothèque de classe :         2) Création du web service WCF   Créer un nouveau projet de type  “WCF Service Application”. Supprimer Service1.svc et son interface car les noms ne sont pas explicites. Ajouter à ce projet un “WCF Service” que j’ai nommé WSCustomers et IWSCustomers pour l’interface.   Commençons par l’interface avec 3 méthodes :   [ServiceContract] public interface IWSCustomers { [OperationContract] List<Customers> GetAllCustomers(); [OperationContract] Int32 GetNumberOfCustomers(); [OperationContract] List<Orders> GetCustomerOrders(string customerId); }   Puis nous les implémentons dans notre classe WSCustomers de cette manière :   public class WSCustomers : IWSCustomers { #region Customers /// <summary> /// Retourne tous les clients sous forme de liste /// </summary> /// <returns></returns> public List<Customers> GetAllCustomers() { NorthwindEntities entities = new NorthwindEntities(); var customers = from cust in entities.Customers select cust; return customers.ToList(); } /// <summary> /// Retourne le nombre de clients sous forme d'un entier /// </summary> /// <returns></returns> public int GetNumberOfCustomers() { NorthwindEntities entities = new NorthwindEntities(); var numberOfCustomers = (from cust in entities.Customers select cust).Distinct().Count(); return numberOfCustomers; } /// <summary> /// Récupère toutes les commandes pour un utilisateur sous forme de liste /// </summary> /// <param name="customerId"></param> /// <returns></returns> public List<Orders> GetCustomerOrders(string customerId) { NorthwindEntities entities = new NorthwindEntities(); var orders = from o in entities.Orders where o.CustomerID.Equals(customerId) select o; return orders.ToList(); } #endregion }   Maintenant que l’on a terminé notre service web, nous allons passer à notre application Windows Phone 7.   3) Création de l’application Windows Phone 7   Une fois dans Microsoft Visual Studio 2010 Express for Windows Phone il vous faudra créer une "Windows Phone Application”. Dans la MainPage.xaml nous allons mettre 2 TextBlock et une ListBox.   <Grid x:Name="TitleGrid" Grid.Row="0" Background="#FF43466E"> <TextBlock Text="Customers List" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}" /> <TextBlock Text="{Binding}" Name="txtNumberOfCustomers" /> </Grid> <Grid x:Name="ContentGrid" Grid.Row="1"> <ListBox Name="lstCustomers"/> </Grid>   Le premier TextBlock “textBlockPageTitle” n’est ni plus ni moins que le titre qui se trouvera en haut à gauche de l’écran. Le deuxième TextBlock “txtNumberOfCustomers” recevra le résultat de la méthode créée dans le Web Service qui se nomme : GetNumberOfCustomers(). Comme vous vous en doutez, la listbox recevra la liste des clients soit la méthode GetAllCustomers() dans notre Web Service.   Passons au code-behind de la page “MainPage.xaml” : - Il vous faudra au préalable ajouter le web service à votre application. Clic droit sur votre application WP7 puis “Add Service Reference”. Vos méthodes seront accessibles. J’ai nommé ma référence de service WSCustomers.   Nous allons déjà afficher les clients dans notre listbox   private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { WSCustomersClient service = new WSCustomersClient(); service.GetAllCustomersAsync(); service.GetAllCustomersCompleted += new EventHandler<GetAllCustomersCompletedEventArgs>(service_GetAllCustomersCompleted); } void service_GetAllCustomersCompleted(object sender, GetAllCustomersCompletedEventArgs e) { if (e.Result != null) { this.lstCustomers.ItemsSource = e.Result; } }   Il faudra ajouter dans le XAML le Binding pour que cela fonctionne. Voici les deux propriétés à rajouter à la listbox “lstCustomers” :   ItemsSource="{Binding}" DisplayMemberPath="CustomerID"   Dans cette listbox on affichera donc les CustomerID.   Même principe pour l’affichage du nombre de clients dans le TextBlock “txtNumberOfCustomers”. Je rajoute le code suivant au “Load” de la page :   service.GetNumberOfCustomersAsync(); service.GetNumberOfCustomersCompleted += new EventHandler<GetNumberOfCustomersCompletedEventArgs>(service_GetNumberOfCustomersCompleted);   Puis la méthode :   void service_GetNumberOfCustomersCompleted(object sender, GetNumberOfCustomersCompletedEventArgs e) { this.txtNumberOfCustomers.DataContext = e.Result.ToString() + " customers"; }   Voici le résultat de la première page “MainPage.xaml” en image :)     4) Création d’une autre page XAML qui aura pour but d’afficher les commandes du client que l’utilisateur aura sélectionné   - Créer une autre page XAML “CustomerOrders.xaml”.   Je vais me baser sur l’évènement “SelectionChanged” de ma listbox “lstCustomers”.   Voici la méthode :   private void lstCustomers_SelectionChanged(object sender, SelectionChangedEventArgs e) { Customers customerSelected = (Customers)lstCustomers.SelectedItem; if (customerSelected != null) { string customerId = customerSelected.CustomerID; string uri = String.Format("/CustomerOrders.xaml?customerId={0}", customerId); this.NavigationService.Navigate(new Uri(uri, UriKind.Relative)); } }   Je récupère tout simplement le “Customers” qui a été sélectionné. Je passe à ma page CustomerOrders.xaml une donnée qui est le customerId.   Pour finir, j’utilise la méthode Navigate de NavigationService pour rediriger l’utilisateur vers ma page CustomerOrders.xaml.   Pour plus d’informations sur la navigation inter-pages, je vous invite à lire cet article : http://blogs.codes-sources.com/pi-r/archive/2010/05/20/windows-phone-7-ndash-navigation-inter-pages-avec-la-propriete-page-navigationservice.aspx   Passons à notre page CustomerOrders.xaml et à son code XAML. J’y ai ajouté un simple StackPanel et une listbox :   <StackPanel Grid.Row="1"> <ListBox Name="lstCustomerOrders"/> </StackPanel>   Le code behind de CustomerOrders.xaml sera :   protected override void OnNavigatedTo(Microsoft.Phone.Navigation.PhoneNavigationEventArgs e) { base.OnNavigatedTo(e); if (this.NavigationContext.QueryString.ContainsKey("customerId")) { string customerId = this.NavigationContext.QueryString["customerId"]; this.ApplicationName.Text = "Orders for : " + customerId; WSCustomersClient service = new WSCustomersClient(); service.GetCustomerOrdersAsync(customerId); service.GetCustomerOrdersCompleted += new EventHandler<GetCustomerOrdersCompletedEventArgs>(service_GetCustomerOrdersCompleted); } } void service_GetCustomerOrdersCompleted(object sender, GetCustomerOrdersCompletedEventArgs e) { if (e.Result != null) { this.lstCustomerOrders.DataContext = e.Result; } }   Ici on “override” la méthode OnNavigatedTo. Le principe est simple, nous naviguons de la page “MainPage.xaml” vers la page “CustomerOrders.xaml”, donc lorsque l’on navigue vers la page CustomerOrders.xaml on atterrit directement dans la méthode OnNavigatedTo.   Dans cette méthode je récupère le QueryString passé tout à l’heure.   string uri = String.Format("/CustomerOrders.xaml?customerId={0}", customerId);   Il vous faudra ajouter dans le XAML le binding à la listbox “lstCustomerOrders” de cette manière :   ItemsSource="{Binding}" DisplayMemberPath="OrderID"   5) Résultat en image             En effet certains me diront que cette application n’est pas très belle. Si vous souhaitez améliorer le rendu il existe des add-in pour Microsoft Expression Blend 4 : - Add-in Preview 2 for Windows® Phone - Software Development Kit (SDK) Preview 2 for Windows Phone   Rendez-vous sur cette page pour en savoir plus sur ces outils : http://www.microsoft.com/downloads/details.aspx?familyid=47F5C718-9DEC-4557-9687-619C0FDD3D4F&displaylang=en     J’espère que cet article vous a donné une idée des applications réalisables sur Windows Phone 7 :)   Charles.

My Mobile Website

NICOLAS Charles site web mobile qr code

Flash it with your mobile phone (use mobiletag, codeonline or any other apps)


Or simply go here : http://charles-nicolas.mobi/

eBusiness/ Digital Project Manager @ Viadigis & eBusiness entrepreneur

2010/2011 : Student at Oxford Brookes University (UK) in E-Business (MSc)

2009/2010 : Student at SUPINFO Metz (FR) in Computer Science and Information Technology (MSc)


You could find my CV there : CV