HeightSquare – Partie 3 : Le contrat Contact Picker

Dans les 2 premières parties nous avons expliqué les concepts d’authentification OAuth et la création d’un composant Windows Runtime. Nous terminons cette série avec la mise en place du contrat Contact Picker.

Dans ce scénario notre application devient fournisseur des informations de nos amis Foursquare aux autres applications.

Et voici pour le code complet de cette exemple d’application : HeightSquareApp.zip

Il vous faudra éditer les constantes ClientId et CallbackUri dans la classe App correspondant à votre application Foursquare (voir la première partie pour plus de détails).

Déclaration et activation du contrat

Nous en avons maintenant l’habitude, l’implémentation de contrats se déclare d’abord au niveau du manifeste. Dans l’onglet Declarations, on ajoute le Contact Picker.

windows-live-writer_756c95d55058_109a2_declarations_2
L’activation du contrat intervient au niveau de la classe App et de la méthode OnActivated :

  1. protected override void OnActivated(IActivatedEventArgs  args)
  2. {
  3.     if (args.Kind == ActivationKind.ContactPicker)
  4.     {
  5.         var frame = Window.Current.Content as Frame;
  6.         if (frame == null)
  7.             frame = new Frame();
  8.         Window.Current.Content = frame;
  9.         frame.Navigate(typeof(ContactPickerPage), args);
  10.         Window.Current.Activate();
  11.     }
  12.     else
  13.     {
  14.         base.OnActivated(args);
  15.     }
  16. }

Affichage des contacts Foursquare

Nous allons afficher la photo et le nom de nos contacts Foursquare. Pour cela nous définissons le DataTemplate suivant :

  1. <Page.Resources>
  2.     <DataTemplate x:Key= »ContactTemplate »>
  3.         <Grid Width= »200″ Height= »250″>
  4.                 <Grid.RowDefinitions>
  5.                     <RowDefinition Height= »150″ />
  6.                     <RowDefinition Height= »Auto » />
  7.                 </Grid.RowDefinitions>
  8.                 <Image Source= »{Binding Photo} » Width= »150″ Height= »120″ VerticalAlignment= »Center »/>
  9.                 <TextBlock Grid.Row= »1″ Text= »{BindingFullName} » VerticalAlignment= »Center » HorizontalAlignment= »Center »/>
  10.         </Grid>
  11.     </DataTemplate>
  12. </Page.Resources>

 

Et pour terminer une GridView pour afficher et sélectionner des contacts :

  1. <GridView Grid.Row= »1″ ItemsSource= »{Binding}«  SelectionChanged= »GridView_SelectionChanged » IsItemClickEnabled= »True » SelectionMode= »Multiple » ItemTemplate= »{StaticResource ContactTemplate} » />

Chargement des contacts

Le chargement des contacts Foursquare nécessite un jeton d’authentification OAuth. Il faut ensuite prévoir de les filtrer en fonction de ce qu’e l’application appelante désire comme informations.

Stockage du jeton d’authentification dans le Cloud

Nous allons améliorer notre application de sorte que ce jeton soit stocké dans les paramètres de l’application. Cela évitera de demander une authentification à chaque ouverture de l’application.

Pour stocker des paramètres d’application on peut utiliser la classe ApplicationData. Cette classe possède notamment une propriété RoamingSettings qui va nous permettre de stocker notre jeton. Et grâce aux paramètres d’itinérance l’utilisateur sera authentifier sur toute les machines où il ouvrira une session via son compte Microsoft.

Nous utilisons simplement le dictionnaire Values pour accéder à ses paramètres :

  1. public async static Task<string> GetFrousquareToken()
  2. {
  3.     object oToken = Windows.Storage.ApplicationData.Current.RoamingSettings.Values[« AccessToken »];
  4.     if (oToken == null)
  5.     {
  6.         string t = await FoursquareService.AuthenticateAsync(App.clientId, App.callbackFoursquareUri);
  7.         Windows.Storage.ApplicationData.Current.RoamingSettings.Values.Add(« AccessToken », t);
  8.         oToken = t;
  9.     }
  10.     return (string)oToken;
  11. }

Récupération des contacts

Dans la méthode LoadState de notre Page nous ajoutons le code permettant de récupérer les contacts :

  1. string token = await App.GetFrousquareToken();
  2. var friends = await FoursquareService.GetMyFriendsAsync(token);

