Origen(Data);

Usando GtkTreeView generado en Glade con Java

, , , , , ,
, , , , , ,

La presentación de datos en vista tabular es omnipresente en la mayoría de las aplicaciones, la implementación de TreeView representa los datos de un TreeModel en forma tabular, ya que se utiliza tanto para generar datos en forma de lista como para permitir al usuario seleccionar uno o más elementos de una lista. TreeView widget es la parte de la vista del diseño modelo/vista/controlador GTK, con una de las subclases TreeModel que suministra el modelo de datos.

Para construir un TreeView es necesario saber que se compone de una o más columnas verticales llamadas TreeViewColumn‘s, los CellRenderer‘s empacan los datos. Un CellRenderer hace el trabajo de tomar datos del TreeModel subyacente y presentarlos en TreeViewColumn. Hay una familia de CellRenderers para diferentes tipos de datos subyacentes, pero usarás CellRendererText casi exclusivamente.

Un TreeModel viene en dos formas para el almacenamiento de datos: ListStore para una lista de filas y TreeStore para datos que tienen una relación jerárquica entre las filas.

Los TreeModels son tabulares y, como tales, tienen «columnas», cada una de las cuales está fuertemente tipada, y están representadas en java-gnome por las DataColumn clases.

Mientras que las «columnas» (y sus tipos) deben declararse al crear un TreeModel, las «filas» en un TreeModel son dinámicas; crece a medida que agrega datos al modelo. Una instancia de TreeIter se utiliza para indicar una fila en un TreeModel; estos se usan tanto al agregar nuevas filas como cuando se trata de identificar qué fila se ha seleccionado en una TreeView. Tenga en cuenta que los TreeIters son muy transitorios y solo son válidos siempre que no haya cambiado la estructura del modelo (es decir, agregando otra fila, clasificándola, filtrándola, etc.) de modo que cuando rellenemos un TreeModel tendemos a hacerlo una fila completa a la vez.

Creando una GUI con GtkTreeView en Glade

Dejare un video donde se muestra la forma en que construí la interfaz de usuario con la que se trabajara junto a Java. Dejare un enlace con el código generado en Glade para los impacientes: GUI.glade

En la siguiente tabla se muestra los nombres que se asignaron a los IDs de los Widgets con los que estaremos trabajando.

Widgets ID
WindowwindowID
GtkEntryentryNombreID
GtkEntryentryEdadID
GtkButtonbuttonAnadirID
GtkButtonbuttonActualizarID
GtkTreeViewtreeviewID

Desarrollo de TreeView en Java

Se creara un proyecto en Java donde la clase se llama TabularForm, en el mismo constructor de la clase se iniciara el enlace del widget TreeView creado en Glade para poder construir nuestro TreeModel usando ListStore.

TreeView view;
TreeViewColumn vertical;
TreeIter row;
ListStore listStore;
DataColumnString idColumn, nameColumn, ageColumn;
CellRendererText idText, nameText, ageText;
String captureName, captureAge ;
 
//Constructor
public TabularForm() {
...
//TreeView
view = (TreeView) builder.getObject("treeviewID");
 
/* Construccion del modelo */
listStore = new ListStore(new DataColumnString[]{
 
      idColumn = new DataColumnString(),
      nameColumn = new DataColumnString(),
      ageColumn = new DataColumnString(),
  });
 ...
 
 }

Ahora comienza a crear su vista al crear una instancia de TreeView y luego usarlo para obtener instancias de TreeViewColumn; con el método setTitle() asignara un titulo a la columna:

view.setModel(listStore);
 
vertical = view.appendColumn();
vertical.setTitle("ID");
...
 
vertical = view.appendColumn();
vertical.setTitle("Nombre");
...
 
vertical = view.appendColumn();
vertical.setTitle("Edad");
...

Construiremos un CellRenderer, especificando de qué TreeViewColumn va a formar parte:

vertical = view.appendColumn();
vertical.setTitle("ID");
idText  = new CellRendererText(vertical);
...
 
vertical = view.appendColumn();
vertical.setTitle("Nombre");
nameText = new CellRendererText(vertical);
...
 
vertical = view.appendColumn();
vertical.setTitle("Edad");
ageText = new CellRendererText(vertical);
...

Especificando de dónde vendrán sus datos. Este es el paso que une TreeView y TreeModel.

vertical = view.appendColumn();
vertical.setTitle("ID");
idText  = new CellRendererText(vertical);
idText.setText(idColumn);
 
vertical = view.appendColumn();
vertical.setTitle("Nombre");
nameText = new CellRendererText(vertical);
nameText.setText(nameColumn);
 
vertical = view.appendColumn();
vertical.setTitle("Edad");
ageText = new CellRendererText(vertical);
ageText.setText(ageColumn);

Agregue datos a un TreeModel llamando primero a appendRow() que devuelve un TreeIter que apunta a la nueva fila, y luego usando el setValue() método apropiado para el tipo de datos de cada columna:

row = listStore.appendRow();
listStore.setValue(row, idColumn, String.valueOf(count));
listStore.setValue(row, nameColumn, captureName);
listStore.setValue(row, ageColumn, captureAge);

Dejo el código completo de la clase :

package prog;
 
import java.io.FileNotFoundException;
import java.text.ParseException;
import org.gnome.gdk.Event;
import org.gnome.gtk.Builder;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.ListStore;
import org.gnome.gtk.MessageDialog;
import org.gnome.gtk.MessageType;
import org.gnome.gtk.ResponseType;
import org.gnome.gtk.TreeIter;
import org.gnome.gtk.TreeView;
import org.gnome.gtk.TreeViewColumn;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.Button;
import org.gnome.gtk.CellRendererText;
import org.gnome.gtk.DataColumnString;
import org.gnome.gtk.Button.Clicked;
import org.gnome.gtk.ButtonsType;
import org.gnome.gtk.Entry;
import org.gnome.gtk.Window.DeleteEvent;
 
