Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision
Révision précédente
utilisateurs:roschan:tutoriel:creer_une_extension_gnome [Le 24/10/2017, 13:49]
Roschan créée (déplacée)
utilisateurs:roschan:tutoriel:creer_une_extension_gnome [Le 23/02/2018, 18:19] (Version actuelle)
abakkk [S'adapter à l'utilisateur]
Ligne 6: Ligne 6:
 Ce tutoriel concerne les personnes intéressées dans la **programmation** d'​extensions GNOME Shell. Ce tutoriel concerne les personnes intéressées dans la **programmation** d'​extensions GNOME Shell.
  
-Les informations présentées ici sont normalement valables au moins pour les versions 3.18 à 3.24 de GNOME Shell.+Les informations présentées ici sont normalement valables au moins pour les versions 3.18 à 3.26 de GNOME Shell.
  
 <note important>​Je partage ici mon expérience personnelle,​ mais je ne suis pas programmeur ni informaticien. <note important>​Je partage ici mon expérience personnelle,​ mais je ne suis pas programmeur ni informaticien.
Ligne 35: Ligne 35:
  
 ==== Javascript ==== ==== Javascript ====
 +
 Ce tutoriel n'est pas un cours sur le javascript, il est conseillé de se familiariser préalablement avec ce langage, qui n'est heureusement pas le plus compliqué en ce monde. Ce tutoriel n'est pas un cours sur le javascript, il est conseillé de se familiariser préalablement avec ce langage, qui n'est heureusement pas le plus compliqué en ce monde.
  
Ligne 47: Ligne 48:
  
 === Ne pas utiliser Wayland === === Ne pas utiliser Wayland ===
-Au moindre ​crash un peu brutal, avec Wayland, la session se ferme. On va donc plutôt utiliser Xorg pour le développement.+Au moindre ​bug un peu brutal, avec Wayland, la session se ferme. ​De plus, Wayland n'​autorise pas le rechargement à chaud de la session, ce qui empêche de tester le code ! 
 + 
 +On va donc plutôt utiliser Xorg pour le développement.
  
 <​note>​N'​oubliez pas de tester le résultat final avec Wayland quand même !</​note>​ <​note>​N'​oubliez pas de tester le résultat final avec Wayland quand même !</​note>​
Ligne 68: Ligne 71:
 Vous pouvez maintenant entièrement recharger GNOME Shell à partir du menu "​clic-droit"​ fournit par Nautilus sur les fichiers, et donc notamment sur le bureau. Vous pouvez maintenant entièrement recharger GNOME Shell à partir du menu "​clic-droit"​ fournit par Nautilus sur les fichiers, et donc notamment sur le bureau.
  
-<note important>​N'​utilisez pas ce script à la légère : si vous n'avez pas **désactivé le verrouillage de l'​écran**, l'utilisation de ce script vous obligerait à redémarrer pour pouvoir accéder de nouveau à votre session.</​note>​+<note important>​N'​utilisez pas ce script à la légère : **si l'​écran ​se verrouille** alors que vous venez d'utiliser ​ce script, cela vous obligerait à redémarrer ​l'​ordinateur ​pour pouvoir accéder de nouveau à votre session.</​note>​
  
 === En cas de crash total de la session graphique === === En cas de crash total de la session graphique ===
Ligne 80: Ligne 83:
 Avec ''​Alt+F2'',​ on trouve une fenêtre pour lancer des commandes. Cette fenêtre accepte des commandes "​spéciales"​ internes à GNOME Shell. Avec ''​Alt+F2'',​ on trouve une fenêtre pour lancer des commandes. Cette fenêtre accepte des commandes "​spéciales"​ internes à GNOME Shell.
  
-<​note>​Vous vous souvenez du code source téléchargé tout à l'​heure ? La boîte de dialogue lancée par ''​Alt+F2''​ est codée par ''​runDialog.js'',​ vous pouvez essayer d'y analyser son fonctionnement si ça vous amuse</​note>​+<​note>​Vous vous souvenez du code source téléchargé tout à l'​heure ? La boîte de dialogue lancée par ''​Alt+F2''​ est codée par ''​runDialog.js'',​ vous pouvez essayer d'y analyser son fonctionnement si ça vous amuse.</​note>​
  
 === Recharger === === Recharger ===
 +<​note>​Incompatible avec Wayland.</​note>​
 La commande spéciale ''​r''​ recharge GNOME Shell, cela peut prendre quelques instants. La commande spéciale ''​r''​ recharge GNOME Shell, cela peut prendre quelques instants.
  
 Les extensions notamment sont rechargées depuis le début, comme si l'​ordinateur venait d'​être allumé. Les extensions notamment sont rechargées depuis le début, comme si l'​ordinateur venait d'​être allumé.
- 
-<​note>​Incompatible avec Wayland.</​note>​ 
  
 === Looking Glass === === Looking Glass ===
Ligne 97: Ligne 99:
 <note important>​**LA SESSION NE DEVRA PAS SE VERROUILLER durant tout le temps que durera cette manipulation.** <note important>​**LA SESSION NE DEVRA PAS SE VERROUILLER durant tout le temps que durera cette manipulation.**
  
