Ajout de commandes à votre extension

Précédent : Création d’une extension. Nous allons commencer par le projet créé dans cet article.

Maintenant que vous avez créé votre extension, il est temps d’y ajouter des commandes.

Ajouter des commandes

Nous pouvons commencer par accéder au /Pages/<ExtensionName>Page.cs fichier. Ce fichier est listPage qui s’affiche lorsque l’utilisateur sélectionne votre extension. Dans ce cas, vous devriez voir :

public <ExtensionName>Page()
{
    Icon = IconHelpers.FromRelativePath("Assets\\StoreLogo.png");
    Title = "My sample extension";
    Name = "Open";
}
public override IListItem[] GetItems()
{
    return [
        new ListItem(new NoOpCommand()) { Title = "TODO: Implement your extension here" }
    ];
}

Ici, vous pouvez voir que nous avons défini l’icône de la page, le titre et le nom affichés au niveau supérieur lorsque la commande est sélectionnée. La GetItems méthode est l’endroit où vous retournerez la liste des commandes que vous souhaitez afficher sur cette page. Actuellement, il ne retourne qu'une commande unique qui ne fait rien. Essayons plutôt de faire en sorte que cette commande ouvre cette page dans le navigateur web par défaut de l’utilisateur.

  1. Effectuez la mise à jour GetItems vers les éléments suivants :
public override IListItem[] GetItems()
{
    var command = new OpenUrlCommand("https://learn.microsoft.com/windows/powertoys/command-palette/adding-commands");
    return [
        new ListItem(command)
        {
            Title = "Open the Command Palette documentation",
        }
    ];
}

Pour mettre à jour l’extension dans la palette de commandes, vous devez :

  1. Déployer votre extension
  2. Dans la palette de commandes, tapez la commande « recharger » pour actualiser les extensions de la palette

Capture d’écran du rechargement

Note

Il existe plusieurs options de rechargement, veillez à sélectionner les extensions de palette de commandes de rechargement

  1. Faites défiler jusqu’à votre extension et appuyez sur Enter
  2. Appuyez enter sur Open the Command Palette documentation
  3. Vous devez voir que la commande ouvre la documentation de la palette de commandes

OpenUrlCommand est un assistance pour l’ouverture d’une URL dans le navigateur web par défaut de l’utilisateur.

Extension de débogage

Lorsque vous créez votre extension, vous souhaiterez probablement le déboguer.

  1. Ajoutez un message de débogage à la GetItems fonction.
    public override IListItem[] GetItems()
    {
        var command = new OpenUrlCommand("https://learn.microsoft.com/windows/powertoys/command-palette/adding-commands");
    
+       Debug.Write("Debug message from GetItems");
    
        return [
            new ListItem(command)
            {
                Title = "Open the Command Palette documentation",
            }
        ];
    }
  1. Déployer votre extension
  2. Vérifiez que vous êtes dans la configuration de débogage
Instructions pour confirmer la configuration du débogage
  1. Examinez la barre d’outils en haut de Visual Studio
  2. Vous verrez une liste déroulante qui indique soit DebugRelease (en regard du bouton ▶️ vert « Démarrer »)
  3. S’il indique Release, cliquez sur la liste déroulante et sélectionnez Debug.

Screenshot de la barre d'outils de Visual Studio qui affiche Debug

  1. Exécutez l’application dans le débogage en appuyant sur le bouton ▶️ vert « Démarrer » ou appuyez sur F5
  2. Vérifiez que la fenêtre Sortie est définie pour afficher Debug la sortie (Ctrl + Alt + O)

Screenshot du panneau Sortie de Visual Studio

  1. Dans la palette de commandes, exécutez reload
  2. Accédez à votre extension et sélectionnez Open the Command Palette documentation.
  3. Dans la fenêtre Sortie de Visual Studio, vous devez voir Debug message from GetItems

Commande InvokableCommand

Poursuivons la génération d’une nouvelle commande, qui affiche un MessageBox. Pour ce faire, nous devons créer une classe qui implémente InvokableCommand.

  1. Dans Visual Studio, ajoutez un nouveau fichier de classe à votre répertoire Pages
    • Raccourci clavier : Appuyez sur Ctrl + Maj + A
    • Ou dans le Explorateur de solutions, accédez à Project > Ajouter un nouvel élément...
  2. Dans la boîte de dialogue Ajouter un nouvel élément :
    1. Sélectionnez Classe dans la liste.
    2. Nommez votre fichier de classe : ShowMessageCommand.cs
    3. Cliquez sur Ajouter.
  3. Remplacez le code de classe par défaut par :
using System.Runtime.InteropServices;

namespace <ExtensionName>;

internal sealed partial class ShowMessageCommand : InvokableCommand
{
    public override string Name => "Show message";
    public override IconInfo Icon => new("\uE8A7");

