Mini Tutorial: Creando Applets para Cinnamon

Vamos a crear un   simple  applet para Cinnamon. Para empezar, debemos conocer que Cinnamon ofrece diferentes tipos de applets:

• TextApplet (que muestran una etiqueta en el panel)
• IconApplet (que muestra un icono en el panel)
• TextIconApplet (que indican tanto un icono y una etiqueta en el panel)
• Applet (para desarrolladores hardcore, los cuales muestran una caja vacía puede rellenar usted mismo)

En este tutorial, simplemente queremos mostrar un icono en el panel, así que usaremos un «IconApplet». Para poder programar nuestro applet para Cinnamon o Gnome necesitamos conocer y saber algo de programación en Javascript

Ubicación de nuestro código.

Primero, veamos la ubicación de nuestro fichero. La ubicación de nuestro applet esta dada en la siguientes direcciones :

/.local/share/cinnamon/applets o en /usr/share/cinnamon/applets

Ficheros que componen nuestro Applet.

Procedemos  a  definir  applet.js

 

Ahora procedamos a ver el código de applet.js y a explicar cada una de sus sentencias :

inicio del código de applet.js

Veamos cada una de las sentencias de nuestro código anterior

const Lang = imports.lang;
/*Invocamos  a  las  librerias   Gtk y Lang  son parte básica de cualquier   aplicación de  GNOME  nos permiten crear ventanas, widgets y ligar los mismos.*/

const Applet = imports.ui.applet;

/*Invocamos  a  las  librería Applet   que  nos permite  crear un applet    para  Cinnamon y Gnome  y a la  vez  nos  da las propiedades y funciones del mismo.*/

const GLib = imports.gi.GLib;

/*GLib es una librería de ayuda, nos permite hacer cosas en GNOME , por ejemplo decir dónde está el archivo hellognome.html, es la librería encargada de la señales.*/

const Gettext = imports.gettext.domain('cinnamon-applets');
const _ = Gettext.gettext;

//Gettext librería que nos permite importar las características propias para el escritorio Cinnamon.

const PopupMenu = imports.ui.popupMenu;

/*PopupMenu es una librería para utilizar el gestor de menús, nos permite invocar el widget popup-menu habitualmente usado en los applet.*/

function MyApplet(orientation) { 
this._init(orientation); 
}

A continuación se define el constructor de nuestro applet, veamos a nuestra Clase o Class:

Continuamos con la definición cada una de las sentencias