public class TabularForm {
 
    Builder builder;
    Window window;
    Button buttonAdd, buttonUpdate;
    Entry entryName, entryAge;
    TreeView view;
    TreeViewColumn vertical;
    TreeIter row;
    ListStore listStore;
    DataColumnString idColumn, nameColumn, ageColumn;
    CellRendererText idText, nameText, ageText;
    String captureName, captureAge ;
    int count=0;
 
    public TabularForm() {
 
        try {
 
            builder = new Builder();
            builder.addFromFile("src/GUI/GUI.glade");
 
        } catch (FileNotFoundException | ParseException e) {
 
            e.printStackTrace();
        }
 
        getObjectGlade();
        window.showAll();
 
    }
 
    public void getObjectGlade() {
 
        //Window
        window = (Window) builder.getObject("windowID");
        window.connect(on_windowID_destroy());
 
        //Cajas de texto
        entryName = (Entry) builder.getObject("entryNombreID");
        entryAge = (Entry) builder.getObject("entryEdadID");
 
        //Botones
        buttonAdd = (Button) builder.getObject("buttonAnadirID");
        buttonAdd.connect(on_buttonAnadirID_clicked());
 
        buttonUpdate = (Button) builder.getObject("buttonActualizarID");
        buttonUpdate.connect(on_buttonActualizarID_clicked());
 
        //TreeView
        view = (TreeView) builder.getObject("treeviewID");
 
        /* Construccion del modelo */
        listStore = new ListStore(new DataColumnString[]{
 
                idColumn = new DataColumnString(),
                nameColumn = new DataColumnString(),
                ageColumn = new DataColumnString(),
        });
 
        /*Establezca TreeModel que se usa para obtener datos de origen para este TreeView*/
        view.setModel(listStore);
 
        /*Crear instancias de TreeViewColumn*/
        vertical = view.appendColumn();
        vertical.setTitle("ID");
        idText  = new CellRendererText(vertical);
        idText.setText(idColumn);
 
        vertical = view.appendColumn();
        vertical.setTitle("Nombre");
        vertical.setExpand(true);
        nameText = new CellRendererText(vertical);
        nameText.setText(nameColumn);
 
        vertical = view.appendColumn();
        vertical.setTitle("Edad");
        ageText = new CellRendererText(vertical);
        ageText.setText(ageColumn);
 
    }
 
    private DeleteEvent on_windowID_destroy() {
        return new Window.DeleteEvent() {
 
            @Override
            public boolean onDeleteEvent(Widget arg0, Event arg1) {
                Gtk.mainQuit();
                return false;
            }
        };
 
    }
 
    private Clicked on_buttonAnadirID_clicked() {
        return new Button.Clicked() {
 
            @Override
            public void onClicked(Button arg0) {
 
                //Acciones del boton Agregar
 
                captureName=entryName.getText().toUpperCase();
                captureAge=entryAge.getText();
 
                entryName.setText("");
                entryAge.setText("");
 
                count++; //Aunmenta el contador cada ves que se agrega un nombre
 
            }
        };
 
    }
 
    private Clicked on_buttonActualizarID_clicked() {
        return new Button.Clicked() {
 
            @Override
            public void onClicked(Button arg0) {
 
                //Acciones del boton Actualizar
 
                MessageDialog dialog = new MessageDialog(window, true, MessageType.WARNING, ButtonsType.CLOSE,"Se han agregado nuevos valores");
                dialog.setSecondaryText("La tabla tiene nuevos valores, presione el boton cerrar para continuar");
 
                // Oculta el dialogo
                ResponseType choice = dialog.run();
                if (choice == ResponseType.CLOSE) {
                    dialog.hide();
 
                }
 
                /* Agregue datos a TreeModel usando appendRow() que devuelve un TreeIter
                 * que apunta a la nueva fila, y luego usando el setValue()
                 * apropiado para el tipo de datos de cada columna
                 * */
 
                row = listStore.appendRow();
                listStore.setValue(row, idColumn, String.valueOf(count));
                listStore.setValue(row, nameColumn, captureName);
                listStore.setValue(row, ageColumn, captureAge);
 
            }
        };
 
    }
 
    public static void main(String[] args) {
 
        Gtk.init(args);
        new TabularForm();
        Gtk.main();
 
    }
 
}

Video mostrando la aplicación ya funcionando:

Referencias

Anuncio publicitario
Licencia Creative Commons

Esta obra está bajo una Licencia Creative Commons Atribución 4.0 Internacional.

Licencia Creative Commons

Descubre cómo puedes contribuir a mi blog con donaciones. Tus recompensas me ayudan a seguir creando contenido valioso para la comunidad. Con tan solo un par de clics, puedes marcar la diferencia y apoyarme. ¡Apoya ahora!. 🚀🔥

Una respuesta a “Usando GtkTreeView generado en Glade con Java”

  1. Avatar de Usando GtkTreeView generado en Glade con Java con conexión a PostgreSQL – Origen(Data);
    Usando GtkTreeView generado en Glade con Java con conexión a PostgreSQL – Origen(Data);

    […] un poco el código que había enseñado en la anterior entrada me dio interés de realizarlo ahora con una conexión a una base de datos para almacenar de forma […]

    Me gusta

    Responder

Deja una respuesta

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

Gravatar
Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. ( Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. ( Salir /  Cambiar )

Cancelar

Conectando a %s

Crea un sitio web o blog en WordPress.com

A %d blogueros les gusta esto: