Cette limitation a un impact fort pour l’entreprise et pour l’utilisateur : il n’est pas possible d’avoir un scénario de SSO (Single Sign-On) entre la session Windows de l’utilisateur et celle utilisée pour VSO. De plus, l’entreprise doit gérer plusieurs identités pour ses utilisateurs avec d’un côté le compte Microsoft ID pour l’accès à VSO et de l’autre l’identité d’entreprise pour tout le reste. Cela est source d’erreur et de travail supplémentaire pour gérer par exemple les départs de collaborateurs.

Aujourd’hui, cette limitation est enfin levée : on peut utiliser un annuaire Azure Active Directory pour gérer les identités des utilisateurs d’un compte Visual Studio Online. On peut ensuite synchroniser cet annuaire dans le cloud avec l’annuaire local d’entreprise par l’intermédiaire de DirSync pour avoir une identité unique.

Dans le cadre de cet article je vais démontrer les différentes étapes nécessaires pour arriver à un compte Visual Studio Online basé sur un annuaire Azure Active Directory synchronisé avec un annuaire local. Pour la partie SSO, je me limiterais à la synchronisation des mots de passe entre l’AD on-premise et l’Azure AD, le scénario de fédération complète étant bien plus complexe.

Création et configuration du compte Visual Studio Online

La première étape consiste donc à créer un compte Visual Studio Online lié à un compte Azure.

Pour ce faire, le plus simple est de se connecter au portail de gestion du compte Windows Azure en allant sur http://manage.windowsazure.com. Si vous n’en possédez pas encore un, vous pouvez en le créer en quelques clics en allant sur http://www.windowsazure.com et en cliquant sur le lien “version d’évaluation gratuite” en haut à droite.

Une fois sur le portail, cliquez sur nouveau>service d’application > Visual Studio > Création rapide.

Il suffit de choisir un nom pour le service et de le connecter à l’annuaire de la souscription Azure.

Si vous voulez utiliser un compte VSO existant, il faut choisir de lier à un élément existant.

Une fois le compte VSO lié au compte Azure et visible sur le portail, cliquez sur son nom pour accéder à la page de d’administration et aller sur l’onglet “configurer”.

Sur cet écran, cliquer sur le bouton “connecter” pour choisir l’annuaire associé à la souscription Azure active.

A partir de ce moment, les utilisateurs de votre service VSO proviendront de votre annuaire Azure Active Directory qui peut contenir des utilisateurs d’entreprise comme des comptes Microsoft Id.

Configuration de l’annuaire Azure Active Directory

Nous allons maintenant synchroniser notre annuaire Azure avec l’annuaire local de l’entreprise.

La première étape consiste à ajouter le domaine de notre annuaire local à l’annuaire Azure.

Dans l’interface d’administration, dans l’onglet domaines, cliquer sur le bouton “ajouter un domaine personnalisé”

Dans le pop-up qui s’affiche, entrer le domaine que nous allons utiliser, puis cliquer sur ajouter.

Une fois l’ajout effectué, une seconde page devient disponible.

Cette page indique des informations à utiliser pour créer un enregistrement de type TXT sur notre domaine avec comme valeur les informations du champ “destination ou points à l’adresse”. Cette vérification permet à Azure de s’assurer que nous sommes bien propriétaire du domaine. En fonction des capacités de votre registrar, vous pouvez également choisir de valider le domaine grâce à une entrée de type MX. Dans tous les cas, une fois l'entrée créée, on clique sur le bouton "valider" et en cas d'erreur on regarde le message pour corriger le souci.

Une fois la validation effectuée, il ne reste plus qu’à fermer le pop-up et voila! Vous pouvez créer des utilisateurs @votre-domaine.com sur votre annuaire.

A noter que si vous souhaitez que ce domaine soit le domaine “par défaut” lors de la création de nouveaux utilisateurs, il faut l’activer en tant que domaine par défaut de l’annuaire.

Nous allons tout de suite créer un utilisateur dans notre domaine qui servira de compte de synchronisation pour DirSync.

Ce compte de service doit posséder le droit “Administrateur général” pour permettre à DirSync de faire son travail. Pensez bien à récupérer le mot de passe sur l’écran suivant et à le modifier en vous connectant au portail azure avec ce couple login/mot de passe.

La dernière étape au niveau du portail consiste à activer la synchronisation d’annuaires.

Nous allons donc dans l’onglet “intégration d’annuaire” de l’administration de l’annuaire et nous cliquons sur le bouton “activé” avant de sauvegarder la modification.

Nous allons maintenant passer à la configuration de l’outil DirSync sur l’annuaire local.

Installation de DirSync et mise en place de la synchronisation

Nous allons maintenant passer à  l’installation de l’outil DirSync on-premise pour synchroniser l’annuaire local et l’annuaire Azure.

Avant de débuter, il faut avoir un utilisateur qui servira de compte de service pour DirSync. Cet utilisateur doit faire partie du groupe Enterprise Admins pour permettre à DirSync de faire un certain nombre de modifications nécessaires à son bon fonctionnement.

Une fois cet utilisateur prêt, on va pouvoir récupérer le package de DirSync à l’adresse suivante (qui est également affichée sur le portail) : ici

L’installation est ensuite assez simple.

Les fichiers sont extraits…

Un écran de bienvenue nous accueille, on clique sur next…

Conditions légales classiques, next…

Choix du répertoire d’installation (dans mon cas j’ai gardé celui par défaut), next…

Installation des composants (cette étape peut être assez longue), puis next…

On va pouvoir passer à la configuration proprement dite !

Attention, si vous avez installé DirSync directement sur un contrôleur de domaine, vous devez vous déconnecter et reconnecter sur le serveur avant de poursuivre. Dans ce cas, décochez donc la case “start configuration wizard now” et lancez le manuellement après vous être reconnecté.

L’assistant de configuration commence par un nouvel écran de bienvenue, next…

Sur cet écran, il faut saisir les informations du compte que l’on a créé sur l’annuaire Azure AD, puis cliquer sur next…

Ici c’est l’utilisateur Enterprise Admin que l’on a créé sur l’AD on-premise qu’on doit renseigner avant de cliquer sur next…

Cet écran permet d’activer le scénario de déploiement hybride utilisé par certains produits. Pour Visual Studio Online, il n’est pas nécessaire, on clique donc directement sur next.

Cet écran permet d’activer la synchronisation des mots de passe entre l’annuaire local et celui dans le cloud. Grâce à cela, on implémente une stratégie de SSO simplifiée. On coche donc la case avant de passer à l’écran suivant…

DirSync met en place tous les éléments nécessaires à la synchronisation…

Nous sommes prêts à lancer la synchronisation dès que nous fermerons l’assistant.

Après quelques instants, nos utilisateurs et nos groupes locaux sont visibles dans l’annuaire Azure !

Pour information, l’agent DirSync synchronise régulièrement l’annuaire. Si on souhaite forcer cette synchro, il suffit de lancer une ligne de commande powershell et exécuter les deux commandes suivantes :

Une synchronisation sera immédiatement effectuée.

Utiliser son identité d’entreprise dans Visual Studio Online

Une fois l’annuaire Azure prêt, il nous suffit de nous connecter au compte VSO avec un utilisateur possédant des droits suffisant (comme le compte Microsoft qui a servi à créer la souscription), puis ajouter nos utilisateurs Azure AD comme tout autre utilisateur, en passant par son mail.

Détail important sur Visual Studio Online : tout utilisateur ajouté se retrouve dans la liste des utilisateurs sur la home page, et il faut lui associer une licence.

Il peut s’agir de la nouvelle licence stakeholder, d’un compte basique ou d’un compte avancé, mais il peut aussi s’agir d’un compte MSDN, même pour un compte d’entreprise. Il faut par contre spécifier que votre compte entreprise partage les bénéfices de votre abonnement MSDN.

Cela se fait dans la page de gestion de l’abonnement MSDN avec le lien “link to your organizational account”

Grâce à cela, lors de la première connexion à VSO avec mon compte d’entreprise, mon abonnement MSDN est pris en compte et validé.

What else?

Comme nous l’avons vu, on peut facilement implémenter un annuaire Azure AD comme fournisseur d’identité pour notre service VSO puis mettre en place une synchronisation entre cet annuaire et l’annuaire d’entreprise on-premise.

Il est cependant important de faire attention dans la mise en œuvre de ce type de solution et il est indispensable de faire participer des experts en sécurité pour valider tous les aspects de la solution.

Il reste un dernier point qu’il est possible de faire sur TFS on-premise qui n’est pas (encore?) possible de faire sur Visual Studio Online, à savoir donner des droits sur TFS directement à un groupe AD. Malheureusement pour l’instant il est toujours nécessaire d’ajouter les utilisateurs un par un aux groupes TFS.

J’espère que cet article vous aura éclairé sur cette grosse nouveauté de Visual Studio Online et surtout n’hésitez pas à me poser vos questions!

Guillaume Davion, consultant Modern Apps chez Microsoft (MCS) depuis 2013, est tombé dans le Framework .NET quand il était petit en 2001 et a continué sans cesse à l’explorer depuis. Aujourd’hui, il s’est spécialisé dans l’Application Lifecycle Management (ALM) avec TFS et la gestion de projet agile avec Scrum (il est certifié Scrum Master par la Scrum Alliance). Il tient un blog sur le sujet : http://blogs.msdn.com/b/gudavion

Les mises à jours ! Vous y avez pensé ? Mais comment être sûr que les utilisateurs utilisent bien la dernière version de votre programme ?

Je vous propose ici une solution qui a comme seule contrainte d’utiliser un service WCF, donc qui ne fonctionnera que pour une application connectée, mais après tout, comment vérifier l’existence d’une mise à jour en mode déconnecté ?

Les prérequis

Le fonctionnement de ce système nécessite d’avoir un minimum la main sur le serveur hébergeant le WCF, à savoir :

