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

Cinnamon_Applet

Ficheros que componen nuestro Applet.

Cinnamon_Applet2

Procedemos  a  definir  applet.js

codigo

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

codigo de applet

javascript codigo

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:

clase gjs

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

Z7qwRdp

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

LP0ol8b

Captura de pantalla - 140314 - 21:11:34

"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

 lKxpdkS

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

nerd

Composición de  nuestro  applet

beta

Procedemos a definir applet.js 

codigo

applet.js

Inicio del  código  de  applet.js

Captura de pantalla - 140314 - 21:30:48

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.

beta

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

qt

Procedemos a definir metadata.json

LP0ol8b

mongo

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

Imagen del Applet creado con Qt

qte

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.

megtk

Descarga del tutorial y ejemplos


12 comentarios, deja el tuyo

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

  1.   aioria dijo

    interesenta Articulo…

    1.    marianogaudix dijo

      Gracias . Mi es que aprendamos un poquito cada día .

  2.   Danie dijo

    Muy bueno, me encanta, siempre quise saber como se hacían esta clase de applets

  3.   Ángel Araya dijo

    Una pequeña corrección. Gettext no es nada específico de Cinnamon como dice en el artículo, es una librería que hace posibles las traducciones automáticas y a partir de plantillas.

  4.   msx dijo

    Muy bueno el tutorial y todo eso pero lo importante no lo pusiste: link al wallpaper?

    1.    marianogaudix dijo

      Bajate los wallpapers de Linux Mint 16 Petra .
      El paquete se llama mint-backgrounds-petra : http://packages.linuxmint.com/list.php?release=Petra

  5.   Tesla dijo

    Muy interesante el artículo. La verdad es que siempre me había preguntado como se creaban estos applets. Quizá me anime a crear un applet mini-reproductor para MPD o algo similar.

    Gracias por compartir!

  6.   Matias dijo

    Excelente, justo estoy averiguando como modificar el nm-applet (network manager) de cinnamon, para que me cambie de color cuando no tengo salida a internet, (tengo una placa wifi), y esto me sirve para orientarme un poco..

  7.   matiasbatero17 dijo

    bien ahí Marian, no sabía que posteabas acá. Saludos.

    1.    marianogaudix dijo

      Como andas Matute ….. siempre ando dando vueltas por estos lados . Saludos

  8.   lolbimbo dijo

    Buen articulo.

  9.   honovan dijo

    no se encuentra el archivo fue desactivado por violación a derechos de autor.

    lo que quiero decir es que si lo tienes por hay ,lo puedes volver a subir???.por favor.

    mil gracias.