GTK Glade: Hierarchy Editor - gtk

I'm using Glade 3.20. I've created a liststore and a listview. The liststore has three columns; a gint, a gchararray and another gint.
I right-click on my TreeView object and select Edit.... The 'General' tab shows the columns I've defined in the liststore. I select the 'Hierarchy' tab and click the '+' button. This creates a new view column called column. I right click on that and select 'Add child text'. Nothing happens.
Is this a known problem with glade 3.20? Am I doing something daft?

Yes, unfortunately its a bug. I think it was introduced around Glade 3.19.0. Copy pasting a cell renderer from an older glade file will work though or if added manually by editing the xml file:
Example cell renderer pixbuf :
<object class="GtkTreeViewColumn" id="treeviewcolumn1">
<property name="title">column</property>
<child>
<object class="GtkCellRendererPixbuf" id="cellrendererpixbuf1">
<property name="visible">False</property>
<property name="stock_size">3</property>
</object>
<attributes>
<attribute name="icon-name">0</attribute>
</attributes>
</child>
</object>
I've just prepared a simple glade file containing all the default cell renderers that you can copy paste, inside glade, to your glade file. Just go to the widget hierarchy, copy the renderer, go to your widget hierarchy and under the TreeViewColumn, paste the copied renderer.
cell_renderers.glade:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.19.0 -->
<interface>
<requires lib="gtk+" version="3.16"/>
<object class="GtkWindow" id="window1">
<property name="can_focus">False</property>
<child>
<object class="GtkTreeView" id="treeview1">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="vexpand">True</property>
<property name="headers_visible">False</property>
<property name="search_column">0</property>
<child internal-child="selection">
<object class="GtkTreeSelection" id="treeview-selection6"/>
</child>
<child>
<object class="GtkTreeViewColumn" id="treeviewcolumn8">
<property name="title">column</property>
<child>
<object class="GtkCellRendererProgress" id="cellrendererprogress1">
<property name="visible">True</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkTreeViewColumn" id="treeviewcolumn7">
<property name="title">column</property>
<child>
<object class="GtkCellRendererSpinner" id="cellrendererspinner1">
<property name="visible">True</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkTreeViewColumn" id="treeviewcolumn6">
<property name="title">column</property>
<child>
<object class="GtkCellRendererAccel" id="cellrendereraccel1">
<property name="visible">True</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkTreeViewColumn" id="treeviewcolumn5">
<property name="title">column</property>
<child>
<object class="GtkCellRendererSpin" id="cellrendererspin1">
<property name="visible">True</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkTreeViewColumn" id="treeviewcolumn4">
<property name="title">column</property>
<child>
<object class="GtkCellRendererCombo" id="cellrenderercombo1">
<property name="visible">True</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkTreeViewColumn" id="treeviewcolumn3">
<property name="title">column</property>
<child>
<object class="GtkCellRendererToggle" id="cellrenderertoggle1">
<property name="visible">True</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkTreeViewColumn" id="treeviewcolumn1">
<property name="title">column</property>
<child>
<object class="GtkCellRendererPixbuf" id="cellrendererpixbuf1">
<property name="visible">True</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkTreeViewColumn" id="treeviewcolumn2">
<property name="title">column</property>
<child>
<object class="GtkCellRendererText" id="cellrenderertext1">
<property name="height">44</property>
</object>
<attributes>
<attribute name="text">1</attribute>
</attributes>
</child>
</object>
</child>
</object>
</child>
</object>
</interface>
This may be solved in upcoming glade versions, though.

Related

GTK paned view scrolling two textviews

I want to build a diff viewer.
For this I have decided to use two text views side by side and have them scroll at the same time.
I mostly have got it working, but I can't get the GTKScrolledWindow scroll while typing. Text view expands out of window. When I scroll with mouse I can see the text.
How to get his working? I want text to scroll when I type past window height.
Example structure stree:
GtkWindow
GtkScrolledWindow
GtkViewport
GtkPaned
Gtk text view 1 << Connected with vertical adjustment1
Gtk text Wiew 2 << Connected with vertical adjustment1
Glade file:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.40.0 -->
<interface>
<requires lib="gtk+" version="3.24"/>
<object class="GtkAdjustment" id="adjustment1">
<property name="upper">100</property>
<property name="step-increment">1</property>
<property name="page-increment">10</property>
</object>
<object class="GtkWindow">
<property name="width-request">800</property>
<property name="height-request">800</property>
<property name="can-focus">False</property>
<child>
<object class="GtkScrolledWindow">
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="shadow-type">in</property>
<property name="propagate-natural-height">True</property>
<child>
<object class="GtkViewport">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="vexpand">True</property>
<child>
<object class="GtkPaned">
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="vexpand">True</property>
<property name="wide-handle">True</property>
<child>
<object class="GtkTextView">
<property name="width-request">300</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="vexpand">True</property>
<property name="vadjustment">adjustment1</property>
</object>
<packing>
<property name="resize">False</property>
<property name="shrink">True</property>
</packing>
</child>
<child>
<object class="GtkTextView">
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="vexpand">True</property>
<property name="vadjustment">adjustment1</property>
</object>
<packing>
<property name="resize">True</property>
<property name="shrink">True</property>
</packing>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</interface>