-Vous pouvez désactiver le verrouillage de l'​écran dans //​Paramètres -> Confidentialité//,​ ou encore installer l'​extension **Caffeine** (activez-la __tout le temps__ que durera la manipulation ci-dessous). Si votre session se verrouille, vous ne pourrez pas la déverrouiller.</​note>​+Vous pouvez désactiver le verrouillage de l'​écran dans //​Paramètres -> Confidentialité//,​ ou encore installer l'​extension **Caffeine** (activez-la __tout le temps__ que durera la manipulation ci-dessous). 
 + 
 +Si votre session se verrouille, vous ne pourrez pas la déverrouiller.</​note>​
  
 Pour voir en direct les logs, et ainsi tester le fonctionnement de l'​extension,​ entrez dans un terminal la commande ​ Pour voir en direct les logs, et ainsi tester le fonctionnement de l'​extension,​ entrez dans un terminal la commande ​
Ligne 106: Ligne 110:
  
 ===== Un premier exemple ===== ===== Un premier exemple =====
-On peut créer une extension en //forkant// une extension existante, mais pour commencer, nous allons utiliser la méthode "​classique"​ en lançant la commande+On peut créer une extension ​en partant de zéro ou en //forkant// une extension existante, mais pour commencer, nous allons utiliser la méthode "​classique"​ en lançant la commande
 <​code>​gnome-shell-extension-tool --create-extension</​code>​ <​code>​gnome-shell-extension-tool --create-extension</​code>​
  
Ligne 114: Ligne 118:
  
 ==== metadata.json ==== ==== metadata.json ====
 +
 Ce fichier est **obligatoire** pour qu'une extension soit reconnue par GNOME Shell. Ce fichier est **obligatoire** pour qu'une extension soit reconnue par GNOME Shell.
  
Ligne 125: Ligne 130:
  
 ==== stylesheet.css ==== ==== stylesheet.css ====
 +
 Ce fichier n'est pas obligatoire. Il gère le style de l'​extension en utilisant le langage CSS. Ce fichier n'est pas obligatoire. Il gère le style de l'​extension en utilisant le langage CSS.
  
Ligne 131: Ligne 137:
  
 <​note>​Je le recopie entièrement le fichier, mais par petits bouts et dans le désordre pour pouvoir l'​expliquer au fur et à mesure.</​note>​ <​note>​Je le recopie entièrement le fichier, mais par petits bouts et dans le désordre pour pouvoir l'​expliquer au fur et à mesure.</​note>​
 +Le fichier commence par l'​importation de ce dont on va se servir dans l'​extension.
 <file javascript>​ <file javascript>​
 const St = imports.gi.St;​ const St = imports.gi.St;​
 </​file>​ </​file>​
-Le fichier commence par l'​importation de ce dont on va se servir dans l'​extension. \\ 
 St (Shell Toolkit) fournit un certain nombre de composants graphiques très utiles (des entrées de texte, des labels, des icônes, des boutons, ...). St (Shell Toolkit) fournit un certain nombre de composants graphiques très utiles (des entrées de texte, des labels, des icônes, des boutons, ...).
  
Ligne 165: Ligne 171:
  
 Ici, la modification consiste à ajouter un bouton en forme d'​engrenage dans le panneau supérieur, le bouton étant celui qu'on a initialisé tout à l'​heure. Cliquer sur le bouton déclenche la fonction suivante : Ici, la modification consiste à ajouter un bouton en forme d'​engrenage dans le panneau supérieur, le bouton étant celui qu'on a initialisé tout à l'​heure. Cliquer sur le bouton déclenche la fonction suivante :
- 
 <file javascript>​ <file javascript>​
 function _showHello() { function _showHello() {
Ligne 295: Ligne 300:
 En lisant la fonction ''​_relayout''​ de l'​objet ''​OsdWindow''​ (que je ne vous copie pas au milieu du code de l'​extension pour ne pas porter à confusion), on comprend que la position est définie par ''​this._box.translation_x''​ et ''​this._box.translation_y''​ ; où ''​this''​ désigne l'​osdWindow qu'on veut placer. On assigne donc de nouvelles valeurs à ces variables. En lisant la fonction ''​_relayout''​ de l'​objet ''​OsdWindow''​ (que je ne vous copie pas au milieu du code de l'​extension pour ne pas porter à confusion), on comprend que la position est définie par ''​this._box.translation_x''​ et ''​this._box.translation_y''​ ; où ''​this''​ désigne l'​osdWindow qu'on veut placer. On assigne donc de nouvelles valeurs à ces variables.
  
-Si on avait mis 0 comme valeur pour ''​h_percent''​ et ''​v_percent'',​ la fenêtre aurait été parfaitement centréeavec 40 et -30, la fenêtre sera dans le coin supérieur-droit.+Si on avait mis 0 comme valeur pour ''​h_percent''​ et ''​v_percent'',​ la fenêtre aurait été parfaitement centrée ​avec 40 et -30, la fenêtre sera dans le coin supérieur-droit.
  
 Avant de vouloir tester ce qu'on a fait, il faut coder de quoi le retirer : Avant de vouloir tester ce qu'on a fait, il faut coder de quoi le retirer :
