Adding a simple ListBox widget in your GTK application is easier than you think. This tutorial will show you how to create ListBox-like functionality in GTK using Glade3. GTK uses the TreeView control as their do-all list control. You can create simple lists, tree-like lists and all sorts of various list views. What is really cool about the TreeView widget is that your columns can be almost any other widget type. You can put a Button in one column, and an entry widget in another, or even a progress bar! This example is only going to cover a basic 1 column listbox using the TreeView widget.

Requirements & Notes:
1. This tutorial expects that you have a little experience creating basic GUI’s in glade3. If not, please read a Glade3 tutorial.

2. I use Anjuta as my IDE.

3. The code in here is for reference. It is not necessarily a copy/paste working example, however, it does come from a working test project of mine….

4. This code only shows you how to populate a listbox (TreeView). The next one I write will be how to get a selected value and how to use signals (events).

Lets get started.
1. Open up your Glade3 User Interface. You should already have an interface with a TreeView object called “treeview1″.

2. Right click on your TreeView object from the left window pane and click “Edit Separately” and goto the “Hierarchy” tab.

3. Create a new Tree View column. Call it whatever you want.

4. Create a new Cell Renderer and call it anything.

Note the numbers on the picture below.

This is pretty much it for the gui stuff. Save your gui and open up your GTK code. (callback.h, main.cpp etc etc) Here is my callback.h file. The GtkTreeModel is what stores your actual data. The other stuff is just some other junk I was playing with.

#include <gtk/gtk.h>
GtkEntry *myEntry;
GtkTextView *myTextView;
GtkTextIter iter;
GtkTreeModel *myStore;

void destroy (GtkWidget *widget, gpointer data);

Now for my main.cpp file. Here is some example source code of how I populate my TreeView control. This code is a little messy but it should give you a good idea of how it works.

GtkWidget* create_window (void)
{
	GtkWidget *window;
	GtkBuilder *builder;
	GError* error = NULL;
    GtkTreeIter iter;
	GtkTreeView *view;
   enum
  {
   COL_NAME = 0
  };	

	builder = gtk_builder_new ();
	if (!gtk_builder_add_from_file (builder, UI_FILE, &error))
	{
		g_warning ("Couldn't load builder file: %s", error->message);
		g_error_free (error);
	}

	/* This is important */
	gtk_builder_connect_signals (builder, NULL);
	window = GTK_WIDGET (gtk_builder_get_object (builder, "window"));
            myEntry = GTK_ENTRY (gtk_builder_get_object (builder, "entry1"));
	myTextView = GTK_TEXT_VIEW (gtk_builder_get_object (builder, "textview1"));

Here I define myStore so that I can use it. I am defining 1 column which will hold data of a G_TYPE_STRING type. I then get a reference to my treeview1 (called view in this case) which is eventually used with the gtk_tree_view_set_model function. The gtk_list_store_append function is what creates the new row and gtk_list_store_set is what actually sets my value. In this case I just use two static char variables (*t1 and *t2) and pass those in. The we use gtk_tree_view_set_model to set the model (store) in our TreeView object (view).

	myStore = gtk_list_store_new (1, G_TYPE_STRING);
             view = GTK_TREE_VIEW(gtk_builder_get_object(builder,"treeview1"));
	gchar *t1 = "text1";
	gchar *t2 = "text2";
             gtk_list_store_append (myStore, &iter);
	gtk_list_store_set(myStore,&iter,0,t1,-1);

	gtk_list_store_append (myStore, &iter);
	gtk_list_store_set(myStore,&iter,0,t2,-1);

   gtk_tree_view_set_model (GTK_TREE_VIEW (view), myStore);

  //gtk_list_store_set (store, &iter,    COL_NAME, "Heinz El-Mann", COL_AGE, 51, -1);
	gtk_entry_set_text (myEntry, t2);

	g_object_unref (builder);

	return window;
}

int main (int argc, char *argv[])
{
 	GtkWidget *window;

	gtk_set_locale ();
	gtk_init (&argc, &argv);

	window = create_window ();

	gtk_widget_show (window);

	gtk_main ();
	return 0;
}

You should eventually be able to get a Listbox like widget showing “text1″ and “text2″ in 2 different columns.

Today I was sitting next to a nice warm stove up in Vermont looking at some Linux Application code I’ve developed in the past. I thought, what a good time to make a quick and dirty “Hello World” GTK# tutorial. GTK# is the equivalent in Linux as Visual Studio is to Windows and both use C#(c-sharp) as their programming language. The drag and drop component interface works much like Visual Studio, but there are a few differences which are easy to get used to. GTK# works with containers a lot more than Visual Studio traditionally does, almost forcing to he user into dynamic GUI development. Visual Studio has more of the static method where Forms do not scale depending on the windows size of the application. GTk# does have a “fixed” static container that lets you drag and drop a component anywhere on your form much like Visual Studio. In this mini-tutorial I drag the “fixed” container to my form to let me build my GUI in a free-form-like fashion.

Now that we have dragged a “Fixed” container to our form we can draw a button and entry (textBox) component to our Form. Drag and Drop the component to your Form, then resize the component once it’s dropped on the Form. Read more…