Curso de creación de GUIs con Qt. Capítulo 07: Menu

Una ventana de una aplicación compleja dispone de muchas cosas y entre estas cosas suele haber un menú para poder acceder a la mayor parte de la funcionalidad de la misma de forma ordenada y organizada. En este capítulo describo cómo escribir menús y submenus de la ventana principal y algunas peculiaridades más de Qt.

Índice:

[Los materiales para este capítulo los podéis descargar de aquí]

[INSTALACIÓN] Si todavía no has pasado por el inicio del curso, donde explico cómo poner a punto todo, ahora es un buen momento para hacerlo y después podrás seguir con esta nueva receta.

Partimos del último código que dejamos en el capítulo 5 (de momento aparcamos el Splash Screen):

Barra de menú y menús

Al código anterior le quiero añadir un menu. Si inspeccionamos w, la instancia de MiVentana, vemos que tiene lo siguiente:

Nos devuelve lo siguiente:

Los observadores puede que se hayan dado cuenta de la existencia de menuBar… Como ya comentamos en el capítulo 5 un QMainWindow no es más que un QWidget con algunas cosas más. Entre estas cosas ya vimos (en el capítulo 5) que tenía un statusBar y, vemos ahora, también tiene un menuBar. Vamos a hacer uso del mismo. Escribo un poco de código nuevo. Cada nueva línea de código se puede identificar porque lleva el comentario ## NUEVA LÍNEA al final, como hemos venido haciendo hasta ahora:

