GJS/GTK 3.0 - Gtk.TreeView with TreeStore/TreeModel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// You have to tell GJS which version of Gtk to target | |
imports.gi.versions.Gtk = "3.0" | |
const { GObject, Gtk } = imports.gi; | |
Gtk.init(null); | |
class MyWindow extends Gtk.Window { | |
_init() { | |
super._init({ | |
title: "My TreeView Example" | |
}); | |
this._buildUI(); | |
} | |
_buildUI() { | |
// First, you have to create a TreeStore, which is like | |
// a database for your tree data. | |
this.store = new Gtk.TreeStore(); | |
this.store.set_column_types([GObject.TYPE_STRING]); | |
// This creates the TreeModel on the TreeStore object | |
this.store.filter_new(null); | |
// Let's populate our tree with one set of parent/children | |
// First, we have to create a new (empty) entry | |
// We save the returned TreeIter as a reference for the | |
// children Otherwise, if we don't need children, we could | |
// simply call this.store.set_value(this.store.append(null), 0, "TEXT") | |
let parent = this.store.append(null); | |
// Then, we give that entry its data. The 0 here referring to the COLUMN | |
// index in the array above "GObject.TYPE_STRING" | |
this.store.set_value(parent, 0, "Parent"); | |
// Next, we create the children, using the parent TreeIter as the | |
// argument to append (that is the parent argument) | |
this.store.set_value(this.store.append(parent), 0, "Child 1"); | |
this.store.set_value(this.store.append(parent), 0, "Child 2"); | |
// Now that we have the store populated, we have to construct the view itself | |
this.tree = new Gtk.TreeView({ model: this.store }); | |
// We have to create a renderer and column to actually do the work of | |
// presentation the in the view. This will allow you to apply custom | |
// styling or do operations on cells before presentation. | |
this.renderer = new Gtk.CellRendererText(); | |
this.column = new Gtk.TreeViewColumn(); | |
this.column.pack_start(this.renderer, true); | |
this.column.set_cell_data_func( | |
this.renderer, | |
// This function is where the styling/operations happen | |
(col, cell, model, iter) => { | |
cell.editable = false; | |
cell.text | |
= this.store.get_value(iter, 0); | |
} | |
); | |
// Now we add the column to the tree | |
this.tree.append_column(this.column); | |
// If you need multiple columns, you will need to repeat this for each | |
// Lastly, we add the view to the window. | |
this.add(this.tree); | |
} | |
} | |
// Start the application | |
const App = GObject.registerClass(MyWindow); | |
let win = new App(); | |
win.connect("delete-event", () => Gtk.main_quit()); | |
win.show_all(); | |
Gtk.main(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment