TFS Preview

Présentation

TFS (pour Team Foundation Server) est l’outil de travail collaboratif de Microsoft. On retrouve un ensemble d’outils pour gérer une équipe :

• Méthodologie de management Agile
• Product backlog
• Définition de tâches
• Burndown charts
• Performance des développeurs
• …

Auxquels s’ajoutent des outils plus techniques :

• Contrôleur de code source qui permet le travail collaboratif sur un même projet et la gestion des synchronisations et fusions des documents
• Automatisation des jeux de tests
• Build de la solution à intervalles réguliers

Jusqu’ici TFS était un outil performant mais pas évident à installer. La gestion des droits, le déploiement sur plusieurs serveurs, la création des différentes bases de données sont des compétences que n’a pas forcément un développeur !

Arrivée de TFS Preview

TFS Preview révolutionne cela. Il propose un accès à un TFS “clé en main” directement dans le Cloud sans configuration.
Je vous laisse regarder la vidéo explicative sur le site : http://tfspreview.com/. On y voit l’accès par la plateforme web aux différents graphes, l’ajout simple des différentes tâches et tout cela grâce à une interface claire de type Metro.

Pour créer un compte vous aurez besoin d’une clef. Et sur votre compte vous obtiendrez une nouvelle clef qui peut en activer 5 autres.

Remarque : Vous allez vous connecter avec un compte live. Sous Windows 8, votre session bureau peut être liée à un compte live et vous serez authentifié par défaut sur ce service. Dans le cas de TFS Preview sous Windows 8, il n’est pas évident de vous déconnecter du compte live utilisé par votre PC. Pour éviter tous problèmes, pensez à configurer TFS Preview avec le même compte live que votre pc.

Installation sous Visual Studio 2010

Ce qui suit est tiré d’un article de l’équipe Visual Studio ALM : http://blogs.msdn.com/b/visualstudioalm/archive/2011/12/07/connect-visual-studio-2010-to-your-tfs-preview-account.aspx

Pré-requis

Assurez-vous d’être sous Visual Studio 2010 SP1 => Help(Aide) / About Microsoft Visual Studio.

et si ce n’est pas le cas, téléchargez le SP1 : http://www.microsoft.com/en-us/download/details.aspx?id=23691

Mettre à jour VS

Téléchargez et installez la mise à jour KB2581206 : http://go.microsoft.com/fwlink/?LinkID=212065

Se connecter

Vous pouvez maintenant vous connecter à TFS Preview en cliquant sur “Connect to Team Foundation Server…” puis sur Servers.

