Crear programas en Java usando GUI generados en Glade

java and glade.png

En algún momento puedes verte en la necesidad, por interés ó por la cuestión que puedas tener el desarrollar un programa con interfaz gráfica en entornos GNU/Linux, por compatibilidad en la mayoría de las distribuciones aparece GTK+, anteriormente me había tocado hablar de como crear aplicaciones Java basadas en GTK+, si… eso fue hace bastante tiempo, pero para aprovechar ese tiempo y las lineas que te toma el tener que programa dentro de la misma clase el posicionado de una caja o botón se puede reducir realmente el tiempo de desarrollo de programas con interfaz gráfica GTK+ usando el programa por excelencia a la fecha de hoy en la que se escribió esta entrada es haciendo uso de Galde. Una descripción de que es Glade a como lo explican en el sitio oficial:

Glade is a RAD tool to enable quick & easy development of user interfaces for the GTK+ toolkit and the GNOME desktop environment.

The user interfaces designed in Glade are saved as XML, and by using the GtkBuilder GTK+ object these can be loaded by applications dynamically as needed.

He preparado un proyecto en el cual se vera el uso superficial de Glade y explicativo de como usar el archivo generado con Java.

Estructura del proyecto:

  • src
    • gui
      • app.glade
    • prog
      • Constants.java
      • Suma.java

Para empezar a tirar código es necesario tener listo preparativos para empezar programar. Habrá que instalar unos los siguientes paquetes:

  • java-gnome (API GTK para Java )
  • java-gnome-javadoc (Documentación)
  • Glade (Desarrollo rápido de aplicaciones para GTK+)

Ya habiendo terminado de instalar todo, es momento de abrir Glade. En esta practica he hecho una plantilla, puedes ver el código generado dando click en app.glade. Habiendo descargado el archivo, en Glade nos dirigimos ha Archivo>Abrir y buscamos el archivo descargado .glade para cargar la interfaz.

Captura de pantalla de 2017-09-25 00-10-54
Archivo app.glade abierto desde Glade

El diseño de la GUI, trata de ser simple, podemos observar que varios widgets tienen asignado un ID,  son los  widgets con los que estaremos trabajando y los ID’s tomaran importancia en el código, también puedes modificar el nombre del ID de los botones y cajas de texto en el aparatado de Propiedades, justo donde indica la flecha roja en la siguiente imagen.

Captura de pantalla de 2017-10-01 02-26-34

Dejaremos los valores como tal si crees que te puede confundir mientras avanzas en esta practica.

A continuación dejare representados en una tabla los Widgets con sus respectivos ID:

Widgets  ID
Window Id_Suma
GtkEntry textNum1
GtkEntry textNum2
GtkEntry textResult
GtkButton botonSuma
GtkButton botonLimpiar
GtkButton botonLimpiar

El archivo es solo la apariencia, una carroza sin motor pero haremos que funcione usando a Java como nuestro aliado. Utilizaremos la librería java-gnome previamente instalada, en la mayoría de las distribuciones se debe de encontrar en el directorio /usr/lib64/java-gnome/gtk.jar, ahora seria añadir el archivo gtk.jar a un IDE de preferencia.

Ya teniendo preparado el entorno para programar, pasare creando un interface nombrándola Constants donde obtendrá valores constantes de los directorios que usaremos mas adelante:

package prog;

public interface Constants {

String HOME = System.getProperty("user.home");
String FOLDER_DIR=HOME+"/SumaGlade/gui";

}

En la interface se almaceno en la primera variable HOME, el directorio de usuario donde ejecutemos nuestro programa, en la siguiente linea almacenamos en la variable FOLDER_DIR otro futuro directorio que estaremos creando en el directorio del usuario.

La siguiente clase nombrada Suma, utilizara las siguientes clases que proporciona la API:

package prog;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.ParseException;
import org.gnome.gdk.Event;
import org.gnome.gtk.Builder;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.Window.DeleteEvent;
import org.gnome.gtk.Entry;
import org.gnome.gtk.Button;
import org.gnome.gtk.Button.Clicked;

public class Suma implements Constants{

	public static Builder builder;
	public static Window window;
	public Entry Text_num1;
	public Entry Text_num2;
	public Entry Text_result;
	public Button bttn_sum;
	public Button buttn_clean;
	public Button bttn_exit;
	public Window w_exit;

	public Suma(){	

		copyResource();

		try {
			builder = new Builder();
			builder.addFromFile(FOLDER_DIR+"/app.glade");

		} catch (FileNotFoundException e) {
			// TODO Auto-generated catch block
			System.err.println(""+e.getMessage());

		} catch (ParseException e) {
		  // TODO Auto-generated catch block
			System.err.println(""+e.getMessage());
		}

		iniciarObjectos();
		window.showAll();

	}//Fin del constructor