Filtrage des contacts en fonction des désirs de l’appelant

Lors de l’activation du contrat ContactPicker nous avons reçu un paramètre de type ContactPickerActivatedEventArgs. Cette classe expose un objet de type ContactPickerUI. Cet objet fournit des informations sur ce qui intéresse l’application. Cet objet va également nous permettre d’envoyer nos contacts à l’application appelante.

La classe ContactPickerUI nous permet de connaitre les champs (email, numéro de tel…) dont a besoin l’application. Il nous suffit de parcourir la propriété DesiredFields et de filtrer notre liste de contact :

Toujours dans la méthode LoadState de notre page, voici comment récupérer la classe ContactPickerUI et filtré sur les champs désirés :

  1. var args = navigationParameter as ContactPickerActivatedEventArgs;
  2. if (args == null || args.ContactPickerUI == null)
  3.     return;
  4. var contactPickerUI = args.ContactPickerUI;
  5. foreach  (var field in contactPickerUI.DesiredFields)
  6. {
  7.     switch (Windows.ApplicationModel.Contacts.KnownContactField.ConvertNameToType(field))
  8.     {
  9.         case Windows.ApplicationModel.Contacts.ContactFieldType.Email:
  10.             friends = friends.Where(f => !string.IsNullOrEmpty(f.Email)).ToList();
  11.             break;
  12.         case Windows.ApplicationModel.Contacts.ContactFieldType.InstantMessage:
  13.             // friends =
  14.             break;
  15.         case Windows.ApplicationModel.Contacts.ContactFieldType.Location:
  16.             // friends =
  17.             break;
  18.         case Windows.ApplicationModel.Contacts.ContactFieldType.PhoneNumber:
  19.             // friends =
  20.             break;
  21.         case Windows.ApplicationModel.Contacts.ContactFieldType.Custom:
                // friends =
  22.             break;
  23.         default :
  24.             break;
  25.     }
  26. }

Ajouter des contacts au ContactPickerUI

Lorsque l’on sélectionne des contacts via le Contact Picker, ils s’ajoutent dans le bas du contrôle, comme illustré sur l’image suivante :


image

Pour ajouter des contacts, il suffit de créer des objets de type Windows.ApplicationModel.Contacts.Contact et de les ajouter via la méthode Add de l’objet ContactPickerUI. L’ajout de champs à un contact se fait via la liste Fields.

Le code ci-dessous illustre l’ajout des contacts sélectionnés au ContactPickerUI :

  1. private async void GridView_SelectionChanged(object sender, SelectionChangedEventArgs  e)
  2. {
  3.     foreach  (var item in e.AddedItems.OfType<FoursquareApi.Entities.Contact>())
  4.     {
  5.         var contact = new Windows.ApplicationModel.Contacts.Contact() { Name = item.FullName };
  6.         contact.Fields.Add(new Windows.ApplicationModel.Contacts.ContactField(item.Email, Windows.ApplicationModel.Contacts. ContactFieldType.Email));
  7.         contact.Fields.Add(new Windows.ApplicationModel.Contacts.ContactField (item.Email, Windows.ApplicationModel.Contacts.ContactFieldType.Email));
  8.         HttpClient client = new HttpClient();
  9.         var stream = await client.GetStreamAsync(item.Photo);
  10.         Windows.Storage.Streams.InMemoryRandomAccessStream memory = new Windows.Storage.Streams.InMemoryRandomAccessStream();
  11.         await Windows.Storage.Streams.RandomAccessStream .CopyAsync(stream.AsInputStream(), memory);
  12.         var streamReference = Windows.Storage.Streams.RandomAccessStreamReference.CreateFromStream(memory);
  13.         contact.Thumbnail = streamReference;
  14.         contactPickerUI.AddContact(item.Id, contact);
  15.     }
  16. }

Pour aller plus loin

Dans cet article nous n’avons pas abordé le processus inverse qui consiste à utiliser le picker depuis notre application afin de consommer des contacts provenant d’une autre application. Pour plus de détail sur ce sujet je vous invite à consulter la documentation de la classe ContactPicker qui fournit un exemple d’utilisation.

Et n’oubliez pas les différents évènements Windows 8 organisés par Microsoft et la communauté pour cette rentrée. Voici les liens :

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s