Vamos a crear un simple applet para Cinnamon. Para empezar, debemos conocer que Cinnamon ofrece diferentes tipos de applets:
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
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
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:
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
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
Continúar leyendo...
- 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
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
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:
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
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
Continúar leyendo...