Podéis guardar el anterior código en un fichero que se llame main00.py o, si habéis descargado el repositorio, podéis usar el que se encuentra en la carpeta apps/07-MenuPrincipal. Lo podéis ejecutar con el terminal en el mismo sitio donde está el programa haciendo (si no os sale el icono es porque no lo tenéis metido en la carpeta apps/07-MenuPrincipal/imgs:

Si todo funciona correctamente deberíais ver una ventana como la siguiente:

En esa ventana se ve que tenemos dos menús, uno llamado File y otro llamado Help. Si pulsáis sobre ellos no pasará nada porque nos falta meter más cosas. Pero antes vamos a comentar el código nuevo.


Esta es fácil… Dentro del método _create_ui llamamos al método _create_menu. En el segundo es dónde me he dedicado a gestionar la creación del menú.


En este método, primero creamos una instancia de QMenuBar usando el método menuBar del QMainWindow y la guardamos en la variable menubar. En la instancia de QMenuBar tenemos el método addMenu que nos permite añadir menús a la barra de menús. El método addMenu recibe un string. En el string estoy usando un símbolo & y luego lo que quiero que aparezca en el manú (e.g., '&File' para que se vea File en el GUI. ¿Para qué sirve el ampersand, “&”? Es una forma rápida y sencilla de navegación. Cuando esté el GUI activo, si pulso sobre la tecla “Alt” hay varias letras del GUI que se verán subrrayadas, en el caso de nuestro GUI serán la F y la H. Si después de pulsar “Alt” pulsamos “F” será una forma de usar el teclado para navegar por nuestro GUI. Este sería un buen momento para experimentar y ejecutar el código cambiando la siguiente linea:

Con

o

Si quitamos el ampersand, “&”, perdemos la navegación rápida con teclado para el menú File. Si movemos el ampersand, “&”, a otra letra podremos usar esa otra letra para nuestra navegación rápida con teclado.

Muy bien, ya tenemos un menú pero lo normal es que el menú se despliegue y nos muestre opciones.

Pero antes vamos a hacer un inciso para hablar de qtawesome.

qtawesome

Todas las aplicaciones quedan más bonitas y usables si usamos iconos bonitos y que nos informen de forma rápida de posibles interacciones que podemos hacer con el GUI. Una forma sencilla de integrar este tipo de iconos es usando la biblioteca qtawesome desarrollada por el equipo de gente detrás de spyder-ide. Esta biblioteca nos permite integrar de forma sencilla iconos de varios paquetes como FontAwesome, ElusiveIcons o MaterialDesignIcons.

Por tanto, para poder usar qtawesome antes lo tendréis que instalar en el entorno pyboqt que venimos usando. Para ello, hacemos lo siguiente en la terminal (o Anaconda Prompt si estás en Windows):

Para usar un icono de, por ejemplo, FontAwesome podemos hacer lo siguiente:

Y en icono ya tendriamos una instancia de QIcon con el icono times-circle de FontAwesome listo para usarlo en el GUI.

Esto ha sido un vistazo muy rápido a qtawesome. Para saber más le puedes echar un ojo a la documentación. Para lo que vamos a hacer hoy con lo que he explicado nos vale.

Elementos del menú

Volvemos a los menús…

Para ver cómo añadir elementos a un menú vamos a volver a escribir nuevo código y lo vamos explicando. Y, como siempre, las nuevas líneas vendrán destacadas con el comentario ## NUEVA LÍNEA:

Empezamos, de nuevo, a comentar las nuevas líneas:


Añadimos el widget QAction en el import. Luego lo explico más en detalle.


Esto lo hemos explicado en la sección anterior. importamos la biblioteca qtawesome para poder integrar fácilmente iconos en nuestra aplicación.


En el método _create_menu estábamos creando la barra de menús y habíamos metido dos menús vacios (File y Help). En lás lineas destacadas aquí encima lo que estamos haciendo es crear una “acción” y la metemos en uno de los menús.

Pero, ¿Qué es una acción? En los GUIs hay acciones comunes que se pueden realizar de varias formas. Por ejemplo, para cerrar la aplicación podemos ir al menú “Archivo” y luego pulsar sobre el elemento “Cerrar” (“File” -> “Close” en inglés). Otra forma típica de cerrar es usar “Ctrl+Q”, que suele ser un atajo de teclado para cerrar la aplicación. Una tercera forma sería pulsando sobre el icono cerrar de la barra de herramientas (que todavía no hemos visto). Como todas esas acciones deben tener el mismo resultado se puede usar la clase QAction para tener una abstracción de ese comportamiento que luego podremos usar en las diferentes formas de cerrar la aplicación.

  • exit_action = QAction(qta.icon('fa5.times-circle'), '&Exit', self): En la primera línea de código es donde se usa la clase QAction. Para crear una instancia podemos pasar un icono, texto y clase padre o solo texto y la clase padre. En este caso uso la primera forma que incluye un icono. En el icono, en lugar de usar QIcon y una figura que tengamos en el disco duro hacemos lo mismo pero usando qtawesome como he explicado antes. Luego, el texto que queremos que muestre el elemento del menú y, por último, la clase padre será el propio QMainWindow (como self en este caso).
  • exit_action.setShortcut('Ctrl+Q'): Usamos el método setShortcut de QAction para añadir un atajo de teclado a la aplicación. En este caso usamos Ctrl+Q como atajo de teclado para que la aplicación se cierre (pero de momento no hará nada).
  • exit_action.setStatusTip('Exit application'): Con el método setStatusTip añadimos en mensaje que aparecerá en la barra de estado cuando el puntero del ratón esté sobre el elemento del menú.
  • file_menu.addAction(exit_action): Por último, anadimos el elemento del menú a su menú usando el método addAction de la instancia de QMenu llamada file_menu y que hemos creado mediante el método addMenu de QMenuBar.

Como podéis ver en la última línea, esto es un poco como un Lego donde tenemos un montón de piezas y las vamos uniendo de alguna forma para obtener, al final, nuestra figura final.

El resto de código del método _create_menu es repetir lo que acabo de explicar pero para el segundo menú, Help.

Si guardáis el anterior código completo en un fichero que se llame main01.py y lo ejecutáis, al igual que hemos hecho antes, deberéis ver algo parecido a lo siguiente:

En la anterior imagen podemos ver que al pulsar sobre File se despliega su menú. En ese menú podemos ver el icono (el circulito con la X), el texto que le hemos indicado y su atajo de teclado. Al poner el puntero del ratón sobre el elemento Exit vemos que aparece en la barra de estado (status_bar) el mensaje que habíamos definido, “Exit application”.

Si pulsáis con el botón izquierdo del ratón sobre la opción Exit o si usáis el atajo de teclado “Ctrl+Q” el GUI no hace absolutamente nada. Eso es algo que veremos en el próximo capítulo…

En este capítulo vamos a seguir trabajando nuestro menú,

Añadiendo un submenú

En un menú podemos añadir acciones o, también, otros menús. Vamos a ver como. Nuevamente, añadimos primero el código completo resaltando las líneas nuevas con el comentario ## NUEVA LÍNEA.

Podéis guardar el anterior código en un fichero que se llame main02.py o, si habéis descargado el repositorio, podéis usar el que se encuentra en la carpeta apps/07-MenuPrincipal. Lo podéis ejecutar con el terminal en el mismo sitio donde está el programa haciendo (si no os sale el icono es porque no lo tenéis metido en la carpeta apps/07-MenuPrincipal/imgs:

Vemos el resultado:

Y comentamos el nuevo código:


Añadimos QMenu a los widgets que importamos.


De nuevo, dentro del método _create_menu metemos algo más de código para meter un menú dentro de otros menú (submenú). Paso a comentar el código:

  • new_menu = menubar.addMenu('NewMenu'): Esto ya lo hemos visto antes. Añadimos un nuevo menú a la barra de menús.
  • new_submenu = QMenu('SubMenu', self): Ahora creamos un menú nuevo pero en lugar de usar el método addMenu del objeto QMenuBar usamos directamente la clase QMenu.
  • Las líneas first_action = QAction('SubMenuAction1', self) y second_action = QAction('SubMenuAction2', self): Son similares a lo visto antes. Simplemente ahora no añadimos atajo de teclado ni mensaje para la barra de estado.
  • Las líneas new_submenu.addAction(first_action)' y 'new_submenu.addAction(second_action): Esto también lo hemos visto antes. Añadimos ambas acciones al submenú.
  • Por último, new_menu.addMenu(new_submenu): añade el submenú al menú new_menu.

Lo dicho anteriormente, pequeñas piezas de Lego que al montarlas correctamente van adquieriendo forma.

Y, por hoy, creo que ya es suficiente.

Como resumen. Hemos creado menús, submenús, añadido atajos de teclado,… Pero, de momento, no sabemos como interactuar con el GUI, es decir, no nos podemos comunicar con el mismo para que haga cosas. Eso será el objeto del próximo capítulo.

Deja una respuesta

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

− three = one