resizing GtkPaned widget in glade

I want to design a Gtk UI in glade.
I need a window which has 3 resizable columns which I used GtkPaned container to create that.
The problem is that resizing left column also resizes the right column (and vice versa). I don't want that, I want to resize a column and the other columned stays fixed. I couldn't find a way to do that in glade.
here is my gladefile content:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.36.0 -->
<interface>
<requires lib="gtk+" version="3.22"/>
<object class="GtkWindow">
<property name="can_focus">False</property>
<child>
<object class="GtkPaned">
<property name="visible">True</property>
<property name="can_focus">True</property>
<child>
<object class="GtkButton">
<property name="label" translatable="yes">button</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
<packing>
<property name="resize">False</property>
<property name="shrink">True</property>
</packing>
</child>
<child>
<object class="GtkPaned">
<property name="visible">True</property>
<property name="can_focus">True</property>
<child>
<object class="GtkEntry">
<property name="visible">True</property>
<property name="can_focus">True</property>
</object>
<packing>
<property name="resize">False</property>
<property name="shrink">True</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="label" translatable="yes">button</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
<packing>
<property name="resize">True</property>
<property name="shrink">True</property>
</packing>
</child>
</object>
<packing>
<property name="resize">True</property>
<property name="shrink">True</property>
</packing>
</child>
</object>
</child>
<child type="titlebar">
<placeholder/>
</child>
</object>
</interface>

gtk expander with complex expander widgets

I have an expander that, instead of using a label, have a box with buttons and labels in it, sort of like a tool bar. The problem is that when I interact with those widgets, the expander is activated instead.
Basically I want the expander to only function when I actually click on the arrow, not the stuff to the left of the arrow... or, maybe even preferred, not the buttons or other clickable surfaces.
It seems the expander intercepts the click events over the buttons instead of letting them fall through to the buttons(not sure if they are reacting too).
This probably could be taken care of in the source code by modifying the behavior of the click events and doing some mouse hit testing. I'm not quite sure how to do this yet as I'm new to gtk but I'm hoping there is an easier way.
basic expander
> label
...
My expander
> label button
...
clicking on button does the same as clicking on label or >, which I do not want. I want button to function as a button and not cause the expander to expand in any way.
I've tried your approach and if you connect the signal to the button you won't get the behavior you're searching for.
To get that, you need to connect the signal to the expander, let's say, with the button-press-event and return True to avoid propagation of the signal.
Doing this you will be able to avoid the expander to expand and eventually control the situation on when it will expand.
Glade file (expand.ui):
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.0 -->
<interface>
<requires lib="gtk+" version="3.20"/>
<object class="GtkWindow" id="window1">
<property name="can_focus">False</property>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkExpander" id="expander1">
<property name="visible">True</property>
<property name="can_focus">True</property>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkButton">
<property name="label" translatable="yes">Action 1</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="label" translatable="yes">Action 2</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="label" translatable="yes">Action 3</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
</object>
</child>
<child type="label">
<object class="GtkButton" id="menub">
<property name="label" translatable="yes">Menu</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
</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="width_request">400</property>
<property name="height_request">300</property>
<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>
Python code for some logic:
import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk
def onMenuButtonPress(self, widget):
#uncomment below to recreate the original behavior
#expander.set_expanded(not expander.get_expanded())
return True
builder = Gtk.Builder()
builder.add_from_file("expander.ui")
window = builder.get_object("window1")
menu = builder.get_object("menub")
expander = builder.get_object("expander1")
expander.connect("button-press-event", onMenuButtonPress)
window.connect ("destroy", Gtk.main_quit)
window.show_all()
Gtk.main()
If you run the code, you'll see that button presses won't expand the expander. Key presses will though (needed to handle key press events, etc)
Uncomment the indicated line on the code to recreate the intrinsic behavior.

GTK revealer and paned

