I’m trying to build an adaptive GTK app, I want to replicate something similar to GNOME Contacts and GNOME Settings, but I don’t know how to build that on Glade… I know I have to use libhandy, but I don’t know how to pull both strings together… I’d really appreciate if someone could send me a glade file as an example or an explanation on how to do it.
Hi. You can’t make an adaptive app using Glade. Glade is nothing but an interface designer to write the XML UI file for you.
You need to put some code to watch for resize signals and change the packing of your application based on it. For example, try the signal configure-event.
So it involves, some coding and not using pure Glade (that is XML).
I would still expect creating the widgets themselves to be possible in Glade, even if one needs to add some packing hooks. The way I would go about it would be looking at the apps using GTK inspector and trying to recreate the structure in Glade.
But looking at https://gnome.pages.gitlab.gnome.org/libhandy/HdyLeaflet.html#HdyLeaflet--folded, I would expect it to fold automatically without any hooks.
I tried building
libhandy with Glade catalog and then running
env GLADE_CATALOG_SEARCH_PATH=$PWD/result-glade/share/glade/catalogs GLADE_MODULE_SEARCH_PATH=$PWD/result-glade/lib/glade/modules glade which allowed me to add
HdyLeaflet to a
GtkWindow but I did not manage to figure out how to add more than one child. Also it was super crashy for me with libhandy 0.0.13 but I would expect that to get better with newer releases.
It would be nice if we could describe even more advanced adaptive layouts declaratively. After all, Web allows you to make adaptive/responsive design using CSS media queries.
Though I do not think GTK allows changing packing properties in CSS at the moment, nor does its CSS subset support media queries.
Thank you for the responses! I I’ll be trying these out once I’m with a computer in hands.
Awesome, by using GNOME Conctacts .ui file I’m able to create a responsive ui. The problem now is that my program can’t correctly read the ui file, I added the libhandy as a dependency in both my meson and flatpak scheme files (ofc also imported it on the code), but whenever I hit “Run” on GNOME Builder I’m give the following error message:
(app:2): Gtk-CRITICAL **: 09:59:09.864: Error building template class 'AppWindow' for an instance of type 'AppWindow': .:150:1 Invalid object type 'HdyTitleBar'
I tried replicating the behavior with only a GTK Window with HdyHeaderbar on a separate app and the problem persists, should I open an issue on gitlab?
g_type_ensure (HDY_TYPE_TITLE_BAR) inside the instance initialization function for
AppWindow, before calling
I’m using Python for this app, would you know what is the python equivalent for
g_type_ensure (HDY_TYPE_TITLE_BAR) ?
You can use
GObject.type_ensure(Handy.TitleBar), assuming you imported libhandy as
I believe you could also call Hdy.init() at the very start of your program .
With the [GtkTemplate] and [GtkChild] decorators in Vala, this is pretty simple. Just build a template (with that composite option after toplevel widget id) in Glade and add your dynamic magic in actual code that’s gonna automatically have fields bind to actual template children you have already set in .ui file
Not only that, that’s the only proper way to do it. There are a lot more things to init there than just types.
The widget Contacts and Settings use is called
Please don’t try to watch for window resizes and change the UI at specific sizes, you will run into problems with things such as with large fonts.
Another thing is that libhandy 1.0, which got released very recently, has
HdyWindow, which allows you to use just one leaflet in the following fashion:
window leaflet box.vertical headerbar content separator box.vertical headerbar content
And then you will need to add both headerbars into a
HdyHeaderGroup so that it handles the title buttons.
HdyTitleBar should not be needed, in fact I think we should have removed that widget from 1.0…
Make sure to use
HdyHeaderBar though, and not
GtkHeaderBar, since the latter won’t be draggable in this case.
And yes, it should all work with templates.
Is there any good reference available about
GtkTemplate and its howto in Python ? So far, I had seen it only when GNOME Builder creates a project for me. ^^