Création d’une interface graphique

Ecrit par @mickyballadelli

Le 4eme problème des Mini Scripting Games de Ed Wilson est le suivant:

Créer un script qui liste les processus en exécution, ensuite créer une interface graphique pour les visualiser, et permettre à l’utilisateur de sélectionner un ou plusieurs processus pour les arrêter.

Alors voici :

Avant tout, il faut qu’on dise à Powershell qu’on va utiliser deux librairies de fonctions, la première pour créer l’interface graphique (GUI) à travers les Forms de Windows, et la deuxième pour utiliser des références géométriques afin d’indiquer la taille et la position dess contrôles graphiques.

Nous allons ensuite créer notre interface avec une forme qui contiendra les objets dont nous allons avoir besoin :

Définition de la taille et du titre de la fenêtre principale :

Création du bouton pour lister les processus :

On peut lui donner un nom:

Lui définir une taille (largeur, hauteur) :

Lui dire quoi afficher :

Définir que si on appuie sur Tab, c’est ce bouton qui reçoit en premier le focus :

Lui dire où se positionner par rapport à l’origine en haut à gauche de notre forme :

Lui dire que si on click dessus, on veut être appelés dans notre script block :

Et finalement l’ajouter à notre forme :

Nous allons faire la même chose avec le bouton Kill

Nous allons maintenant créer notre ListView, ce type de contrôle nous permet de créer des listes avec plusieurs colonnes et on va le customiser un peu :

C’est notre 3eme contrôle dans notre forme, le 3eme à recevoir le focus en navigation Tab

Définition de la taille et emplacement :

Le type de view, sachant qu’il y a plusieurs types un peu comme la fenêtre Explorer, avec les petits ou grands icônes, Tile (icone + texte), et Details.

Un peu de cosmétique ce qui permettra de créer une bordure à nos éléments de la liste :

Par défaut, lors de la sélection d’un élément, ListView reflète l’élément sélectionné mais pas ses sous-éléments. Nous voulons que toute la ligne soit sélectionnée d’un point de vue visuel.

Marrant comment un bit peut grandement changer les choses, en mettant AllowColumnReorder à 1, les colonnes de notre liste peuvent être réorganisées comme on le désire :

On va permettre la création et gestion des scroll bars automatiquement :

Par défaut, une ListView fait le tri que sur la première colonne, or nous allons en avoir plusieurs, ce qui veut dire que nous allons devoir gérer le triage nous-mêmes à travers une fonction qu’on verra plus bas appelée SortList. Du coup, on indique à la ListView que nous ne voulons pas de Sorting, et que si quelqu’un clique sur une colonne, on veut être appelé avec l’ID de la colonne comme paramètre.

Maintenant gérons la structure de notre ListView, créons les colonnes et donnons une largeur à chaque colonne :

Les ListViews nous permettent de stocker un objet data perso quel qu’il soit au sein de la Liste, des colonnes et des éléments. Nous allons en profiter pour placer dans chaque colonne un objet qui se souviendra la direction du triage, Ascending ou Descending :

Dernière ligne droite, gérons les changements de taille de notre fenêtre, pour que la taille de la ListView soit toujours en fonction de celle de la forme, ceci se fait avec un callback sur un script block :

Il ne manque plus que les données, dont j’ai regroupé toute la fonctionnalité dans une fonction :

Notre IHM est prête, nous pouvons l’afficher :

Voyons maintenant notre fonction AddData

Les paramètres de notre fonction sont un array contenant la liste des processus ainsi que la ListView.

Commençons par indiquer à la ListView que nous allons la mettre à jour, ceci permettra à la ListView de bloquer l’interface pendant que la maj s’opère :

Cette fonction sera utilisée également par le bouton List ce qui rafraichira la liste, Du coup nettoyons d’eventuels élément avant d’ajouter notre nouvelle liste.

Nous allons maintenant traverser chaque élément de l’array, et placer toutes les données dans un ListViewItem. Celui-ci est composé d’un Item, et de ses sous-items, chaque sous item étant une colonne :

Par exemple, la colonne avec l’ID du processus sera ajouté ainsi :

Et ça nous permet de formater les données de chaque colonne comme on le désire, ici la taille de la mémoire utilisée sera en mégaoctets :

Une fois toutes les colonnes remplies, nous pouvons insérer l’item dans la liste :

Une fois notre liste finalisée, nous pouvons dire à la ListView qu’on a fini :

Voyons maintenant notre fonction de triage, SortList:

Dans la première partie nous cherchons à savoir sur quelle colonne l’utilisateur a cliqué pour ensuite récupérer notre objet Tag qui contient la direction du triage. Ensuite nous laissons Powershell effectuer le triage dans la bonne direction avec la cmdlet Sort-object.

Voici maintenant les callbacks des boutons.

Celui du bouton List est très simple, si on click on fait un refresh de la liste :

Celui du bouton Kill est un peu plus compliqué, nous devons trouver l’ID du process. La colonne ID est la deuxième, même si l’utilisateur bouge les colonnes de place. Donc on va directement sur cette colonne récupérer l’ID du process et trouver l’objet dans la liste des processus équivalent. Ensuite nous allons dire à cet objet d’arrêter le processus. Le tout dans un foreach pour chaque élément de la liste sélectionné.

Voici un screen shot du script:

Voici le script complet:

Partager ce contenu

  • Je trouve votre site super bien fait je voulais vous dire bravo car il m’a bien aidé et je pense qu’il a aidé plein de personne comme les gens de ma classe.
    Merci

  • Lol

    Merci super boulot qui m’a beaucoup aidé !

  • laurent B

    bonjour,

    merci beaucoup pour les explications ca aide beaucoup. Par contre je viens de m’y mettre et je ne comprends pas cette erreur:

    « < : Le terme «<» n'est pas reconnu comme nom d'applet de commande, fonction, fichier de script ou programme exécutable. Vérifiez l'orthographe du nom, ou si un chemin d'accès existe,
    vérifiez que le chemin d'accès est correct et réessayez.
    Au caractère D:PowershellListKillProcess.ps1:85 : 27
    + $proc = $procs | where {<a href="about:blank" data-mce-href=" …"

    suis je le seul avoir ce soucis?

    merci