I would like to essentially have a image/drawing surface as the main widget but then have some sort of panel or widget that can be revealed.
----------------
Image
----------------
xxxxxxxxxxxxxxxx
----------------
The xxx are basically stuff(gtk widgets) that the user can use to interact with the app but they can minimize it and the app can minimize it(say for a slide show).
So, A paned allows the user to adjust the size to suit them but I also need the ability completely minimize and restore it's size(an arrow that many apps have like photoshop that reveal the underlying widget) and also be able to do this easily programmatically.
This is because the app will sort of have two modes: The main viewing of the image in which nothing else should be seen and then an editing mode which has a floating toolbar and a bottom area that gives more advanced editing features and stuff. The user and app need to be able to switch between these modes easily.
Any ideas? I'm new to gtk so this might be obvious. I figured a vertical paned would work fine and I can add a small button that can be used to expand or collapse the bottom container part... but I saw the revealer there and it seems like it might do all this for me, but not sure how to use it.
Well, this question is very broad in many aspects as there are many approaches, design opinions, etc.
In fact GtkPaned ain't the best option although it would fit your purposes. Regarding GtkRevealer it's a good option and allied with GtkOverlay it would work nicely.
GtkRevealer is basically a widget container that toggles visibility with the method/function set_reveal_child. This action can have an animated transition.
GtkOverlay allows widgets to stack on top of each other.
Here is a simple example. Not sure if i understood exactly your goal:
The upper right button would toggle edit/view modes with edit mode showing a "toolbar" on the bottom.
Here is the glade ui file (named idea.ui otherwise change the code to reflect changes):
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.0 -->
<interface>
<requires lib="gtk+" version="3.20"/>
<object class="GtkWindow" id="window1">
<property name="can_focus">False</property>
<child>
<object class="GtkOverlay">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixbuf">idea.png</property>
</object>
<packing>
<property name="index">-1</property>
</packing>
</child>
<child type="overlay">
<object class="GtkRevealer" id="revealer1">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="transition_type">crossfade</property>
<child>
<object class="GtkButtonBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">center</property>
<property name="valign">end</property>
<property name="margin_bottom">20</property>
<property name="layout_style">expand</property>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="valign">center</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">document-edit-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">edit-cut-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">edit-clear-all-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">color-select-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">3</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">format-text-bold-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">4</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">preferences-color-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">5</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">folder-publicshare-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">6</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">view-app-grid-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">7</property>
</packing>
</child>
<style>
<class name="linked"/>
</style>
</object>
</child>
</object>
</child>
<child type="overlay">
<object class="GtkButton" id="button1">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="halign">end</property>
<property name="valign">start</property>
<property name="margin_right">20</property>
<property name="margin_top">20</property>
<property name="relief">none</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">open-menu-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="index">1</property>
</packing>
</child>
</object>
</child>
</object>
</interface>
And since you didn't indicate any programming language, for simplicity sake i've used a simple python code to give some dynamic behavior to the button:
import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk
def onMenuClicked(self):
revealer.set_reveal_child(not revealer.get_reveal_child())
builder = Gtk.Builder()
builder.add_from_file("idea.ui")
window = builder.get_object("window1")
revealer = builder.get_object("revealer1")
menuButton = builder.get_object("button1")
menuButton.connect ("clicked", onMenuClicked)
window.connect ("destroy", Gtk.main_quit)
window.show_all()
Gtk.main()
The "toolbar" buttons are dummy buttons and preform no actions... it's just a simple mockup.
There are many other approaches that you can follow so not sure this question suits SO guidelines as it is vague regarding the answers. Good luck though.
PS: For the drawing area, GtkImage, you can use some other image. To avoid license problems i've used something very basic :) if you want, change the glade file to point to another image or save an image named as idea.png.

Shift-Tab to focus previous Entry field

I am using Glade to design a GUI. When I insert GtkEntry fields, I can navigate to the next one using the Tab Key (this ability is given "for free" in Glade). However, it seems that I cannot use Shift-Tab to focus the previous tab entry.
When I have instead two buttons, both Tab and Shift-Tab works out of the box.
So: is there a way to have Shift-Tab to focus the previous GtkEntry in Glade?
The Glade code is below; one with two entry fields, one with two buttons.
Two entries:
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<!-- interface-requires gtk+ 3.0 -->
<object class="GtkWindow" id="window1">
<property name="can_focus">False</property>
<child>
<object class="GtkBox" id="box1">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
<property name="homogeneous">True</property>
<child>
<object class="GtkEntry" id="entry1">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="invisible_char">●</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkEntry" id="entry2">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="invisible_char">●</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
</child>
</object>
</interface>
Two buttons:
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<!-- interface-requires gtk+ 3.0 -->
<object class="GtkWindow" id="window1">
<property name="can_focus">False</property>
<child>
<object class="GtkBox" id="box1">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
<property name="homogeneous">True</property>
<child>
<object class="GtkButton" id="button1">
<property name="label" translatable="yes">button</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton" id="button2">
<property name="label" translatable="yes">button</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
</child>
</object>
</interface>