Mini tutoriel: Créer des applets pour Cinnamon

Nous allons créer une applet simple pour de cannelle. Pour commencer, il faut savoir que de cannelle propose différents types d'applets:

• AppletTexte (affichage d'une étiquette sur le panneau)
• IcôneApplet (montrant une icône sur le panneau)
• TexteIcôneApplet (indiquant à la fois une icône et une étiquette sur le panneau)
• applet (pour les développeurs hardcore, qui montrent une case vide que vous pouvez remplir vous-même)

Dans ce tutoriel, nous voulons simplement afficher une icône sur le panneau, nous allons donc utiliser un "IconApplet". Afin de programmer notre applet sur Cannelle ou gnome nous devons connaître et savoir quelque chose sur la programmation Javascript

Emplacement de notre code.

Tout d'abord, regardons l'emplacement de notre fichier. L'emplacement de notre applet est donné aux adresses suivantes:

/.local/share/cinnamon/applets ou une /usr/share/cinnamon/applets

Fichiers qui composent notre applet.

Nous procédons à la définition de applet.js

Passons maintenant à voir le code de applet.js et expliquez chacune de ses phrases:

Début du code applet.js

Voyons chacune des phrases de notre code précédent

const Lang = imports.lang; / * Nous invoquons les bibliothèques Gtk et Lang, elles sont une partie de base de toute application GNOME, elles nous permettent de créer des fenêtres, des widgets et de les lier. * / Const Applet = imports.ui.applet; / * Nous invoquons la bibliothèque Applet qui nous permet de créer une applet pour Cinnamon et Gnome et en même temps nous donne ses propriétés et fonctions. * / Const GLib = imports.gi.GLib; / * GLib est une bibliothèque d'aide, elle nous permet de faire des choses dans GNOME, par exemple dire où se trouve le fichier hellognome.html, c'est la bibliothèque en charge des signaux. * / Const Gettext = imports.gettext.domain ('cinnamon -applets '); const _ = Gettext.gettext; // Bibliothèque Gettext qui nous permet d'importer nos propres caractéristiques pour le bureau Cinnamon. const PopupMenu = imports.ui.popupMenu; / * PopupMenu est une bibliothèque pour utiliser le gestionnaire de menus, elle nous permet d'invoquer le widget de menu contextuel habituellement utilisé dans les applets. * / Function MyApplet (orientation) {this._init (orientation); }

Le constructeur de notre applet est défini ci-dessous, regardons notre classe ou classe:

Nous continuons avec la définition de chacune des phrases

MyApplet.prototype = {__proto__: Applet.IconApplet.prototype, // Nous définissons notre classe ou classe _init: function (orientation) {Applet.IconApplet.prototype._init.call (this, orientation); / * Nous définissons l'orientation via Cinnamon. Nous définissons si le panneau de l'applet est en haut ou en bas (cela a un impact sur l'orientation des menus de l'applet). * / Try {// Faire quelque chose} Catch (e) {// Que se passe-t-il si une erreur se produit } / * Nous utilisons un try / catch pour détecter les erreurs qui peuvent survenir dans notre applet et pour nous assurer qu'elles sont écrites dans le journal des erreurs global. De cette façon, si quelque chose ne va pas, vous pouvez voir l'erreur dans Looking Glass: Appuyez sur Alt F2, tapez "lg" et cliquez sur l'onglet "erreurs". * / This.menuManager = new PopupMenu.PopupMenuManager (this); // Créez le menu contextuel et définissez le gestionnaire de menus this.menu = new Applet.AppletPopupMenu (this, orientation); // nous créons un menu. this.menuManager.addMenu (this.menu); // Nous ajoutons le menu au menu contextuel. this.makeMenu (); // menuitem makeMenu, nous créons un menuitem appelé makeMenu. this.buildContextMenu (); // buildContextMenu, nous créons un menuitem appelé buildContextMenu. this.set_applet_icon_name ("dossier"); / * On crée l'applet, ce cas est unique, l'icône choisie est le dossier ou le dossier, on peut aussi établir une applet de texte si on veut. * /

A titre d'exemple changez le nom du "dossier" en "terminal", "docky" pour établir de nouveaux noms voir le nom des icônes Gnome ou Cinnamon ou tout autre thème d'icônes, allez dans l'adresse.

/usr/share/icons

this.set_applet_tooltip (_ ("Cliquez ici pour tuer une fenêtre")); // Catch pour attraper les erreurs qui peuvent survenir dans notre applet. catch (e) {global.logError (e); } makeMenu: function () {this.menu.addMenuItem (new PopupMenu.PopupMenuItem ("Test Message", {reactive: true})); }, / * On définit le nom du menuitem makeMenu et ses caractéristiques. Dans ce cas, le libellé est Test Message ". Nous définirons {reactive: true} Nous établissons que l'arrière-plan du menuitem changera lorsque le pointeur passera sur le menuitem via true s'il est false, c'est l'inverse qui se produit. () {this.menu .addMenuItem (new PopupMenu.PopupMenuItem ("show", {reactive: true}));}, // Nous définissons le nom du menu makeMenu et ses caractéristiques. Dans ce cas, le libellé est "show ". on_applet_clicked: function (event) {this.menu.toggle ();} // Signal émis par l'applet, pour appeler la fonction du menu contextuel main (métadonnées, orientation) {let myApplet = new MyApplet (orientation); return myApplet;} / * Enfin, il suffit d'ajouter une fonction "main", qui est susceptible d'être la même dans chaque applet, une instance de notre applet est créée et renvoyée à Cinnamon. * / // On ferme la boucle return myApplet;

Nous procédons à la définition de metadata.json

"last-edit": "1331990905", // Dernière édition. "description": "Cliquez sur l'applet pour afficher un menu gtk personnalisé", // Description de l'applet. "icon": "docky", // Icônes utilisées pour la description de l'applet. A titre d'exemple, changez le nom de "docky" en "terminal", "dossier". "uuid": "black" // Dossier dans lequel notre fichier metadata.json est inclus "name": "Custom gtk menu" // Nom de l'applet.

Observation: Pour définir de nouveaux noms, voir le nom des icônes Gnome ou Cinnamon ou tout autre thème d'icônes, accédez à l'adresse du système de fichiers.

/usr/share/icons

Image de l'applet créée

 

Qt, Gtk, Vala et autres langages utilisés pour créer une applet pour Cinnamon ou Gnome

Voyons l'emplacement de notre applet pour Cinnamon

L'emplacement de notre applet est donné aux adresses suivantes:

/.local/share/cinnamon/applets

ou une

/usr/share/cinnamon/applets

Composition de notre applet

Nous procédons à la définition de applet.js 

Démarrage du code applet.js

Fin de applet.js

Voyons maintenant le code applet.js et expliquons ses instructions.

Le code écrit est pratiquement le même que l'exemple précédent écrit avec Javascript.
Seul le signal a été modifié, ce qui appellera notre auto-exécutable.

on_applet_clicked: fonction (événement) {GLib.spawn_command_line_async (GLib.get_home_dir () + '/.local/share/cinnamon/applets/Qt4/Qtmenu/Menu'); }

Notre auto-exécutable peut être écrit avec Qt, Gtk, Gtkmm, wxWidget, Vala, etc. langages avec lesquels des auto-exécutables peuvent être créés. Notre auto-exécutable s'appelle Menu et se trouve dans le dossier Qtmenu.

On peut également utiliser d'autres langages de programmation qui ont des liaisons pour Gtk comme c'est le cas de PyGTK, Ruby Gtk, Perl Gtk, etc. qui peut être utilisé à l'aide d'un script pour exécuter le code écrit dans ces langues. Le principe est toujours le même pour appeler des programmes, créer un menu contextuel et une fenêtre contextuelle selon nos besoins.

Voyons le code de notre auto-exécutable écrit avec Qt

Nous procédons à la définition de metadata.json

Le code est écrit de la même manière que l'exemple précédent

Image de l'applet créée avec Qt

Image de l'applet créée avec Gtk 3.10

Je vous laisse un petit exemple d'applet qui utilise un exécutable écrit en Gtk, dans ce cas nous prenons le menu myGtkMenu utilisé dans OpenBox.

C'est un menu auto-exécutable.

Téléchargez le tutoriel et les exemples