labs.bewise.fr - Articles

Premiers pas avec Windows 8 et les applications Metro en javascript / html (part 2/2)

Introduction

Windows 8 et Metro sont arrivées et avec eux, la possibilité de créer des applications aux interfaces utilisateurs sexy sans avoir à apprendre le xaml. Issu du monde du développement Web Asp.net, j'ai abordé la création d'applications Metro avec l'idée de capitaliser sur mes connaissances de l'html 5 et du javascript. Dans la première partie de cet article, nous avons abordé l'utilisation de jQuery et de linq en complément des librairies javascript de Microsoft pour gagner en productivité sur la création de nos applications Metro.

Pour ce second volet, nous allons nous focaliser sur l'utilisation de librairies Js dédiées aux animations 2D et 3D.

L'application

Pour rappel, l' application a pour but de visualiser le résultat d'une recherche sur Tweeter en choisissant une animation 2d ou 3d.

L'application doit permettre de lancer une recherche via l'api de tweeter depuis un menu contextuel. La page principale propose un menu de navigation avec le style Metro pour choisir une animation. Une fois la recherche lancée, les miniatures dynamiques des animations s'affichent dans le menu de navigation. En cliquant sur une miniature, on navigue vers une page en plein écran pour afficher l'animation.

Maintenant que nous avons vu que l'utilisation de JQuery était possible, nous allons porter notre attention sur la création d'animations 2d et 3d.

Pour créer des animations avec les applications métro, nous avons plusieurs technologies à notre disposition. La première consiste à s'appuyer sur le Xaml, la seconde consiste à coder l'animation en Direct 2D ou en Direct 3D et la dernière consiste à utiliser html et css.

Coder l'animation en Direct 2D/3D demande des compétences en c++ mais les projets Visual Studio sont de bons starters. Les possibilités de paramétrage et donc d'optimisation sont plus importantes.

Pour cet article, nous allons utiliser 3 librairies différentes pour des animations html 5/ css 3 : processing.js , three.js et jquery-css-transform.js.

Utilisation de librairies pour les animations 2D et 3D : processing.js

Processing.js est une librairie javascript portée du monde Java et utilisée dans le monde de l'art numérique. Elle est limitée avec les applications Metro à la 2D car elle utilise le moteur de rendu webGl en 3d qui n'est pas compatible avec IE 10 et donc avec les applications Metro. C'est la première et plus grande limitation de cette librairie pour la création d'animation. C'est aussi à mon sens la librairie la plus riche en 2D en termes d'Api.

      
    (function () {

    'use strict';

    var ballAnim = WinJS.Class.define(

        function () {

        },

        {

            processingInstance: null,

            loadcanvas: function () {

                //Initialisation

            }

            // Simple way to attach js code to the canvas is by using a function

            function sketchProc(processing) {

                processing.setup = function () {

                //setup 2d objects

                }

                processing.draw = function () {

                //animate 2d object in a loop

                }

                }

            //var canvas = document.getElementById("canvas1");

            var canvas = jQuery("#canvas1");

            // attaching the sketchProc function to the canvas

            this.processingInstance = new Processing(canvas[0], sketchProc);

            },

            stopAnimation: function () {

                if (this.processingInstance != null) {

                this.processingInstance.noLoop();

                }

            }

        });

        WinJS.Namespace.define("Application1",

        {

            BallAnim: ballAnim

        });

    })();

Utilisation de librairies pour les animations 2D et 3D : three.js

Three.js est également une librairie reconnue pour la création d'animations 2D et 3D. Elle a le bon goût d'être compatible avec Direct 3D même si elle est plus complète avec le moteur de rendu WebGl.

L'idée est de charger l'animation en miniature dans chacun des templates de notre listview. Pour cela, nous ajoutons à notre item dans le fichier data.js la propriété « elementclass ». Nous allons « binder » la propriété classe du div qui doit contenir notre animation dans le template de notre listeview avec la propriété « elementclass » de notre item.

Data.js :

     
    var sampleItems = [

        {     

            group: sampleGroups[0],

            title: "Item Title: 1",

            subtitle: "Item Subtitle: 1",

            description: itemDescription,

            backgroundImage: lightGray,

            content: "
",

            elementclass:"minicube" 

        }

    ];

Groupeditems.html :

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">

        <div data-win-bind="className: elementclass;">

        div>

        <div class="item-overlay">

            <h4 class="item-title" data-win-bind="textContent:title">h4>

        div>

    div>

Nous allons utiliser cette classe comme sélecteur avec jQuery pour trouver le conteneur de l'animation cube. Nous insérons dans ce conteneur un div aux dimensions du div du template.

     
    this.container = document.createElement('div');

    var currentMain = jQuery(".minicube");

    this.viewPortWidth = currentMain.first().width();

    this.viewPortHeight = currentMain.first().height();

    currentMain.first().append(this.container);

Ensuite, nous créons l'objet de rendu de la librairie Three.js. Nous lui attribuons ses dimensions et on initialise la scène 3D.

     
    this.renderer = new THREE.CanvasRenderer();

    this.renderer.setSize(this.viewPortWidth, this.viewPortHeight);

    this.renderer.domElement.setAttribute('id', 'surface');

    this.scene = new THREE.Scene();

On va ensuite créer les lumières, la camera et notre cube avant de les ajouter à la scène. La fonction checkTweets() met à jour les textures des surfaces des cubes à partir du tableau de tweets mis à jour régulièrement par un timer. L'idée est de créer un canvas 2D pour chaque surface. Pour chacun de ces canvas, on écrit le texte dans un rectangle et on transforme le tout en texture.

     
    this.camera = this.buildCamera();

    this.cube = this.buildCube();

    this.checkTweets();

    this.scene.add(this.camera);

    this.scene.add(this.cube);

    this.scene.add(this.buildAmbientLight());

    this.scene.add(this.buildDirectionalLight());

    this.container.appendChild(this.renderer.domElement);

    checkTweets: function () {

        var max = 5;

        if (Data.tweets.results.length < 5) {

            max = Data.tweets.results.length;

        }

        for (var i = 0; i < max; i++) {

            var x = document.createElement("canvas");

            var xc = x.getContext("2d");

            var color = "rgb(" +

            Math.floor(Math.random() * 256) + "," +

            Math.floor(Math.random() * 256) + "," +

            Math.floor(Math.random() * 256) + ")";

            x.width = x.height = 128;

            xc.shadowColor = "#000";

            xc.shadowBlur = 2;

            xc.strokeStyle = color;

            xc.fillStyle = color;

            color = "rgb(" +

            Math.floor(Math.random() * 256) + "," +

            Math.floor(Math.random() * 256) + "," +

            Math.floor(Math.random() * 256) + ")";

            xc.fillRect(0, 0, 128, 128);

            xc.fillStyle = color;

            xc.font = "11pt arial bold";

            wrapText(xc, Data.tweets.results[i].text, 10, 10, 98, 12);

            var new_texture = new THREE.Texture(x);

            this.cube.geometry.materials[i].map = new_texture;

            this.cube.geometry.materials[i].map.needsUpdate = true;

        }

    }

Création de la lumière directionnelle avec three.js.

    buildDirectionalLight: function () {

        var directionalLight = new THREE.DirectionalLight(0xffffff);

        directionalLight.position.set(1, 1, 1).normalize();

        return directionalLight;

    }

Création de la lumière ambiante avec three.js.

     
    buildAmbientLight: function () {

    return new THREE.AmbientLight(0x999999);

    },

Création de notre maillage de type cube avec three.js.

    buildCube: function () {

        var materials = this.buildMaterials();

        var tmpcube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMaterial());

        tmpcube.position.y = 150;

        return tmpcube;

    }

Création de textures basiques avec three.js.

    buildMaterials: function () {

        var materials = [];

        for (var i = 0; i < 5; i++) {

            materials.push(new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff     }));

        }

        return materials;

    }

Création de la caméra avec three.js.

    buildCamera: function () {

        var tmpcamera = new THREE.PerspectiveCamera(50, this.viewPortWidth / 

        this.viewPortHeight, 1, 1000);

        tmpcamera.position.y = 150;

        tmpcamera.position.z = 500;

        return tmpcamera;

    },

Finalement, on anime le cube :

     
    calculateCube: function () {

    var that = this;

    this.angle = this.angle + this.animationSpeed.value;

    this.cube.rotation.x = degreesToRadians(this.angle);

    this.cube.rotation.y = degreesToRadians(this.angle);

    this.cube.rotation.z = degreesToRadians(this.angle);

    this.renderer.render(this.scene, this.camera);

    this.requestId = msRequestAnimationFrame(function () { that.calculateCube(); 

    }, this.renderer.domElement);

    }

Utilisation de librairies pour les animations 2D et 3D : transformation css

Pour cette animation, j'ai voulu tester la création d'animations en utilisant les transformations css 3.

Je suis parti de l'hélice 3D de Matt Sweetman que j'ai modifiée pour appliquer aux nouds de l'hélice les tweets du résultat de recherche.

En conservant la même logique que pour le cube, nous créons un fichier helix.js qui contient une classe HelixAnim dans le namespace MyFirstApp.

