D
DevynCJohnson
Guest
Glade is a popular WYSIWYG for GTK interfaces. Glade generates an XML file with the extension "*.glade". Developers can then use special bindings/libraries in their code that allows the program to load the GUI that is defined in the *.glade file. However, before application developers can get that far in their design, they need to understand Glade and the various widgets that can be placed on a window.
Glade is the GUI designer for GTK2 and GTK3. GTK3 is the current/latest series of GTK. GTK2 is no longer developed, but due to its stability and the large usage, many developers still use GTK2. Thus, Glade v3.8 is for GTK2. To create GTK3 windows, use the latest version of Glade (version 3.16 at the time of writing this article). Glade only offers tools for designing the GUI by placing graphical objects. In other words, there is no ability for coding. Instead, programmers design the window and then save the results to a file. Then, programmers open their preferred IDE and write code using the chosen language. In the code, use the command in the GTK binding for your language to import/load the XML code that defines the created window.
For example, when I code, I open my preferred IDE (Geany) and write Python3 code. The language binding used by Python3 for GTK3 is PyGObject which is in the "gi.repository" module. Linux users can obtain this binding from the "python3-gi" package. So, after installing the binding, I import GTK by using "from gi.repository import Gtk". Then, to use my window, I use the "add_from_file()" command to add the contents of the specified *.glade file or "add_from_string()" if I copied the XML code into the Python script as a variable/constant.
Various languages may have a slightly different way of utilizing the language binding and loading the Glade code for the window. The GTK commands that manipulate the window or perform some GTK-related task are the same in all (or nearly all languages). However, the GTK command will use the syntax of your chosen language.
Now, to explain the various tools and widgets in Glade. The interface is simple; by default, the widgets are on the left, the window is in the center, and the various tweaks and settings are on the right. In the "widget toolbox" (containing the available widgets) organizes the widgets into groups.
Actions – These widgets trigger an action like opening the help/about window.
Toplevels - This contains various windows. Some are ready-made windows like the "font chooser dialog", "color chooser dialog", etc. The "Application Window" widget is commonly used to design a custom window. Most developers will want to start with this widget.
Containers - After selecting a toplevel, containers are added to customize the window for various layouts and appearances. For example, if a scroll bar or tabs are desired, add them before adding buttons or text.
Control and Display - The labels (text), buttons, menus, etc. belong to this category.
GTK+ Unix Print Toplevels - These are toplevels (windows) specifically for printing.
Deprecated - Deprecated widgets are found here. Try not to use them since they are obsolete widgets.
Miscellaneous - Various widgets not belonging in other categories go here like Tree-view.
Composite - The widgets with more functionality and "sub-widgets" belong here like the font, file, and color choosers.
NOTE: If you are using Glade3 (version 3.16 or above) and you do not have some of the widget categories that I have mentioned, then you must install some bindings and developer libraries. I have many developer libraries installed on my system, so I have more than a default installation would contain.
To use Glade, first select a toplevel. Then, place the desired containers. Use the "box" and "grid" widgets to divide the window into multiple sections. If a scrollable window is desired, place a "scrolled window" widget on top of a "viewport" widget. Inside of the scrolled window widget, place the "textview" widget. Then, in your code, use the needed commands to load text into the "textview". The best way to better understand Glade and the widgets is to experiment with the various tools. Thankfully, clicking the "Preview Snapshot" allows developers to see a preview of their window.
The "Properties Dock" allows developers to change the various attributes of widgets like size, appearance, etc. The "Signals" tab is useful for providing an interface between the GUI and the code. For instance, select a button that you wish to be the close button. Then, go to the "signals" tab and look for the signal named "clicked" under "GtkButton". For "Handler", type the name of the function (from your code) that will execute when the close button is clicked. Under "user data", select the name of the window (or other desired object). The selected object will be passed to the function. For example, the function can close the window by using the "destroy()" command and/or "Gtk.main_quit()".
Passing data that is entered in a text box or the value of a check-box are passed to the programs code in a similar way. When configuring the signals of a button, type the name of the function under "Handler", and then (under “User data”) select the menu, text-box, radio-button, etc. that will be passed to the function. Then, in the function's code, use a command to get the data from the widget. For example, the "get_text()" command in PyGObject would get the current text from the specified text box.
"General" offers various options that are particular for that widget type.
"Packing" allows developers to control the way the widget is placed on a container. For instance, increasing the "height" of a button that is placed on "grid" will make the button span multiple rows.
"Common" offers settings that are the same across all widgets like the spacing, tool-tip, resizing, etc.
"Accessibility" controls various accessibility features.
Widgets
The “grid” widget is used to create a container made up of columns and rows while the “box” is one column and multiple rows. “viewport” is one row and one column and is used when the contained widget needs to be placed in a scrollable window. “Notebook” is a container providing tabs. Clicking on a tab while in Glade allows the developer to design the contents if the selected tab.
Radio buttons are toggled and only one radio-button in a group may be active. Check buttons allow users to check/uncheck zero, one, or more boxes in the group.
A “Label” is text that is a widget that displays the desired text. A “Link button” is a label that offers a hyperlink.
A “Button” can be pressed to trigger an action and remains in one state. The “Toggle button” exists as either pressed or unpressed. Each state keeps some condition active/true. Changing the button's state may stop the previous action and activate another state.
The “Progress Bar” shows the current process based on the fullness of a bar. A “Level Bar” completes the same action, but the bar is filled with blocks on each step. The “Spinner” can be used to show that the program is loading, processing data, or still active (not locked-up or frozen).
Many other widgets are available, but these are the ones many newbies should understand.
For further reading
https://developer.gnome.org/gtk3/stable/
https://developer.gnome.org/pygobject/
https://developer.gnome.org/pygtk/stable/
https://developer.gnome.org/gi/stable/
Glade is the GUI designer for GTK2 and GTK3. GTK3 is the current/latest series of GTK. GTK2 is no longer developed, but due to its stability and the large usage, many developers still use GTK2. Thus, Glade v3.8 is for GTK2. To create GTK3 windows, use the latest version of Glade (version 3.16 at the time of writing this article). Glade only offers tools for designing the GUI by placing graphical objects. In other words, there is no ability for coding. Instead, programmers design the window and then save the results to a file. Then, programmers open their preferred IDE and write code using the chosen language. In the code, use the command in the GTK binding for your language to import/load the XML code that defines the created window.
For example, when I code, I open my preferred IDE (Geany) and write Python3 code. The language binding used by Python3 for GTK3 is PyGObject which is in the "gi.repository" module. Linux users can obtain this binding from the "python3-gi" package. So, after installing the binding, I import GTK by using "from gi.repository import Gtk". Then, to use my window, I use the "add_from_file()" command to add the contents of the specified *.glade file or "add_from_string()" if I copied the XML code into the Python script as a variable/constant.
Code:
#!/usr/bin/env python3
from gi.repository import Gtk
gtkwindow = Gtk.Builder()
gtkwindow.add_from_file('/path/to/glade/file.glade')
# Some code to modify the window and provide the
# desired functionality and such
# Alternately,
_GUI = (
'XML code'
'many lines'
)
from gi.repository import Gtk
gtkwindow = Gtk.Builder()
gtkwindow.add_from_string(buffer=_GUI)
# "buffer=" in the parameter above fixes a minor Cxfreeze3 bug
# Various code hereVarious languages may have a slightly different way of utilizing the language binding and loading the Glade code for the window. The GTK commands that manipulate the window or perform some GTK-related task are the same in all (or nearly all languages). However, the GTK command will use the syntax of your chosen language.
Now, to explain the various tools and widgets in Glade. The interface is simple; by default, the widgets are on the left, the window is in the center, and the various tweaks and settings are on the right. In the "widget toolbox" (containing the available widgets) organizes the widgets into groups.
Actions – These widgets trigger an action like opening the help/about window.
Toplevels - This contains various windows. Some are ready-made windows like the "font chooser dialog", "color chooser dialog", etc. The "Application Window" widget is commonly used to design a custom window. Most developers will want to start with this widget.
Containers - After selecting a toplevel, containers are added to customize the window for various layouts and appearances. For example, if a scroll bar or tabs are desired, add them before adding buttons or text.
Control and Display - The labels (text), buttons, menus, etc. belong to this category.
GTK+ Unix Print Toplevels - These are toplevels (windows) specifically for printing.
Deprecated - Deprecated widgets are found here. Try not to use them since they are obsolete widgets.
Miscellaneous - Various widgets not belonging in other categories go here like Tree-view.
Composite - The widgets with more functionality and "sub-widgets" belong here like the font, file, and color choosers.
NOTE: If you are using Glade3 (version 3.16 or above) and you do not have some of the widget categories that I have mentioned, then you must install some bindings and developer libraries. I have many developer libraries installed on my system, so I have more than a default installation would contain.
To use Glade, first select a toplevel. Then, place the desired containers. Use the "box" and "grid" widgets to divide the window into multiple sections. If a scrollable window is desired, place a "scrolled window" widget on top of a "viewport" widget. Inside of the scrolled window widget, place the "textview" widget. Then, in your code, use the needed commands to load text into the "textview". The best way to better understand Glade and the widgets is to experiment with the various tools. Thankfully, clicking the "Preview Snapshot" allows developers to see a preview of their window.
The "Properties Dock" allows developers to change the various attributes of widgets like size, appearance, etc. The "Signals" tab is useful for providing an interface between the GUI and the code. For instance, select a button that you wish to be the close button. Then, go to the "signals" tab and look for the signal named "clicked" under "GtkButton". For "Handler", type the name of the function (from your code) that will execute when the close button is clicked. Under "user data", select the name of the window (or other desired object). The selected object will be passed to the function. For example, the function can close the window by using the "destroy()" command and/or "Gtk.main_quit()".
Passing data that is entered in a text box or the value of a check-box are passed to the programs code in a similar way. When configuring the signals of a button, type the name of the function under "Handler", and then (under “User data”) select the menu, text-box, radio-button, etc. that will be passed to the function. Then, in the function's code, use a command to get the data from the widget. For example, the "get_text()" command in PyGObject would get the current text from the specified text box.
"General" offers various options that are particular for that widget type.
"Packing" allows developers to control the way the widget is placed on a container. For instance, increasing the "height" of a button that is placed on "grid" will make the button span multiple rows.
"Common" offers settings that are the same across all widgets like the spacing, tool-tip, resizing, etc.
"Accessibility" controls various accessibility features.
Widgets
The “grid” widget is used to create a container made up of columns and rows while the “box” is one column and multiple rows. “viewport” is one row and one column and is used when the contained widget needs to be placed in a scrollable window. “Notebook” is a container providing tabs. Clicking on a tab while in Glade allows the developer to design the contents if the selected tab.
Radio buttons are toggled and only one radio-button in a group may be active. Check buttons allow users to check/uncheck zero, one, or more boxes in the group.
A “Label” is text that is a widget that displays the desired text. A “Link button” is a label that offers a hyperlink.
A “Button” can be pressed to trigger an action and remains in one state. The “Toggle button” exists as either pressed or unpressed. Each state keeps some condition active/true. Changing the button's state may stop the previous action and activate another state.
The “Progress Bar” shows the current process based on the fullness of a bar. A “Level Bar” completes the same action, but the bar is filled with blocks on each step. The “Spinner” can be used to show that the program is loading, processing data, or still active (not locked-up or frozen).
Many other widgets are available, but these are the ones many newbies should understand.
For further reading
https://developer.gnome.org/gtk3/stable/
https://developer.gnome.org/pygobject/
https://developer.gnome.org/pygtk/stable/
https://developer.gnome.org/gi/stable/