• Pouvoir y copier des fichiers dans un dossier spécifique et qui sera partagé en lecture seule.
• Ces fichiers seront : le package Appx en cours et un fichier Bat d’installation
• Le service Web devra également avoir le droit de lire dans ce dossier.
• Enfin, un autre site Web devra être créé – sur ce serveur ou un autre, peut importe – afin d’héberger le script de lancement de la mise à jour.

L’autre prérequis essentiel est que le package de l’application doit impérativement être signé.

L’approche

En partant sur une application basée sur un modèle MVVM la logique de fonctionnement est la suivante :

J’ai une Loading Page qui mimique le Splash Screen (assez classique comme principe) à laquelle est associée un ViewModel.

Lors de l’initialisation de ce ViewModel, une requête vers le service WCF va récupérer la version en cours du package disponible à l’installation et modifie une propriété booléenne indiquant si une mise à jour est disponible (en comparant la version retournée avec celle du package en cours d’exécution).

Le code behind de la vue vérifie cette propriété avant toute autre action et, si une mise à jour est nécessaire, invite l’utilisateur à la faire avant de continuer l’initialisation de l’application.

Si l’utilisateur décide de faire l’update, une Uri est appelée pour démarrer le processus de mise à jour via un batch et l’application est fermée.

Lorsqu’une mise à jour est disponible, un MessageDialog est affiché pour permettre à l’utilisateur de faire la mise à jour

La configuration du serveur

Pour l’exemple, nous imaginerons la configuration suivante :

• un service WCF disponible à l’adresse http://contoso/SuperApp/SuperWCF.svc
• Sur ce même serveur, un dossier D:\SuperApp\Package qui contiendra le package en cours (partagé en tant que \\contoso\SuperAppPackage\)
• Un autre site web http://contoso/SuperAppUpdate qui contiendra un fichier Bat au contenu suivant

 1: start "Updating SuperApp" /WAIT /B \\contoso\SuperAppPackage\add-ModernApplication.bat

 2: exit

et le fichier Web.config

 1: <?xml version="1.0" encoding="UTF-8"?>

 2: <configuration>

 3:     <system.webServer>

 4:         <staticContent>

 5:             <mimeMap fileExtension=".bat" mimeType="application/octet-stream" />

 6:         </staticContent>

 7:     </system.webServer>

 8: </configuration>

Le code de l’application

LoadingPage.Xaml.cs

 1: public sealed partial class LoadingPage : LayoutAwarePage

 2: {

 3:     public LoadingPageViewModel ViewModel

 4:     {

 5:         get { return this.DataContext as LoadingPageViewModel; }

 6:         set { this.DataContext = value; }

 7:     }

 8:  

 9:     public LoadingPage()

 10:     {

 11:         this.InitializeComponent();

 12:  

 13:         //Initialisation du ViewModel

 14:         var viewModel = new LoadingPageViewModel(ViewService.Service);

 15:         this.ViewModel = viewModel;

 16:  

 17:         //Verification de la disponibilité d'une mise à jour

 18:         var isOutDatedTask = CheckOutdatedVersion();

 19:         isOutDatedTask.Wait();

 20:         var isOutDated = isOutDatedTask.Result;

 21:     }

 22:  

 23:     private async Task<bool> CheckOutdatedVersion()

 24:     {

 25:         if (this.ViewModel.IsOutdated)

 26:         {

 27:             bool? requestUpdate = null;

 28:             var message = new MessageDialog(@"Super App n'est pas à jour. Voulez-vous effectuer la mise à jour ?", "Super App")

 29:                 {

 30:                     Commands =

 31:                 {

 32:                     new UICommand(@"Mettre à jour", cmd => requestUpdate = true),

 33:                     new UICommand(@"Quitter Super App", cmd => requestUpdate = false)

 34:                 },

 35:                     DefaultCommandIndex = 0,

 36:                     CancelCommandIndex = 1

 37:                 };

 38:  

 39:             await message.ShowAsync();

 40:  

 41:             if (!requestUpdate.HasValue || !requestUpdate.Value)

 42:                 Application.Current.Exit();

 43:             else

 44:             {

 45:                 await Windows.System.Launcher.LaunchUriAsync(new Uri(new Uri(@"http://contoso/SuperAppUpdate/"), "Update.bat"));

 46:                 Application.Current.Exit();

 47:             }

 48:             return true;

 49:         }

 50:         return false;

 51:     }

 52: }

LoadingPaveViewModel.cs

 1: public class LoadingPageViewModel : BindableBase

 2: {

 3:     private bool _isOutdated;

 4:     public bool IsOutdated

 5:     {

 6:         get { return _isOutdated; }

 7:         set { SetProperty(ref _isOutdated, value); }

 8:     }

 9:  

 10:     public LoadingPageViewModel(IViewService viewService)

 11:         : base(viewService)

 12:     {

 13:         CheckVersion();

 14:     

 15:         if (IsOutdated)

 16:             return;

 17:     }

 18:  

 19:     private void CheckVersion()

 20:     {

 21:         try

 22:         {

 23:             //Appel du WCF pour récupérer la version du dernier package disponible

 24:             var lastVersion = WCFProxy.SuperWCFClient.GetCurrentVersion();

 25:             //Récupération de la version du package en cours d'éxecution

 26:             var packageVersion = Windows.ApplicationModel.Package.Current.Id.Version;

 27:             //Conversion du type PackageVersion en Version

 28:             var currentVersion =

 29:                 new Version(string.Format("{0}.{1}.{2}.{3}", packageVersion.Major, packageVersion.Minor,

 30:                                           packageVersion.Build, packageVersion.Revision));

 31:             //Comparaison des versions

 32:             IsOutdated = currentVersion.CompareTo(lastVersion) < 0;

 33:         }

 34:         catch (Exception)

 35:         {

 36:             //Si le WCF n'est pas accessible, on considère que la version est à jour

 37:             IsOutdated = false;

 38:         }

 39:     }

 40: }

SuperWCF.svc.cs

 1: public class SuperWCF

 2: {

 3:  

 4:     private const string SuperAppPackageFolder = @"D:\SuperApp\Package\";

 5:     private const string SuperAppPackageNameRegEx = @"SuperApp.*_(\d*[.]\d*[.]\d*[.]\d*).*";

 6:  

 7:     /// <summary>

 8:     /// Gets the current SuperApp package version.

 9:     /// </summary>

 10:     /// <returns></returns>

 11:     /// <exception cref="System.IO.FileNotFoundException">SuperApp Package not found</exception>

 12:     public Version GetCurrentVersion()

 13:     {

 14:         Version returnVersion;

 15:  

 16:         try

 17:         {

 18:             var folder = new DirectoryInfo(SuperAppPackageFolder);

 19:             var files = new List<FileInfo>(folder.GetFiles("*.appx"));

 20:             if (files.Count <= 0)

 21:                 throw new FileNotFoundException("Kymu Package not found");

 22:  

 23:             var packageFile = files.OrderByDescending(f => f.Name).First();

 24:             returnVersion = ExtractVersionNumberFromPackageName(packageFile.Name);

 25:         }

 26:         catch

 27:         {

 28:             returnVersion = new Version(1, 0, 0, 0);

 29:         }

 30:         return returnVersion;

 31:     }

 32:  

 33:     /// <summary>

 34:     /// Extracts the version number from the name of the SuperApp package.

 35:     /// </summary>

 36:     /// <param name="packageName">Name of the package.</param>

 37:     /// <returns></returns>

 38:     private static Version ExtractVersionNumberFromPackageName(string packageName)

 39:     {

 40:         var match = Regex.Match(packageName, SuperAppPackageNameRegEx, RegexOptions.IgnoreCase);

 41:         Version returnValue;

 42:         if (!match.Success || match.Groups.Count < 2 || !Version.TryParse(match.Groups[1].Value, out returnValue))

 43:             returnValue = new Version(1, 0, 0, 0);

 44:         return returnValue;

 45:     }

 46:  

 47: }

Le Batch d’installation

Voici le fichier batch qui réalise au l’installation et qui peut fonctionner depuis un partage réseau

