Proyecto: Desarrollo de interfaces con QTJambi

 

INTRODUCCIÓN A QTJambi

 

Existen multitud de tecnologías y herramientas aptas para el desarrollo de interfaces. Se opta por el uso de QTDesigner en esta aplicación la sencillez que aporta una herramienta del tipo WYSIWYG (What You See Is What You Get) como esta.

Además, QTDesigner permite la elaboración de interfaces multiplataforma orientadas al desarrollo de aplicaciones web, de escritorio y móviles, lo que constituye una ventaja desde el punto de vista de la implementación.

Por último, aunque QTDesigner trabaja de forma nativa en C++, podemos traducir nuestros desarrollos a Java fácilmente utilizando un binding QT/Java. Este será QTJambi.

 

 

CREACIÓN DEL FORMULARIO

 

Para empezar a trabajar con el IDE desde Windows, tendremos que ejecutar al archivo designer.bat

 

 

Este archivo despliega la aplicación, en la que se presenta una ventana “New Form” en la que escoger el tipo de ventana en la que comenzar la interfaz, a elegir entre:

  • Diálogo con botones abajo (Dialog with buttons Bottom).
  • Diálogo con botones a la derecha (Dialog with Buttons Right).
  • Diálogo sin botones (Dialog without Buttons).
  • Ventana principal (Main window).
  • Widget

 

 

Pero ¿cuál es la diferencia entre diálogo, ventana y widget?

  • De forma general, escogeremos una ventana principal para la vista de inicio de la aplicación. Esta se presentará con un menú de navegación y una barra de estado de forma predeterminada, aunque también puede añadirse una barra de herramientas.
  • La opción de diálogo será adecuada cuando queramos realizar tareas concretas que impliquen una interacción entre el usuario y la aplicación.
  • La interfaz widget se usa para extender la biblioteca y crear nuevos elementos de interfaz que podrán usarse posteriormente.

 

COMPOSICIÓN DE ELEMENTOS

 

Seleccionado el tipo de interfaz sobre el que trabajar, podrán añadirse los elementos que conformarán la vista seleccionándolos desde el Widget Box y arrastrándolos a la ubicación deseada. No es importante afinar la posición en este punto, ya que cuando tengamos todos los elementos que vayamos a utilizar es sus localizaciones aproximadas, podremos hacer uso de las herramientas de Layout para alinear correctamente todos los objetos (Layout horizontal o vertical, Grid Layout, Splitter Layout).

 

 

Tras colocar los elementos, es recomendable editar sus propiedades. Por ejemplo, podemos:

  • Añadir ToolTipText: texto que aparece al dejar el ratón sobre un elemento para proporcionar una pequeña ayuda al usuario de la función de dicho elemento o cómo debe llevarse a cabo la introducción de datos.
  • Añadir etiquetas: se realiza incluyendo el carácter “&” delante de la letra que quiera utilizarse para atraer el foco sobre el elemento utilizando la combinación de teclas Alt+letra. Para dirigir el foco al control asociado habrá que hacer uso de la herramienta “Editar Buddies”.
  • Añadir elementos a una lista desplegable

      

 

Por último, podemos preconfigurar el orden en el que desplazarnos por el usuario utilizando el tabulador utilizando la herramienta "Edit Tab Order" y seleccionando con el ratón el orden preferido.

 

 

 

FUNCIONALIDAD

 

Con la herramienta “Edit Signals/Slots” puedes establecer la comunicación entre distintos objetos de la interfaz. Es posible conectar tantas señales como sean necesarias a la misma ranura y conectar una señal a tantas ranuras como se desee.

Para hacer uso de esta herramienta, se hace clic sobre el objeto emisor y arrastraremos hasta el objeto que recibe la señal, entonces veremos un diálogo que nos permitirá elegir entre las diferentes señales y ranuras que podemos escoger para estos objetos.

 

 

INTEGRACIÓN CON JAVA

 

Las interfaces desarrolladas en QTDesigner se almacenan en formato XML con extensión .jui. Para poder utilizar estas interfaces en una aplicación java es necesario usar la herramienta juic. Puede hacerse uso de esta herramienta arrastrando los archivos de las distintas ventanas directamente sobre el archivo juic.bat en directorio de QTJambi descomprimido.

 

 

Una vez tenemos las interfaces traducidas a clase java, importamos dichas clases a un proyecto Netbeans, nuevo o existente, copiando los archivos al directorio del proyecto y modificando las clases para incluirles el nombre del paquete donde se hayan ubicado. También constituye una buena práctica cambiar el nombre de la clase y del constructor para identificar correctamente los archivos.

 

A continuación, procede conectar la interfaz a la aplicación java. Para ello, habrá que modificar el método main añadiendo unas líneas similares a las siguientes:

 

QApplication.initialize(args);

QMainWindow mw = new QMainWindow();

frmPrincipal principal = new frmPrincipal();

principal.setupUi( mw );

mw.show();

QApplication.exec();

 

Para quitar los errores que se marcan en el código, será necesario referenciar a las bibliotecas utilizadas. En este caso se hará uso de:

  • qtjambi-4.5.2_01.jar
  • qtjambi-designer-4.5.2_01.jar
  • qtjambi-examples-4.5.2_01.jar
  • qtjambi-win64-msvc2005x64-4.5.2_01.jar

 

 

La interfaz ya se encuentra completamente integrada en la aplicación. Ahora, es posible seguir añadiéndole funcionalidades.

 

 

Veamos el resultado en este video.