GTK components for UI like Control Center

Platform
1

Hello,
I’m trying to build an application which UI would be based on the same UI than in Gnome Control Center :

  1. a left vertical bar with main application options
  2. when an option is chosen : in the left vertical bar, the main application options are replaced by the specific options of the choice done. A left arrow on top left allow to go back to 1)
  3. a center/right place for details of the specific option

This is what we see in Gnome Control Center with

  1. main parameters categories
    example https://i.stack.imgur.com/DcCXN.jpg

  2. list of applications when option “applications” is chosen in 1)
    example : https://1175654.v1.pressablecdn.com/wp-content/uploads/2019/02/gnome-settings-applications.jpg

  3. parameters specific to the application chosen in 2)

I believe that it’s using GtkStack, GtkStackSideBar but I don’t find a tutorial to learn how to implement those components and looking at Gnome Control Center UI files weren’t really helpful.
Does somebody knows of a good tutorial of how to implement that kind of UI ? Or a easy-to-understand XML UI code ? Thanks in advance.

Eric

2

It seems that this is libhandy library that I would need to use in order to generate the like of Gnome Control Center UI.

3

Hi,

Sounds like you want to have scrolling, use GtkViewport.

Or for simple paging use a GtkHBox and do GtkWidget::show() or GtkWidget::hide()

bests,
Joël

4

Hi Joël,

Yes i will have to use that kind of container components but my question was more about the global UI concept : I want to use the same kind of UI than in Gnome Control Center. Now, i understand that this is done via the libhandy library that is developed for librem5 and with objective of be usable in mobiles and laptops thanks to adaptive components.

I try to use the libhandy library but again i meet an issue :

  • It’s working fine in a standalone python script launch with command line “python3 myscript.py”.
  • But it’s ko when I use the same script inside an IDE (tested with Builder and PyCharm) I get the error message “ValueError: Namespace Handy not available”.
    The line refered to this error is the first line of following block :
    gi.require_version(‘Handy’, ‘0.0’)
    from gi.repository import Handy

I didn’t find how to resolve that issue so far.

5

Finally, as I didn’t find how to use libhandy, i’m using stacksidebar and stackswitcher.

1 Like
6

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