Add-ModernApplication.bat

 1: @ECHO OFF

 2:  

 3: REM #######################################################################

 4: REM # Add-ModernApplication.bat

 5: REM # <summary>

 6: REM # Add-ModernApplication.bat is a powershell.exe script designed to install

 7: REM # the Microsoft Corporate Appx packages created by Visual Studio. 

 8: REM #

 9: REM # The target folder will contain the .appx application file,

 10: REM # the Add-ModernApplication.bat script, plus a .\Dependencies\ folder 

 11: REM # containing all the framework packages used by the application, if needed

 12: REM # When executed from a local directory, the Add-ModernApplication.bat script

 13: REM # simplifies installing the AppX package on a new computer by

 14: REM # automating the following functions.

 15: REM #

 16: REM #

 17: REM # 1. Checks for the Win8 or Win8.1 OS client.

 18: REM # 2. Checks for the client to be volume licensed

 19: REM # 3. Checks for the build to be at the minimum level

 20: REM # 4. If a server SKU, checks for the Desktop Experience Feature

 21: REM #

 22: REM # 4. Installs all the framework packages contained in

 23: REM # .\Dependencies

 24: REM #

 25: REM # 5. Installs the application package .appx file.

 26: REM # 

 27: REM # The Assumption is made that the client satisfies all the requirements 

 28: REM # for Enterprise side-loading of AppX packages and that the Package is signed

 29:  

 30: REM #######################################################################

 31:  

 32: set W8RTM=9200

 33: set W81RTM=9600

 34: set RP=8400

 35:  

 36: REM Check for Windows 8 OS and build

 37: for /f "delims=[] tokens=2" %%i in ('ver') do set MyVer=%%i

 38: for /f "tokens=2" %%i in ('echo %MyVer%') do set MyVer=%%i

 39: for /f "tokens=1,2,3 delims=." %%i in ('echo %MyVer%') do (

 40:     set OSMajorVer=%%i

 41:     set OSMinorVer=%%j

 42:     set OSBuild=%%k

 43: )

 44:  

 45: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "`n`nThe Script identified this machine as Windows Version "%OSMajorVer%"."%OSMinorVer%", Build Number " %OSBuild%"`n" -foregroundcolor "green" 

 46: REM echo The Script identified this machines as %OSMajorVer%.%OSMinorVer%, Build Number %OSBuild%

 47: REM # echo Found OS Minor Version: %OSMinorVer%

 48: REM # Found OS Build number: %OSBuild%

 49:  

 50:  

 51: REM Get SKU of client to test for Volume licensing

 52:  

 53: REM for /f "delims= tokens=1" %%i in ('%windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command "(get-wmiobject win32_operatingsystem).OperatingSystemSKU"') do set MySku=%%i

 54: for /f "delims= tokens=1" %%i in ('%windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command "(get-wmiobject win32_operatingsystem).OperatingSystemSKU"') do set MySku=%%i

 55:  

 56: If %OSMajorVer% EQU 6 if %OSMinorVer% EQU 2 goto Win8VLtest

 57: If %OSMajorVer% EQU 6 if %OSMinorVer% EQU 3 goto Win8VLtest

 58:  

 59: REM Version failed, not Windows8

 60: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "ERROR: Windows 8 Modern Applications are only supported on Windows 8." -foregroundcolor "red"

 61: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "Ending Program `n" -foregroundcolor "red"

 62: goto end

 63:  

 64:  

 65: :Win8VLtest

 66:  

 67: REM Checking for volume licensed media 

 68:  

 69:  

 70: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "`n`nThe SKU "%MySku%""

 71:  

 72: if %MySku% EQU 4 goto Win8RTMtest

 73: if %MySku% EQU 27 goto Win8RTMtest

 74: if %MySku% EQU 48 goto Win8RTMtest

 75: if %MySku% EQU 77 goto Win8RTMtest

 76: if %MySku% EQU 80 goto Win8RTMtest

 77: if %MySku% EQU 97 goto Win8RTMtest

 78: if %MySku% EQU 8 goto Win8BuildServer

 79: if %MySku% EQU 10 goto Win8BuildServer

 80: if %MySku% EQU 42 goto Win8BuildServer

 81: if %MySku% EQU 38 goto Win8BuildServer

 82:  

 83: REM not VL media, Failure

 84: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "ERROR: Sideloaded Windows 8 Modern applications may only be installed on Volume Licensed OS SKUs of Windows 8." -foregroundcolor "red" 

 85: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "Ending Program" -foregroundcolor "red" 

 86: goto end

 87:  

 88: :Win8BuildServer

 89:  

 90: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "This machine has been identifed as a Server OS."  -foregroundcolor "green" 

 91:  

 92: for /f "delims= tokens=1" %%i in  ('%windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command "(Get-WindowsFeature desktop-experience).Installstate"') do Set DesktopEx=%%i

 93:  

 94: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "This Server sku appears to have the Desktop Experience "%DesktopEx%", which is a requirement for side-loading of Modern Apps"  -foregroundcolor "green" 

 95: If %DesktopEx% EQU Installed goto Win8RTMtest

 96:  

 97: REM Server does not have Desktop-Experience implemented, Failure

 98: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "ERROR: This machine appears to be a valid server SKU, but you need to implement the Desktop-Experience feature, first." -foregroundcolor "red"

 99: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "Ending Program" -foregroundcolor "red" 

 100: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "Open up elevated Powershell and run" -foregroundcolor "red" 

 101: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "Import-Module ServerManager , then , Install-WindowsFeature Desktop-Experience" -foregroundcolor "red" 

 102: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "You will then need to reboot your system" -foregroundcolor "red" 

 103: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "Ending Program" -foregroundcolor "red" 

 104: goto end

 105:  

 106:  

 107: :Win8RTMtest

 108:  

 109: if %OSBuild% EQU %W8RTM% goto  Win8Pass

 110: if %OSBuild% EQU %W81RTM% goto  Win8Pass

 111: REM if %OSBuild% EQU %RP% goto Win8Pass

 112:  

 113:  

 114: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "ERROR: This program is only intended on Windows 8 RTM (6.2.9200) or Windows 8.1 RTM (6.2.9600)." -foregroundcolor "red"

 115: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "Ending Program `n" -foregroundcolor "red"

 116: goto end

 117:  

 118: :Win8Pass

 119:  

 120: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "This machine appears to satisfy the requirements needed to install this Modern application. `n Proceeding to install which may take a minute. Please wait... `n" -foregroundcolor "green"

 121: pushd %~dp0

 122: SET Test-Path=%~dp0

 123:  

 124: REM Proceed to add in the AppX package found in this same directory

 125: REM Only one AppX package should exist in this same directory

 126:  

 127: ECHO Using %windir%\System32\WindowsPowerShell\v1.0\powershell.exe Cmdlets to Install Appx Files

 128:  

 129:  

 130: ECHO  ^- Installing Dependency Packages...

 131: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Import-Module appx; if(Test-Path -Path .\Dependencies) { $DependencyFiles = get-childItem .\Dependencies ^| where{$_.extension -eq '.appx'} ^| foreach-object -process{$_.FullName}; if(!$DependencyFiles) {exit 1}; foreach($Dependency in $DependencyFiles){ Write-Output " Installing: $Dependency"; Add-AppxPackage $Dependency; if(!$?){exit{5}}} } else {exit 1}

 132:  

 133: set RETURN=%ERRORLEVEL%

 134: set RETURNDependency = %RETURN%

 135: IF "%RETURN%"=="1" ECHO      No Dependencies Found.

 136: IF "%RETURN%"=="5" (

 137:     %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host " ERROR: Dependent Package identified, but FAILED TO INSTALL!" -foregroundcolor "red"

 138:     goto CLEANUP

 139:     )

 140:         

 141:  

 142: ECHO  ^- Installing Windows 8 Modern Application...        

 143: %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Import-Module appx; $PackageFile = get-childItem .\ ^| where{$_.extension -eq '.appx'} ^| foreach-object -process{$_.FullName}; if(!$PackageFile){exit 6}; if($PackageFile.Count -gt 1){exit 7}; Write-Output " Installing: $PackageFile"; Add-AppxPackage $PackageFile; if(!$?) {exit 8}

 144: set RETURN=%ERRORLEVEL%

 145: IF "%RETURN%"=="0" %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host "`n SUCCESS! Find the tile for this application on the far right side of your Windows 8 Start Screen. `n" -foregroundcolor "green"

 146: IF "%RETURN%"=="6" %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host " ERROR: NO APPLICATION FOUND TO INSTALL! `n" -foregroundcolor "red"

 147: IF "%RETURN%"=="7" %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host " ERROR: MORE THAN ONE APPLICATION PACKAGE FOUND! 'n" -foregroundcolor "red"

 148: IF "%RETURN%"=="8" %windir%\System32\WindowsPowerShell\v1.0\powershell.exe -command Write-Host " ERROR: FAILED TO INSTALL WINDOWS 8 APPLICATION! 'n" -foregroundcolor "red"

 149:    

 150: :CLEANUP

 151: popd

 152: :end

 153: pause

Voilà !

N’hésitez pas à me solliciter si vous avez la moindre question concernant ce modèle de mise à jour automatisée

En XAML, il existe trois modes de binding : OneTime, OneWay et TwoWay.

• Le binding OneTime fait la liaison entre données et interface une première fois, puis ne s’occupe plus de rien.
• Le binding OneWay permet de changer l’interface à chaque fois que les objets métiers changent.
• Le binding TwoWay fait en plus la liaison dans l’autre sens, c’est-à-dire que lorsqu’il est lié à un contrôle graphique qui permet de modifier la donnée (par exemple un champ texte, une check box, ou tout autre contrôle pouvant être utilisé de manière interactive), la modification de la donnée dans l’interface va entrainer automatiquement la modification de la donnée elle-même.

Seulement, le binding TwoWay n’existe pas dans la version actuelle de WinJS… ce qui ne veut pas dire qu’on ne peut pas le mettre en place. C’est d’ailleurs ce que nous allons faire dans cet article !

Les initializers

En effet, le binding WinJS est facilement personnalisable via un mécanisme d’initializer. C’est une fonction qui s’exécutera lors de l’application du binding (au moment où on appelle la fonction WinJS.Binding.processAll).

Tout binding utilise un initializer et dans la syntaxe du binding WinJS c’est le troisième membre ; en revanche il peut être omis, et c’est dans ce cas defaultBind, l’initializer par défaut (c’est l’équivalent du binding OneWay de XAML) qui sera utilisé.

<input data-win-bind="dest.prop: source.prop [initializer]" />

Un initializer peut être n’importe quelle fonction, à condition qu’elle soit sûre : appeler WinJS.Utilities.markSupportedForProcessing ou WinJS.Binding.initializer (qui font strictement la même chose) suffit à WinJS pour faire confiance à la fonction et la rend utilisable en tant qu’initializer :

WinJS.Namespace.define("Ext.Binding", {

    twoWay: WinJS.Binding.initializer(
        function (source, sourceProps, dest, destProps) {
            //TODO: implémenter l'initializer
        }
    )
});

Utilisation d’un initializer pour implémenter le binding two-way

WinJS fournie à la fonction initializer quatre paramètres qui nous donnent les informations suivantes :

• Source : Objet métier utilisé comme source du binding.
• SourceProps : Tableau des propriétés de l’objet métier.
• Dest : Elément HTML mis à jour quand la donnée change.
• DestProps : Tableau des propriétés de l’élément graphique.

Par exemple :

<input data-win-bind="prop: source.propA.propB" />

Dans cet exemple, on a :

• Dans le tableau sourceProps : [propA, propB]
• Dans le tableau destProps : [prop]

On peut s’abonner aux évènements de l’élément HTML (par exemple l’évènement onchange utilisable sur les éléments HTML et WinJS) et ainsi être notifié des changements initiées par l’utilisateur. Lorsque l’élément change, on peut alors mettre à jour l’objet métier, et on obtient un binding two way !

C’est ce que l’on fait dans le bout de code suivant :

• On commence par appeler le defaultBind pour gérer le binding OneWay
• On utilise addEventListener pour s’enregistrer à l’évènement change
• On récupère l’objet source et on change sa propriété en lui donnant la nouvelle valeur

var oldValue, newValue, destObject, sourceObject;

var destinationChanged = function () {
    newValue = getValue(dest, destProps);
    sourceObject = getObject(source, sourceProps);

    if (sourceObject) {
        oldValue = sourceObject[sourceProps[sourceProps.length - 1]];
        if (oldValue !== newValue) {
            sourceObject[sourceProps[sourceProps.length - 1]] = newValue;
        }
    }
};

WinJS.Binding.defaultBind(source, sourceProps, dest, destProps);
destObject = getObject(dest, destProps);

if (destObject !== undefined) {
    destObject.addEventListener('change', destinationChanged);
}

Pour récupérer l’objet source et la valeur de destination, on utilise les deux petites fonctions suivantes :

• getValue permet de récupérer la valeur de propriété spécifiée par le binding
• getObject permet de récupérer l’objet concret dont on veut modifier la propriété

function getValue(obj, objProps) {
    var i,
        o = obj;

    for (i = 0; i < objProps.length; ++i) {
        o = o[objProps[i]];
    }

    return o;
}

function getObject(obj, objProps) {
    var i,
        o = obj;

    for (i = 0; i < objProps.length - 1; ++i) {
        o = o[objProps[i]];
    }

    return o;
}

Conclusion

Bien que le framework WinJS soit jeune, et par conséquent qu’il ait quelques lacunes, certaines peuvent être comblés par son côté très personnalisable. C’est le cas du binding two way, qui peut être implémenté très facilement grâces à des mécanismes bien présents que sont les initializers.

- Sébastien Mornas -

Lorsque l’on travaille sur une application Windows Store, il est courant d'avoir à afficher des collections d'information.

Petit rappel sur les contrôles

Un type de contrôle que l’on utilise alors hérite d’ItemsControl. A partir du moment où l’on veut se binder sur une collection, c’est la solution pour l’affichage des données.

Mais à l’heure des tablettes et des nouveaux devices qui arrivent tous les jours, qui ont des résolutions différente et surtout, car c’est ce qui importe pour les applications Windows Store, des diagonales d’écran variées, il est de bon ton de bien adapter ses designs à ces tailles distinctes.

Les contrôles permettant la sélection d’Item fréquemment utilisés sont la ListView et la GridView qui ont pour points communs :

• D’hériter de ItemsControl
• De permettre de grouper les items
• De supporter l’affichage des elements dans des VirtualizingPanel
• D’autoriser différents mode de sélection

Du coté de leurs divergences :

• Par défaut, la ListView affiche ses éléments verticalement (et est souvent utilisée dans la snapped view)

   1: <ListView Background="Red" ItemsSource="{Binding MyCollection}"  >

   2:     <ListView.ItemTemplate>

   3:         <DataTemplate>

   4:             <Button Content="{Binding}" Background="Blue"/>

   5:         </DataTemplate>

   6:     </ListView.ItemTemplate>

   7: </ListView>

• alors que la GridView les affichera de la même manière mais en gérant un « wrapping » qui une fois la hauteur de la GridView atteinte affiches les items suivants à la suite horizontalement.

   1: <GridView Background="Red" ItemsSource="{Binding MyCollection}"  >

   2:     <GridView.ItemTemplate>

   3:         <DataTemplate>

   4:             <Button Content="{Binding}" Background="Blue"/>

   5:         </DataTemplate>

   6:     </GridView.ItemTemplate>

   7: </GridView>

Les conteneurs d’items (ou ItemsPanel)

Pour ces deux contrôles, il est bien sûr possible de changer les conteneurs (ItemsPanel) par défaut qui sont, pour la GridView, la WrapGrid et pour la ListView, le VirtualizingStackPanel par un contrôle héritant de Panel. Un cas souvent rencontré serait, par exemple, pour une GridView, de choisir un StackPanel (Virtualisable ou non) avec une orientation horizontale afin de n’avoir qu’un élément par colonnes. Malheureusement, un problème fréquent est que le contenu de l’élément ne prend alors pas tout l’espace vertical (dans ce cas) disponible. Et ce, même en précisant que le VerticalAlignment="Stretch" sur le Button du DataTemplate.

   1: <GridView Grid.Row="1" Height="120" VerticalAlignment="Top" Grid.Column="3" Margin="30,0,30,20" Background="Red" ItemsSource="{Binding MyCollection}"  >

   2:     <GridView.ItemsPanel>

   3:         <ItemsPanelTemplate>

   4:             <StackPanel Orientation="Horizontal"/>

   5:         </ItemsPanelTemplate>

   6:     </GridView.ItemsPanel>

   7:     <GridView.ItemTemplate>

   8:         <DataTemplate>

   9:             <Button VerticalAlignment="Stretch" Content="{Binding}" Background="Blue"/>

  10:         </DataTemplate>

  11:     </GridView.ItemTemplate>

  12: </GridView>

Une solution

Pour que notre contrôle prenne bien toute la hauteur, la solution est de ne pas oublier que notre StackPanel ne donnera à notre DataTemplate de notre ItemTemplate que la place qu’il nécessite. Mais ce fameux Button de notre DataTemplate, est lui-même contenu dans un ItemContainer qui est, dans le cas de la GridView, un GridViewItem et un ListViewItem pour la ListView. Et cet ItemContainer à comme valeur par défaut pour son VerticalContentAlignment : Top et pour son HorizontalContentAlignment : Left.

Donc il convient de modifier les ContentAlignment de l’ItemContainerStyle de notre contrôle en Stretch et comme par magie, notre Button s’agrandit comme recherché. A noter qu’il est préférable de bien vérifier que le contrôle contenu dans le DataTemplate est en Stretch sur la dimension qui nous intéresse.

Donc ici, la solution se résume à spécifier dans l’ItemContainerStyle de notre GridView ou de notre ListView un VerticalContentAlignment="Stretch"

Pour la ListView, voici le code XAML

   1: <ListView  VerticalAlignment="Top" Background="Red" ItemsSource="{Binding MyCollection}"  >

   2:     <ListView.ItemContainerStyle>

   3:         <Style TargetType="ListViewItem" >

   4:             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

   5:         </Style>

   6:     </ListView.ItemContainerStyle>

   7:     <ListView.ItemTemplate>

   8:         <DataTemplate>

   9:             <Button HorizontalAlignment="Stretch" Content="{Binding}" Background="Blue"/>

  10:         </DataTemplate>

  11:     </ListView.ItemTemplate>

  12: </ListView>

et le rendu visuel

La même chose pour une GridView

   1: <GridView  VerticalAlignment="Top"  Background="Red" ItemsSource="{Binding MyCollection}"  >    <GridView.ItemContainerStyle>

   2:         <Style TargetType="GridViewItem" >

   3:             <Setter Property="VerticalContentAlignment" Value="Stretch"/>

   4:         </Style>

   5:     </GridView.ItemContainerStyle>

   6:     <GridView.ItemsPanel>

   7:         <ItemsPanelTemplate>

   8:             <StackPanel Orientation="Horizontal"/>

   9:         </ItemsPanelTemplate>

  10:     </GridView.ItemsPanel>

  11:     <GridView.ItemTemplate>

  12:         <DataTemplate>

  13:             <Button VerticalAlignment="Stretch" Content="{Binding}" Background="Blue"/>

  14:         </DataTemplate>

  15:     </GridView.ItemTemplate>

  16: </GridView>

Code Source

Le code source de la démo se trouve ici.

- David ROZEN -

S'abonner au changement d'état

Pour savoir quand l'application change d'état en JavaScript, rien de plus simple : il suffit de s'abonner à l'évènement onresize de la variable globale windows (qui est un peu le point d'entrée pour tout un tas de chose en JavaScript). Ce dernier se déclenche à chaque fois que la « fenêtre » de l'application change de taille, ce qui dans le cas d'une application Windows 8, n'arrive logiquement que lors du changement d'état ! On peut alors requêter l'état courant ; pour ça rien de plus simple :

var viewState = Windows.UI.ViewManagement.ApplicationView.value;

On aura tendance à vouloir stocker quelque part cet état, pour le comparer plus tard au nouvel état et ne déclencher de traitement que si l'état a changé … Bonne nouvelle, si vous êtes parti des templates de projet Visual Studio Grid App, Split App ou Navigation App, alors vous avez sans doute un fichier navigator.js dans votre projet qui définit une classe – au sens WinJS j'entends, tout le monde sait qu'il n'y a pas de classe en JavaScript – nommée PageControlNavigator qui est là pour simplifier la gestion de la navigation entre vos différentes pages ; et bien cette classe permet aussi de simplifier la gestion des viewstates. Dans vos pages vous n'avez qu'à utiliser la méthode updateLayout qui sera appelée par le PageControlNavigator pour gérer les changements d'états. Par exemple :

updateLayout: function (element, viewState, lastViewState) {
 if (viewState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
 lastViewState !== Windows.UI.ViewManagement.ApplicationViewState.snapped) {
 //Passage de n'importe quel état vers la vue ancrée
 }
 else if (
 viewState !== Windows.UI.ViewManagement.ApplicationViewState.snapped &&
 lastViewState === Windows.UI.ViewManagement.ApplicationViewState.snapped) {
 //Passage de la vue ancrée à n'importe quel autre état
 }
 }

Je ne peux que vous recommander de partir des templates précédemment cités pour tous vos projets, quitte à supprimer les fichiers qui ne vous sont pas utiles. Le fichier navigator.js est un must have, qui par ailleurs peut être modifié pour s'adapter à vos besoins. A noter par ailleurs que l'on peut aussi demander de sortir de la vue ancrée en JavaScript, en utilisant la fonction suivante :

Windows.UI.ViewManagement.ApplicationView.tryUnsnap();

Le composant ListView et les layouts

En HTML5/JavaScript, il n'y a pas la même distinction en GridView et ListView qu'en XAML/C# car il n'y a qu'un seule contrôle, ListView qui permet de représenter à la fois une grille et une liste. Le fonctionnement de la ListView WinJS est à la fois simple et très puissant et toutes ses possibilités méritent un article à part entière, aussi je ne m'attarderai pas sur son fonctionnement pour aujourd'hui.

Pour choisir si la disposition des éléments sera en forme de liste ou de grille on va utiliser une propriété supplémentaire nommée layout. Cette propriété peut être définie dans le HTML ou en code, ce qui sera très pratique si l'on veut changer le layout de la ListView en fonction du viewstate. Voilà comment définir le layout en HTML :

<div
 class="itemlist win-selectionstylefilled"
 data-win-control="WinJS.UI.ListView"
 data-win-options="{ 
 layout:{type:WinJS.UI.GridLayout}}> 