Pour cette classe, nous créons une fonction init qui va initialiser l'hélice en fonction de la taille de son conteneur.

     
    function init() {

        var that = this;

        var container = jQuery('.minihelix').first();

        var main = jQuery("
");

        container.append(main);

        // The number of nodes and waves is dependent on the width of the browser window

        this.WIDTH = 0.8 * main.width(),

        this.HEIGHT = 0.8 * main.height(),

        this.HELIX_SIZE = this.WIDTH / 10;

        this.NODES_PER_ARM = Math.floor(this.WIDTH / 110),

        this.HELIX_Y = this.HEIGHT / 2,

        this.HELIX_WAVES = Math.round(this.WIDTH / 350),

        this.X_STEP = this.WIDTH / this.NODES_PER_ARM;

        this.nodes = [];

        this.currentColorDec = Math.random() * 0xffffff;

        // Create node elements for each arm

        for (var i = 0; i < this.NODES_PER_ARM * this.ARMS; i++) {

            if (this.currentColorDec == 0xffffff) {

                this.currentColorDec = Math.random() * 0xffffff;

            }

            var node = new this.HelixNode();

            node.x = (i % this.NODES_PER_ARM) * this.X_STEP;

            this.currentColorDec = this.currentColorDec + 0x0000001;

            node.color = '#' + (this.currentColorDec).toString(16).substr(0, 6);

            this.nodes.push(node);

            MSApp.execUnsafeLocalFunction(function () {

                main.append(node.$el);

            });

        }

        jQuery("#main .node").css({ 'width': this.HELIX_SIZE + 'px', 'height': 

        this.HELIX_SIZE + 'px', 'font-size': (Math.floor(this.WIDTH / 100) - 1) + 'px' });

        this.renderFrame();

        this.helixTextTimer = setInterval(function () { that.checkTweets(); },3000);

    }

La fonction renderframe va calculer à chaque boucle la nouvelle position des nouds de l'hélice pour lancer la transformation css :

     
    node.$el.css({

    transform: 'translate3d(' + x + 'px,' + y + 'px,' + z + 'px) ' + 'rotateX(' + 

    rx + 'rad) ' + 'rotateZ(' + rz + 'deg)', opacity: opacity});

Affichage en plein écran.

Maintenant que l'animation s'affiche en miniature dans notre menu, nous allons permettre la navigation vers une page pour l'affichage en plein écran.

Pour cela, on modifie le code html de la page itemDetail.html. On conserve le titre de l'animation et la flèche pour retourne au menu. Le "div" avec la classe "item-content" va contenir le canvas pour l'animation.

    <div class="content" aria-label="Main content" role="main">

        <article>

            <div>

                <header>

                    <h2 class="item-title">h2>

                    <h4 class="item-subtitle">h4>

                 header>

                <img class="item-image" src="#" />

                <div class="item-content">div>

            div>

        article>

    div>

devient :

    <div class="content" aria-label="Main content" role="main">

        <article>

             <div>

                <header>

                     <h2 class="item-title">h2>

                header>

                <div class="item-content" > div>

             div>

        article>

    div>

Dans la css associée à la page, on commente la partie donc on a plus besoin.

    .itemdetailpage .content article {

     /* Define a 

    multi-column, horizontally scrolling article by default. 

    */

     /*column-fill: auto;

     column-gap: 

    80px;

     column-width: 480px;

     height: 

    calc(100% - 50px);

     margin-left: 

    120px;

     margin-top: 5px;

     width: 

    480px;*/

    }

Dans itemDetail.js, on modifie la fonction ready pour ne gérer le binding que du titre et du conteneur de l'animation. On s'assure que ce conteneur va prendre 100% de l'espace disponible et on ajoute au div avec la classe "item-content" le code html qui est dans la propriété content de l'item qui a été sélectionné dans le menu.

{ group: sampleGroups[0], title: "Cube", subtitle: "Item Subtitle: 1", description: itemDescription, backgroundImage: lightGray, content: "

", elementclass: "minicube" },

    element.querySelector(".content").focus();

    jQuery("article .item-content").css("width", "100%");

    jQuery("article .item-content").css("height","100%");

    jQuery("article .item-title").text(item.title);

    jQuery(".titlearea .pagetitle").text(item.group.title);

    jQuery("article .item-content").empty();

    jQuery("article .item-content").html(item.content);

    loadAnimation();

La fonction loadAnimation vérifie teste la classe du div contenu dans

pour en déduire l'animation à lancer.

    function loadAnimation() {

         if (jQuery("article .item-content .minicube").length != 0) {

         jQuery("article .item-content .minicube").first().height(currentHeight);

         jQuery("article .item-content .minicube").first().width(currrentWidth);

         jQuery("article .item-content .minicube").first().empty();

         if (cubeAnim != null) {

             cubeAnim.stopAnimation();

         }

         cubeAnim = new Application1.CubeAnim();

         }

         else if (jQuery("article .item-content .minihelix").length != 0) {

             jQuery("article .item-content .minihelix").first().height(currentHeight);

             jQuery("article .item-content .minihelix").first().width(currrentWidth);

             jQuery("article .item-content .minihelix").empty();

             if (helixAnim != null) {

                 helixAnim.stopAnimation(); 

             }

         helixAnim = new Application1.HelixAnim();

         helixAnim.loadcanvas();

         }

    }

On ajoute le code pour la navigation. L'idée est de stopper l'animation quand on quitte la page.

     
    init: function (element, options) 

    {

         // Hold onto bound copies of our navigation callback

         // functions so that we can clean it up when navigated 

         // away from.

        this.navigated = this.navigated.bind(this);

    },

    navigated: function (eventObject) {

        if (cubeAnim != null) 

        { 

           cubeAnim.stopAnimation();

        }

        if (helixAnim != null) 

        {

           helixAnim.stopAnimation();

        }

    },

     unload: function () 

    {

         WinJS.Navigation.removeEventListener("navigated", this.navigated);

     }

et dans la fonction ready :

    ready: function (element, options) 

    {

     var that = this;

     WinJS.Navigation.addEventListener("navigated", this.navigated);

    ...

On peut maintenant lancer notre application en mode Debug. Lorsque l'on fait une recherche et que l'on clique sur une mini animation, on la lance en plein écran. Pour améliorer le programme, il faudrait ne lancer le plein écran que si une recherche a effectivement été lancée. Il faut également relancer l'application lorsque l'on revient sur le menu principal. cet article ne traite pas ces 2 points.

Prise en compte de la rotation de la tablette avec WinJs

Pour ce dernier point, nous allons relancer l'application quand le support passe du mode portrait au mode paysage. Il y a plusieurs moyens de résoudre ce problème. On peut par exemple utiliser les capteurs de la tablette et s'abonner à des évènements déclenchés lors d'une rotation de l'écran. Le problème est le que le simulateur de tablette dans Visual Studio ne simule pas (ou pas encore) ces capteurs. Il est donc impossible de tester cette implémentation.

J'ai donc choisi de travailler avec l'évènement resize associé à la fenêtre. Toujours dans itemDetail.js, on crée 2 variables pour conserver les dimensions de la fenêtre.

    var currentHeight = null;

    var currrentWidth = null;

On ajoute une fonction qui sera appelée au déclenchement de l'évènement resize :

    function handleResize(eventArgs) {

     currrentWidth = eventArgs.view.outerWidth;

     currentHeight = eventArgs.view.outerHeight;

     loadAnimation();

    }

Dans la fonction ready, on initialise nos 2 variables :

    currrentWidth = window.innerWidth;

    currentHeight = window.innerHeight;

On s'abonne à l'évènement :

    window.addEventListener("resize", handleResize);

on oublie pas de se désabonner lorsque l'on quitte la page dans la fonction unload.

    window.removeEventListener("resize", handleResize);

Job done !!

On peut lancer le debugger avec le simulateur de tablette :

Lorsque l'on effectue une rotation de l'écran, l'animation est rechargée en tenant compte des nouvelles dimensions.

Conclusion :

Pour ceux qui comme moi viennent du monde du Web, il est possible de créer des applications Metro avec une bonne productivité en réutilisant les librairies Javascript reconnues telles que JQuery.

Il est probable que la combinaison Xaml / c# est plus riche pour la création d'animations mais l'emploi de librairies Js 2D et 3D reste un très bon moyen de créer des animations riches. Après tout, cute the rope a été développé en html 5!

WinJs apporte en plus de la rigueur dans l'organisation de la solution ainsi que des fonctionnalités avancées qui nécessitaient avant d'autres librairies (ex : binding).

Il faut rester vigilant à l'emploi de ces librairies car leur utilisation est parfois limitée par l'environnement. Enfin, il reste à passer les tests de Microsoft pour la publication d'applications dans le store !!!

Source disponibles ici

Premiers pas avec Windows 8 et les applications Metro en javascript / html (part1/2)

Introduction

Cet article a pour vocation de tester l'utilisation de librairies javascript reconnues en complément de WinJS, l'api fournie par Microsoft. L'article est découpé en 2 parties avec dans un second temps, une attention particulière portée à l'animation 2D et 3D. Les sources sont disponibles sur le second article.

L'application

Pour cet article, j'ai créé une application qui a pour but de visualiser le résultat d'une recherche sur Tweeter en choisissant une animation 2d ou 3d.

Création de la solution avec Visual Studio

Pour accélérer le développement de cette application, je suis parti d'un modèle de Visual studio 12 avec un contrôle de navigation.

Depuis le menu de Visual Studio 2012, créer un nouveau projet javascript de type Grid App.

Utilisation des librairies reconnues

JQuery

Utilisation simple de jQuery

jQuery facilite énormément le développement d'applications en javascript en proposant des méthodes de haut niveau pour effectuer des actions récurrentes. Il est possible d'utiliser jQuery pour le développement d'application Metro. Il est préférable pour cela de télécharger la dernière version de jQuery pour l'intégrer aux fichiers de la solution.

Ensuite, ajouter la librairie Jquery à la solution :

Dans la page par défaut de l'application (default.html), ajouter un référence vers la librairie jQuery.

Editer la page qui sera la page d'accueil de notre application (référencé dans default.html) dans le contrôle de navigation : groupedItems.html.

     <div id="contenthost" data-win-control="Application.PageControlNavigator" 

    data-win-options="{home: '/pages/groupedItems/groupedItems.html'}">div>

Ajouter le code html suivant sous le body :

     
    <div id="toppanel">

        <div id="panel">

            <div class="content clearfix">

                <div class="searchbox">

                <input type="text" id="txtSearch" value="" />

                <input type="button" name="btnSearch" id="btnSearch" value="Search"/>

                div>

           div>

    div>

     
    <div class="tab">

        <ul class="login">

            <li class="left">li>

            <li id="toggle"><a id="open" class="open"href="#">Recherchea><a id="close" style="display: none;" class="close" href="#">Fermera>li>

            <li class="right">li>

        ul>

    div>

Dans le fichier css associé à la page html, on décrit le style du panel qui va nous servir de menu contextuel. Ce style fait appel à des images que l'on a ajoutées dans la solution.

On va enfin ajouter au code javascript de la page les commandes jQuery qui vont commander la visibilité du panel. Ajouter le code suivant dans la méthode ready de la page. Cette méthode est exécutée quand le dom a été chargé.

Grâce à jQuery, on récupère facilement les éléments du code html via le sélecteur (plus court à écrire qu'avec WinJs) et on gère les animations du panel de recherche grâce aux méthodes slideDown, slideUp et toggle.

     
    jQuery("#open").click(function () {

        jQuery("div#panel").slideDown("slow");

    });

    // Collapse Panel

    jQuery("#close").click(function () {

        jQuery("div#panel").slideUp("slow");

    });

    // Switch buttons from "Log In | Register" to "Close Panel" on click

    jQuery("#toggle a").click(function () {

        jQuery("#toggle a").toggle();

    });

On exécute l'application en mode Debug :

Premier piège avec jQuery.

La prochaine étape consiste à utiliser jQuery pour faire un appel ajax à l'api de twitter. Si on faisait une page Web classique, il n'y aurait aucun problème mais dans notre cas, Microsoft a introduit une sécurité pour ne pas pouvoir modifier le dom avec une ressource externe. L'idée est de prévenir l'injection de code malicieux dans notre application contrairement au Web, notre application pourra avoir accès à notre machine. Du code Js « téléchargé » depuis l'extérieur pourrait donc compromettre notre machine.

On ne peut donc pas écrire :

     
    $.ajax({ url: "test.html", context: document.body}).done(function() { 

        $(this).addClass("done");

    });

Nous allons donc pas pouvoir utiliser jQuery pour effectuer la requête. Il faut faire appel à WinJS.xhr. D'abord, on ajoute un nouveau fichier javascript nommé tweetsSearch.js. On créer une nouvelle classe tweetsSearch en utilisant le formalisme de WinJs. Cette classe aura une fonction asynchrone searchAsync qui va effectuer la requête, vérifier le statut de la réponse et retourner le résultat. On notera l'utilisation de WinJs.Promise qui permet d'effectuer des appels asynchrones et de chaîner des fonctions.

     
    searchAsync: function (_request, _numTweets) {

        var builder = new urlBuilder(_request, _numTweets);

        var promise = WinJS.xhr(

        {

            url: builder.searchUrl

        }

    );

    promise = promise.then(

        function (response) {

            var result = null;

            if (response && (response.status === 200)) {

                result = JSON.parse(response.response);

            }

            return (result);

        },

        function () {

            return (null);

        }

    );

    return (promise);

    }

Dans le code javascript de la page groupedItems.html, nous allons déclencher l'appel à cette fonction sur le click du bouton de recherche en utilisant jQuery.

     
    jQuery("#btnSearch").click(function () {

        Data.request = jQuery("#txtSearch").val();

        var searcher = new Application1.TweetsSearch();

        var promise = searcher.searchAsync(Data.request, 8);

        promise.then(

        function (results) {

            if (results) {

                Data.tweets = results;

            }

        });

    });

Le résultat de la recherche est stocké dans une variable globale de la classe Data. Il faut donc modifier data.js en conséquence.

On ajoute la variable request et la variable tweets :

     
    var request = "";

    var tweets = [] ;

    .

    WinJS.Namespace.define("Data", {

        items: groupedAnims,

        groups: groupedAnims.groups,

        getItemsFromGroup: getItemsFromGroup,

        getItemReference: getItemReference,

        resolveGroupReference: resolveGroupReference,

        resolveItemReference: resolveItemReference,

        updateTweets:updateTweets,

        request : request,

        tweets : tweets

    });

Il n'y a plus qu'à ajouter la référence à tweetsSearch.js dans default.html.

Si on lance notre application et que l'on met un point d'arrêt sur le click du bouton, on devrait voir le résultat de notre recherche dans Data.tweets.

Utilisation de linq avec jQuery

La librairie jquery.linq.min.js est elle aussi bien utile lorsque l'on vient du monde c# et que l'on manipule les données avec des "lambda expressions" et les "enumerables". Il s'agit d'une librairie qui a pour vocation de porter la puissance de linq du framework .Net au jacascript.

Dans notre projet, linq est utile pour sélectionner des sous ensemble de listes pour effectuer des opérations en évitant d'utiliser des boucles for. Une fois la librairie téléchargée, on l'ajoute dans le dossier js de notre projet et on ajoute la référence à cette librairie dans la page default.html.

Dans le code suivant par exemple, on cherche dans la liste plancontroller les éléments dont la propriété "generation" est égale à la generation courante -2. Pour chacun de ces éléments, on applique une fonction qui permet de supprimer de la scene l'objet plan de l'élément. Il s'agit en fait de retirer d'un canvas des "objets" qui n'apparaissent plus dans la scene.

    jQuery.Enumerable.From(this.plancontroller)

    .Where("$.generation==" + (that.generation - 2).toString())

    .TojQuery().each(function (i) { that.scene.remove(i.plan); });

Création de classes avec WinjS

Pour la suite de l'exercice, nous allons créer un fichier javascript par animation. Chaque fichier contient une classe et un namespace. Les notions de classe et de namespace sont des artifices en javascript qui permettent d'organiser la solution. En effet, javascript est un langage flexible qui demande de la rigueur, notamment lorsqu'il s'agit de déclarer des variables globales.

Avec Winjs, il est possible de créer des variables dans un namespace.

     
    function () { 

        'use strict'; 

        // export this "enum" 

        var ShapeType = 

        Object.freeze({ 

            None: 0, 

            Line: 1, 

            Ellipse: 2, 

            Rectangle: 3, 

            Arc: 4, 

            Bezier: 5 

        }); 

        WinJS.Namespace.define("Acme.Shapes", { 

            ShapeType: ShapeType 

        }); 

    })();

Le code suivant permet par exemple d'appeler une énumération de types de formes depuis n'importe quelle portion de code sous la forme suivante :

    var type = Acme.Shapes.ShapeType.Arc;

La création de classe utilise la fonction WinJS.Class.define qui prend 3 parametres : une fonction utilisée comme constructeur, un objet définissant les membres d'instances et un objet définissant les membres statiques. Le contenu du code suivant sera étudié dans la seconde partie de l'article à propose de l'utilisation de librairies dédiées aux animations 2d et 3d.

     
    (function () {

        "use strict";

        // constructor function

        function init () {

            this.animationSpeed = this.getAnimationSpeed(0.5);

            var that = this;

            this.container = document.createElement('div');

            var currentMain = jQuery(".minicube");

            this.viewPortWidth = currentMain.first().width();

            this.viewPortHeight = currentMain.first().height();

            currentMain.first().append(this.container);

            this.renderer = new THREE.CanvasRenderer();

            this.renderer.setSize(this.viewPortWidth, this.viewPortHeight);

            this.renderer.domElement.setAttribute('id', 'surface');

            this.scene = new THREE.Scene();

            this.camera = this.buildCamera();

            this.cube = this.buildCube();

            this.checkTweets();

            this.scene.add(this.camera);

            this.scene.add(this.cube);

            this.scene.add(this.buildAmbientLight());

            this.scene.add(this.buildDirectionalLight());

            this.container.appendChild(this.renderer.domElement);

            this.calculateCube();

            this.cubeTextTimer = setInterval(function () { that.checkTweets(); }, 

            5000);

            this.loadSlider();

            }

        var instanceMembers = {

            // private member

            container: null,

            renderer: null,

            cube: null,

            angle: 1,

            scene: null,

            camera: null,

            viewPortWidth: window.innerWidth,

            viewPortHeight: window.innerHeight,

            requestId: 0,

            cubeTextTimer: null,

            animationSpeed: undefined,

            /*****/

            };

        var staticMembers = {

        };

        var cubeAnime = WinJS.Class.define(init, instanceMembers, staticMembers);

        WinJS.Namespace.define("MyFirstApp",

        {

            CubeAnim: cubeAnime

        });

    })();

Ici, nous créons une classe CubeAnim dans le namespace MyFirstApp. Le constructeur est la fonction init et la classe n'a pas de membres statiques.

Depuis le javascript de la page groupedItems.html, nous pouvons initialiser l'animation cube une fois la recherche lancée :

     
    jQuery("#btnSearch").click(function () {

        Data.request = jQuery("#txtSearch").val();

        var searcher = new Application1.TweetsSearch();

        var promise = searcher.searchAsync(Data.request, 8);

        promise.then(

        function (results) {

            if (results) {

                Data.tweets = results;

                that.cubeAnim = new MyFirstApp.CubeAnim();

            }

        });

    });

Lorsque la classe est instanciée, le constructeur initialise l'animation.

Pour rendre notre code plus propre, nous allons créer 3 fonctions dans groupedItems.js. La première aura pour objectif d'initialiser toutes les animations, la seconde arrêtera les animations en cours et la dernière servira à lancer la recherche et à réinitialiser toutes les animations.

     
    loadAnimations: function () {

        try {

            this.cubeAnim = new MyFirstApp.CubeAnim();

        }

        catch (exception) {

            //notify the user

        }

    }

    resetAnimation: function () {

        try {

            if (this.cubeAnim != null) {

                var container = jQuery(".minicube").first();

                container.empty();

                this.cubeAnim.stopAnimation();

            }

        }

        catch (exception) {

        //notify the user

        }

    }

    launchSearch: function (value) {

        var that = this;

        Data.request = value;

        if (Data.request != null && Data.request != "") {

            var searcher = new Application1.TweetsSearch();

            var promise = searcher.searchAsync(Data.request, 8);

            promise.then(

            function (results) {

                if (results) {

                    that.resetAnimation();

                    Data.tweets = results;

                    that.loadAnimations();

                }

            });

        }

    }

    Et finalement, dans la function ready :

    jQuery("#btnSearch").click(function () {

        that.launchSearch(jQuery("#txtSearch").val());

    });

Utilisation du contrat d'application

Ressources :

http://blogs.msdn.com/b/b8_fr/archive/2012/06/14/activation-des-contrats-windows-160-8-dans-votre-application.aspx

Cas d'utilisation, nous allons lancer la recherche twitter depuis la recherche de Windows 8.

1. Ajoutez la déclaration de recherche à votre manifeste en utilisant le concepteur de manifeste de Visual Studio.

2. Placer dans le code d'initialisation de l'application tout ce qui doit fonctionner au chargement de l'application quelque soit la façon dont elle a été lancée.

3. S'enregistrer à l'évènement d'activation de l'application et tester s'il s'agit d'une recherche.

    else if (eventObject.detail.kind === appModel.Activation.ActivationKind.search) 

    {

4. Quand l'application est appelée pour un résultat de recherche, naviguer vers la page de résultats en passant en paramètre le paramètre de recherche récupéré.

     
    args.setPromise(WinJS.UI.processAll().then(function () {

        if (args.detail.queryText === "") {

            // Navigate to your landing page since the user is pre-scoping to your app.

            return nav.navigate(Application.navigator.home);

        } 

        else {

            // Display results in UI for eventObject.detail.queryText and eventObject.detail.language.

            // eventObject.detail.language represents user's locale.

            return nav.navigate(Application.navigator.home, { queryText:args.detail.queryText });

         }

    });

Conclusion pour cette première partie

WinJs associé à des librairies javascript reconnues permet de gagner en productivité pour la réalisation d'applications Metro. Toutefois, il faut rester prudent sur leur utilisation et garder à l'esprit que Microsoft interdit la modification du dom avec du code externe.

Sources disponibles ici

Hand Tracking avec Kinect et XNA

Afin de faire nos premières armes avec le capteur Kinect de Microsoft, nous allons réaliser une petite démo affichant l'image filmée avec la main de l'utilisateur marquée.

Comprendre Kinect

Ce que l'on appelle Kinect est en réalité l'agrégat de deux technologies :

· Le « Kinect Sensor », une webcam agrémentée de deux caméras infrarouges, d'un micro et d'un socle motorisé.

· La « NUI API », partie applicative qui nous permet de traiter les informations fournies par le capteur.

Créer le Projet

Kinect peut être utilisé avec un vaste panel de technologies. Pour cette démo, nous utiliserons le framework XNA pour sa simplicité.

On va utiliser le template Windows Game fournis avec XNA :

Pour utiliser le SDK Kinect, il suffit d'ajouter une référence à Microsoft.Kinect :

Initialiser le capteur

Il est possible de connecter et d'utiliser plusieurs capteurs Kinect sur une même machine. Chaque capteur sera géré grâce à une instance de la classe KinectSensor :

   1: KinectSensor sensor = KinectSensor.KinectSensors[0];

Les flux d'images renvoyés par la webcam (ColorStream) et les caméras IR (DepthStream) sont disponibles dans plusieurs formats à plusieurs fréquences.

Dans notre cas nous allons utiliser du 640 x 480 à 30 images par seconde car il s'agit du seul format partagé par les deux types de flux :

sensor.DepthStream.Enable ( DepthImageFormat.Resolution640x480Fps30 );

sensor.ColorStream.Enable ( ColorImageFormat.RgbResolution640x480Fps30 );

Nous allons également activer le tracking du squelette de l'utilisateur :

   1: sensor.SkeletonStream.Enable ();

Et démarrer le capteur :

   1: sensor.Start ();

Récupérer les frames

Notre capteur va maintenant nous envoyer des images 30 fois par secondes. Comme nous avons spécifié la même fréquence pour les deux flux, elles arriveront en même temps et nous pouvons donc les récupérer en même temps en nous abonnant à l'évènement AllFramesReady.

   1: sensor.AllFramesReady += new EventHandler ( OnFramesReady );

private void OnFramesReady ( object sender , AllFramesReadyEventArgs e )

{

    // Get the frames from Kinect

    ColorImageFrame imageFrame = e.OpenColorImageFrame ();

    SkeletonFrame skeletonFrame = e.OpenSkeletonFrame ();

    DepthImageFrame depthFrame = e.OpenDepthImageFrame ();

    if ( ( imageFrame != null ) && ( skeletonFrame != null ) && ( depthFrame != null ) )

    {

    // A venir.

    }

  

// Dispose of the frames

    if ( imageFrame != null ) imageFrame.Dispose ();

    if ( skeletonFrame != null ) skeletonFrame.Dispose ();

    if ( depthFrame != null ) depthFrame.Dispose ();

}

Ces frames ne sont pas directement exploitables, il va falloir les copier dans nos propres tableaux :

private byte[] _pixelData = null;

private short[] _depthData = null;

private Skeleton[] _skeletons = new Skeleton[6];

On va ensuite s'assurer qu'ils soient bien alloués lors de la réception des frames et copier les données :

// Allocate the buffers

if ( _pixelData == null )

{

    _pixelData = new byte[imageFrame.PixelDataLength];

    _depthData = new short[depthFrame.PixelDataLength];

}

  

// Retreive the data

imageFrame.CopyPixelDataTo ( _pixelData );

depthFrame.CopyPixelDataTo ( _depthData );

skeletonFrame.CopySkeletonDataTo ( _skeletons );

Afficher l'image de fond

Ces données ne nous sont que de peu d'utilité si on ne les exploite pas. On va commencer par afficher l'image du flux couleur dans notre application.

Pour cela, on va avoir besoin de deux objets : un buffer contenant des pixels et une texture.

private Texture2D _cameraTexture = null;

private Color[] _colorData = new Color[640 * 480];

On instancie la texture dans LoadContent :

   1: _cameraTexture = new Texture2D ( GraphicsDevice , 640 , 480 , false , SurfaceFormat.Color );

Le capteur Kinect nous envoie le flux d'image au format BGR, il va falloir le convertir au format RGBA utilisé par XNA :

// Convert the color data to the proper format

for ( int i = 0 ; i < ( 640 * 480 ) ; ++i )

{

    int b = _pixelData[( i * 4 )];

    int g = _pixelData[( i * 4 ) + 1];

    int r = _pixelData[( i * 4 ) + 2];

    _colorData[i] = new Color ( r , g , b , 255 );

}

  

// Copy it inside the texture

_cameraTexture.SetData ( _colorData );

Enfin, dans la méthode Draw nous allons simplement afficher la texture de fond :

spriteBatch.Begin ();

spriteBatch.Draw ( _cameraTexture , Vector2.Zero , Color.White );

spriteBatch.End ();

  

graphics.GraphicsDevice.Textures[0] = null;

La dernière ligne s'assure que la texture n'est plus associée avec le GraphicsDevice au moment de modifier son contenu, autrement nous aurions une exception.

Skeleton Tracking

Kinect étant bien plus qu'une webcam, voyons comment récupérer la position de la main droite de l'utilisateur.

L'API NUI est chargée de reconstituer le squelette des utilisateurs en fonction du flux de profondeur fournis par les deux caméras IR.

Skeleton skeleton = ( from s in _Skeletons where s.TrackingState == SkeletonTrackingState.Tracked select s ).FirstOrDefault ();

if ( skeleton != null )

{

    Joint joint = skeleton.Joints[JointType.HandRight];                

}

Notre application ne prévoit qu'un seul utilisateur, mais il est possible de traquer jusqu'à 6 squelettes avec un seul capteur Kinect.

Chaque squelette est composé de plusieurs articulations (joints) identifiées comme suit :

Dans notre cas, nous récupérons la position de la main droite de l'utilisateur. Toutefois cette position est tridimensionnelle et relative au squelette. Si on veut marquer l'emplacement de la main droite sur l'image filmée, il va falloir faire correspondre les deux :

ColorImagePoint pt = sensor.MapSkeletonPointToColor ( joint.Position , imageFrame.Format );

_handPosition = new Vector2 ( pt.X , pt.Y );

Cette position 2D correspond à la position de la main droite sur l'image récupérée par le capteur. Pour vérifier que cela fonctionne, on va dessiner un carré rouge à cet endroit.

Dans LoadContent, on va créer une texture d'un pixel :

_pixelTexture = new Texture2D ( GraphicsDevice , 1 , 1 , false , SurfaceFormat.Color );

_pixelTexture.SetData ( new Color[] { Color.White } );

Et dans Draw, on va dessiner notre carré :

   1: spriteBatch.Draw ( _pixelTexture , new Rectangle ( (int)_handPosition.X - 8 , (int)_handPosition.Y - 8 , 16 , 16 ) , Color.Red );

On peut désormais tester le résultat :

Vous savez désormais repérer la position de la main de l'utilisateur qui peut servir de curseur dans vos applications. Vous pouvez également modifier le code de l'application pour vous entrainer et suivre plusieurs parties du corps voir même plusieurs utilisateurs.

Télécharger les sources de la démo

Ma première application Metro/Javascript. Partie 1 : les contrôles

Cet article est le premier d’une série d’article de présentation du développement d’application Metro, avec HTML et Javascript.

Ces articles se concentreront principalement sur les spécificités de Windows 8, il est recommandé de connaitre les bases du développement web avec HTML et Javascript.

Présentation de la solution

Nous commençons par créer un nouveau projet « Windows Metro Style », utilisant le langage Javascript :

Lorsque le projet est créé, on se retrouve avec la structure suivante :

Hormis les deux derniers fichiers (manifest et certificats), on a vraiment un projet similaire à un site web : des fichiers html, javascript, css, et des images.

Nous allons développer notre application en HTML et Javascript, et le rendu sera géré par Internet Explorer 10.

Utilisation des contrôles HTML

Contrôles HTML

Étant donné que nous développons en HTML, nous allons donc pouvoir gérer notre affichage de la même manière que dans un site web classique, à l’aide des contrôles HTML que nous connaissons déjà. On pourra par afficher un bouton avec le contrôle <button> :

<button id="bt">Un bouton</button>

Et comme les applications Metro utilisent un moteur de rendu compatible avec HTML5 (au moins en partie), nous allons pouvoir utiliser les nouveaux contrôles. Par exemple, nous pourrons utiliser un contrôle de type « slider » en faisant un input de type « range » :

Propriétés des contrôles, et évènements

Une fois qu’on a écrit nos contrôles en HTML, on peut y accéder, lire et modifier les propriétés, à l’aide de Javascript. Par exemple, si on veut afficher la valeur du slider, ça se passe comme ça :

<button id="bouton">Un bouton</button>

Et dans le code Javascript (fichier data.js), on ajoute une fonction :

function buttonClick(mouseEvent) {

var output = document.getElementById("resultat");

var slider = document.getElementById("slider");

output.innerText = slider.value;

}

Et il faut s’abonner à l’évènement « click » du bouton. Dans la fonction app.onactivated (lors de l’activation de l’application), on ajoute :

var bouton = document.getElementById("bouton");

bouton.addEventListener("click", buttonClick, false);

Il est aussi possible de se baser sur des librairies Javascript externes. Le code Javascript aurait tout aussi bien pu s’écrire de la manière suivante, en utilisant jQuery :

$("#bouton").click(function () {

var sliderValue = $("#slider").val();

$("#resultat").text(sliderValue);

});

Utilisation des contrôles WinJS

En plus des contrôles HTML classiques, nous avons la possibilité d’utiliser des contrôles supplémentaires, fournis par la « Microsoft Windows Library for Javascript ». Pour pouvoir les utiliser, il faut référencer les fichiers javascript et css de cette librairie :

Nous pouvons maintenant utiliser les contrôles WinJS dans notre application. La liste des contrôles utilisable (liste complète, incluant les contrôles HTML) peut être consultée sur msdn à cette adresse : http://msdn.microsoft.com/en-us/library/windows/apps/hh465453.aspx

Contrairement aux contrôles HTML que nous avons vu en première partie, ces contrôles WinJS n’ont pas de balise associée. Pour les utiliser, nous allons les embarquer dans une balise <div>, que nous allons configurer à l’aide des attributs « data-win-control » et « data-win-options ».

Ensuite, il faut appeler la méthode Javascript WinJS.UI.processAll(); qui va insérer les contrôles dans les éléments div. Cette méthode est déjà appelée dans les templates par défaut de Visual Studio.

Par exemple, pour utiliser le contrôle DatePicker (http://msdn.microsoft.com/en-us/library/windows/apps/br211681.aspx), nous allons écrire :

Ce qui nous donnera le résultat suivant :

Pour définir les propriétés du contrôle, on utilise data-win-options. On pourra par exemple définir l’année minimale et maximale de notre contrôle :

Pour accéder au contrôle par code (en Javascript), il faut récupérer la propriété winControl de l’élément conteneur :

var control = document.getElementById("datePicker").winControl;

On peut ensuite lire ou modifier ses propriétés :

document.getElementById("divResult").innerText = control.current;

control.maxYear = 2020;

Conclusion

Nous avons vu dans ce premier article un premier aperçu des contrôles Windows 8 ; rendez-vous dans quelques jours pour la suite, avec une vue d'ensemble du binding dans les applications metro javascript.

RadioButton et RadioButtonList en XAML

Problématique

L'utilisation de RadioButton en XAML s'avère généralement très difficile : impossible de binder sur une source de donnée, impossible de savoir lequel est sélectionné. On en arrive à faire ce genre de chose :

<StackPanel>
    <RadioButton Content="Option1" IsChecked="{Binding IsOption1Checked}" GroupName="MyGroup" />
    <RadioButton Content="Option2" IsChecked="{Binding IsOption2Checked}" GroupName="MyGroup" />
    <RadioButton Content="Option3" IsChecked="{Binding IsOption3Checked}" GroupName="MyGroup" />
<StackPanel>

Visuellement on obtient ça :

Résultat : une mise en place pompeuse, peu maintenable, beaucoup de code pour bien peu de chose (on imagine quand il y a 10 éléments.).

Essayons de trouver une manière plus simple de faire un « RadioButtonList ».

Concept fondamental

Rappelons qu'en XAML le comportement et l'apparence des contrôles sont dissociés. D'un côté on a le comportement qui est défini au niveau du code:

Une CheckBox se coche et se décoche,
Un Button est cliquable,
Une ListBox présente un ensemble d'éléments sélectionnables.

De l'autre côté, l'apparence qui est définie par le Template.

Ainsi il est possible de créer des boutons ayant toujours le comportement « cliquable » mais qui sont visuellement totalement différent. De la même façon, on peut créer une ListBox complètement différente de l'idée qu'on se fait d'une ListBox.

Une solution

Partant de ce concept si on cherche à définir le comportement d'une RadioButtonList, on pourrait le décrire ainsi :

C'est un ensemble d'éléments dont un et un seul est sélectionnable.

Coté visuel chaque élément à l'apparence d'un RadioButton.

Bref, le contrôle RadioButtonList existe : c'est une ListBox ! Il suffit d'en modifier l'apparence à l'aide d'un ControlTemplate adapté. Pour faire de ce RadioButtonList un contrôle réutilisable, je vais créer un CustomControl et dérivé de ListBox.

public class RadioButtonList : ListBox
{
    static RadioButtonList()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(RadioButtonList), new FrameworkPropertyMetadata(typeof(RadioButtonList)));
    }
}

Pour le visuel, il me reste à définir le Style par défaut :

<Style TargetType="local:RadioButtonList">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:RadioButtonList">
                <ItemsPresenter />
            <ControlTemplate>
        <Setter.Value>
    <Setter>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <RadioButton Content="{TemplateBinding Content}"
                                                   ContentTemplate="{TemplateBinding ContentTemplate}"
                                                   Margin="{TemplateBinding Padding}"
                                                   IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <ControlTemplate>
                    <Setter.Value>
                <Setter>
            <Style>
        <Setter.Value>
    <Setter>
<Style>

Terminons par un exemple d'utilisation du RadioButtonList :

<RadioButtonListSample:RadioButtonList
                           ItemsSource="{Binding Options}"
                           SelectedItem="{Binding SelectedOption, Mode=TwoWay}" />

Conclusion

La séparation nette entre comportement et l'apparence vous permettra de résoudre plus simplement certains problèmes. En effet il existe en XAML un nombre important de contrôle de base dans lesquels vous pouvez piocher.

Indexer les sources d’un serveur TFS

Le contrôleur de source de votre entreprise renferme certainement plein d'informations et d'exemples de code en tout genre. Mais comment l'exploiter ? Comment rechercher efficacement dans toutes ces lignes de code ?

Team Foundation Server ne propose aucune solution native de recherche dans le contrôleur de source, mais plusieurs solutions customs existent. Toutes ces solutions reposent en général sur le même principe : stocker les sources dans un magasin tiers, puis indexation du contenu.

Les différentes solutions

Donc concrètement, nous pouvons stocker les sources dans le système de fichiers d'un serveur puis activer les services de recherche de Windows. Une autre solution serait de les indexer avec un serveur SharePoint.

Et enfin, une dernière solution consisterait à stocker les sources dans une base de données et activer la recherche Full Text.

Quelque soit la solution que l'on choisit il nous faudra bien évidemment récupérer les dernières versions des sources à intervalle régulier.

Je vous propose de découvrir comment mettre en place l'indexation des sources d'un serveur TFS grâce à SQL Server pour le stockage et la recherche Full Text et grâce à Team Build pour la récupération des sources à intervalle régulier.

La base de données SQL Server d'indexation des sources TFS

Comme je vous le disais, TFS ne propose aucune solution pour la recherche dans le contrôleur de source. La création d'un index Full Text sur la base de données de TFS n'est tout simplement pas possible et non supportée. Nous allons donc créer une base de données SQL Server afin d'y stocker un duplicat des dernières versions des sources. Cette base de données contient une seule table que voici :

Cette table possède :

une clé primaire : indispensable à la création d'un index Full Text
une colonne Content : destinée à stocker le contenu du fichier
l'extension : correspond au type de contenu à indexer, indispensable à la création d'un index Full Text
CheckinDate : correspond à la dernière date d'archivage du fichier dans TFS
ServerItemId : identifiant de l'élément dans la base SQL de TFS

Une fois cette table créée, il nous faut créer l'index Full Text comme suit :

La custom activité de récupération des sources

Maintenant que l'index Full Text et le catalogue sont créés il nous faut développer une routine qui va récupérer à intervalle régulier les dernières versions des sources de TFS et les stocker dans notre base de données. Pour cela nous allons nous appuyer sur Team Build.

Tout d'abord, nous devons développer une custom activité de Workflow. Depuis Visual Studio nous créons donc un projet Workflow Foundation de type librairie d'activités.

Dans ce projet nous avons besoin :

des références vers les API TFS qui nous permettrons de nous connecter au serveur et de récupérer les sources (Microsoft.TeamFoundation.Client, Microsoft.TeamFoundation.Build.Client, Microsoft.TeamFoundation.VersionControl.Client)
d'un modèle Entity Framework pour se brancher sur notre base de données
d'une classe SourceCodeImporter contenant la logique de récupération des sources de TFS
d'une activité WF de type CodeActivity afin de brancher notre système d'importation dans le processus de build

Voici à quoi ressemble le projet :

Le modèle Entity Framework

Pour le modèle Entity Framework, rien de spécial, il contient la table TfsFile que nous avons créer auparavant :

L'activité ProcessFilesActivity

L'activité ProcessFilesActivity se présente comme suit :

l'attribut BuildActivity avec le paramètre HostEnvironmentOption.All qui permet d'indiquer à Team Build dans quel contexte s'exécute cette activité (Controlleur, Agent ou les 2)
2 arguments en entrée permettant de définir le répertoire de travail et l'URI de la collection de Team Project à traiter
l'implémentation de la méthode Start

   1:  [BuildActivity(HostEnvironmentOption.All)]

   2:  public sealed class ProcessFilesActivity : CodeActivity

   3:  {

   4:      [Browsable(true)]

   5:      [RequiredArgument()]

   6:      public InArgument<string> TempDirectory { get; set; }

7:

   8:      [Browsable(true)]

   9:      [RequiredArgument()]

  10:      public InArgument<string> CollectionUri { get; set; }

11:

  12:      protected override void Execute(CodeActivityContext context)

  13:      {

  14:          var tempDirectory = context.GetValue(this.TempDirectory);

  15:          var collectionUri = context.GetValue(this.CollectionUri);

16:

  17:          SourceCodeImporter importer = new SourceCodeImporter(new Uri(collectionUri), tempDirectory);

  18:          importer.Start();

  19:      }

  20:  }

La classe SourceCodeImporter

Il ne reste plus qu'à développer la classe SourceCodeImporter et sa logique de récupération et de stockages des sources.

Dans un premier temps au niveau du constructeur on initialise :

le répertoire de travail,
la collection TFS qui nous servira à récupérer le service de gestion du contrôleur de sources
le contexte Entity Framework

   1:  public SourceCodeImporter(Uri collectionUri, string tempDirectory)

   2:  {

   3:      _collection = TfsTeamProjectCollectionFactory.GetTeamProjectCollection(collectionUri);

   4:      _server = (VersionControlServer)_collection.GetService(typeof(VersionControlServer));

   5:      _tempDirectory = tempDirectory;

   6:      _ctx = new TfsAnalyzerEntities(_connectionString);

   7:  }

On peut également définir une constante contenant la liste des extensions de fichiers que l'on désire indexer :

private readonly string[] _extensions = new[] { ".xaml", ".cs", ".vb", ".csproj", ".aspx", ".ascx", ".vbproj" };

Maintenant, la logique de récupération et de stockage des sources. Il nous faut :

parcourir tous les fichiers du source control,
si l'extension du fichier correspond à une extension contenu dans _extensions, télécharger le fichier dans le répertoire de travail
Ajouter ou mettre à jour le fichier dans notre base de données SQL
supprimer le fichier du répertoire de travail

   1:  public void Start()

   2:  {

   3:      // Get all last version files

   4:      var files = _server.GetItems("$/", VersionSpec.Latest, RecursionType.Full,

   5:                                                DeletedState.NonDeleted, ItemType.File, false);

6:

   7:      foreach (var item in files.Items)

   8:      {

   9:          var serverItem = item.ServerItem;

10:

  11:          var projFile = Path.Combine(_tempDirectory, Path.GetFileName(serverItem));

12:

  13:          if (!_csExtensions.Contains(Path.GetExtension(serverItem)))

  14:              continue;

15:

  16:          // Retrieve file in search index db

  17:          var file = _ctx.TfsFiles.Where(f => f.ServerItemId == item.ItemId).SingleOrDefault();

18:

  19:          // Update or Create file in search index db

  20:          item.DownloadFile(projFile);

  21:          InsertCodeFile(projFile, serverItem, item.CheckinDate, item.ItemId, file);

  22:          File.Delete(projFile);

  23:      }

  24:  }

Et le code de la méthode InsertCodeFile qui insère ou met à jour le fichier :

   1:  private void InsertCodeFile(string file, string serverPath, DateTime checkinDate, int serverItemId, TfsFile tfsFile)

   2:  {

   3:      if (tfsFile != null)

   4:      {

   5:          tfsFile.Content = File.ReadAllBytes(file);

   6:          tfsFile.CheckinDate = checkinDate;

   7:      }

   8:      else

   9:      {

  10:          _ctx.TfsFiles.AddObject(new TfsFile

  11:                                      {

  12:                                          Content = File.ReadAllBytes(file),

  13:                                          FileName = Path.GetFileName(file),

  14:                                          Extension = ".cs",

  15:                                          FileId = Guid.NewGuid(),

  16:                                          ServerItemId = serverItemId,

  17:                                          CheckinDate = checkinDate

  18:                                      });

  19:      }

20:

  21:      _ctx.SaveChanges();

  22:  }

Déploiement de l'assembly de l'activité custom

Il nous faut maintenant compiler et déployer notre assembly afin de l'utiliser dans un modèle de Build.

Le déploiement de l'assembly consiste à le stocker dans le source control de TFS. Puis, dans la console d'administration de TFS, au niveau des paramétres du contrôleur de Build, configurer le champ "fVersion Control path to custom assemblies" :

Définition du template de build

Une fois notre activité custom déployée, il nous faut définir un template de build avec notre activité. Le process est extrêmement simple puisqu'il ne contient qu'une activité :

Il nous faut ajouter 2 arguments au process de Build qui nous permettent de définir les 2 paramètres d'entrée de l'activité ProcessFilesActivity :

Une fois ces arguments créés, il faut les passer à l'activité. Depuis les propriétés de l'activité :

Définition de la Build

Notre template de Build est terminé et notre base de données est prête.

La dernière étape consiste à définir une Build qui s'exécutera par exemple chaque nuit. Depuis Visual Studio, ouvrir Team Explorer puis créer une nouvelle définition de build.

Dans la section Trigger, nous planifions l'exécution de notre build chaque nuit :

Dans la section Process, il faut sélectionner le template que nous venons de créer et définir les 2 paramètres d'entrée :

La définition de la Build est terminée. Pour vérifier que tout fonctionne bien nous pouvons déclencher manuellement la build et vérifier le résultat :

Exemple de recherche dans les sources

Maintenant que nos sources sont indexées, nous pouvons effectuer des recherches Full Text dans notre base de données. L'exemple ci-dessous recherche tous les fichiers de code C# qui contiennent une implémentation de l'interface IValueConverter :

select * from TfsFile where FileName like '%.cs' AND FREETEXT([Content], ':IValueConverter')

Conclusion

Peu importe la solution que nous mettons en oeuvre. Ce qu'il faut garder en tête c'est que nos contrôleurs de source contiennent une multitude d'exemples de code et même de codes prêts à être réutilisés. Mais encore faut-il pour cela pouvoir les exploiter facilement!

L’asynchronisme avec Async CTP

Async CTP

A moins d'un an de la sortie de Visual Studio VNext, je vous propose de découvrir le nouveau modèle d'asynchronisme qui sera disponible avec le Framework .Net 4.5 ainsi que WinRT.

L'Async CTP propose une nouvelle fonctionnalité aux langages C# et VB.net, qui permet d'écrire du code asynchrone d'une manière différente.

Afin de l'utiliser, vous devez avoir Visual Studio 2010 avec le SP1, et télécharger l'installeur à l'adresse suivante : http://www.microsoft.com/download/en/details.aspx?id=9983. Une fois installé, vous trouverez les librairies ainsi que des exemples de code dans le dossier "Microsoft Visual Studio Async CTP", situé dans "Mes Documents".

Vous pouvez utiliser Async CTP dans n'importe quelle application basée sur le framework .net 4.0, Silverlight ou Windows Phone. Comme son nom l'indique, ceci est une CTP (Community Technology Preview), et même si la licence autorise son utilisation en production, c'est vivement déconseillé, et non supporté par Microsoft. La version finale sera intégrée dans le framework .net 4.5.

Pourquoi l'asynchronisme ?

L'asynchronisme consiste à avoir plusieurs tâches qui s'exécutent en même temps, dans des threads différents. Le premier gain évident à faire de la programmation asynchrone est bien sûr le gain de performance, surtout avec les ordinateurs actuels qui ont de plus en plus souvent des processeurs multi-coeurs : la création de plusieurs threads permets de tous les utiliser. Il est aussi important pour l'utilisateur de ne pas bloquer l'interface : en effet, lorsqu'on fait des calculs lourds dans le même thread que celui qui gère l'interface utilisateur, l'application sera figée tant que les calculs ne seront pas terminés.

L'asynchronisme en .net

Le framework .net fournit déjà les outils nécessaires pour faire de l'asynchronisme. Vous pouvez sans problème créer des threads pour effectuer de longs calculs, ou utiliser le ThreadPool (un ensemble de threads déjà créés, prêts à être utilisés), de la manière suivante :

void LongWork(object o)
{
    // Ici on aura nos calculs qui peuvent prendre du temps
    Thread.Sleep(2000);
}
void button_Click(object sender, EventArgs e)
{
    ThreadPool.QueueUserWorkItem(LongWork);
}

Une fois les calculs terminés, si on veut récupérer le résultat et l'afficher à l'utilisateur, nous allons avoir besoin d'ajouter un évènement (ce n'est pas nécessaire dans cet exemple, puisqu'on reste dans la même classe, mais ça peut être utile pour des cas plus compliqués), de s'y abonner pour être notifié de la fin des calculs, et de mettre à jour l'interface utilisateur.

De plus, les contrôles ne sont pas thread-safe : vous ne pouvez pas les modifier depuis un autre thread que celui dans lequel ils ont été créés. Si vous voulez mettre à jour l'affichage, il faudra utiliser la méthode Invoke des contrôles pour que la mise à jour soit faite dans le thread de l'UI :

private event EventHandler WorkFinished;
void LongWork(object o)
{
    // Ici on aura nos calculs qui peuvent prendre du temps
    Thread.Sleep(2000);

    if (WorkFinished != null)
        WorkFinished(this, new LongWorkEventArgs { Result = "résultat" });
}
private void button_Click(object sender, EventArgs e)
{
    WorkFinished += new EventHandler(MainWindow_WorkFinished);
    ThreadPool.QueueUserWorkItem(LongWork);
}
void MainWindow_WorkFinished(object sender, LongWorkEventArgs e)
{
    this.Invoke(new Action(() =>
    {
        logTextbox.Text = e.Result;
    }));
}

Ceci est un exemple en Winform, pour effectuer la même chose en WPF, nous avons un objet Dispatcher :

void MainWindow_WorkFinished(object sender, LongWorkEventArgs e)
{
    Dispatcher.BeginInvoke(new Action(() =>
                               {
                                   logTextbox.Text = e.Result;
                               }));
}

On peut utiliser par exemple un WebClient de cette manière pour télécharger de manière asynchrone une page web :

private void Button_Click(object sender, RoutedEventArgs e)
{
    WebClient client = new WebClient();
    client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
    client.DownloadStringAsync(new Uri("http://www.bewise.fr"));
}

void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    logTextbox.Text = e.Result;
}

Ici nous avons une différence avec l'exemple précédent, puisque c'est le WebClient qui va automatiquement se remettre dans le thread appelant avant d'appeler l'évènement DownloadStringCompleted. Hormis cette subtilité, l'usage est le même.

Appels asynchrones avec Async CTP

Async CTP nous propose une nouvelle façon de faire des appels asynchrones. Si le principe est le même (utilisation d'un autre thread, récupération de la réponse lorsque le travail est terminé), nous avons maintenant une nouvelle syntaxe.

Prenons un exemple avec le WebClient. Avant de commencer, il faut référencer la librairie "AsyncCtpLibrary", qui doit se trouver si vous n'avez pas changé le répertoire d'installation dans votre dosser Documents, sous le chemin : "\Microsoft Visual Studio Async CTP\Samples\AsyncCtpLibrary.dll".

Une fois référencé, des méthodes d'extensions se sont ajoutées à la classe WebClient, et on peut utiliser les nouveaux mots clés "async" et "await" pour faire notre appel asynchrone :

private async void Button_Click(object sender, RoutedEventArgs e)
{
    WebClient client = new WebClient();
    String result = await client.DownloadStringTaskAsync(new Uri("http://www.bewise.fr"));
    logTextbox.Text = result;
}

Comme vous pouvez le voir, le code est beaucoup plus simple qu'avant : on a l'impression d'écrire du code synchrone. Et pourtant, c'est bien asynchrone, l'interface ne sera pas bloquée pendant le temps de téléchargement. C'est le compilateur qui va s'occuper de créer un thread, et de revenir dans le thread courant une fois la tâche terminée.

Pour faire ça, nous avons donc du modifier notre code :

Utiliser une nouvelle méthode de notre WebClient : DownloadStringTaskAsync(). On sait que cette méthode est asynchrone car elle renvoie un objet de type Task, au lieu d'un String.
Le mot clé "await" permets de faire l'appel asynchrone. Elle permets d'exécuter la tâche dans un nouveau thread, et un callback sera fait automatiquement lorsque la tâche sera terminée pour exécuter le reste du code de la méthode.
La méthode est marquée avec le mot clé "async", pour notifier au compilateur qu'il va devoir transformer une partie de la méthode en callback.

Usages avancés

Créer ses propres tâches

Async CTP fournit une liste de méthodes d'extensions sur divers objets du framework, comme sur notre WebClient, mais nous n'avons pas encore vu comment effectuer nos propres tâches asynchrones.

Pour pouvoir créer une tâche, nous allons utiliser les méthodes fournies dans la classe TaskEx :

private Task<int> WaitNSecondsAsync(int n)
{
    return TaskEx.Run<int>(() =>
                   {
                       Thread.Sleep(TimeSpan.FromSeconds(n));
                       return n;
                   });
}

La méthode TaskEx.Run() renvoie une tâche, qui va exécuter notre code de manière asynchrone. Par convention, nous avons nommé la méthode qui retourne cette tâche avec le suffixe Async.

Synchronisation de plusieurs threads

Nous avons vu l'usage de base qui consiste à utiliser le mot clé await pour attendre qu'une tâche se termine, mais nous avons la possibilité de travailler avec plusieurs tâches à la fois grâce à deux méthodes de TaskEx : TaskEx.WhenAny et TaskEx.WhenAll.

TaskEx.WhenAny() prends en paramètre une liste de tâches (IEnumerable ou une liste de paramètres Task), et retourne une tâche qui se termine lorsqu'une des tâches passée en paramètre se termine. Son résultat est la tâche qui s'est terminée.

private async void Button_Click(object sender, RoutedEventArgs e)
{
    Task<int> t1 = WaitNSecondsAsync(5);
    Task<int> t2 = WaitNSecondsAsync(7);
    Task<int> t3 = WaitNSecondsAsync(2);
        
    Task<int> resultTask = await TaskEx.WhenAny(t1, t2, t3);
    // resultTask est ici t3, la première tâche à s'être terminé
    MessageBox.Show(resultTask.Result.ToString());
}

TaskEx.WhenAll() prends en paramètre une liste de tâches, et retourne une tâche qui se termine lorsque toutes les tâches sont terminées. Si toutes les tâches retournent le même type d'objets, on peut récupérer tous les résultats sous forme de tableau.

private async void Button_Click(object sender, RoutedEventArgs e)
{
    Task<int> t1 = WaitNSecondsAsync(5);
    Task<int> t2 = WaitNSecondsAsync(7);
    Task<int> t3 = WaitNSecondsAsync(2);            

    int[] results = await TaskEx.WhenAll(t1, t2, t3);
    // results contient les résultats de toutes les tâches
    MessageBox.Show(String.Format("{0} - {1} - {2}", results[0], results[1], results[2]));
}

Conclusion

Avec simplement 2 nouveaux mots clés ajoutés au langage, nous voyons que la programmation asynchrone a été grandement facilitée, et son intégration dans la version 4.5 du framework .net devrait inciter les développeurs à utiliser les différents coeurs de nos processeurs.

La réussite de vos projets SharePoint passe par une intégration continue (Part 2/2)

La première partie de cet article se trouve ici : http://labs.bewise.fr/Article/La-reussite-de-vos-projets-SharePoint-passe-par-une-integration-continue--Part-1-2-/

4 - Le projet SharePoint de démo

Le projet de démo est simplissime et se présente ainsi :

Un WebPart qui affiche une interface pour saisir une addition avec un bouton qui permet de lancer le calcul :

Et une classe "outil" dans une dll externe permettant de réaliser le calcul à proprement dit :

L'objectif étant de valider le fonctionnement du process complet, il nous faut un petit projet simple mais si possible représentatif.

Vous remarquerez que le projet SharePoint contient aussi un fichier "Deploy.ps1". Il contient le script PowerShell décris au chapitre précédent. ATTENTION à penser à indiquer que ce fichier doit être copié dans le dossier de sortie lors de la compilation ! Nous allons en avoir besoin côté "Contrôleur de Build". :

Enfin qui dit intégration continue dit tests unitaires, tout du moins tests automatisés. J'ai donc ajouté un projet de type "Tests" avec :
un test unitaire qui test les méthodes de la classe Computing

et un WebTest qui valide la partie IHM de la calculette à la recherche du bouton ''='

Cependant les WebTest (ou web performance tests) ne sont pas exécutés lors d'un déploiement par une Build Auto. Seuls les tests par code et tests "code UI" le sont. Heureusement pour nous il est possible à partir d'un WebTest de générer une classe faisant la même chose, mais par code ! Donc on retrouve ici la classe WebTest1Coded.

5 - Mise en place de la Build

Nous pouvons maintenant paramétrer la Build. En plus du paramétrage de base vous aurez 2 étapes importantes à faire :

· ajouter le paramètre MSBuild pour générer le WSP

· modifier le workflow pour intégrer l'appel au batch Deploy.ps1

Commencez par créer la Build en passant par le Team Explorer et en faisant un clic droite sur le noud "Build" puis "New Build Definition":

Donnez-lui un nom puis passez à l'étape suivante permettant de choisir à quel moment la Build peut se déclencher :

Selon vos besoins la Build peut être lancée uniquement manuellement, de manière régulière ou bien à chaque check in d'un développeur.

Notez la nouveauté de la version 2010 qui propose le "Gated Check-in" qui permet de réaliser la compilation et les tests avec la version que le développeur vient d'archiver, donc déclenchement automatique, mais si la Build fini en erreur, l'archivage est annulé. Donc en cas d'archivage une version d'une source disons "pas compatible" avec le reste du projet, nous n'aurons pas les autres développeurs de l'équipe impactés.

A l'étape suivante vous indiquez quel contrôleur de Build va prendre en charge cette Build :

Il faut aussi fournir un dossier partagé où les fichiers de sortie sont stockés sur le serveur de Build. En principe lors de l'installation de TFS Build Service ce dossier est créé et par défaut correspond au C:\Builds\

Il est nécessaire que les membres de l'équipe aient accès en lecture à ce partage réseau pour qu'ils puissent consulter les logs des Builds par exemple.

Enfin la page de configuration la plus importante est la configuration du process :

Ici vous choisissez quels projets sont compilés et si il faut exécuter les tests. Par défaut c'est le cas, à partir du moment où le nom de votre projet de test contient le mot "Test".

Premier point important, ajoutez l'argument MSBuild suivant : /p:IsPackaging=True
Cet argument permet de dire à MSBuild de faire l'équivalent de ce que fait Visual Studio lorsque vous faites un clic droite / deploy sur un projet de type SharePoint.

Second point, il faut un modèle de process. Ce process est un workflow (WF 4.0) qui réalise toutes les étapes de la Build : récupération des dernières sources, nettoyage des binaires, compilation, exécution des tests, création de WorkItems, etc. C'est ici qu'il faut rajouter l'exécution de notre script PowerShell qui va déployer notre solution SharePoint. L'emplacement idéal étant après la compilation '(et donc packaging) et avant l'exécution des tests.

Commencez par créer un nouveau modèle à partir de celui par défaut :

Avant d'éditer ce nouveau modèle vous pouvez configurer la politique de rétention des Builds et de leur résultat (attention à l'espace disque !) et enfin enregistrer cette définition de Build.

Le fichier correspondant au workflow se trouve dans un dossier nommé "BuildProcessTemplates" à la racine du projet TFS :

Pensez à faire un "check out" avant de l'ouvrir dans Visual Studio.

Une fois le fichier chargé (c'est assez long) il faut repérer le bon emplacement. Ce n'est pas forcément évident du premier abord vu la quantité d'étapes et de conditions imbriquées. Trouvez le bloc "Try Compile, Test, and Associate Changesets and Work Items " qui se trouve en seconde moitié du workflow (attention pas celui de l'étape de "Clean" se trouvant un peu avant)

Puis juste un peu plus bas vous trouverez la boucle qui exécute MSBuild pour chaque projet, suivi de l'étape qui va gérer l'exécution des tests :

Il faut donc ajouter à cet emplacement intermédiaire l'appel à notre script PowerShell. Pour cela il faut utiliser une activité "InvokeProcess" fournie dans les "Team Foundation Build Activities". Faites la glisser à l'emplacement repéré précédemment.

L'utilisation de cette activité est assez simple. Il faut lui fournir un "filename" c'est à dire l'exécutable, ici "powershell", ainsi que les paramètres de ligne de commande. Concernant ces derniers nous allons pouvoir utiliser une variable disponible dans le Workflow qui est "outputDirectory". Comme vous vous en doutez, cette variable contient le chemin où les binaires sont placés lors de la compilation.

Il se trouve que si vous avez bien suivi les étapes précédentes, ce dossier contiendra le ou les fichiers wsp de votre/vos projets SharePoint, ainsi que le fichier "Deploy.ps1". Pour rappel ce dernier attend en entrée un dossier contenant des wsp.

Il ne reste plus qu'à utiliser tout ça dans la propriété "Arguments" : "-Command ""& '" & outputDirectory & "\Deploy.ps1' '" & outputDirectory & "\'"""

Attention : les propriétés de l'activité doivent être renseignées avec du code VB.NET. D'où le & pour la concaténation de chaines.

Vous pouvez maintenant enregistrer le fichier. Pensez à faire un "check in" sans quoi la Build sera exécutée avec la précédente version de ce workflow.

6 - Tests du processus mis en place

Avant d'exécuter une première Build, il faut prévoir le déploiement de la solution sur le serveur d'intégration, l'activation de la feature, la création d'une page de webpart contenant la calculette. Tout cela est faisable soit dans le script PowerShell soit pourquoi pas directement dans l'initialisation des tests unitaires en utilisant le modèle objet de SharePoint.

Afin de simplifier l'exemple j'ai fait un premier déploiement manuel et j'ai créé une page de test. J'ai d'ailleurs modifié mon test web "codé" pour lui donner l'adresse de cette page sur le serveur d'intégration.

Vous pouvez lancer une première Build en passant par le "Team Explorer / Build / votrebuild" et en faisant un clic droite / queue new Build :

Validez le paramétrage et faites "Queue"

Vous arrivez ensuite sur la fenêtre "Build Explorer" vous permettant de voir la liste des Builds en cours :

Un double clic sur la Build vous permet de consulter l'évolution en direct :

Une fois la compilation terminée, si tout se passe bien, vous retrouvez un résumé indiquant le résultat de la compilation et des tests:

Vous avez même la possibilité de consulter le résultat des tests en détails !

Afin de vérifier l'efficacité de mon process de Build, je vais introduire 2 "erreurs" dans le projet:

· une erreur de code dans la classe Computing :

· une erreur d'ihm dans le webpart :

Je fais un "check in" de tout ça et je relance la Build. Après quelque minute le résultat tombe : la Build est en échec car des tests ont échoués. En regardant dans le détail j'ai la raison de l'échec de ces tests :

Un double clic sur le WebTest me permet d'aller voir en détail la raison de son échec :

On constate qu'effectivement le signe = dans le bouton n'est pas trouvé. C'est bien que ma nouvelle version "bugée" a bien été correctement déployée sur mon serveur d'intégration.

Conclusion

Dans cet article je me suis focalisé sur la mise en place de l'aspect Build automatique et exécution des tests unitaires. Je vous ai montré comment installer les outils nécessaires ainsi que le paramétrage et les techniques utiles.

Cependant tout ceci n'est qu'une introduction au regard de ce que propose cet outil d'intégration continue en particulier sur les possibilités de personnalisation du workflow du processus d'intégration continue lui-même.

L'avènement de Visual Studio 2010 et l'intégration efficace d'outils dédiés aux développements SharePoint 2010 ainsi que cette souplesse et ces nombreuses options permettent d'adapter assez simplement de telles pratiques (industrialisation, processus qualité, tests, etc.) à des projets SharePoint. Et c'est tout simplement une révolution !

Merci à ceux qui m'ont soutenu, aidé, relu, en particulier : Ben, Stephan, Alex et Alain !

La réussite de vos projets SharePoint passe par une intégration continue (Part 1/2)

Connaissez-vous l'intégration continue ? Avez-vous des doutes sur ses intérêts et avantages ? Je ne chercherais pas à répondre à ces questions dans cet article car vous en trouverez certainement des dizaines voire même des centaines bien plus pertinents que le mien. Malgré tout, afin de planter un minimum le décor, voici pour faire simple la définition de Wikipédia :

« L'intégration continue est un ensemble de pratiques utilisées en génie logiciel. Elles consistent à vérifier à chaque modification de code source que le résultat des modifications ne produit pas de régression de l'application en cours de développement. »

Par contre, une fois que vous aurez fait ces recherches, je ne doute pas que vous soyez au moins autant convaincu que moi. Alors peut-être à ce moment vous vous demanderez : « Comment mettre en place ce type de processus d'intégration continue avec des projets SharePoint ? ». Dans ce cas, cet article est pour vous !

Je vais vous guider sur les outils à utiliser et comment les utiliser pour mettre en place une compilation, un déploiement et des tests, tout ceci de manière automatique, pour vos projets dédiés à la plateforme SharePoint 2010.

Ce processus fera appel à la plateforme Team Foundation Server, en particulier l'aspect "Build" automatique permettant de séquencer un ensemble d'actions telles que « compilation », « exécution de processus externe », « création de WorkItems », « exécution de tests unitaires ».

1 - Pré Requis

Ferme SharePoint :

Le but du jeu est de pouvoir compiler une solution de code pour SharePoint 2010. Les projets Visual Studio 2010 pour SharePoint 2010 sont des projets de type Libraire de classes (DLL .NET) "classique", ou presque. En général le code embarqué dans ces solutions utilise l'API SharePoint 2010. Donc il faut que ce code soit compilé et éventuellement exécuté sur un serveur SharePoint pour bien fonctionner. Sinon le processus MSBuild ne va pas trouver les références de notre projet et donc la compilation échouera.

Il est donc nécessaire de disposer d'une ferme SharePoint 2010, à minima une seule machine, qui va être dédiée à cette phase d'intégration continue. Selon votre politique et fréquence de compilation de vos projets, vous pouvez (ou pas) prévoir d'utiliser cette ferme pour que les testeurs fonctionnels viennent tester directement les développements intégrés. Cependant soyez vigilants de ne pas leur compliquer la tâche en leur demandant de réaliser des tests alors que des compilations, déploiements, tests unitaires peuvent être déclenchés au même moment par le processus d'intégration continue.
Je ne détaillerai pas l'installation de SharePoint, ce n'est pas le sujet de l'article, mais il vous faut une installation correspondant à vos besoins d'intégration, donc dans la mesure du possible qui se rapproche d'assez près à la ferme de production finale.

Visual Studio :

Vous devez installer un Visual Studio 2010 sur la machine que vous dédiez à l'intégration afin que l'agent de Build soit capable de compiler correctement vos projets. De plus il est recommandé que la version du Visual studio soit la même que celle de votre équipe de dev en particulier en terme de service pack.

Team Foundation Server 2010 :

Enfin vous devez aussi disposer d'une plateforme Team Foundation 2010 avec le contrôleur de code sources, les WorkItems, les tests, etc. Là encore je ne détaillerai pas la partie installation de TFS Server.

Compte utilisateur :

Il vous faudra un compte de service (compte A.D.) qui sera à la fois :

· membre du groupe TFS autorisant l'exécution de Builds (et à fortiori accès aux sources des projets à compiler)

· membre du groupe administrateurs de la ferme sur votre SharePoint d'intégration (afin d'autoriser le déploiement des solutions SharePoint)

De plus afin de permettre à cet utilisateur d'exécuter des opérations SharePoint via PowerShell (ce qui nous sera utile) il faut prévoir de lui accorder les droits via la commande Add-SPShellAdmin. (Voir KB http://labs.bewise.fr/kb/Donne-moi-les-droits-de-developper-sur-mon-serveur-SharePoint-2010/)

2 - Installation de Visual Studio Team Foundation Server 2010 (Build Service)

Vous devez installer, sur l'un des serveurs frontaux de votre ferme SharePoint, Visual Studio 2010 et Team Foundation Server (uniquement le Build Service). Cette étape est relativement simple. Il vous faut le programme d'installation de Microsoft Team Foundation Server 2010 qui inclut la partie "service de Build". Ce service est un exécutable capable de piloter les processus MSBuild et MSTest.

L'installation de TFS 2010 est simple, il faut suivre les étapes de l'assistant

A cette étape il ne faut sélectionner que la partie "Build Service"

A la fin de l'installation, vérifiez que vous avez coché la case permettant de lancer l'assistant de configuration de TFS :

L'assistant va vous permettre de configurer le contrôleur et l'agent et de décider sur quel serveur TFS vous vous connecterez :

Première étape : on choisit à quel serveur TFS on se connecte :

2nd étape : on choisit sur qu'elle collection on travaille. Cela signifie que le contrôleur de Build ne pourra déclencher des Builds sur ce serveur que si les sources sont placées dans cette collection. Pour le coup la notion de collection dans TFS nous permet de "limiter" quels projets peuvent êtres compilés sur quels serveurs.

Une étape de recherche d'éventuels autres contrôleurs / agents

Ici on configure le nombre d'agents. Ce qu'il faut savoir à ce propos:

· il n'y a qu'un seul contrôleur : c'est lui qui "déclenche" et pilote les Builds

· il y a de un à N agents : ce sont eux qui exécutent à proprement parlé les Builds et donc qui consomment de la ressource système. Le nombre d'agent vous permet de déterminer le nombre de processus de Build qui peuvent tourner en parallèle. Il vous faut donc trouver un juste milieu entre "temps d'attente" pour les développeurs (qui attendent de voir si la compil est passée ou pas) et "performance" du serveur. De toute façon les agents peuvent être ajoutés après coup, donc commencez par la valeur par défaut:

Il vous faut ici un compte utilisateur qui a accès aux sources dans votre serveur TFS mais aussi à qui vous devrez donner accès type "Administrateur de la ferme" à vos sites SharePoint sur lesquels seront exécutés les déploiements et tests automatiques (voir Pré requis) :

Cette étape lance une série de vérifications afin de valider votre configuration :

Si tout c'est bien passé vous avez droit à cet écran :

Enfin vous pouvez lancer la console d'administration de TFS :

Cette console vous permet de vérifier que le contrôleur et le(s) agent(s) sont opérationnels. Vous pouvez aussi modifier ici les propriétés que vous aviez configurées via l'assistant.

3 - Mise en place du script de déploiement de wsp pour SharePoint 2010

Le processus de compilation automatique saura compiler notre projet SharePoint 2010 : il sera exécuté sur un serveur où sont installés SharePoint et Visual Studio.

Le processus d'exécution des tests unitaires saura exécuter nos tests unitaires : encore une fois nous avons les prérequis nécessaires.

Mais il nous manque une étape intermédiaire afin que les tests soient pertinents :

Le déploiement de la solution SharePoint. En effet suite à la compilation, un fichier WSP est produit. Ce WSP doit être déployé au sein de la ferme SharePoint. Ce déploiement peut être fait via stsadm ou bien depuis 2010 via PowerShell. Ici l'objectif étant d'automatiser au maximum, nous allons utiliser un script PowerShell qui va déterminer s'il s'agit du 1er déploiement de ce WSP ou d'une mise à jour par exemple. Vous pouvez aussi avoir besoin d'activer des features qui sont déployées via cette solution. Selon les types d'éléments dans votre projet, les paramètres utilisés lors du déploiement sont à spécifier.

Bref il est difficile d'imaginer un script qui prend en charge tous les cas. Le mieux que j'ai trouvé pour l'instant est de m'imposer une règle de nommage sur un fichier ps1 qui sera inclus dans mon projet. Comme cela, pour chaque projet SharePoint différent, les développeurs peuvent inclure dans ce fichier le script adapté spécifiquement au déploiement de ce projet, et côté Build on cherchera systématiquement un fichier ps1 d'un nom particulier (par exemple deploy.ps1) et on l'exécutera.

A titre d'exemple je vous propose ici un script qui prends en entrée un chemin de répertoire et qui cherche à déployer tous les WSP présents dans ce répertoire :

$snappin = get-pssnapin | where-object {$_.Name -eq "Microsoft.SharePoint.PowerShell"}

if($snappin -eq $null)

{

& "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\CONFIG\POWERSHELL\Registration\sharepoint.ps1"

}

$initialDirectory = $args[0]

Write-Host "Searching wsp in " $initialDirectory

$wsps = Get-ChildItem $initialDirectory\*.wsp

foreach($wsp in $wsps)

{

if($wsp -ne $null)

{

Write-Host "Start installation process for solution " $wsp.Name "..."

$solution = Get-SPSolution | where-object {$_.Name -eq $wsp.Name}

# check to see if solution package has been installed

if ($solution -ne $null) 

{

# check to see if solution package is currently deployed

if($solution.Deployed -eq $true)

{

Write-Host "retracting " $solution.Name

Uninstall-SPSolution $solution.Name -AllWebApplications -confirm:$false

while ( $solution.JobExists )

{

Write-Host "."

sleep 1

}

}

Write-Host "uninstalling " $solution.Name

Remove-SPSolution $solution.Name -confirm:$false

}

Write-Host "installing " $wsp.Name

Add-SPSolution $wsp

$solution = Get-SPSolution | where-object {$_.Name -eq $wsp.Name}

Write-Host "deploying " $solution.Name " on all webapps"

Install-SPSolution -Identity $solution.Name -GACDeployment -AllWebApplications -Force

while ( $solution.JobExists )

{

Write-Host "."

sleep 1

}

$solution = Get-SPSolution | where-object {$_.Name -eq $wsp.Name}

if($solution.Deployed -ne $true)

{

Write-Host "deploying " $solution.Name " on no webapp"

Install-SPSolution -Identity $solution.Name -GACDeployment -Force

while ( $solution.JobExists )

{

Write-Host "."

sleep 1

}

}

Write-Host "Ended installation process for solution " $wsp.Name

}

}

Nous verrons plus loin comment on utilise ce script.

Suite de l'article ici : http://labs.bewise.fr/Article/la-r%C3%A9ussite-de-vos-projets-sharepoint-passe-par-une-int%C3%A9gration-continue-part-2-2/

Un peu de généricité.

En tant que graphiste, je suis souvent confrontés à des retours de mes développeurs adorés. En effet, il n'est pas rare que ces derniers doivent reprendre telle ou telle partie du code généré par Blend, que ce soit pour de l'UI SIlverlight ou WPF. Et généralement, le code est repris car les standards de classement, d'organisation, d'optimisation et de référencement sont rarement identiques entre les "Artistes" et les "Codeurs".

Avec le souci de faire baisser le nombre de ces retours, il est primordial que le graphiste pense "généricité" dés le tout début de la conception. Cela lui permettra de définir et d'organiser les ressources graphiques dont il aura besoin, mais aussi de planifier et d'articuler sa production. Par exemple en systématisant l'emploi de dictionnaires de ressources (en WPF), en stockant une palette de couleurs dans une collection de brushes (elle-même incluse dans un dictionnaire spécifique) ou encore utilisant au maximum ce que les contrôles ont à offrir en matière de généricité.

Pour illustrer un peu plus finement ce propos, laissez moi vous parler d'un contrôle bien particulier : Le bouton.

Beaucoup de graphistes insèrent des boutons dans leurs design et, puisque c'est ancré leur adn et leur contrat de travail, font tout leur possible pour modifier le look & feel de ce contrôle. Pour faire ceci, le graphiste édite généralement le control template du bouton. Le template est le gabarit du contrôle que nous utilisons. Si nous modifions ce gabarit, il faut aussi garder à l'esprit que ce bouton pourra être appliqué de nombreuses fois dans notre fichier (un bouton pour le "next" et un autre pour le "back", par exemple). Il convient donc d'être "générique" afin de pouvoir employer ce template dans le plus grand nombre de configurations.

Etudions tout d'abord ce que contient ce control template. Pour commencer, ouvrons Blend 4, créons une nouvelle application WPF et ajoutons un contrôle de type "bouton" dans notre planche de travail.

Le bouton vient avec un aspect graphique que nous allons légèrement remanier. Pour ce faire, nous sélectionnons le bouton, faisons un clic droit et choisissons Edit Template-> Edit a copy. Cela nous ouvre le capot du contrôle en question et nous permet de voir graphiquement de quoi celui-ci est constitué.

Dans notre cas, nous voyons un item de type Chrome et un control presenter. Ce dernier item est un exemple de généricité appliqué, puisqu'il permet , lorsqu'il est présent, de faire remonter au niveau des propriétés du bouton une valeur, en l'occurrence le label "Button" que porte actuellement le bouton. Cela permet donc de changer la valeur du label du bouton sans avoir a attaquer le control template. En le racontant d'une autre manière, je dirais que le bouton hérite de la propriété "content" du content presenter placé dans son template.

Supprimons l'élément Chrome. C'est, dans le template, ce qui gère l'aspect graphique que nous souhaitons faire évoluer. Comme le content presenter lui est lié, celui-ci disparait aussi. Nous le recréerons plus tard. Pour l'instant, ajoutons dans notre template une Grid - une grille pour "cadrer" notre bouton- et un rectangle dans cette grille pour donner un fond à notre bouton. On veillera, justement dans un souci de généricité, à bien spécifier des tailles d'éléments relatives. Généralement, les objets seront posés en "Stretch/Sretch" , c'est à dire qu'ils vont venir s'ajuster à leur contenant dans la largeur et la hauteur. SI l'on souhaite un débord, on pourra le régler via les Margins de l'élément. Enfin, ajoutons dans notre grille et sous le rectangle un élément content presenter (notez que pour que le label du bouton soit en son centre, cette fois on devra le caler en Center/center, sans marge et avec la taille en Auto).

Dans les propriétés du rectangle, changeons la valeur fill et choisissons un bleu clair.

Revenez à la page principale (par le bouton se trouvant à gauche du nom de votre template dans le panneau Objects and timeline). Notre bouton apparait, mais est bien fade tout bleu sur blanc. De plus, si nous essayons de changer la propriété "background" de ce bouton, rien ne semble se passer.

Ajoutons un nouveau bouton maintenant. En faisant un clic droit dessus, nous pouvons appliquer à bouton le gabarit que nous venons d'éditer (Edit template -> Apply ressource-> le style de votre bouton). Ce nouveau bouton prend le design du bouton précédent. A ce niveau là, si je change la valeur fill dans le template du bouton, cette couleur changera pour les deux boutons. Ceci est sans doute très générique, mais est un peu extrême tout de même.

Retournons dans le control template du bouton (clic droit sur le bouton-> Edit template->Edit Current), pointons vers le rectangle et surtout sa propriété Fill qui conditionne sa couleur (qui doit être bleue). Le principal défaut de cette option est qu'elle est inscrite "en dur" dans le template du bouton. Et le but d'un template est d'être générique, nous l'avons vu. Dans l'idéal,il nous faudrait trouver un moyen de conserver le template édité, tout en obtenant la capacité de pouvoir simplement changer la valeur fill, et sans pour cela changer cette valeur pour tout les autres boutons de notre application qui partagent le gabarit. Imaginez aussi que le graphiste stockent tout ses templates dans un dictionnaire de ressources à part (comme il devrait toujours le faire). Si un développeur doit changer la valeur background d'un bouton pour une raison ou une autre, il doit sortir de la page en cours, chercher, trouver et ouvrir le dictionnaire, isoler l'entrée du bouton, modifier le bouton, ce qui modifiera les autres.bref, un cauchemar.

Heureusement, le graphiste pourra trouver son bonheur en cliquant sur le petit carré jouxtant la case de couleur du fill. Ce carré donne accès aux options avancées de la valeur et notamment aux contraintes (bindings) que l'on peu associer à cette valeur. Dans le panneau déroulant, choisissez Template binding. Cela permet de faire le tour des options pré-définies possibles pour la valeur fill dans le template natif de type bouton. Choisissez "Background". Le petit carré et sa valeur sont dorénavant encadré de jaune. Cela signifie que nous avons contraint la valeur fill à respecter une règle de type background qui existe dans le template natif du bouton. Pour simplifier, nous venons de recréer la liaison entre notre bouton et sa valeur background native. Nous observons aussi que la couleur a changé et doit être maintenant affichée sous l'aspect d'un dégradé.

Remontons encore une fois au niveau de notre interface et observons nos deux boutons. Ceux-ci partagent toujours le même gabarit, et sont donc bien génériques, mais disposent aussi de paramètres propres comme le "background". Nous venons donc de factoriser le gabarit de notre bouton et cela deviendra de plus en plus appréciable, au fur et à mesure que nous lui ajouterons du détail (comme des comportements sur des évènements de type roll-over, par exemple, ou encore des animations). Et plus le graphiste câblera les propriétés qu'il édite sur celles du contrôle natif, plus le développeur sera content.

De la généricité, encore et toujours, en somme.