Créer des packages UWP

Le Universal Windows Platform (UWP) fournit une plateforme d’application commune pour chaque appareil qui s’exécute Windows 10. Dans ce modèle, les applications UWP peuvent appeler les API WinRT communes à tous les appareils, ainsi qu’aux API (y compris Win32 et .NET) spécifiques à la famille d’appareils sur laquelle l’application est en cours d’exécution.

Dans cette procédure pas à pas, vous allez créer un package NuGet avec un composant UWP natif (y compris un contrôle XAML) qui peut être utilisé dans les projets managés et natifs.

Prerequisites

  1. Visual Studio 2017 ou Visual Studio 2015. Installez gratuitement l’édition Community 2017 de visualstudio.com ; vous pouvez également utiliser les éditions Professional et Enterprise.

  2. Interface en ligne de commande NuGet. Téléchargez la dernière version de nuget.exe depuis nuget.org/downloads, en l’enregistrant à un emplacement de votre choix (le téléchargement est le .exe directement). Ajoutez ensuite cet emplacement à votre variable d’environnement PATH si ce n’est pas déjà fait.

Créer un composant Windows Runtime UWP

  1. Dans Visual Studio, choisissez File > New > Project, développez le nœud Visual C++ > Windows > Universal, sélectionnez le composant Windows Runtime (Windows universel)) modèle, remplacez le nom par ImageEnhancer, puis cliquez sur OK. Acceptez les valeurs par défaut pour la version cible et la version minimale lorsque vous y êtes invité.

    Création d'un nouveau projet de composant d'exécution Windows UWP

  2. Cliquez avec le bouton droit sur le projet dans Solution Explorer, sélectionnez Add > Nouvel élément, Cliquez sur le nœud Visual C++ > XAML, sélectionnez Templated Control, remplacez le nom par AwesomeImageControl.cpp, puis cliquez sur Add :

    Ajout d’un nouvel élément de contrôle modèle XAML au projet

  3. Cliquez avec le bouton droit sur le projet dans Solution Explorer, puis sélectionnez Properties. Dans la page Propriétés, développez Configuration Properties > C/C++ et cliquez sur Output Files. Dans le volet de droite, modifiez la valeur de Générer des fichiers de documentation XML sur Oui :

    Définition de générer des fichiers de documentation XML sur Oui

  4. Cliquez avec le bouton droit sur la solution maintenant, sélectionnez Build Batch, cochez les trois cases Debug dans la boîte de dialogue, comme indiqué ci-dessous. Cela garantit que lorsque vous effectuez une génération, vous générez un ensemble complet d’artefacts pour chacun des systèmes cibles pris en charge par Windows.

    Batch Build

  5. Dans la boîte de dialogue Génération batch, cliquez sur Générer pour vérifier le projet et créer les fichiers de sortie dont vous avez besoin pour le package NuGet.

Note

Dans cette procédure pas à pas, vous utilisez les artéfacts de débogage pour le package. Pour le package non-debug, vérifiez les options Release dans la boîte de dialogue Batch Build à la place et reportez-vous aux dossiers Release générés dans les étapes qui suivent.

Créer et mettre à jour le fichier .nuspec

Pour créer le fichier initial .nuspec , effectuez les trois étapes ci-dessous. Les sections qui suivent vous guident ensuite tout au long des autres mises à jour nécessaires.

  1. Ouvrez une invite de commandes et accédez au dossier contenant ImageEnhancer.vcxproj (il s’agit d’un sous-dossier ci-dessous où se trouve le fichier de solution).

  2. Exécutez la commande NuGet spec pour générer ImageEnhancer.nuspec (le nom du fichier est extrait du nom du fichier .vcxproj) :

    nuget spec
    
  3. Ouvrez ImageEnhancer.nuspec dans un éditeur et mettez-le à jour pour qu’il corresponde à ce qui suit, en remplaçant YOUR_NAME par une valeur appropriée. La <id> valeur, en particulier, doit être unique dans nuget.org (consultez les conventions d’affectation de noms décrites dans Création d’un package). Notez également que vous devez mettre à jour les balises d’auteur et de description, sinon vous obtiendrez une erreur lors de l’étape de conditionnement.

    <?xml version="1.0"?>
    <package >
        <metadata>
        <id>ImageEnhancer.YOUR_NAME</id>
        <version>1.0.0</version>
        <title>ImageEnhancer</title>
        <authors>YOUR_NAME</authors>
        <owners>YOUR_NAME</owners>
        <requireLicenseAcceptance>false</requireLicenseAcceptance>
        <description>Awesome Image Enhancer</description>
        <releaseNotes>First release</releaseNotes>
        <copyright>Copyright 2016</copyright>
        <tags>image enhancer imageenhancer</tags>
        </metadata>
    </package>
    

Note

Pour les packages créés pour la consommation publique, portez une attention particulière à l’élément <tags> , car ces balises aident d’autres personnes à trouver votre package et à comprendre ce qu’il fait.

Ajout de métadonnées Windows au package

Un composant Windows Runtime nécessite des métadonnées qui décrivent tous ses types disponibles publiquement, ce qui permet à d’autres applications et bibliothèques de consommer le composant. Ces métadonnées sont contenues dans un fichier .winmd, qui est créé lorsque vous compilez le projet et qui doit être inclus dans votre package NuGet. Un fichier XML avec des données IntelliSense est également généré en même temps et doit également être inclus.

Ajoutez le nœud suivant <files> au .nuspec fichier :

<package>
    <metadata>
        ...
    </metadata>

    <files>
        <!-- WinMd and IntelliSense files -->
        <file src="..\Debug\ImageEnhancer\ImageEnhancer.winmd" target="lib\uap10.0"/>
        <file src="..\Debug\ImageEnhancer\ImageEnhancer.xml" target="lib\uap10.0"/>
    </files>