</div>

Pour changer le layout lors du changement de viewstate il suffit de modifier updateLayout comme cela :

updateLayout: function (element, viewState, lastViewState) {
 var listView = element.querySelector(".itemlist").winControl;
 if (viewState === Windows.UI.ViewManagement.ApplicationViewState.snapped && 
 lastViewState !== Windows.UI.ViewManagement.ApplicationViewState.snapped) {
 listView.layout = new WinJS.UI.ListLayout(); 
 } 
 else if ( 
 viewState !== Windows.UI.ViewManagement.ApplicationViewState.snapped && 
 lastViewState === Windows.UI.ViewManagement.ApplicationViewState.snapped) {
 listView.layout = new WinJS.UI.GridLayout(); 
 } 
 }

Navigation spéciale pour la vue ancrée

Il arrive que l'on souhaite afficher sur une page une liste d'éléments et un contenu dépendant de cette liste. C'est par exemple le cas de l'application Mail de Windows 8 : elle affiche vos mails à gauche et le détail du mail en cours de lecture à droite. Que se passe-t-il quand on passe à la vue ancrée ? Il n'y a alors clairement plus assez d'espace pour afficher la liste d'emails ET le contenu de l'email sélectionné… La solution est de casser virtuellement la page en deux pages uniquement pour la vue ancrée.

La solution est astucieuse et pas très complexe techniquement ; en vue ancrée, on n'affichera que l'élément sélectionné s'il y en a un, et uniquement la liste d'éléments si aucun élément n'a été sélectionné. Pour cela on utilisera les media queries décrite dans la première partie de l'article. Lorsque l'on sélectionne un élément dans la partie liste, on affiche alors la page de détails pour cet élément : pour cela on utilise la navigation afin de naviguer sur une nouvelle occurrence de cette même page. Cela permettra ensuite d'utiliser le bouton retour pour revenir sur la liste. La seule partie un peu plus complexe est le code de la fonction updateLayout qui doit gérer les différents cas de transitions décrits dans le schéma ci-dessous :

Quand on est dans le cas des transitions en bleu, il faut manipuler l'historique de navigation en code pour pouvoir gérer le bouton retour qui nous renverra sur la liste, et non sur la page précédente !

// On passe en vue ancrée : on ajoute la vue en mode liste dans la pile d'historique
 nav.history.current.state = { 
 groupKey: this._group.key, 
 selectedIndex: this._itemSelectionIndex 
 }; 
 nav.history.backStack.push({ 
 location: "/pages/split/split.html", 
 state: { groupKey: this._group.key } 
 });
 
 // On passe en mode paysage : on supprime la vue de la pile d'historique
 nav.history.backStack.pop();

Bon, ce n'est pas très compliqué mais si vous ne voulez pas écrire tout le code à la main, j'ai une bonne nouvelle : le template Visual Studio Split App met en place exactement ce mécanisme pour vous. Je vous conseille donc d'y jeter un coup d'œil !

- Sébastien Mornas -

Ce que j'aime dans la vue ancrée, c'est que le contenu de l'application s'adapte aussitôt que l'on passe de la vue plein écran à la vue ancrée et inversement. On se retrouve alors devant une autre vue de son application où tout le contenu et la disposition de ce dernier a été pensée pour cette résolution bien particulière. On peut mettre en place une nouvelle mécanique toute différente ; le défilement se fait alors verticalement, les actions importantes restent et les autres disparaissent ; c'est comme si l'application se transformait en application mobile !

Vous pourriez vous dire « C'est beau, mais pour moi développeur, c'est aussi plus de travail ! ». Mais à cela, je vous réponds : rassurez-vous les outils et les langages sont là pour vous aider ! Comme nous le verrons, CSS et JavaScript permettent de réaliser la vue ancrée de votre application très facilement à partir de la vue plein-écran, et Blend sera l'outil indispensable pour tester le desing de votre application dans tous ces états !

CSS3 et les Media Queries

CSS for dummies

Si vous connaissez bien le modèle de développement C# / XAML, que ça soit par le biais de WPF, de Silverlight ou des apps Windows 8, le layout d'une page en HTML/CSS peut vous paraître pour le moins étrange. Habituellement en XAML, on utilise différent contrôles  "conteneurs" pour contenir les contrôles (ou d'autres conteneurs). Par exemple : Grid, StackPanel, WrapPanel, etc.

En HTML, on utilise des balises telles que div, section, article, etc. pour contenir les autres éléments. C'est ensuite dans la feuille de style CSS que l'on définit si le conteneur dispose les éléments enfants en les empilant horizontalement ou verticalement, ou en utilisant une grille, etc.

Une feuille CSS est donc un fichier contenant une liste de règles qui définissent les propriétés graphiques et de layout des éléments de la page HTML. Une règle peut cibler certains éléments à l'aide de sélecteurs :

• Un élément spécifique : on donne un identifiant unique au contrôle et on peut appliquer un style en passant cet identifiant.
• Une classe CSS : on donne un nom de classe à plusieurs éléments pour leur appliquer des propriétés communes.
• On peut également chainer les sélecteurs pour cibler certains éléments bien spécifiques (ex : le premier article de chaque section)

Les Media Queries au service de la vue ancrée

Cela devient intéressant lorsque l'on précise que certaines règles ne sont appliquées que dans certaines conditions. Ces conditions peuvent être un certain type de média (un écran, une télé, une imprimante, etc.) ou une certaine taille d'écran par exemple. Ce sont ces ensembles de règles qui se basent sur une condition pour s'appliquer ou non qui sont appelées media queries. Windows 8 ajoute l'état courant de la vue (snapped, fill, fullscreen-portrait, fullscreen-landscape) comme un nouveau critère utilisable dans une media query. Dans l'exemple suivant on change la couleur du fond de la vue selon qu'on est en vue ancrée ou en vue plein écran / remplie :

@media screen and (-ms-view-state: filled), (-ms-view-state: fullscreen-landscape) { 
 body { 
   background-color: red; 
 } 
} 
 
@media screen and (-ms-view-state: snapped) { 
 body { 
   background-color: green; 
 } 
}

Concevoir une vue ancrée pour une application existante

Prenons un exemple plus concret : disons que je suis en train de concevoir une application pour gérer ma collection de jeux vidéo. J'ai d'abord développé une page qui affiche les différentes catégories de jeux, puis un écran pour détailler chaque catégorie et en afficher la liste des jeux. Les éléments qui me permettent d'ouvrir une catégorie sont des balises div que j'ai mis dans un autre div. J'ai ensuite créé la feuille de style de la page et ai défini que la balise parente utiliserai une flexbox à défilement horizontal pour afficher ses enfants.

Le problème c'est je n'ai rien fait pour que cette page soit compatible avec la vue ancrée ; par conséquent, si on met mon application en mode snapped, on voit exactement la même chose, sauf que la fenêtre est coupée à 320 px.

Pour remédier à ce problème, je vais copier les règles CSS qui s'appliquent à la balise parente, et aux enfants dans une media query qui s'exécutera dans le cas d'un mode snapped :

@media screen and (-ms-view-state: snapped) {
 .itemspage .itemslist { 
   padding-left: 20px; 
   width: calc(100% - 20px); 
   -ms-flex-direction: column; 
   overflow-y: auto; 
   overflow-x: hidden; 
 }
 
 .itemspage .gamecategory-item { 
   height: 200px; 
   margin-bottom: 10px; 
 }

.itemspage .gamecategory-item-title { 
   font-size: 32pt; 
 }
}

Comme j'utilise une flexbox pour afficher les éléments à l'intérieur du div parent, je peux changer dans le cas d'une vue ancrée la direction de la flexbox. En mettant column à la place de row et en changeant la taille des éléments enfants, on obtient déjà un résultat bien plus probant quand on est dans la vue ancrée !

- Sébastien Mornas -

Si vous ne pouvez pas venir, voici la TechDays TV qui vous permettra d'en suivre l'essentiel avant de pouvoir visionner les webcasts en ligne !

La TechDays TV :

Ensuite voici les sessions animées par des consultants Microsoft Service de la practice MBC (Mission & Business Critical) à ne surtout pas rater !!!

Luc Vo Van/ Clément Gatin

Mardi 12 février : 14h30-15h30 Niveau : Confirmé (300)

Comme des millions de développeurs, vous utilisez C# quotidiennement … mais en maitrisez-vous les subtilités ? Cette session ludique vous plongera au coeur de votre langage de prédilection au travers programmes et exemples de code qui ne cesseront de vous surprendre. Avec en prime quelques (petits) lots à gagner pour les développeurs les plus perspicaces !

Jeudi 14 février : 16h00-17h00 Niveau : Intermédiaire (200)

