¿Quieres crear un indicador espectacular para Ubuntu? No te quedes en crear el típico indicador para Ubuntu, donde al hacer clic sobre el icono se despliega un sencillo menú. Un menú que en el mejor de los casos tendrá imágenes. Con GNOME Shell y JavaScript podemos ir mucho mas allá.

En el capítulo anterior de este tutorial vimos los pasos mínimos para crear un indicador. Ciertamente el indicador que creamos era muy sencillo, no hacía nada del otro mundo. Pero además, si te das cuenta, tampoco es que hayamos hecho un indicador distinto de los que ya hacíamos con la librería AppIndicator y Python. Entonces ¿que razón tenemos para pasarnos a GNOME Shell y JavaScript?. El problema de la librería AppIndicator es su limitación, y es que solo te permite crear un menú sencillo. Un menú de los de toda la vida.

Sin embargo, si queremos llamar la atención del usuario, si queremos crear una aplicación realmente atractiva, necesitamos algo mas que un sencillo menú. En muchas ocasiones nos quedamos en crear una aplicación útil para el usuario. Sin embargo, actualmente, en el mundo audiovisual en el que nos movemos, necesitamos que nuestra aplicación sea visualmente atractiva. Y en este sentido, GNOME Shell y JavaScript nos dan las herramientas necesarias para crear un indicador espectactular para Ubuntu.

Crear un indicador espectacular para Ubuntu

En este capítulo del tutorial vamos a ir de menos a mas. Partiremos del desarrollo que hicimos en el capítulo anterior. Añadiremos mas opciones en el propio menú del indicador. Añadiremos iconos para que sea mas visual, y por último le daremos el toque de gracia, dando un aspecto completamente distinto a nuestro indicador. Llegaremos al objetivo que buscamos, un indicador visual y atractivo, un indicador espectacular para Ubuntu.

Añadiendo mas opciones al indicador.

En este primer paso, simplemente tenemos que añadir algunas opciones adicionales a la que incorporamos en el capítulo anterior. Simplemente se trata de añadir nuevas entradas de menú con la estructura que ves a continuación,

let item1 = new PopupMenu.PopupMenuItem('Salvapantallas');
item1.connect('activate', ()=>{
    Util.spawn(['gnome-screensaver-command', '--activate']);
});
this.menu.addMenuItem(item1);

Esto nos da como resultado un indicador tradicional, como los que estamos acostumbrados a ver hasta el momento, y que puedes ver en la siguiente captura de pantalla,

Entradas con icono

Dentro de las opciones que tenemos a la hora de crear una entrada de menú para nuestro indicador de aplicación, podemos optar por PopupMenu.PopupImageMenuItem. Este elemento nos permite incorporar un menú en la propia entrada de menú, tal y como puedes ver en la siguiente porción de código,

let item1 = new PopupMenu.PopupImageMenuItem('Salvapantallas',
                                             'preferences-desktop-screensaver-symbolic');
item1.connect('activate', ()=>{
    Util.spawn(['gnome-screensaver-command', '--activate']);
});
this.menu.addMenuItem(item1);

El resultado en este caso, es el que puedes ver en la siguiente captura de pantalla.

Como puedes ver, hemos mejorado algo el aspecto de nuestro indicador de aplicación, pero no hemos salido de los indicadores tradicionales, y por supuesto, estamos muy lejos de haber conseguido un indicador espectacular para Ubuntu.

Hacia el indicador espectacular para Ubuntu

Como decía, hasta el momento no hemos conseguido mas que un indicador para aplicación tradicional. Sin embargo, si queremos un indicador espectacular para Ubuntu, necesitamos dar un paso mas.

Para ello, en lugar de utilizar las clases PopupMenu.PopupMenuItem y PopupMenu.PopupImageMenuItem, vamos a partir de la clase PopupMenu.PopupBaseMenuItem. Utilizando esta clase vamos a crear dos líneas, separadas por una línea que no es mas que un separador, PopupMenu.PopupSeparatorMenuItem. Para crear cada una de las líneas, utilizaremos el siguiente código,

this.lineaButtons1 = new PopupMenu.PopupBaseMenuItem({
    reactive: false
});
this.menu.addMenuItem(this.lineaButtons1)

Si te fijas le hemos pasado el parámetro reactive para que no se comporte como un elemento de menú. A continuación, en la primera de las líneas añadiremos tres elementos, y en la segunda de las líneas añadiremos dos elementos. Para crear cada uno de estos elementos utilizaremos el siguiente código,

let item = Main.panel.statusArea.aggregateMenu._system._createActionButton(
    'system-lock-screen-symbolic','Bloquear');
item.connect('clicked', ()=>{
    systemActions.activateLockScreen();
});
this.lineaButtons1.actor.add_actor(item);

Mientras que para crear nuestro separador, tan solo tenemos que utilizar el siguiente código,