	public void iniciarObjectos() {
		//Vamos a enlazar los los objectos correspondientes a los ID de los Widgets

		//windows
		window =(Window) builder.getObject("Id_Suma");

		//Cajas de texto
		Text_num1 = (Entry) builder.getObject("textNum1");
		Text_num2 = (Entry) builder.getObject("textNum2");
		Text_result = (Entry) builder.getObject("textResult");

		//Botones
		bttn_sum = (Button) builder.getObject("botonSuma");
		bttn_sum.connect(on_botonSuma_clicked());

		buttn_clean = (Button) builder.getObject("botonLimpiar");
		buttn_clean.connect(on_botonLimpiar_clicked());

		bttn_exit = (Button) builder.getObject("botonSalir");
		bttn_exit.connect(on_botonSalir_clicked());

		w_exit = (Window)builder.getObject("Id_Suma");
		w_exit.connect(on_calculadora_destroy());

	}

	private Clicked on_botonSuma_clicked() {
		// TODO Auto-generated method stub
		return new Button.Clicked() {

			@Override
			public void onClicked(Button arg0) {

				//Se captura los valores ingresados en las cajas de texto
			    int num1= Integer.parseInt(Text_num1.getText());
			    int num2= Integer.parseInt(Text_num2.getText());
			    int suma= num1+num2;

			    //La operacion de suma de mostrara en la caja de texto "textResult"
			    Text_result.setText(Integer.toString(suma));
			}
		};
	}

	private Clicked on_botonLimpiar_clicked(){
		return new Button.Clicked() {

			@Override
			public void onClicked(Button arg0) {
				// TODO Auto-generated method stub

				Text_num1.setText("");
				Text_num2.setText("");
				Text_result.setText("");

			}
		};
	}

	private Clicked on_botonSalir_clicked() {
		return new Button.Clicked() {

			@Override
			public void onClicked(Button arg0) {
				// TODO Auto-generated method stub
				Gtk.mainQuit();

			}
		};

	}

	private DeleteEvent on_calculadora_destroy() {
		return new Window.DeleteEvent() {

			@Override
			public boolean onDeleteEvent(Widget arg0, Event arg1) {
				// TODO Auto-generated method stub
				Gtk.mainQuit();
				return false;
			}
		};
	}

	public void copyResource() {

		File folder = new File(FOLDER_DIR);
		folder.mkdirs();

		try {

			InputStream input=getClass().getResourceAsStream("/gui/app.glade");
		    OutputStream output= new FileOutputStream(FOLDER_DIR+"/app.glade");
		    byte [] buffer = new byte[1024];
		    int bytesRead;

		      while ((bytesRead = input.read(buffer,0,1024)) != -1) {

		            output.write(buffer, 0, bytesRead);
		        }

			  output.close();
			  input.close();

		 } catch(IOException e) {
			System.err.println(""+e.getMessage());
		 }
	  }

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		System.out.println("Run!");
		Gtk.init(args);
		new Suma();
		Gtk.main();

	}

}

En la clase Suma podemos ver como se inicia el método main para crear un programa típico de java-gnome iniciando con Gtk.init(args); y finalizando con Gtk.main(); y en medio se hace el llamada al constructor de la misma clase, el constructor llama al método copyResource(), este método hará que nuestro programa se pueda portar fácilmente a otros equipos, Porque?, anteriormente en otra entrada ya había publicado la utilidad que se le puede dar a este método que trata de  copiar y pegar un archivo que esta dentro de un JAR, después de haberse ejecutado el método copyResource() tendremos nuestro archivo Glade en el directorio $HOME/SumaGlade/gui/app.glade.

Dentro del mismo constructor se encuentra un try-catch, se crea un objecto de la clase Builder para usar el método addFromFile que nos ayudara a cargar la interfaz de usuario generado por Glade, al salir del try-catch se manda a llamar al método iniciarObjectos() que realizara la comunicación de los objectos correspondientes a su ID.

Finaliza el constructor con el lanzamiento de la interfaz de usuario invocando la linea window.showAll();. Lo que queda de la clase son métodos que corresponden a las funciones que realizara cuando el usuario interactue con el programa (Sumar, Limpiar y Cerrar).

En realidad no soy experto en el tema de ser un developer, me gusta la programación, bastante diría yo,  esto para mi a sido un reto, no de esos difíciles si no del hecho de aprende algo fuera de lo común, buscando en Internet sobre como desarrollar aplicaciones para GNU/Linux con interfaz gráfica GTK+ es realmente escasa, lo mas popular que puede encontrar es usando lenguajes como C, C# y Python, en Java la información es muy anticuada al igual que los videotutoriales pixeleado por el tiempo, aun mostrado el uso de libglade o lo mas que enseñan es a como instalar Glade XD, mi intención no era desahogarme con ustedes, solo es para que se animen a desarrollar en Linux, y a mostrar al mundo sus trabajos, sera de utilidad para muchos, bueno es  hora de finalizar esta entrada y recuerden, Si se puede imaginar, se puede programar.

Anuncios

Un comentario sobre “Crear programas en Java usando GUI generados en Glade

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s