Windows 8, Windows Phone 8 et le Windows Store Apps ont apporté une nouvelle approche pour les entreprises dans le développement de leurs applications métier (LOB). Ces applications qui sont complexes et spécifiques, pour répondre aux besoins fonctionnels doivent être aussi intuitives, rapides, fluides, tactiles et si possible exploiter les nouvelles possibilités apportées par ce nouveau système d'exploitation et par les nouveaux terminaux. Cette session permettra de voir cette nouvelle approche et comment répondre à ces nouveaux besoins, ainsi que les outils mis à disposition des entreprises, et comment passer d'une application traditionnelle vers une application Modern UI.

- Audrey Petit -

L’idée principale derrière la conception du Haskell était la création d’un langage purement fonctionnel, ie. sans effet de bord. Pourtant, il existe quand même des effets que l’on ne peut éviter. Un premier effet de bord me venant à l’esprit est celui des entrées/sorties (IO). En effet, si vos fonctions devaient toujours renvoyer la même sortie à partir de la même entrée, il serait impossible de représenter des fonctions comme celle renvoyant une string [chaine de caractères si l'on est vraiment chauvin] à partir d’une ligne entrée au clavier par un utilisateur. En fait, les interactions avec la réalité créent des effets de bord.

Afin d’éviter de créer un langage inutilisable, les concepteurs du Haskell ont donc cherché un moyen de séparer les parties de code liées aux effets de bord du reste du code, de façon à ce que les codes pur et impur ne puissent se mélanger. Ainsi, si vous introduisez une fonction impure dans une fonction pure en Haskell, le code est considéré comme impur. Et c’est à ce moment-là que le concept de monades entre en jeu.

Les monades représentent vraiment un concept générique puissant, et qui a beaucoup d’autres applications : comme vous le verrez plus loin, F# n’utilise même pas les monades pour résoudre le problème des IO.

Que sont les monades ?

Wikipedia:

“In functional programming, a monad is a programming structure that represents computations. Monads are a kind of abstract data type constructor that encapsulate program logic instead of data in the domain model. A defined monad allows the programmer to chain actions together and build different pipelines that process data in various steps, in which each action is decorated with additional processing rules provided by the monad. For example, a sequence of arithmetic operations can be controlled to avoid division by zero in intermediate results. Programs written in functional style can make use of monads to structure procedures that include sequenced operations,^[1][2] or to define some arbitrary control flows (like handling concurrency, continuations, side effects such as input/output and variable assignment, or exceptions).

Formally, a monad is constructed by defining two operations (bind and return) and a type constructor M that must fulfill several properties to allow the correct composition of monadic functions (i.e. functions that use values from the monad as their arguments). The return operation takes a value from a plain type and puts it into a monadic container of type M. The bind operation performs the reverse process, extracting the original value from the container and passing it to the associated next function in the pipeline.

A programmer uses an existing monad by composing monadic functions to define a new data-processing pipeline. The monad acts as a framework, as it's a reusable behavior that decides the order in which the specific monadic functions in the pipeline are called, and manages all the undercover work required by the computation.^[3] The bind and return operators interleaved in the pipeline will be executed after each monadic function returns control, and will take care of the particular aspects handled by the monad.

The name is taken from the mathematical monad construct in category theory, though the two concepts are not identical.”

La définition des monades est assez longue, et difficile à comprendre, gardons-en les idées les plus importantes :

• “A monad is a programming structure that represents computations” - une monade est une structure de programmation qui représente des calculs
• « A defined monad allows the programmer to chain actions together » – une monade, lorsqu’elle est définie en amont, permet au développeur d’enchainer une séquence d’actions
• « A monad is constructed by defining two operations (bind and return) and a type constructor M that must fulfill several properties to allow the correct composition of monadic functions » – une monade se construit par la définition de 2 opérations (appelées bind et return) et d’un constructeur de type, noté M, qui doit vérifier un ensemble de propriétés permettant la composition de fonctions monadiques.

Mieux vaut un bon exemple qu’un long discours

Disons que vous voulez définir une fonction permettant de chercher un élément présent dans une liste de paires (clé, valeur), avec en entrée sa clé associée. Cette fonction pourrait avoir le type suivant : (‘a –> (‘a * ‘b) list –> ‘b) si un opérateur d’égalité est défini pour le type ‘a.

Dans l’exemple qui suit, la liste de paires correspond à un annuaire. Cet annuaire associe des noms à leurs numéros de téléphone. Dans cette liste, je veux récupérer un numéro de téléphone à partir d’un nom donné :

À propos des noms choisis dans cet exemple : À l’époque des Royaumes Combattants (époque Sengoku), tout le cours de l’histoire du Japon aurait pu être changé le 21 juin 1582, si seulement Hideyoshi avait eu un téléphone portable. Car c’est parce qu’une simple lettre est arrivée en retard, que le Daimyo (noble Japonais) le plus puissant de l’époque, Oda Nobunaga est mort, assassiné par un de ses hommes, le samouraï Mitsuhide, qui avait mal interprété ses véritables intentions !

Notre fonction lookFor marche bien, mais son comportement est assez lourd : lorsque la clé donnée n’est pas trouvée, elle lance une exception. Dans le cas d’un langage typé dynamiquement, on pourrait retourner une valeur qui aurait un certain sens au regard de cette fonction de recherche : une valeur booléenne fausse par exemple si la clé cherchée n’est pas trouvée. Dans des langages comme le C#, vous pourriez utiliser la valeur null, mais vous savez probablement déjà que null ne doit être utilisé en prenant quelques précautions. Si ces précautions ne sont pas prises en amont, des null reference exceptions pourraient apparaître dans votre code : les valeurs retournées doivent ainsi être vérifiées à chaque nouvel appel de fonction. C’est pourquoi en C#, sans la notion d’exception, la propagation et la gestion des erreurs ressembleraient à peu près à du C :

A ce stade, il est intéressant de noter que l’indentation fait que le code se déporte sur la droite, et à quel point de ce fait il devient difficile de le lire. J’en reparlerai un peu plus tard.

Nous voudrions que nos fonctions puissent retourner soit un résultat valide soit une valeur ayant assez de sens pour nous indiquer que l’opération a échoué. S’il y a échec de l’opération, le statut devrait être propagé et les étapes de calcul suivantes sautées. Et si possible, tout cela en évitant d’avoir à écrire tout le code permettant d’arriver à effectuer cette propagation (et qui fait que le code se déporte peu à peu vers la droite, comme on a pu le voir ci-dessus).

Croyez-le ou non, mais les Monades peuvent nous aider à atteindre cet objectif.

Dans un premier temps, on va créer un type représentant le fait que l’opération puisse retourner avec succès ou non une valeur. Et puis, on va redéfinir notre fonction lookFor de façon à ce qu’elle utilise ce nouveau type.

Le type maybe est un type générique : quand la fonction trouve une valeur, Just value est retourné, et lorsqu’elle n’en trouve pas, Nothing va être retourné :

Bien qu’ayant un peu plus de sens, on n’a rien ici de plus qu’un équivalent du pattern « retourner une valeur valide ou retourner null » que l’on a pu voir plus haut avec le C#.

Remarque : Il existe déjà un équivalent au type Maybe<’a>, il est défini dans la bibliothèque standard de F# et s’appelle option<’a>.

Disons que je veuille créer une fonction qui, à partir d’un annuaire, va vérifier que tous les contacts de mes amis sont dedans, et me retourner leurs numéros. Si un des numéros ne se trouve pas dans l’annuaire, la fonction devrait me signaler qu’elle n’a pas réussi à le trouver. Si vous suivez le modèle mettant en place une cascade de if, vous devriez vous retrouver avec un code à peu près comme celui-ci :

C’est plutôt moche non ? On se retrouve encore avec toutes ces redondances pour vérifier les valeurs retournées, et le code continu à se déporter vers la droite. On va essayer de factoriser un peu tout ça dans un premier temps :

On utilise ici un pattern assez commun dans les langages de programmation fonctionnelle qui consiste à capturer les continuations à l’aide de clôtures (cf. mon article sur les continuations). Si vous êtes un(e) habitué(e) des langages non fonctionnels et que vous avez fait du code asynchrone, vous connaitrez peut-être le concept des callbacks qui est assez similaire à ce pattern.

Ici, nous avons donc réussi à factoriser les expressions conditionnelles match en définissant en amont une fonction de vérification. Cette fonction prend en entrées une valeur Maybe et une fonction représentant une continuation ; et, en fonction de la valeur, son exécution s’arrête ou continue en prenant la valeur encapsulée par le constructeur Just.

Nous nous rapprochons de la notion de Monade, en fait en généralisant un tout petit peu plus notre code, on arrive à cette notion. Conceptuellement, nous avons : un contexte (le type représentant la possibilité d’avoir un échec), ce contexte encapsule une valeur, et grâce à une fonction (check dans notre exemple) nous sommes capables de propager ce contexte au travers des différentes étapes de notre calcul en extrayant et en encapsulant à nouveau la valeur au sein du contexte. La fonction que nous utilisons pour encapsuler à nouveau la valeur dans un contexte est dans notre cas particulier le constructeur de type Just.

Si vous vous rappelez, un des points que nous avons souligné au début du post est : “A monad is constructed by defining two operations (bind and return) and a type constructor M that must fulfill several properties to allow the correct composition of monadic functions” - Une monade se construit par la définition de 2 opérations (appelées bind et return) et d’un constructeur de type, noté M, qui doit vérifier un ensemble de propriétés permettant la composition de fonctions monadiques.

La fonction check que nous avons définie tout à l’heure correspond justement à l’opération bind, et notre constructeur Just à l’opération return :

OK, je sais ce que vous pensez : j’ai juste renommé quelques fonctions. Mais il est important de bien voir ces deux opérations. Et en les définissant, nous avons officiellement créé notre première Monade !

Mais une Monade, en fait, c’est juste ça ???

Non non, ne vous inquiétez pas, il y en a encore en réserve. Le pattern que je vous ai montré précédemment peut apparaître comme particulièrement adapté à mon problème de gestion d’erreur, mais en réalité c’est un pattern très générique ! Tellement générique que les monades ont leur propre syntaxe en Haskell et en F#.

Mais, dans un premier temps, je dois vous avouer que je vous ai menti : les monades ne sont pas vraiment appelées monades en F#, mais plutôt workflows, ou « expressions de calcul» (computational expressions). Et si vous vous rappelez bien du deuxième point que nous avions souligné dans la définition d’une monade : « A defined monad allows the programmer to chain actions together » – Une monade, lorsqu’elle est définie en amont, permet au développeur d’enchainer une séquence d’actions ; vous pouvez désormais mieux comprendre pourquoi nous l’avions mis en exergue. Cet enchainement d’actions correspond exactement à ce que l’on a pu faire dans notre exemple de gestion d’erreur : nous avons enchainé les appels de fonctions, de façon à ce que le contexte d’échec soit géré et propagé entre les différents appels.

Pour définir une monade en F# et utiliser les avantages de la syntaxe que je vais vous présenter dans un court instant, nous avons besoin de définir un type constructeur.

Un constructeur est une classe .NET qui contient des définitions de méthodes : pour les opérations bind et return, et éventuellement aussi pour d’autres opérations liées aux monades en F#. Pour que cette classe soit correctement définie, nous devons implémenter au moins 3 méthodes : Return(value), Bind (value, continuation) et Zero(). La méthode Zero() retourne la valeur monadique par défaut. Une fois que l’on a mis en place cette classe, on l’instancie.

La méthode ci-dessus est la méthode correcte pour définir une monade de base en F#.

On peut alors profiter d’une syntaxe plus sympathique pour réécrire notre fonction getContactNumbers.

Admirez donc ce code !

Notre code qui auparavant se déportait sur la droite et n’était que difficilement lisible est maintenant véritablement propre et concis. Que s’est-il passé pour qu’on puisse arriver à un si joli résultat ? Nous avons en fait utilisé notre instance, une jolie typo et les nouveaux mots-clés let ! et return de façon à améliorer la lisibilité. En réalité, let ! ne fait qu’appeler l’opération Bind(…) de notre monade, capturant de façon implicite la continuation actuelle, tandis que le mot-clé return appelle notre méthode Return(…). Si vous êtes un (e) habitué (e) de la programmation impérative, il est vraiment important que vous compreniez que le mot-clé return n’a rien à voir avec le mot-clé return tel que vous pourriez le rencontrer en C, C++ ou en C# par exemple : ça ne va pas arrêter l’exécution, return correspond juste au moyen d’encapsuler une valeur dans un contexte tel qu’il est exprimé par la monade utilisée.

Vous connaissez déjà bien une monade…

Je vous ai expliqué le concept de monade : bien qu’étrange au premier abord, c’est un concept générique et vraiment puissant. La preuve en est que si vous avez lu mon article précédent, qui était sur les séquences, vous avez déjà rencontré et utilisé les monades.

En effet, les séquences en F# sont des monades ! Et en Haskell, même les listes sont des monades. Et pourquoi ça ? Tout simplement, parce que si vous prenez le temps de bien y réfléchir, les listes ou les séquences sont simplement un contexte entourant des valeurs, et vous voulez peut-être propager ce contexte que forment les séquences au travers d’un enchainement de calculs tout en modifiant les valeurs qui y sont encapsulées.

Ici, le mot-clé yield est un mot-clé strictement équivalent au mot-clé return, il a été introduit pour rendre l’utilisation du mot-clé return plus naturel pour les séquences. Si vous connaissez la notion de générateurs dans des langages tels que le Python ou le C#, vous comprendrez probablement pourquoi.

Windows 8, bientôt là…

Comme vous le savez probablement déjà, Windows 8 sortira dans quelques semaines. Si vous essayez déjà de voir comment développer des applications avec une interface Metro en C#, vous avez du rencontrer 2 nouveaux mots-clés (C# 5.0) : async et await.

WinRT, la bibliothèque native qui se cache derrière Metro, a été conçue pour utiliser et forcer l’utilisation d’un modèle asynchrone pour gérer le parallélisme. L’utilisation du parallélisme est nécessaire pour gérer, hors du thread UI dédié à l’interface utilisateur, des opérations chronophages, de façon à éviter un freeze de l’interface utilisateur et une dégradation de l’expérience utilisateur.

Le principal avantage du modèle asynchrone est que cela empêche la plupart des développeurs (95 % d’entre eux ?) de continuer à manipuler au petit bonheur la chance les threads et la synchronisation objet. En effet, la plupart des développeurs ne savent pas comment utiliser correctement le parallélisme et…

UN DEVELOPPEUR NEOPHYTE + THREADING + EFFETS DE BORD = CHAOS

Vous pouvez remplacer chaos par :

• Interblocage (Deadlocks)
• Incapacité à déboguer correctement les programmes
• Un programme qui crashe une à deux fois par mois sans raison
• Crashs informatiques
• Accidents de train
• Accidents d’avion
• …
• Fin du monde ?

Et maintenant, je suis même en train de me demander si ce n’est pas la raison pour laquelle la programmation fonctionnelle a récemment fait son comeback.

En effet, nous sommes dans l’ère du parallélisme : des processeurs multicœurs/ calculs distribués et ressources partagées avec le Cloud/ web et communication (avec une augmentation de la part des entrées/sorties dans les programmes). Les langages de programmation fonctionnelle, en décourageant les effets de bord, rendent le parallélisme plus sûr, et facilitent son usage grâce à de nombreux concepts puissants.

Le principal désavantage du modèle asynchrone est qu’il n’est pas naturel. Regardons par exemple ce programme en C# :

Grâce à toutes ces lignes de code, je ne fais que lire 3 lignes d’un Stream en utilisant une méthode asynchrone, puis je les affiche. Admirez à quel point ce code peut être intuitif …Et réjouissez-vous : sans clôture en C#, vous ne pourriez pas l’écrire si facilement.

Plus haut, lorsque nous étions en route vers une meilleure compréhension du concept de monades, j’ai écrit que les callbacks pouvaient être considérés comme un concept similaire aux continuations. Regardez le code : il se déporte vers la droite, et nous capturons des continuations, le fameux « quelle opération devrait s’exécuter ensuite ». Vous le devinez maintenant, il y a une monade pour s’occuper des opérations asynchrones.

En F#, elle correspond à async et s’utilise ainsi :

Ici, let ! permet de capturer la continuation actuelle et de l’appeler avec le résultat une fois que la page est téléchargée.

C# : le prochain langage de programmation fonctionnelle ?

Croyez-le ou non, mais après avoir emprunté le concept de ramasse-miettes (LISP), du paradigme de la POO (LISP), des clotûres, Linq, C# emprunte désormais un autre concept puissant au monde de la programmation fonctionnelle : les monades, et plus précisément la monade async.

Les concepteurs de WinRT ont fait un choix : entre donner la permission aux développeurs d’utiliser les threads – ie. « permettre à des enfants de jouer avec un bazooka » - et passer à un modèle de programmation peu naturel pour les langages impératifs. Pour transformer le C#, asynchrone, en un langage utilisable, ils avaient besoin d’un ajout puissant venant de la programmation fonctionnelle.

Mais il nous reste quand même un problème : qui, parmi les développeurs C#, connaît les monades ?

Qui sait que le mot clé await est en réalité un bind déguisé qui capture la continuation actuelle au sein d’une méthode async ?

Vous pourriez arguer, et vous auriez raison, que la remarque n’est pas forcément très pertinente, car l’important est de savoir comment se servir du concept. Et moi, je vous répondrais que les concepteurs de SE pensaient la même chose quand ils ont introduit la notion d’ordonnancement préemptif et ont donné aux développeurs des APIs process et threading.

- Dorian Corompt -

- Traduit de l’anglais par Céline Bouillon -

Dans le cadre d’un nouveau projet Windows 8, nous nous posons la question qui est “Comment utiliser la navigation à partir de nos ViewModels?” Nous allons vous montrer comment intégrer un service de navigation qui pourra être utilisé au travers de nos ViewModels.

Définition de l’interface INavigationService

Avant de pouvoir naviguer au travers de nos ViewModels, nous avons besoin d’en définir le squelette :

L’interface étant créée, nous allons détailler l’utilité de chacune des signatures de méthodes :

• void NavigateTo(Type page, object parameter=null)
  Cette méthode va nous permettre naviguer vers une autre page avec ou sans paramètre.
• void GoBack() 
  Cette méthode appellera la méthode native GoBack de l’objet Frame pour revenir à la page précédemment vue
• void Initialized(Frame frame)
  Point d’entrée de la navigation qui va définir les vues que vous voulez enregistrer.
  L’object Frame est  celui qui est définit dans le fichier App.xaml.cs. Cet objet est le point d’entrée de votre application  
• object Parameter { get; }
  Cet attribut jouera un rôle particulier car c’est au travers de celui-ci que nous pourrons récupérer le paramètre passer d’un ViewModel à un autre.
   

Création de la classe de Navigation 

Une fois l’interface créée nous pouvons donc l’implémenter comme suit:

Comment utiliser cette nouvelle classe

La mise en œuvre de cette classe se fait en trois étapes qui sont les suivantes :

1- Créer une classe intermédiaire n’autorisant l’accès qu’à une seule instance de la navigation et lui permettant par la même occasion d’enregistrer les vues créées dans votre application

2- Renseigner les vues de votre application au travers de la précédente classe créée

Cette initialisation s’effectue pour le cadre de cette démo dans le le fichier du App.xaml.cs

3- La navigation à partir des ViewModels

A partir de cette étape, il ne vous reste plus qu’à utiliser la méthode NavigateTo de la classe NavigationService pour naviguer d’une page à une autre. Comme vous pouvez le voir ci-dessous, une seule ligne de code nous permet de gérer la navigation d’une vue courante à une autre.

L’exemple ci-dessus montre l’utilisation du service sans passer de paramètre. Dans le cas où nous avons besoin de passer une quelconque information à un autre ViewModel  grâce à un paramètre, il nous faut alors utiliser la navigation de la manière suivante :

Code source

Le code source de la démo se trouve ICI.

- Patrick Payet -

Le web continue de se remplir d’APIs web, ces services offerts par les sociétés de l’Internet qui permettent d’exploiter leurs données. Ils peuvent être sécurisés ou accessibles à quiconque ; gratuits ou payants ; en REST ou en SOAP ; et ont encore bien d’autres différences les uns avec les autres.

Source : ProgrammableWeb

Mais tous ont un but commun : offrir aux développeurs un moyen simple d’exploiter des données depuis une multitude de clients différents, du PC au téléphone en passant par la télévision connectée. Dans l’optique de simplifier la conception d’APIs Web, les équipes ASP.NET et WCF ont créé un tout nouveau framework : ASP.NET Web API.

Dans cet article nous verrons les bases du développement d’APIs Web avec ce dernier, nous survolerons les fonctionnalités plus avancées, et finirons avec quelques ressources complémentaires qui vous permettront de vous lancer dans le développement de votre première API Web avec ASP.NET Web API.

Comment ça marche ?

ASP.NET Web API est certes un nouveau framework de la stack ASP.NET, il n’en reprend pas moins les concepts fondamentaux introduits avec ASP.NET / ASP.NET MVC. En particulier, ses ressemblances avec ASP.NET MVC feront de l’apprentissage pour les développeurs l’ayant pratiqué, un vrai jeu d’enfant !

Rapide rappel d’ASP.NET MVC

Pour les autres, revenons rapidement sur ASP.NET MVC : ici, le but est de séparer la logique d’une application (en l’occurrence d’une application web) en trois parties distinctes :

· la vue : c’est la partie que voit l’utilisateur et avec laquelle il interagit, généralement faite d’HTML agrémenté de balises serveur, de CSS et de JavaScript pour l’interaction côté client.

· le contrôleur : c’est la partie serveur qui traite la demande, communique potentiellement avec une base de données et envoie une réponse au client.

· le modèle : c’est la donnée brute qui est traitée par le contrôleur et envoyée à la vue pour y être affichée.

Le contrôleur joue un rôle central car c’est lui qui reçoit la requête, traite les données du modèle et redirige vers la page qui convient. Chaque contrôleur est une classe .NET (généralement C# ou VB.NET) qui contient des méthodes que l’on appelle des actions car ce sont celles-ci que peut activer le client. Chaque action est définie par une URI définie par une ou plusieurs routes déclarée au lancement de l’application web. Le client va donc demander une action grâce à une URI ; l’action va être traitée et la vue associée à l’action, contenant les données de sortie, va être renvoyée au client.

Prenons un exemple : dans un site de recettes culinaires, on pourrait trouver un contrôleur Recette qui dispose d’une action AfficherTopRecettes permettant d’afficher les recettes les plus populaires et prenant un paramètre entier qui s’il est présent, filtre sur l’ID de la recette. Cette action peut être activée depuis l’adresse : http://www.contoso.com/recette/afficherTopRecettes/10

Ici, la « route » qui nous a permis d’arriver à l’action en question est : http://www.contoso.com/{contrôleur}/{action}/{paramètre}

Pour plus d’informations sur ASP.NET MVC voir les articles sur le site officiel : http://www.asp.net/mvc

Un fonctionnement similaire

ASP.NET Web API fonctionne sur le même principe : un client souhaite récupérer une donnée brute : pour cela il va passer par l’URI correspondant à l’action à effectuer. La requête va être passée au contrôleur en question, traitée par celui-ci, qui va potentiellement interroger une base de données pour en récupérer des données (modèle), qui seront finalement renvoyées au client.

Le fonctionnement est donc extrêmement similaire, cependant à deux exceptions prêtes :

· Bien évidemment, il n’y a pas de vues : les données sont sérialisée (XML ou JSON par défaut) et renvoyées directement au client.

· Contrairement à ASP.NET MVC, les actions sont par défaut implicites dans ASP.NET Web API : l’action à exécuter est déduite des paramètres passés dans la requête et du verbe HTTP (GET, POST, PUT, DELETE).

Par exemple, si nous décidons d’ajouter une partie Web API dans le site culinaire que je prenais comme exemple plus haut, nous pouvons imaginer faire des requêtes comme celles-ci :

· [GET] http://www.contoso.com/api/recette/ : renvoi toutes les recettes

· [GET] http://www.contoso.com/api/recette/1242 : renvoi la recette dont l’ID est 1242

· [DELETE] http://www.contoso.com/api/recette/1242 : supprime la recette dont l’ID est 1242

· [POST] http://www.contoso.com/api/recette/ : ajoute une nouvelle recette depuis les données de formulaire POST

· [PUT] http://www.contoso.com/api/recette/1242 : met à jour la recette dont l’ID est 1242 depuis les données de formulaire POST

Note : ASP.NET Web API, qui se base entièrement sur le protocole HTTP, s’inscrit donc dans le modèle REST de conception des services web.

Notre premier contrôleur ASP.NET Web API

Pour cela nous allons définir une classe qui étend ApiController et qui définit ces mêmes actions :

Quelques points à noter dans cette classe :

· Si le nom des actions commencent par le verbe HTTP (Get*, Post*, Put*, Delete*) auxquelles elles sont associées, les actions n’ont pas besoin d’être décorées. Dans le cas où l’on veut changer le nom, il suffit de rajouter l’attribut correspondant : ici, on a décoré la méthode ListAllReceipes d’un HttpGetAttribute pour signaler que la méthode devait être utilisée lors d’un GET.

· On utilise le pattern Repository pour toute la manipulation des données.

· On obtient l’instance courante du Repository via de l’injection de dépendance. Pour cela on a préalablement enregistré la classe qui va résoudre les dépendances : j’ai utilisé Unity, mais de nombreux autres projets permettent de le faire, tels que Ninject, Castle Windsor, etc.

· La méthode ListAllReceipes renvoi un IQueryable<T> : de cette manière il est possible de rajouter des paramètres à la requête pour ne prendre qu’un certain nombre de résultats ou faire de la pagination, sans récupérer tous les enregistrements de la base de données et ainsi gagner en performances.

· La méthode Post prend directement une instance de la classe Recette : la transformation des valeurs de formulaire en instance de classe est fait automatiquement, et peut être personnalisée.

· Il est possible d’autoriser seulement certains utilisateurs / rôles à accéder à certaines actions ; pour cela il suffit de rajouter un attribut de type AuthorizeAttribute sur les actions ou sur le contrôleur tout entier. Pour le reste, les autorisations se basent sur le modèle habituel d’authentification d’ASP.NET

Les fonctionnalités avancées

Il existe d’autres fonctionnalités qui viennent étoffer les possibilités d’ASP.NET Web API :

Négociation de contenus

Côté client, on peut préciser le type de formatage que l’on attend en sortie : via le header HTTP, Accept on peut demander explicitement que le retour soit formaté en XML ou en JSON. C’est la négociation de contenus (Content Negociation). Cela permet de renvoyer au client les données sous le format qui lui est le plus simple à traiter. On peut également personnaliser le formatage en ajoutant la prise en compte de nouveaux formats.

Validation

La validation des données est présente sous la même forme qu’ASP.NET MVC. On pourra décorer nos classes de modèle avec des attributs de System.ComponentModel.DataAnnotations tels que Required, Range, MaxLength, RegularExpression, etc. Ainsi les données seront automatiquement validées et les erreurs pourront être renvoyées côté client pour y être traitées.

Filtres

De même que dans ASP.NET MVC, il est possible de définir des classes qui vont intercepter les requêtes et exécuter du code : ce sont les filtres. Ces filtres pourront être ensuite utilisé globalement, ou bien être mis unitairement sur un contrôleur ou une action.

Requêtes avancées

Comme précisé précédemment, il est possible grâce au IQueryable<T> de rajouter des paramètres supplémentaires à la requête : sélection d’une plage de données, filtre, ordonnancement, etc.

Pour cela on va utiliser les conventions d’URI d’OData. Par exemple, la requête suivante nous permettra de récupérer les résultats de la 3ème page de 10 recettes, ordonnés par nom: http://www.contoso.com/api/recette/?$skip=20&$top=10&$orderby=Name

Personnalisation

Tout comme ASP.NET MVC, ASP.NET Web API peut être entièrement personnalisé : il est possible d’étendre toutes les classes du processus de traitement d’une requête pour l’adapter à ses besoins. On utilisera alors le même mécanisme de résolution des dépendances que celui utilisé avec le pattern Repository.

Pourquoi utiliser ASP.NET Web API

ASP.NET Web API est un framework très simple à mettre en place, qui n’en est pas moins puissant et personnalisable. Il s’intègre sans problème aux sites ASP.NET / ASP.NET MVC existant et peut être auto-hébergé depuis une application console par exemple.

Plus important encore, il embrasse le concept de programmation RESTful ce qui le rend utilisable depuis n’importe quel terminal capable de passer des requêtes HTTP. Comme le service peut en outre adapter le formatage des données renvoyées au client qui les demande, cela le rend particulièrement cohérent pour les scénarii de mobilité, ou d’interopérabilité multi-clients.

Quelques resources pour bien commencer

· Pour bien commencer, installez le framework depuis la page officielle : http://www.asp.net/web-api

· Un excellent tutorial qui entre particulièrement en détail dans le code côté client avec JQuery : http://stephenwalther.com/blog/archive/2012/03/05/introduction-to-the-asp-net-web-api.aspx

· Le blog d’Henrik Nielsen de l’équipe ASP.NET pour suivre toutes les nouveautés sur ASP.NET Web API : http://blogs.msdn.com/b/henrikn/

· Plus d’infos sur la négociation de contenus : http://www.tugberkugurlu.com/archive/asp-net-web-api-mediatypeformatters-with-mediatypemappings

- Sebastien Mornas -