MyApplet.prototype = { 
__proto__: Applet.IconApplet.prototype,

// Definimos nuestra Clase o Class

_init: function(orientation) {
Applet.IconApplet.prototype._init.call(this, orientation);

/*La orientación la establecemos por medio de Cinnamon. Establecemos si el panel del applet se encuentra en la parte superior o en la parte inferior (esto tiene un impacto en la orientación de los menús applet).*/

try {
// Hacer algo
}

Catch (e) {
// ¿Qué ocurre si se produce un error
}

/*Usamos un try / catch para capturar cualquier error que pueda ocurrir en nuestro applet y para asegurarnos de que se escribe en el registro de error global. De esta manera, si algo sale mal, usted puede ver el error en Looking Glass: Pulse Alt F2, escriba "lg" y haga clic en la pestaña de "errores".*/

this.menuManager = new PopupMenu.PopupMenuManager(this); //Creamos el popup-menu y establecemos el gestor de menu

this.menu = new Applet.AppletPopupMenu(this, orientation); //creamos un menu.

this.menuManager.addMenu(this.menu); // Añadimos el menú al popup-menu .

this.makeMenu(); // menuitem makeMenu, creamos un menuitem llamado makeMenu.

this.buildContextMenu(); // buildContextMenu, creamos un menuitem llamado buildContextMenu.

this.set_applet_icon_name("folder");

/*Creamos el applet , este caso es unico , el icono elegido es el la carpeta o folder , tambien
podemos establecer un applet de texto si queremos.*/

Como ejemplo cambie el nombre de «folder» por «terminal», «docky» para establecer nuevos nombres ver el nombre de los iconos de Gnome o Cinnamon o de cualquier otro tema de iconos , ir en la dirección .

/usr/share/icons

 

this.set_applet_tooltip(_("Click here to kill a window"));

// Catch para capturar cualquier error que pueda ocurrir en nuestro applet.
catch (e) {
  global.logError(e);
}

makeMenu: function() {
  this.menu.addMenuItem(new PopupMenu.PopupMenuItem("Test Message", { reactive: true }));
},

/*Definimos el nombre del menuitem makeMenu y sus características. En este caso la label es Test Message".
Definiremos { reactive: true } 

Establecemos que el background del menuitem cambiara cuando el puntero pasa sobre el menuitem mediante true si es false ocurre lo contrario.*/

buildContextMenu: function() {
  this.menu.addMenuItem(new PopupMenu.PopupMenuItem(" show", { reactive: true }));
},

// Definimos el nombre del menuitem makeMenu y sus características. En este caso la label es "show".

on_applet_clicked: function(event) { 
  this.menu.toggle();
}

// Señal emitida por el applet , para llamar el popup-menu.

function main(metadata, orientation) { 
  let myApplet = new MyApplet(orientation); 
  return myApplet;
}

/*Por último, sólo tenemos que añadir una función "principal", que es probable que sea el mismo en cada applet. Se crea una instancia de nuestro applet y la devuelve a Cinnamon.*/

// Cerramos el bucle 
return myApplet;

Procedemos a definir metadata.json

 

"last-edited": "1331990905", // Ultima edición.
"description": "Click on the applet to show a custom personally defined gtk menu", // Descripción del applet.
"icon": "docky ", // Iconos usado para la descripción del applet. Como ejemplo cambie el nombre de "docky" por "terminal", "folder".
"uuid": "negro" // Carpeta donde esta incluido nuestro archivo metadata.json
"name": "Custom gtk menu" // Nombre del applet.

Nota: Para establecer nuevos nombres ver el nombre de los iconos de Gnome o Cinnamon o de cualquier otro tema de iconos, ir en la dirección del sistemas de archivo.

/usr/share/icons

Imagen del Applet creado

 

Qt, Gtk, Vala y otros lenguajes utilizados para crear un applet para Cinnamon o Gnome

Veamos la ubicación de nuestro nuestro applet para Cinnamon

La ubicación de nuestro applet esta dada en la siguientes direcciones :

/.local/share/cinnamon/applets

o en

/usr/share/cinnamon/applets

Composición de  nuestro  applet

 

Procedemos a definir applet.js 

Inicio del  código  de  applet.js

Fin de  applet.js

Ahora procedamos a ver el código de applet.js y a explicar sus sentencias.

El código escrito es prácticamente igual al ejemplo anterior escrito con Javascript.
Solo se ha cambiado la señal, que llamara a nuestro auto-ejecutable.

on_applet_clicked: function(event) {
  GLib.spawn_command_line_async( GLib.get_home_dir() + '/.local/share/cinnamon/applets/Qt4/Qtmenu/Menu');
}

Nuestro auto-ejecutable puede estar escrito con Qt, Gtk, Gtkmm, wxWidget, Vala ,etc. lenguajes con los que se pueden crear auto-ejecutables. Nuestro auto-ejecutable se llama Menu y esta en la carpeta Qtmenu.

También podemos utilizar otros lenguajes de programación que tengan bindings para Gtk tal es el caso de PyGTK, Ruby Gtk, Perl Gtk, etc.  los cuales se pueden utilizar usando un script para ejecutar el código escrito en dichos lenguajes. El principio siempre es el mismo llamar programas, crear popup-menu y popup-window según nuestras necesidades.

Veamos el código de nuestro auto-ejecutable escrito con Qt

Procedemos a definir metadata.json

El código se escribe de la misma forma que el ejemplo anterior

Imagen del Applet creado con Qt

 

Imagen del Applet creado con Gtk 3.10

Les dejo un pequeño ejemplo de applet que utiliza un auto ejecutable escrito en Gtk, en este caso tomamos el menu myGtkMenu utilizado en OpenBox.

Se trata de un menu auto-ejecutable.

Descarga del tutorial y ejemplos