this.menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());

Con todo esto, nuestra indicador de aplicación ya tiene el aspecto que puedes ver en la siguiente captura de pantalla.

Esto ya ha tomado forma. Ya tenemos un indicador espectacular para Ubuntu… aunque tenemos que darle algún retoque para que tenga el aspecto definitivo. Ahora ya hemos conseguido un indicador de aplicación que se sale por completo del aspecto tradicional de los indicadores de aplicaciones. Un indicador que tiene un aspecto diferencial.

La segunda línea de iconos

Para la segunda línea de iconos, utilizaremos un objeto de la clase St.BoxLayout. Se trata de un contenedor que nos permite añadir varios elementos en su interior. Además, vamos a definir un estilo para este elemento, que utilizaremos posteriormente. Así nuestro código quedará como sigue,

let items = new St.BoxLayout({
    style_class: 'button-box'
});
this.lineaButtons2.actor.add_actor(items);

Y para cada icono de la segunda línea, el código será el siguiente,

let item = Main.panel.statusArea.aggregateMenu._system._createActionButton(
    'system-shutdown-symbolic', 'Apagar');
item.connect('clicked', ()=>{
    systemActions.activatePowerOff();
});
items.add_actor(item);

La hoja de estilos

Hasta el momento, solo hemos utilizado dos archivos para nuestra extensión de GNOME Shell, metadata.json y extension.js. Ahora vamos a añadir un nuevo archivo stylesheet.css, que no es mas que una hoja de estilos. Si, como lo lees, una hoja de estilos, de las que se utilizan en el desarrollo de páginas web. Y esto, es precisamente, algo que creo que es muy interesante. De nuevo, no es necesario que aprendas otro lenguaje de programación, ni una tecnología nueva. Las hojas de estilo, son viejas conocidas, con lo que es muy probable que ya hayas hecho algo con ellas, o por lo menos, seguro, que tienes ciertas nociones.

¿Que nos permiten la hoja de estilo en nuestra extensión de GNOME Shell? La hoja de estilos nos permite darle el aspecto definitivo a nuestra extensión. Definir la separación de elementos, los márgenes o los espacios…, igual que colores, bordes, fondos, etc…

En nuestro caso particular, lo vamos a utilizar simplemente para que los iconos de la segunda línea queden equiespaciados. Así el código a emplear será el siguiente,

.button-box{
    padding: 0px;
    spacing: 24px;
    margin-left: 30px;
    margin-right: 30px;
}

Si te fijas .button-box se corresponde con la clase de estilo que hemos utilizado en St.BoxLayout.

Fíjate que en ningún caso hemos definido el aspecto de los iconos. Es decir, lo que ves en la captura de pantalla, de un icono redondeado, con borde, que cambia al colocarse el puntero sobre el mismo, etc, está definido por el tema global.

Con esto quiero decir que, si el usuario cambia de tema es muy probable que el aspecto de tu indicador de aplicación sea completamente distinto. Así, si quieres que el usuario tenga una experiencia de usuario con independencia del tema que esté utilizando, deberás de definir al detalle los elementos.

Asegurando el aspecto

Una solución para evitar el problema que hemos comentado en el punto anterior, es decir, que un tema arruine el aspecto de nuestra extensión, es definiendo en detalle el aspecto de los elementos. Sin embargo, definir con detalle el aspecto de los botones, tiene el problema de que en el caso de que cambies el tema, tu indicador, probablemente no se integre con el tema. Así que estás ante un compromiso. Por otro lado, respecto al CSS, indicar que no todas las reglas son válidas. Así por ejemplo, border-radius: 50% no responde, con lo que tienes que definir con un valor numérico.

De esta manera podemos definir nuestro botones, con la siguiente hoja de estilos,

.item{
    border-radius: 32px;
    border: 1px solid #2C3030;
    width: 16px;
    height: 16px;
    padding: 14px;
    margin: 6px;
    color: #FFF;
    margin-top: 0;
    margin-bottom: 0;
}
.item:active {
  background-color: #0274d9;
}
.item:hover {
  background-color: #3085a9;
}

Lo que nos da un aspecto como el que ves en la siguiente captura de pantalla,

Conclusión

En este nuevo capítulo del tutorial, hemos pasado del tradicional indicador a un indicador espectacular. Además hemos visto como puedes definir su aspecto con detalle utilizando CSS. Esto, como vengo comentando durante los distintos capítulos del tutorial, tiene la ventaja de que no necesita que aprendas un nuevo lenguaje. Así, si trabajas como desarrollador front-end lo tienes hecho para crear una extensión, realmente espectacular, con los conocimientos que adquiriste para el desarrollo de páginas web.

En el siguiente artículo de este tutorial vamos a ver como puedes guardar la configuración de tu extensión. De esta manera el usuario, puede seleccionar sus preferencias y quedarán almacenadas para futuras sesiones.