Ligne 324: Ligne 329:
  
 {{ http://​i.imgur.com/​fZY2jzV.png?​400|L'​arborescence complète une fois le projet terminé !}} {{ http://​i.imgur.com/​fZY2jzV.png?​400|L'​arborescence complète une fois le projet terminé !}}
 +
 +Pour commencer, mettez dans votre dossier le fichier ''​[[https://​git.gnome.org//​browse/​gnome-shell-extensions/​plain/​lib/​convenience.js|convenience.js]]''​ ; étant proposé par les développeurs de GNOME Shell eux-mêmes, ce fichier est par défaut utilisé par beaucoup d'​extensions,​ et est relativement standard : il fournit de quoi gérer facilement les aspects "​paramétrage"​ et "​internationalisation"​.
  
 === Ajouter des paramètres === === Ajouter des paramètres ===
Ligne 336: Ligne 343:
 <​code>​glib-compile-schemas .</​code>​ <​code>​glib-compile-schemas .</​code>​
  
-On maintenant des //clés// dans [[:​dconf-editor|dconf]] qui nous sont spécifiques.+On aura maintenant des //clés// dans [[:​dconf-editor|dconf]] qui nous seront ​spécifiques ​(elles n'​apparaissent pas dans //​dconf-editor//​ tant qu'​elles n'ont pas été explicitement réécrites). 
 + 
 +<​note>​Les types possibles pour les clés de paramètres sont : FIXME 
 +  * "​s",​ une chaîne de caractères  
 +  * "​as",​ un tableau de chaînes de caractères 
 +  * "​b",​ un booléen (true/​false) 
 +  * "​i",​ un entier 
 +  * "​ai",​ un tableau d'​entiers 
 +  * ... 
 +</​note>​
  
 === Ajouter des langues === === Ajouter des langues ===
-Il faut aussi ajouter une traduction en français à notre extension. Pour gérer facilement les langues et les clés dconf, on va modifier le code ainsi : + 
-  * ajout de convenience (lien ?) TODO+Il faut maintenant ​ajouter une traduction en français à notre extension. 
 +<note help>"​Je suis nul en anglais, pourquoi ne pas avoir fait directement en français ?", direz-vous. Même si vous n'​êtes pas polyglotte, je suggère quand même de faire l'​extension en anglais puis de traduire en français, pour que des contributeurs débutants puissent ensuite traduire dans leur propre langue en prenant appui sur les fichiers adéquats proposés pour le français.</​note>​ 
 + 
 +== Pré-requis == 
 + 
 +Installez un logiciel comme [[:Poedit]] ou [[:​GNOME-Translate]] afin de pouvoir facilement éditer et compiler les fichiers de traduction. 
 + 
 +== Modifications du code == 
 + 
 + Pour gérer facilement les langues et les clés dconf, on va modifier le code ainsi :
   * le ''​_''​   * le ''​_''​
   * le get truc   * le get truc
   * lien vers la version finale du code   * lien vers la version finale du code
-  * gros warning sa race à ce stade parce que c'est risqué hein+  * +gros warning sa race à ce stade parce que c'est risqué hein
  
 ==== prefs.js ==== ==== prefs.js ====
Ligne 352: Ligne 377:
 Ici, nous allons faire une fenêtre avec des éléments graphiques GTK+ 3, dont le code sera rechargé à chaque fois que vous cliquerez sur le petit "​engrenage"​ en face du nom de l'​extension dans l'​Outil de personnalisation GNOME. Les seules erreurs qu'on verra sont celles qui bloqueront le chargement initial de la fenêtre, et on ne les verra pas dans la console, mais à la place du contenu de la fenêtre. Ici, nous allons faire une fenêtre avec des éléments graphiques GTK+ 3, dont le code sera rechargé à chaque fois que vous cliquerez sur le petit "​engrenage"​ en face du nom de l'​extension dans l'​Outil de personnalisation GNOME. Les seules erreurs qu'on verra sont celles qui bloqueront le chargement initial de la fenêtre, et on ne les verra pas dans la console, mais à la place du contenu de la fenêtre.
  
-.... TODO+On commence par les importations nécessaires : 
 +<file javascript>​ 
 +</​file>​ 
 +<file javascript>​ 
 +</​file>​ 
 +<file javascript>​ 
 +</​file>​
  
 ===== Autres exemples de code ===== ===== Autres exemples de code =====
Ligne 368: Ligne 399:
 ==== Tweener ==== ==== Tweener ====
 ==== DBus ==== ==== DBus ====
 +==== Bash ====
  
 ===== Publier l'​extension ===== ===== Publier l'​extension =====
  • utilisateurs/roschan/tutoriel/creer_une_extension_gnome.1508845761.txt.gz
  • Dernière modification: Le 24/10/2017, 13:49
  • par Roschan