Gtkdialog - Dynamic tabs

I have earlier explained how I've extended gtkdialog to get 'new' widgets.
  • Knob
  • Right-click menu

  • This post will explain my setup to get dynamic tabs like you see in eg firefox and geany. As usual it includes a mix of gtkdialog code, svg and gtk theming.

    The challenge:
  • Gtkdialog does not allow to include code while running, so all code (tabs) has to be loaded at startup.
  • Using the <notebook> widget would work somehow if it could hide/show tabs. - it can't.
  • Using <togglebuttons> or <radiobuttons> are other option, but the input signal to these are 'true/false', not the name of the button, so this would be static - not our wish.
  • The example also uses rotated labels, which the mentioned widgets above can't do. Only the <text> widget can do that.
  • Another approach could be to use a svg image as the tab, but my experience is that svg requires height/width values, and that is hard to calculate since fonts differs a lot. The tabs name are editable and should support NLS, so width will change. We have to deal with this. We could include a specific font and font-size used for our app/tabs, but it would give some bloat and does not follow the global gtk-theme nor the global font-size.

  • The solution:
    My solution is built around the <eventbox> widget that holds the actions, while the <text> widget holds the label. A svg image marks the active tab, and a tiny gtk-theme helps us to highlight the tab when hovering. See it in use in pMusic 5.3.1 (or newer).

    The gtkdialog-code for one tab looks like this:
    <vbox spacing="0" visible="true" space-expand="false" space-fill="false">
    <hbox height-request="1" space-expand="true" space-fill="true">
    <hseparator height-request="1" width-request="12" space-expand="false" space-fill="false"></hseparator>
    <text space-expand="true" space-fill="true"><label>""</label></text>
    <eventbox name="tab" space-expand="true" space-fill="true">
    <input file>/tmp/tab_1_icon.svg</input>
    <text name="playqueue_tab" xalign="0" angle="270" wrap="false" space-expand="true" space-fill="true">
    <input>cat /tmp/tab_1_NAME | sed -e "s%^%\n %" -e "s%$% %"</input>
    <action signal="enter-notify-event">disable:TXT_TAB_1</action>
    <action signal="leave-notify-event">enable:TXT_TAB_1</action>
    <action signal="button-press-event">if [[ $PTR_BTN -eq 3 ]]; then menu_tabs 1; else gxmessage "My actions"; fi</action>
    <action signal="button-release-event">activate:REFRESH_LIST</action>
    <action condition="command_is_true([[ $PTR_BTN -eq 3 ]] && echo true)" signal="button-release-event">activate:REFRESH_TABS</action>'

    Hovering a tab activates signal="enter-notify-event" and disables the <text> widget in the tab. It might feels wrong to disable a widget we want to highlight, but this is one of the two methods I know to get a hovering effect on <text> widgets. (The other is to underline the text.) When the text get disabled, it receives the fg[INSENSITEVE] signal from the gtk-theme. If we override the theming, disabled widgets can look crisp. The class in the gtk-theme corresponds to <text name="tab" in the gtkdialog-code above.
    style "Tab"
    fg[INSENSITIVE] = "#00CA10"
    widget "*tab" style "Tab"

    Clicking on a tab executes its actions. Mouse left click shows the svg marker for this tab. All other tabs get a blank svg instead of the marker. A right click calls the function menu_tabs to show the menu. Here you can delete a tab, which is nothing else but hiding it. But since gtkdialog can't embed new code, we have to carefully keep this hidden tab for a next time. Therefor, I rebuild the tabs so the hidden ones always are at the end of the line - ready for next 'Add'.

    Posted on 11 Dec 2016, 19:48 by zigbert - Categories: Development
    Edit - Delete

    No comments posted yet.

    Add Comment

    Show Smilies
    Security Code 2237861
    The Puppy Linux mascot?
    Password (to protect your identity)