ar.xjuan.Blog

Last week, inspired by Tristan’s GtkComposite branch idea of embedding builder xml into widget classes together with the old eagerness  of implementing Glade UI with Glade itself I started hacking Glade in glade!

The first step was to recreate GladeWindow widget hierarchy in Glade, that was quick and easy. Then I started replacing the hard coded widgets with it but since I wanted to use the very same executable I was hacking on to edit its own UI definition file I had to make sure I got the palette, design view, inspector and property editor properly working before removing the old code.

Later on I proceeded to remove the old menu that was implemented using GtkUIManager… big mistake! How was I supposed to edit the file if I was not able to save the file, so I revert it and moved it to the end of the window and keep it until the new menu had a working save menu item!

After this, Glade was functional and only had one regression. For some reason GtkAccelLabel does not show up the accelerator when used with a related action.  But that seems to be a Gtk+ bug (see bugzilla report)

The only problem left to solve was the dependency GladeWindow had on the UI file. I really did not like the idea of a class depending on a file so I decided it was a good time to give GResource a try! GResource allows you to easily embed resources into your code. All you have to do is define all your resources in GResource xml format, in this case only one file glade.glade.

glade-resources.gresource.xml:

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
 <gresource prefix="/org/gnome/glade">
  <file compressed="true">glade.glade</file>
 </gresource>
</gresources>

And compile it into source using glib-compile-resourses tool, which can be done automatically with a couple of Makefile rules.

# Rules to compile resources
%.h: %.gresource.xml
  $(GLIB_COMPILE_RESOURCES) --generate $< --target=$@
%.c: %.gresource.xml
  $(GLIB_COMPILE_RESOURCES) --generate $< --target=$@
 
# Dependencies rule, and do not forget to do a make after
# editing the UI with glade!
glade-resources.c glade-resources.h: \
       glade-resources.gresource.xml \
       $(shell $(GLIB_COMPILE_RESOURCES) --generate-dependencies \
         glade-resources.gresource.xml)

Once you have the build system setup it is as simply as using the resource uri instead of a file path.

GtkBuilder *builder = gtk_builder_new ();
GError *error = NULL;
gtk_builder_add_from_resource (builder,
                               "/org/gnome/glade/glade.glade",
                               error);

As usual you can find this in git master
git clone git://git.gnome.org/glade

I am happy to announce two new Glade features that should make UI designers life a little bit easier. As you probably know Gtk+ 3 introduced new widget properties to control margins and its alignments which where only accessible in Glade  through the common tab in the property editor… until now!. Margins and Alignment edit modes join good old Selection and Drag modes to let you edit margins and alignment properties using nothing but the mouse. After all having offscreen project widgets not only lets us draw pretty selections but also do something useful as well.

You can currently find this code in git master soon to be released as Glade 3.11

UPDATE: Glade 3.11 is on the wild! For more information see the release notes.

git clone git://git.gnome.org/glade

[vimeo width=”640″ height=”352″]http://vimeo.com/31572206[/vimeo]

Margins edit mode:

Using this mode is as easy as clicking on the border of a selected widget to enable it and then use the mouse to simply modify the desired margin. Also to make it easier to set the same value in both margins you can hold down shift and holding down control makes it snap to 6 pixels 😉

Alignments edit mode:

This mode can be enabled by selecting it from the toolbar or pressing Shift+left click on the selected widget border. Clicking over the pushpins will make it toggle so for example if you want to have a widget left aligned all you have to do is unpush the right pushpin, to make the widget vertically centered both top and bottom pushpin have to be unpush.