Dans la nouvelle fenêtre qui s’ouvre, cliquez sur la bouton “Add”/”Ajouter” et entrez juste l’adresse de votre compte tfs preview (ex : http://votrecompte.tfspreview.com).

On vous demandera de vous connecter sur votre compte live et vous pourrez ensuite ouvrir votre projet.

Ensuite ouvrez le Source Control depuis le bandeau Team Explorer. Faites clic droit sur le nom de votre projet et “mappez” le dans un dossier local pour pouvoir ouvrir le projet.

Installation sous Visual Studio 11

Rien à faire !
Cliquez juste sur “Connect to a Team Project…”, entrez l’adresse de votre TFS Preview et c’est fini !

Bien sûr, pensez à mapper le projet si c’est la première fois que vous ouvrez ce Team Project. Pour quelqu’un habitué à Visual Studio 2010, le Source Control est pas forcément évident à trouver. Il se trouve dans le bandeau Team Explorer comme vous pouvez le voir ci-dessous.

Ensuite même procédure, clic droit sur le nom du projet, “map to local folder…” et vous précisez le dossier sur votre disque dur.

Quelques problèmes rencontrés

Blend est lent

Blend rencontre des bugs avec TFS Preview. Soit il refuse directement l’utilisation du source control et fonctionne correctement, soit il rame.
Pour éviter cela, copiez votre fichier .sln, éditez le avec le notepad et supprimez le groupe “GlobalSection(TeamFoundationVersionControl) = preSolution”. Surligné sur le screen ci-dessous :

(Merci à Romuald du groupe Communauté Développeurs Windows 8)

Ouverture du navigateur à l’infini / authentification impossible

Windows 8 introduit l’authentification sur sa machine grâce à son compte live. Par défaut, vous êtes aussi authentifié sur les sites live. Si vous avez un compte différent (contrairement à mon avertissement plus haut) pour votre TFS vous risquez d’avoir du mal à vous connecter à la plateforme.
Essayez de vous déconnecter du service live depuis IE, de supprimer vos cookies du navigateur puis de le redémarrer.

(Merci à Loïc du même groupe)

Conclusion

TFS Preview est un outil agréable à utiliser. Il renoue le développeur avec un outil performant mais parfois “effrayant” à utiliser. En faisant disparaitre la partie de déploiement laborieuse, Microsoft rend cet outil accessible à tous développeur.
Il est tout de même nécessaire de rappeler que c’est un outil en béta à ne pas utiliser avec un projet professionnel. A voir aussi la politique tarifaire qui sera appliquée.

Par JCVASSELON

Accéder à ses fichiers de partout avec Skydrive

Skydrive est l’espace de stockage en ligne fourni par Microsoft et accessible depuis Android, iOS, Windows Phone, Internet et maintenant depuis son PC. Donc depuis toute plateforme partout dans le monde.
Cela devient un concurrent sérieux à DropBox et autres services de stockage en ligne ainsi qu’un remplaçant du service méconnu Live Mesh.

J’avais écris un article il y a peu pour accéder à ses fichiers hébergés sur Skydrive depuis son PC. C’était un “bricolage” grâce aux lecteurs réseaux. Mais maintenant, une application a été fournie par Microsoft proposant une haute intégration au sein de l’explorateur.
Vous trouverez l’application ici : https://apps.live.com/skydrive.
L’installation se fait simplement, et vous retrouverez votre dossier Skydrive sur votre disque dur. Tous les fichiers dans ce dossier seront synchronisés avec l’espace en ligne et les autres périphériques possédant l’application.

Bon à savoir, pour les personnes déjà habituées à Skydrive vous pouvez accéder gratuitement à un hébergement de 25Go (au lieu des 7Go par défaut) en vous rendant à la page : https://skydrive.live.com et en cliquant sur “Free upgrade!”

Par JCVASSELON

[WP7] Comment faire des screenshots depuis votre téléphone ?

J’ai réalisé une application qui utilise la caméra pour écrire des sms en marchant (TextWalker : http://www.windowsphone.com/fr-FR/apps/18279149-e3fe-460c-8c35-29316f41bab1).

Et je voulais faire un screenshot de cette application sans avoir le vilain fond blanc de l’émulateur de l’appareil photo. Je voulais donc directement faire cette impression écran depuis mon téléphone.

Et Zozo (http://zozofromelk.wordpress.com/2012/01/22/screenshot-of-your-windows-phone-7-app-on-device/) m’a sauvé !
En effet, il a créé un behavior a intégrer au sein de son application pour faire des impressions écrans avec un Double Tap sur l’écran (double clic avec le doigt) que vous pouvez télécharger ici : http://bit.ly/znSvNE ou depuis son article ci-dessus.

Une fois récupéré, il vous suffit d’ajouter la classe ScreenShotBehavior à votre projet ainsi qu’au sein des pages où vous souhaitez réaliser vos impressions écrans :

<i:Interaction.Behaviors>
        <local:ScreenShotBehavior />
    </i:Interaction.Behaviors>

Une fois que l’application est lancée, il vous suffira de taper deux fois sur votre écran pour retrouver votre screenshot dans les images du téléphone.

Remarque, il a encadré le code de son behavior entre dans un directive préprocesseur “#DEBUG” qui fait qu’il n’est fonctionnel qu’en mode débug.

Par JCVASSELON

Pimp ma listbox

On va découvrir ici comment éditer et transformer une ListBox. L’exemple sera fait sur du Windows Phone, mais pourra être facilement répliqué en WPF, Silverlight, … En Xaml quoi !

Je vais rapidement rappeler les bases d’une ListBox et nous passerons ensuite sur quelques exemples concrets (ListBox horizontale, ListBox wrappée).

Pour cet article, j’ai utilisé Expression Blend, qui permet d’éditer les styles rapidement et facilement :
Un clic droit sur la ListBox, et dans le menu additionnal template vous pourrez éditer facilement les éléments que je signale.

Structure d’une ListBox

Comme son nom l’indique, une ListBox sert à afficher une liste d’éléments, une collection d’objets. En plus de son template, elle est constituée de trois autres templates qui permettent de la personnaliser plus précisément. C’est à eux que l’on va s’intéresser.

Illustrons ces différents templates, avec un exemple simple : une boîte de bonbons :

• ItemTemplate : La forme sous laquelle vont s’afficher les objets contenus dans la collection. Le bonbon brut.
• ItemContainerStyle : Le conteneur de l’item. le papier autour du bonbon. C’est sur lui qu’on gèrera l’espacement entre chaque item.
• ItemsPanel : Le conteneur général. La boîte.

ListBox Horizontale

En partant de cette base, comment faire une ListBox Horizontale ?

1. On édite l’ItemsPanel, on veut un conteneur horizontal. On passe donc la propriété Orientation du StackPanel sur “Horizontal”;
2. On revient à notre ListBox, on édite les propriétés liées au Layout, on passe HorizontalScrollBarVisibility sur “Auto” ou “Visible” et VerticalScrollBarVisibility sur “Disabled” (Si vous êtes sur Blend, et que vous ne trouvez pas ces propriétés, cliquez sur la petite flèche en bas de Layout);
3. On édite l’ItemContainerStyle en mettant une marge à droite sur notre bordure (12px est le nombre magique en général) pour pas que les éléments soit collés;
4. Il ne vous reste plus qu’à éditer l’ItemTemplate en quelques clics en fonction de vos goûts.

Et nous avons une belle ListBox horizontale !

ListBox Wrapped

Pour rappel, le wrap est le système qui permet à des éléments de revenir à la ligne automatiquement et de s’adapter à différentes tailles d’écrans :

(oui ce sont des carottes wrappées)

Donc si on a bien suivi, qu’a-t-on à faire ?

1. Modifier l’ItemsPanel, oui ! On supprime le StackPanel qu’on remplace par le WrapPanel disponible dans le Silverlight Toolkit For Windows Phone (disponible via Nuggets);
2. Régler l’HorizontalScrollBarVisibility et la VericalScrollBarVisibility en fonction du sens dans lequel vous voulez faire aller vos éléments (verticaux ou horizontaux);
3. Editer l’ItemContainerStyle avec une marge en bas et à droite pour “décoller” les éléments entre eux;
4. Et éditer l’ItemTemplate en fonction de vos goûts !

Conclusion

On a donc vu rapidement la structure d’une ListBox et comment faire facilement différents types de listes.

Par JCVASSELON

Démarrer en Ruby On Rails

On s’éloigne ici un peu des technologies Microsoft.
J’ai voulu apprendre le Ruby et le Ruby on Rails (RoR) par curiosité , pour voir pourquoi ce langage est à la mode ainsi que ses avantages.

Je vais parler ici de la mise en place de l’environnement de développement et je ferais certainement d’autres articles en fonction de mes retours.

J’ai pas mal galéré pour installer mon environnement, et j’ai eu du mal à trouver des explications sur les problèmes que je rencontrais, cet article est à titre indicatif, c’est ma vision de développeur débutant dans ce langage et l’expérience que j’ai tirée de mes tâtonnements. Je serai ravi de mettre à jour en fonction de vos commentaires.

Ressources pour apprendre

Camille Roux (@camilleroux), un développeur très investi dans la communauté francophone, a écrit cette note vraiment bien faite qui donne quelques pistes pour débuter en Ruby : http://www.camilleroux.com/2011/09/08/comment-debuter-en-ruby-on-rails/.
Pour ma part, j’ai utilisé les deux sites suivants :

• http://tryruby.org/: qui permet de tester directement le code dans un navigateur .
• http://railsforzombies.org/ : Un cours vidéo avec des exercices autour d’un cas concret : Un twitter pour Zombie !

Une fois que vous avez acquis les bases, passons aux choses sérieuses sur notre machine.

Installer les outils sur Windows

1. Téléchargez le Rails Installer pour Windows : http://railsinstaller.org/. C’est un package qui vous permettra d’avoir tous les outils de base pour bien démarrer.
2. Installez le Rails Installer. Attention le chemin vers le répertoire ne doit pas contenir d’espace.
3. (optionnel) Si vous souhaitez utiliser mysql :
   1. Si vous ne l’avez pas déjà, téléchargez le et installez le depuis ce site : http://dev.mysql.com/downloads/mysql (choisissez le MSI correspondant à votre architecture)
   2. Ensuite téléchargez le mysql Connector : http://dev.mysql.com/downloads/connector/c/ (prenez le mysql-connector-c-noinstall-6.0.2-win32.zip, la version 32 bits est très importante)
   3. Récupérez juste la libmysql.dll qui se trouve dans le dossier lib du zip. Et copiez la dans le répertoire d’installation de Ruby (par défaut : C:\RailsInstaller\Ruby1.9.3\bin).
   4. Faites un clic droit sur la dll, propriétés, et cliquez sur le bouton “Unblock” (ou “Débloquer”)
4. On va maintenant configurer le DevKit qui vous permettra d’installer les Gems (les packages, les assembly de Ruby)
   1. Ouvrez un invite de commande et rendez-vous dans le répertoire d’installation de DevKit :
      1. “cd C:\RailsInstaller\DevKit”
   2. Tapez la commande suivante :
      1. “ruby dk.rb init”
      2. Normalement, la ligne suivante devrait s’afficher : “[INFO] found RubyInstaller…” suivie d’un message confirmant que l’initialisation est terminée
   3. Ouvrez le fichier config.yml qui a été généré dans le même répertoire avec un éditeur de texte et vérifiez que le répertoire d’installation de Ruby est le bon. Si ce n’est pas le cas, ajoutez : “- C:/RailsInstaller/Ruby1.9.3” ou le répertoire dans lequel Ruby a été installé.
   4. Revenez à votre invite de commande et entrez “ruby dk.rb install”
   5. Pour finir testons l’installation avec :
      1. “gem install rdiscount –platform=ruby”
      2. Puis “ruby –rubygem –e “require ‘rdiscount’; puts RDiscount.new(‘**Hello RubyInstaller**’).to_html””

Le choix de l’IDE

L’IDE est l’outil qui va nous permettre de développer en Ruby et Ruby On Rails et de tester notre application.

Ce choix est votre, personnellement j’ai démarré avec RubyMine qui me paraissait assez “sexy” et pour lequel j’avais une licence.

Apparemment Eclipse a un plugin Ruby : http://www.ibm.com/developerworks/opensource/library/os-rubyeclipse/

Aptana qui est basé sur Eclipse et qui a aussi un plugin pour Rails.

Sublime Text 2 que vous pourrez retrouver sur plusieurs plate-formes (merci à @nledez )

Et sinon, certains développent directement avec Notepad++ et génèrent en console.

Quelques problèmes que j’ai rencontré

“(GemNotFound)” : Souvent rencontré parce que le DevKit n’est pas correctement installé (cf : point 4 ci-dessus)

“”the specified module could not be found” mysql12.so” dû à l’absence de la dll libmysql.dll dans le dossier Bin de Ruby. Ou a une dll 64bits au lieu d’une dll 32 bits.

“”install” was called incorrectly” : Rencontré quand il vous manque des gems dans votre projet RubyMine. Une textbox s’ouvre vous demandant les paramètres pour “bundle install”, laissez le champ vide ^^

Conclusion

Pour un langage qui prônait l’efficacité et le peu de configuration, je suis un peu déçu par le temps passé à configurer l’environnement de développement.
Les moyens mis en œuvre pour l’apprentissage sont par contre très pédagogiques et plutôt marrants.
La communauté semble active et dynamique.

Et si vous souhaitez suivre l’actualité de cette techno : http://rubylive.fr/

Par JCVASSELON

Récupérer et parser du HTML

Ma problématique était de récupérer des images depuis un site web. Il me fallait donc charger le contenu du site, puis chercher à l’intérieur du code source, les adresses des images qui m’intéressaient. Voyons tout cela plus en détail.

Récupérer une page nécessitant une authentification

Au départ, j’avais besoin de travailler sur les images des albums Facebook. Un album privé était donc difficilement accessible sans connexion. La manière la plus simple que j’ai trouvée a été d’utiliser le contrôle Web Browser en WPF.

J’ai donc créé un WebBrowser dans mon xaml que j’ai appelé WebBro. La navigation peut se faire depuis le code behind en une ligne :

WebBro.Navigate(VotreUrl);

Ensuite lorsque je suis sur la bonne page, je commence par récupérer et stocker le code HTML de la page :

dynamic dom = WebBro.Document;
string htmlText = dom.documentElement.innerHTML;

Le mot-clef dynamic simplifie le code mais vous pouvez très bien ajouter une référence à MSHTML et caster le WebBro.Document en mshtml.HTMLDocumentClass.
Nous avons donc récupéré le HTML de la page et l’avons stocké dans la string htmlText. Il nous restera plus qu’à travailler dessus pour rechercher les éléments que l’on souhaite. Nous verrons cela dans la troisième partie de cet article.

Récupérer une page “classique”

Pour une application WP7, il me fallait récupérer des images depuis un site mais pour cela il fallait tout automatiser. Le WebBrowser n’était donc pas imaginable.
J’ai utilisé un WebClient pour requêter le site et récupérer directement le HTML de la page.

_wc = new WebClient();
_wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(_wc_DownloadStringCompleted);
_wc.DownloadStringAsync(new Uri(VotreURL + _localAppItem.Name,
                                                UriKind.Absolute));

Vu que c’est du Windows Phone, tout est asynchrone, il faut donc s’abonner à l’évènement DownloadStringCompleted. Lorsque cet évènement est levé, nous pouvonsrécupérer le contenu de notre page HTML dans notre méthode _wc_DownloadStringCompleted(object o, DownloadStringCompletedEventArgs args).
Le code HTML de la page se trouvant dans la variable args.Result.

Parser le HTML grâce aux Regex

Les Regex… Ces petites bêtes que l’on souhaite éviter et qui ne se laisse pas dompter facilement.
Les Regex ou expressions régulières sont un moyen de chercher des éléments textuels respectant une certaine forme, un certain pattern.
Dans mon cas, pour chercher des images dans du code HTML, il me fallait récupérer toutes les chaines commençant par “src=”” et finissant avec une extension particulière “.jpg”, “.jpeg”, “.png”,…

Pour plus de lisibilités, j’ai donc défini deux chaînes, une pour le début et une pour la fin de la séquence à trouver :

string start = "src=\"";
string end = "\\.(jpg|png)";

Sur la chaîne start, le ‘\’ permet d’échapper le guillemet.
Sur la chaîne end, les ‘\\’ permettent d’échapper un ‘\’ qui permet d’échapper le ‘.’. En effet, dans une regex, le point est un caractère particulier.

Nous pouvons maintenant créer notre Regex :

Regex r = new Regex(start + "(.*?)" + end);

Nous créons donc une String que nous passons au constructeur de notre Expression Régulière. On retrouve notre chaîne de début et notre chaîne de fin avec au milieu cet assemblage étrange : “(.*?)” :

• les parenthèse signifient un groupement de caractères
• Le point signifie n’importe quel caractère
• l’étoile signifie une à plusieurs fois le caractère précédent
• le point d’interrogation permet de répéter l’expression précédente

Une fois cette Regex créée, il ne nous reste plus qu’à l’utiliser sur notre code html :

MatchCollection matches = r.Matches(htmlText);

A chaque fois qu’une occurrence sera trouvée, elle sera ajoutée à la collection matches qu’il nous suffit de parcourir avec un foreach pour récupérer les liens des images.

foreach (Match matche in matches)
            {
                VotreMethodePourTraiter(matche.Groups[1].Value);
            }

Bonus : Télécharger les images

Idem, je vais montrer avec deux possibilités. Synchrone en WPF et asynchrone pour WP7.

De manière synchrone

private void GetPics()
        {
                int i = 0;
                foreach (string url in urlBrutImg)
                {
                    System.Drawing.Image myImg;
                    WebRequest req = WebRequest.Create(url);
                    WebResponse response = req.GetResponse();
                    myImg = System.Drawing.Image.FromStream(response.GetResponseStream());
                    myImg.Save("D:\\NomDuRepertoire\\" + i+".jpg");
                    i++;
                }
        }

Chaque fois qu’une de mes Regex étaient valide, j’ajoutais l’url à une liste. C’est cette liste, nommée urlBrutImg que je parcours dans le foreach.
Je fais une WebRequest sur l’url obtenue, je génère mon image avec le Stream que me retourne la WebRequest. Il ne me reste plus qu’à enregistrer cette image sur mon disque dur, et d’incrémenter i pour ne pas écraser la précédente !

De manière asynchrone

Ici, chaque fois que ma Regex matchait, j’ajoutai l’Uri obtenue dans une Queue, ce type de liste permet de retirer un élément lors de sa lecture. J’ai réutilisé le WebClient qui m’a permis de télécharger le code HTML de manière asynchrone pour télécharger les images. Il m’a juste fallu m’abonner à un nouvel évènement :

_wc.OpenReadCompleted += new OpenReadCompletedEventHandler(OpenReadCompleted);

J’ai ensuite ajouté une méthode Dequeue() pour retirer mes éléments au fur et à mesure que je récupérais mes images.

private void Dequeue()
        {
            if (_queuedItems.Count > 0)
            {
                Uri uri = _queuedItems.Dequeue();
                _wc.OpenReadAsync(uri, uri);
            }
        }

Et le code de ma méthode OpenReadCompleted pour enregistrer l’image :

private void OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
            try
            {
                if (e.Error == null && e.Cancelled == false)
                {
                    Uri uri = e.UserState as Uri;
                    BitmapImage image = new BitmapImage();

                    image.SetSource(e.Result);
                    //Traitement de l’image                  
                }
            }
            catch (Exception ee)
            {}
            Dequeue();
        }

Une fois que vous avez votre BitmapImage, à vous de voir si vous voulez l’enregistrer dans l’IsolatedStorage ou l’afficher.
On fini par un Dequeue, pour continuer à vider notre collection et télécharger les images manquantes.

Conclusion

Dans cet article nous aurons vu plusieurs manières de récupérer du code HTML puis comment obtenir certains éléments similaires grâce aux Regex.

Par JCVASSELON

[WP7] Utiliser Skydrive dans vos projets WP7

Dernièrement, Microsoft a annoncé la sortie du Live SDK. Cette boite à outil va nous permettre à nous développeur de faire interagir nos applications avec les services du Live. Cela va de l’authentification à nos services, en passant par WLM, l’accès aux calendriers et contacts mais aussi au SkyDrive !
SkyDrive, cet espace de stockage dans le cloud que j’avais évoqué dans cet article : http://onefor4.wordpress.com/2011/10/25/tip-intgrez-skydrive-windows-7/ va ainsi devenir encore plus intégré et nous permettre de faciliter les échanges inter-utilisateurs, inter-applications et inter-plateformes !
Nous allons voir ici quelques opérations basiques pour démarrer.

Prérequis et ressources :

• Téléchargez et installez le sdk : http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=28195
• Vous trouverez de la doc ainsi que quelques scénarios ici : http://isdk.dev.live.com/
• Je me suis appuyé sur cet article pour démarrer : http://www.silverlightshow.net/items/SkyDrive-usage-through-Live-SDK-on-Windows-Phone.aspx

Inscription de l’application

Avant toute chose, il va falloir inscrire votre application ici : https://manage.dev.live.com/AddApplication.aspx pour obtenir un identifiant et des credentials.

Rendez vous ensuite dans API Settings pour configurer votre application comme étant une application mobile.

Lire et écrire sur SkyDrive

Pour l’exemple, nous allons réaliser l’application suivante qui consiste à ajouter un nouveau fichier dans un dossier de SkyDrive.

C’est une simple page, contenant :

• Un SignInButton que nous détaillerons plus tard et qui permet de s’authentifier sur le live.
• Un ListPicker (que vous trouverez notamment dans le Silverlight for WP7 Toolkit) qui nous permettra de choisir dans quel dossier enregistrer notre fichier.
• Une textbox pour donner un nom au fichier et une autre pour ajouter du contenu à ce fichier.

Le code

Pour utiliser SkyDrive, on aura besoin de s’authentifier sur le Live. Le SDK nous donne heureusement un contrôle déjà existant pour cela : le SignInButton !
Ajoutez les DLL Microsoft.Live et Microsoft.Live.Controls à votre projet.

Rajoutez le namespace suivant dans votre xaml :

xmlns:my="clr-namespace:Microsoft.Live.Controls;
assembly=Microsoft.Live.Controls"

Vous pouvez maintenant utiliser le SignInButton qui vous permettra de vous authentifier sur le live et de choisir les différents droits que vous souhaitez que l’utilisateur vous donne.

<my:SignInButton 
ClientId="" 
Scopes="wl.signin wl.skydrive wl.skydrive_update" 
SessionChanged="SignInButton_SessionChanged" />

Les différents attributs importants :

• ClientId : C’est l’identifiant de votre application. Vous le retrouverez sur cette page : https://manage.dev.live.com/Applications/Index
• Scopes : C’est les différents droits que vous souhaitez obtenir. Ici, l’authentification, les droits de lecture sur le SkyDrive, et les droits de mises à jour sur le SkyDrive.
  Tous les scopes ici : http://msdn.microsoft.com/fr-fr/library/hh243646.aspx
• SessionChanged : C’est l’évènement qui est levé lors de la Connexion / Déconnexion de l’utilisateur

En cliquant sur ce nouveau bouton, on est automatiquement redirigé vers la page de connexion de Windows Live.

Vient ensuite une demande d’autorisations :

La session est initialisée. Traitons là maintenant et voyons comment accéder aux différents dossiers sur notre SkyDrive. Pour cela, nous allons d’ailleurs créer une classe SkydriveItem qui nous permettra d’organiser plus facilement les différents éléments (fichiers, dossiers, albums).

public class SkydriveItem
    {
        public string Id { get; set; }
        public string Type { get; set; }
        public string Name { get; set; }

        public override string ToString()
        {
            return Name;
        }
    }

• Id : Unique, il nous permet d’accéder directement à l’élément depuis le code.
• Type : Il existe trois types d’éléments. Folder, un répertoire; Files, un fichier; Albums, un répertoire “spécial”.
• Name : Le nom du dossier lisible par un humain

Revenons au code de notre page. On va ajouter un LiveConnectClient qui nous permettra de garder la session et de réaliser nos différentes opérations ainsi qu’une ObservableCollection de SkydriveItem dans laquelle on ajoutera les différents dossiers et que l’on bindera sur l’ItemsSource de notre ListPicker.

private LiveConnectClient _client;
public ObservableCollection<SkydriveItem> SkydriveItems 
{ get; set; }
        
// Constructor
public MainPage()
{
   SkydriveItems = new ObservableCollection<SkydriveItem>();
   InitializeComponent();
}

Remplissons ensuite la méthode SignInButton_SessionChanged().

private void SignInButton_SessionChanged(object sender, 
                     LiveConnectSessionChangedEventArgs e)
{
//Si on est bien connecté
if (e.Status == LiveConnectSessionStatus.Connected)
{
  //On purge la liste d'éléments
  SkydriveItems.Clear();
  //On initialise notre LiveConnectClient avec la session courante
  _client = new LiveConnectClient(e.Session);
  //On s'abonne à l'événement
  _client.GetCompleted += 
       new EventHandler<LiveOperationCompletedEventArgs>
                                       (OnGetCompleted);
 //On lance l'opération aynchrone
  _client.GetAsync("/me/skydrive/files");
 }
 else if (e.Status == LiveConnectSessionStatus.NotConnected)
 {
   SkydriveItems.Clear();
   _client = null;
 }
 else
   _client = null;
 }

Et on parcourt ensuite la liste des éléments obtenus en ajoutant ceux qui nous intéressent à notre ObservableCollection.

void OnGetCompleted(object sender, 
                LiveOperationCompletedEventArgs e)
{
  if (e.Error == null)
  {
    List<object> data = (List<object>)e.Result["data"];
    foreach (IDictionary<string, object> content in data)
    {
      SkydriveItem nItem = new SkydriveItem();
      nItem.Id = (string)content["id"];
      nItem.Name = (string)content["name"];
      nItem.Type = (string)content["type"];
      if(nItem.Type == "folder")
        SkydriveItems.Add(nItem);
     }
  }
}

Ils apparaissent maintenant dans notre ListPicker après l’authentification.

Occupons-nous de l’écriture dans un des dossiers sélectionnés. Abonnons l’évènement Click de notre bouton sur une méthode Save_Click.
Pour cet exemple, j’ai appelé la textbox qui représente le titre du fichier : Tb_Title et celle représentant le contenu : Tb_Text.

Voici le code de la méthode Save_Click() ainsi que le callback une fois l’upload terminé.

private void Save_Click(object sender, RoutedEventArgs e)
{
    string fileName = Tb_Title.Text.Trim();
    byte[] byteArray = 
Encoding.Unicode.GetBytes(Tb_Text.Text.Trim());
    MemoryStream fileStream = new MemoryStream(byteArray);
    _client.UploadCompleted += new 
EventHandler<LiveOperationCompletedEventArgs>(
UploadCompleted); 
    _client.UploadAsync(
((SkydriveItem)LP_Items.SelectedItem).Id, fileName, 
fileStream);
}

void UploadCompleted(object sender, 
LiveOperationCompletedEventArgs e)
{
    if (e.Error == null)
    {
        Dispatcher.BeginInvoke(() =>
        {
            MessageBox.Show("Uploadé !");
        });
    }
}

La méthode “_client.UploadAsync(
((SkydriveItem)LP_Items.SelectedItem).Id, fileName,
fileStream); “ nous permet d’uploader notre fichier dans le dossier correspondant. Mais attention, nous ne pouvons pas passer directement le nom du dossier mais son Id !

Une fois l’upload terminé, vous retrouverez votre fichier dans le dossier voulu sur votre SkyDrive : http://skydrive.live.com/

Conclusion

Nous avons ici découvert une partie du Live SDK : comment s’authentifier et comment utiliser des opérations basiques sur SkyDrive.
Ce SDK ouvre de formidables opportunités pour interagir avec les fichiers de vos utilisateurs mais aussi faciliter la migration de vos applications.
En effet, pourquoi ne pas sauvegarder le contenu de votre Isolated Storage pour le récupérer ensuite quand l’utilisateur souhaite changer de téléphone ? Ou simplement partager ses données avec un autre ?

Par JCVASSELON