gtk/glade expandable toolbar

Question

I guess I have a unique problem.

I am trying to create a horizontal toolbar like widget that can can hold labels, buttons, and other gtk widgets. I want to pack as much info as I can but I also need it to work for various screen sizes.

Ultimately I'm trying to anticipate the GUI being ran on smaller screens so most of the widgets I want to use cannot actually fit because they take too much space all together.

But I still want to make them available to the user so I figured I could have two or three rows of widgets. Putting the most used at the top.

Ultimately, I'd like the user to be able to add different widgets at runtime depending on what they want(sort of like how you can sometimes customize headers for lists in some programs... e.g., windows explorer's file lists).

Now, I want some widgets to take up a lot of space if it is available and some are fixed in size. This way, the space is optimally used. If a person is running the app on a large LCD monitor, they could pack more widgets and if it is not, they could remove them.

Basically it sorta like a flow control but different. I was using a horizontal box but realized the limitations of this quickly. Mainly that I could not resize my window smaller than what the total width which might make the app too large to fit on a smaller window.

I'm trying to minimize the amount of work as I don't wanna reimplement glade in to the program. OTH, I suppose I could create different glade interfaces for different devices... probably be the easiest thing. If the user really wants to customize the interface they could do it manually. It requires extra programming work since I have to worry about missing widgets and all that but should be less worrying.

I'd rather have a more useful method though. Any ideas?

The widgets that make up my "toolbar" are images, buttons, labels, drawing areas, and a few other standard gtk widgets. Some will need to take up as much horizontal space as they can while others will be fixed in size. All will have the same vertical size.

Some elements will have fixed positions such as the far right and left and not change.

I should probably be a bit more clear

X Y Z * * * * A B C
* * * * * * * * * *

XYZ and ABC are going to be fixed widgets that must show up and to the far left and right resp.

• are widgets I want to be configurable. Some will need to expand to use the maximum size they can(And share with others that also need to expand) and some will be fixed. Ultimately the user should be able to add and remove the * widgets without issue and reorder them if they want. They add to many they should flow down so that the X Y Z and A B C widgets always are shown.

Answer 1

Not sure about your goals but to get something similar to your drawing, an approach, would be, to use some GtkToolbar/Gtk.Toolbar packed on a GtkGrid/Gtk.Grid or GtkBox/Gtk.Box.

The first and the last Toolbars would have the show_arrow property set to False while the one(s) in the middle would have it set as True.

With a setup like this, the toolbar(s) in the middle would shrink and show an arrow that allows the user to select the packed widgets.

GtkToolbar/Gtk.Toolbar allows the use of all kinds of widgets even custom ones.

Here's a simple example:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.0 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <object class="GtkWindow">
    <property name="can_focus">False</property>
    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkBox">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <object class="GtkToolbar">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="show_arrow">False</property>
                <child>
                  <object class="GtkToolButton">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">__glade_unnamed_7</property>
                    <property name="use_underline">True</property>
                    <property name="stock_id">gtk-about</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="homogeneous">True</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkToolButton">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">__glade_unnamed_8</property>
                    <property name="use_underline">True</property>
                    <property name="stock_id">gtk-add</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="homogeneous">True</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkToolButton">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">__glade_unnamed_9</property>
                    <property name="use_underline">True</property>
                    <property name="stock_id">gtk-go-back</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="homogeneous">True</property>
                  </packing>
                </child>
              </object>
              <packing>
                <property name="expand">True</property>
                <property name="fill">True</property>
                <property name="position">0</property>
              </packing>
            </child>
            <child>
              <object class="GtkToolbar" id="10297 927030981 28.68">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <child>
                  <object class="GtkToolButton">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">buttonOrWidget</property>
                    <property name="use_underline">True</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="homogeneous">True</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkToolButton">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">AnotherButton</property>
                    <property name="use_underline">True</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="homogeneous">True</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkToolButton">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">YetAnotherButton</property>
                    <property name="use_underline">True</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="homogeneous">True</property>
                  </packing>
                </child>
              </object>
              <packing>
                <property name="expand">True</property>
                <property name="fill">True</property>
                <property name="position">1</property>
              </packing>
            </child>
            <child>
              <object class="GtkToolbar">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="show_arrow">False</property>
                <child>
                  <object class="GtkToolButton">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">__glade_unnamed_10</property>
                    <property name="use_underline">True</property>
                    <property name="stock_id">gtk-justify-center</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="homogeneous">True</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkToolButton">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">__glade_unnamed_11</property>
                    <property name="use_underline">True</property>
                    <property name="stock_id">gtk-clear</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="homogeneous">True</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkToolButton">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">__glade_unnamed_12</property>
                    <property name="use_underline">True</property>
                    <property name="stock_id">gtk-connect</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="homogeneous">True</property>
                  </packing>
                </child>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">2</property>
              </packing>
            </child>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkImage">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="stock">gtk-missing-image</property>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

The result (with the middle toolbar totally shrinked):

Growing the application window will permit some of the widgets to start showing and if there are more, unshown, widgets then the expander sign will still show:

Resizing the window the window to full extent and beyond will spermit to show all the widgets and the expander will disappear:

You can pack Toolbars as needed to achieve your goals.

Not sure this is what you're after though.