How to make an adaptive GTK app in glade?

Applications
, ,
1

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.

2 Likes
2

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. :smiley:

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).

3

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.

4

Actually, looking at the gnome-contacts source code, it actually uses HdyLeaflet in a ui file. Though, note that there have been some API changes recently.

1 Like
5

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.

1 Like
6

Thank you for the responses! I I’ll be trying these out once I’m with a computer in hands.

7

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?

8

Add g_type_ensure (HDY_TYPE_TITLE_BAR) inside the instance initialization function for AppWindow, before calling gtk_widget_init_template().

9

I’m using Python for this app, would you know what is the python equivalent for g_type_ensure (HDY_TYPE_TITLE_BAR) ?

10

You can use GObject.type_ensure(Handy.TitleBar), assuming you imported libhandy as Handy.

2 Likes
11

I believe you could also call Hdy.init() at the very start of your program .

1 Like
12

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

1 Like
13

Not only that, that’s the only proper way to do it. There are a lot more things to init there than just types.

14

The widget Contacts and Settings use is called HdyLeaflet.

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.

With this, 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.

1 Like
16

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. ^^

17

C: Gtk – 3.0 and all the other funcs with template in their names

Vala: Projects/Vala/Manual/Attributes - GNOME Wiki!

Python not sure.

1 Like
18

There are examples in the pygobject repository

2 Likes
19

Thank you! This setup makes a lot of sense! I’m rewriting my app to work this way!

20

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.