</package>

Ajout de contenu XAML

Pour inclure un contrôle XAML avec votre composant, vous devez ajouter le fichier XAML qui a le modèle par défaut pour le contrôle (tel que généré par le modèle de projet). Cela se présente également dans la <files> section :

<?xml version="1.0"?>
<package >
    <metadata>
        ...
    </metadata>
    <files>
        ...

        <!-- XAML controls -->
        <file src="Themes\Generic.xaml" target="lib\uap10.0\Themes"/>

    </files>
</package>

Ajout des bibliothèques d’implémentation natives

Dans votre composant, la logique principale du type ImageEnhancer est en code natif, qui est contenue dans les différents ImageEnhancer.dll assemblys générés pour chaque runtime cible (ARM, x86 et x64). Pour les inclure dans le package, référencez-les dans la <files> section avec leurs fichiers de ressources .pri associés :

<?xml version="1.0"?>
<package >
    <metadata>
        ...
    </metadata>
    <files>
        ...

        <!-- DLLs and resources -->
        <file src="..\ARM\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-arm\native"/>
        <file src="..\ARM\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-arm\native"/>

        <file src="..\ARM64\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-arm64\native"/>
        <file src="..\ARM64\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-arm64\native"/>

        <file src="..\x64\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-x64\native"/>
        <file src="..\x64\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-x64\native"/>

        <file src="..\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-x86\native"/>
        <file src="..\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-x86\native"/>

    </files>
</package>

Ajout de .targets

Ensuite, les projets C++ et JavaScript qui peuvent consommer votre package NuGet ont besoin d’un fichier .targets pour identifier les fichiers d’assembly et winmd nécessaires. (C# et Visual Basic projets effectuent cette opération automatiquement.) Créez ce fichier en copiant le texte ci-dessous dans ImageEnhancer.targets et enregistrez-le dans le même dossier que le fichier .nuspec. Remarque : ce .targets fichier doit être le même nom que l’ID de package (par exemple, l’élément <Id> du .nupspec fichier) :

<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <ImageEnhancer-Platform Condition="'$(Platform)' == 'Win32'">x86</ImageEnhancer-Platform>
        <ImageEnhancer-Platform Condition="'$(Platform)' != 'Win32'">$(Platform)</ImageEnhancer-Platform>
    </PropertyGroup>
    <ItemGroup Condition="'$(TargetPlatformIdentifier)' == 'UAP'">
        <Reference Include="$(MSBuildThisFileDirectory)..\..\lib\uap10.0\ImageEnhancer.winmd">
            <Implementation>ImageEnhancer.dll</Implementation>
        </Reference>
    <ReferenceCopyLocalPaths Include="$(MSBuildThisFileDirectory)..\..\runtimes\win10-$(ImageEnhancer-Platform)\native\ImageEnhancer.dll" />
    </ItemGroup>
</Project>

Reportez-vous ensuite à ImageEnhancer.targets dans votre fichier .nuspec.

<?xml version="1.0"?>
<package >
    <metadata>
        ...
    </metadata>
    <files>
        ...

        <!-- .targets -->
        <file src="ImageEnhancer.targets" target="build\native"/>

    </files>
</package>

Finale .nuspec

Votre fichier final .nuspec doit maintenant ressembler à ce qui suit, où de nouveau YOUR_NAME doit être remplacé par une valeur appropriée :

<?xml version="1.0"?>
<package >
    <metadata>
    <id>ImageEnhancer.YOUR_NAME</id>
    <version>1.0.0</version>
    <title>ImageEnhancer</title>
    <authors>YOUR_NAME</authors>
    <owners>YOUR_NAME</owners>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>Awesome Image Enhancer</description>
    <releaseNotes>First Release</releaseNotes>
    <copyright>Copyright 2016</copyright>
    <tags>image enhancer imageenhancer</tags>
    </metadata>
    <files>
    <!-- WinMd and IntelliSense -->
    <file src="..\Debug\ImageEnhancer\ImageEnhancer.winmd" target="lib\uap10.0"/>
    <file src="..\Debug\ImageEnhancer\ImageEnhancer.xml" target="lib\uap10.0"/>

    <!-- XAML controls -->
    <file src="Themes\Generic.xaml" target="lib\uap10.0\Themes"/>

    <!-- DLLs and resources -->
    <file src="..\ARM\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-arm\native"/>
    <file src="..\ARM\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-arm\native"/>
    <file src="..\ARM64\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-arm64\native"/>
    <file src="..\ARM64\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-arm64\native"/>     
    <file src="..\x64\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-x64\native"/>
    <file src="..\x64\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-x64\native"/>
    <file src="..\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-x86\native"/>
    <file src="..\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-x86\native"/>

    <!-- .targets -->
    <file src="ImageEnhancer.targets" target="build\native"/>

    </files>
</package>

Empaqueter le composant

Une fois le référencement terminé .nuspec de tous les fichiers que vous devez inclure dans le package, vous êtes prêt à exécuter la pack commande :

nuget pack ImageEnhancer.nuspec

Cela génère ImageEnhancer.YOUR_NAME.1.0.0.nupkg. Pour ouvrir ce fichier dans un outil tel que l’Explorateur de packages NuGet et le déploiement de tous les nœuds, vous pourrez voir le contenu suivant :

Explorateur de packages NuGet montrant le package ImageEnhancer

Conseil / Astuce

Un .nupkg fichier est simplement un fichier ZIP avec une autre extension. Vous pouvez également examiner le contenu du package, puis, en passant .nupkg à .zip, mais n’oubliez pas de restaurer l’extension avant de charger un package sur nuget.org.

Pour rendre votre package disponible pour d’autres développeurs, suivez les instructions de publication d’un package.