    public override CommandResult Invoke()
    {
        // 0x00001000 is MB_SYSTEMMODAL, which will display the message box on top of other windows.
        _ = MessageBox(0, "I came from the Command Palette", "What's up?", 0x00001000);
        return CommandResult.KeepOpen();
    }


    [DllImport("user32.dll", CharSet = CharSet.Unicode)]
    public static extern int MessageBox(IntPtr hWnd, string text, string caption, uint type);
}

Nous pouvons maintenant ajouter cette commande à la liste des commandes dans le <ExtensionName>Page.cs fichier :

  1. Dans le <ExtensionName>.cs, mettez à jour le GetItems.
public override IListItem[] GetItems()
{
    var command = new OpenUrlCommand("https://learn.microsoft.com/windows/powertoys/command-palette/creating-an-extension");
    var showMessageCommand = new ShowMessageCommand();
    return [
        new ListItem(command)
        {
            Title = "Open the Command Palette documentation",
        },
        new ListItem(showMessageCommand),
    ];
}
  1. Déployer votre extension
  2. Dans la palette de commandes, Reload

Et presto - une commande pour afficher une boîte de message !

Conseil / Astuce

À ce stade, vous souhaiterez probablement initialiser un dépôt Git / {autre méthode de contrôle de code source de votre choix} pour votre projet. Cela facilite le suivi des modifications et le partage de votre extension avec d’autres personnes.

Nous vous recommandons d'utiliser GitHub, car il est facile de collaborer sur votre extension avec d'autres personnes, d'obtenir des commentaires et de les partager avec le monde.

Types de pages

Jusqu’à présent, nous n’avons travaillé qu’avec des commandes qui « font quelque chose ». Toutefois, vous pouvez également ajouter des commandes qui affichent des pages supplémentaires dans la palette de commandes. Il existe deux types de « Commandes » dans la palette :

  • InvokableCommand - Il s’agit de commandes qui font quelque chose
  • IPage - Il s’agit de commandes qui affichent quelque chose

IPage Étant donné que les implémentations sont des ICommand, vous pouvez les utiliser exactement partout où vous pouvez utiliser des commandes. Cela signifie que vous pouvez les ajouter à la liste de commandes de niveau supérieur ou à une liste de commandes sur une page, au menu contextuel d’un élément, etc.

Il existe deux types de pages différents que vous pouvez afficher :

  • ListPage : il s’agit d’une page qui affiche une liste de commandes. C’est avec cela que nous avons travaillé jusqu’à présent.

Capture d’écran de ListPage

  • ContentPage : il s’agit d’une page qui affiche du contenu enrichi à l’utilisateur. Cela vous permet de spécifier du contenu abstrait et de laisser la palette de commandes s’inquiéter du rendu du contenu dans une expérience native. Il existe deux types de contenu différents pris en charge jusqu’à présent :

Capture d’écran de l’extension à l’aide de ContentPage

  • Contenu du formulaire : il s’agit du contenu qui affiche un formulaire à l’utilisateur, puis retourne les résultats de ce formulaire à l’extension. Celles-ci sont alimentées par Cartes adaptatives, ce qui est utile pour obtenir une entrée utilisateur ou afficher des mises en page d'informations plus complexes. Pour plus d’informations, consultez FormContent .

Capture d’écran du contenu du formulaire

Ajouter d’autres commandes

Commencez par ajouter une nouvelle page qui affiche une liste de commandes. Créez une classe qui implémente ListPage.

  1. Dans le Pages dossier, créez une classe appelée MySecondPage
  2. Mettez à jour le code pour :
using Microsoft.CommandPalette.Extensions.Toolkit;
using System.Linq;

namespace <ExtensionName>;

internal sealed partial class MySecondPage : ListPage
{
    public MySecondPage()
    {
        Icon = new("\uF147"); // Dial2
        Title = "My second page";
        Name = "Open";
    }

    public override IListItem[] GetItems()
    {
        // Return 100 CopyText commands
        return Enumerable
            .Range(0, 100)
            .Select(i => new ListItem(new CopyTextCommand($"{i}")) 
            {
                Title = $"Copy text {i}" 
            }).ToArray();
    }
}

1.Mettez à jour la <ExtensionName>Page.cs page pour inclure cette nouvelle page :

    public override IListItem[] GetItems()
    {
        OpenUrlCommand command = new("https://learn.microsoft.com/windows/powertoys/command-palette/creating-an-extension");
        return [
            new ListItem(command)
            {
                Title = "Open the Command Palette documentation",
            },
            new ListItem(new ShowMessageCommand()),
+           new ListItem(new MySecondPage()) { Title = "My second page", Subtitle = "A second page of commands" },
        ];
    }
  1. Déployer votre extension
  2. Dans la palette de commandes, Reload

Vous devriez maintenant voir une nouvelle page dans l'extension, affichant 100 commandes qui copient un nombre dans le presse-papiers.

Suivant : Mettre à jour une liste de commandes