GTK+ programs with GtkBuilder and dynamic signal handlers.

Well, I decided to review some GTK+ and Gnome development lately. With GTK+, a nice way to create a user interface is with the Glade Interface Designer. Glade produces an xml file with a glade-interface element that can be loaded by libglade. You can then change attributes of the user interface without having to recompile your program. You just edit the design xml file and you’re good to go. Here are a couple things I noted during the process that weren’t too clear from the documentation:

  1. You have to work with C, not C++, if you want to dynamically load the signal handlers. Many times, it is convenient to write a program mostly in C, but use the C++ compiler and take advantage of a few of the niceties in C++. You can’t do that in this case. According to the libglade documentation, you’ll need to add -export-dynamic flag so that the dynamic loader for the signal handlers can locate the functions in the executable with the gmodule library. That doesn’t work with a C++ compiled executable. You’ll have to stick with C. If you really want to use GTK+ with C++, you can always try the glademm bindings instead of the default C bindings. You could also use gtkmm and write the entire program w/ C++ instead.

    UPDATE: I think you could get around this by using extern “C” around the function calls for the signal handlers. Then you could still use the automatic signal handlers while compiling with g++.

  2. As of GTK+ 2.0, libglade is deprecated. There is a new GtkBuilder interface that does the same thing. You no longer need to compile and link against the libglade libraries. I searched all over for a new interface designer to replace Glade but found a lot of references to people still using Glade. The xml file produced by glade is not exactly the same and not compatible with the GtkBuilder interface however. I finally found that there is a conversion function included with GTK+ 2.0 that converts the glade file to a GtkBuilder xml file.

    gtk-builder-convert <input file> <output file>

Anyway, with those two items taken care of, here is a really simple program and a really simple Makefile I put together to show how to get a GTK+ 2.0 program window showing.

hello.c

#include 
void close_app(GtkWidget* widget,gpointer user_data) {
 gtk_main_quit();
}
int main (int argc, char **argv) {
 GtkBuilder *gtkBuilder;
 GtkWidget *mainwin;
 gtk_set_locale();
 /* Initialize the widget set */
 gtk_init (&argc, &argv);
 /* Create the main window */
 gtkBuilder= gtk_builder_new();
 gtk_builder_add_from_file(gtkBuilder,"hello.ui",NULL); 
 gtk_builder_connect_signals ( gtkBuilder, NULL );
 mainwin= GTK_WIDGET(gtk_builder_get_object(gtkBuilder,"window1"));
 g_object_unref ( G_OBJECT(gtkBuilder) );
 /* Show the application window */
 gtk_widget_show_all ( mainwin );
 /* Enter the main event loop, and wait for user interaction */
 gtk_main ();
 /* The user lost interest */
 return 0;
}

MakeFile
LIBS=$(shell pkg-config --cflags --libs gtk+-2.0)
CFLAGS=-Wall -g -export-dynamic
hello: hello.c hello.ui
    gcc -o hello hello.c $(LIBS) $(CFLAGS)
hello.ui: hello.glade
    gtk-builder-convert hello.glade hello.ui

hello.glade
For the sake of space, I’ll leave the xml contents out. Suffice it to say that there is a window, “window1”, and I set the destroy handler to “close_app”.

The Makefile converts hello.glade to hello.ui, which is loaded by the hello program at runtime to produce the UI. You can of course build a window dynamically at runtime and you can also choose to connect the signal handlers manually. It just struck me as a lot less C code to do it like this.

Ten Principles Of Effective Web Design

Here is another article from Digg.com highlighting some effective web design techniques. I’m stockpiling these for the next time I have a new project that requires a new face. This one is particularly informative since it gives examples at the beginning of how users use the web and then shows how you can take advantage of that. From the article:

Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has established as a standard approach for successful and profit-oriented web design. In order to use the principles properly we first need to understand how users interact with web-sites, and how they think.

read more | digg story

8 Web Design Mistakes That Developers Make

I decided to make a blog entry for this so I can come back again and review it later. I fall exactly into the category of “developers creating websites”. Luckily, most of the work I do, at least professionally, has someone else to be in charge of how it looks! I found the tips mentioned here very useful however.

From the article:

An excellent website takes a particularly savvy blend of both great design and great code. Because of this, you often find designers having to figure out code and developers trying their hand at design. Speaking as a developer who spent his university years studying among other developers, I can safely say that programmers are not designers.

read more | digg story

9 Essential Principles for Good Web Design

I came across this article on Digg.com. It contains pretty concise tips that I can follow and make sure I’m doing. Since I’m not a designer and don’t necessarily have the best ability to choose matching colors and appropriate fonts etc, I find articles like these helpful to bookmark for reference when tuning my sites.

From the article:

Web design can be deceptively difficult. Getting a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent… So here are my 9 principles for good web design with examples and further reading!

read more | digg story

Elements of Great Web Design: The Polish

I’m not an expert designer. In fact, most of the time I feel inadequate when it comes to picking colors, layouts, and other features that a designer usually takes care of. All my design has to do with interfaces, classes, schema, and other back end technology that most people can’t see.

In the mean time, I’ve been trying to configure my blog to look nice and work correctly. This article on Digg.com had a few additional suggestions that I think would be great, and plan on reading through a bit more thoroughly when I get a second.

From the article:

When I put together designs, I do so in two phases – Layout and Polish. During the layout phase I place the main objects and usually finishing with something that looks relatively complete. In the polish stage I go over the design and adjust colours, type treatments, shadows, layers, and clean it all up. In this first of a series of tutorials on…

read more | digg story