C++ Gtkmm Tutorial 2

7 October , 2013 Bill C++ Programming

Introduction
In part 2 of this C++ Gtkmm programming tutorial I will explain how Gnome containers are used and how to create widget objects that are managed by Gtkmm. This tutorial will not use the Glade Interface Designer. This is a tutorial and more can be learnt by creating an interface in code.

What are Containers?
Containers are used to position widgets. The reason it is better to use containers instead of giving x,y locations with the width and height is the widgets can be resized and repositioned when the window is resized. The containers covered in this tutorial will be box and grid. There are other containers such as paned, frames, and notebook (tabs) to name a few.

Box containers stack widgets either horizontally or vertically. A grid container is a lot more powerful and allows widgets to be placed in a cell of the grid with the option of spanning multiple cells. Containers can be placed inside containers and have other properties such as margins and paddings so the most complex layouts can be created.

A Container Example
gtmm_tut2_container_example

The above example shows how containers can be nested inside other containers and widgets can span grid cells.

The blue lines is an example of a vertical box container that is packed with a container in each cell. The purple lines is an example of a horizontal box container. There are 2 of them, one on the top with 3 cells and one on the bottom with 2 cells. The red lines is an example of a grid container that is 3 cells wide and 2 high. The transparent green boxes are examples of widgets placed inside the containers. The one widget in the image to take note of is the top left widget in the grid (red lines) which spans 2 cells wide and 2 cells in height.

Gtkmm Managed Widgets
Widgets can be created and managed by Gtkmm. It is good practice to let Gtkmm manage your widgets because they will be deleted when they are not needed any more automatically. Instead of creating a vertical box like this:

Gtk::Box *box = new Gtk::Box(Gtk::ORIENTATION_VERTICAL, 0);

It can be managed by altering the line of code slightly:

Gtk::Box *box = Gtk::manage(new Gtk::Box(Gtk::ORIENTATION_VERTICAL, 0));

Example Code

#include <gtkmm.h>

int main(int argc, char *argv[])
{
    Glib::RefPtr<Gtk::Application> app = Gtk::Application::create(argc, argv, "com.gtkmm.tutorial2.base");

    Gtk::Window window;

    window.set_default_size(400, 200);
    window.set_title("Tutorial 2");

    Gtk::Box *vbox = Gtk::manage(new Gtk::Box(Gtk::ORIENTATION_VERTICAL, 0));
    window.add(*vbox);

    Gtk::MenuBar *menubar = Gtk::manage(new Gtk::MenuBar());
    vbox->pack_start(*menubar, Gtk::PACK_SHRINK, 0);

    Gtk::MenuItem *menuitem_file = Gtk::manage(new Gtk::MenuItem("_File", true));
    menubar->append(*menuitem_file);
    Gtk::Menu *filemenu = Gtk::manage(new Gtk::Menu());
    menuitem_file->set_submenu(*filemenu);
    Gtk::MenuItem *menuitem_quit = Gtk::manage(new Gtk::MenuItem("_Quit", true));
    filemenu->append(*menuitem_quit);

    Gtk::Grid *grid = Gtk::manage(new Gtk::Grid);
    grid->set_border_width(10);
    vbox->add(*grid);

    Gtk::Button *b1 = Gtk::manage(new Gtk::Button("Big Button 1"));
    b1->set_hexpand(true);
    b1->set_vexpand(true);
    grid->attach(*b1, 0, 0, 1, 2);

    Gtk::Button *b2 = Gtk::manage(new Gtk::Button("Button 2"));
    grid->attach(*b2, 1, 0, 1, 1);

    Gtk::Button *b3 = Gtk::manage(new Gtk::Button("Button 3"));
    grid->attach(*b3, 1, 1, 1, 1);

    vbox->show_all();

    return app->run(window);
}

The code above extends the code from tutorial 1. First it places a vertical box container in the window, then packs a menubar and a grid inside it. The code also places 3 buttons in the grid. Big Button 1 spans 2 grid cells in height and is set to expand vertically and horizontally.
gtmm_tut2_app

Explaining The Code

Gtk::Box *vbox = Gtk::manage(new Gtk::Box(Gtk::ORIENTATION_VERTICAL, 0));
window.add(*vbox);

This creates a vertical box container. It is given “ORIENTATION_VERTICAL” to define it as vertical and “0” for no padding.

Gtk::MenuBar *menubar = Gtk::manage(new Gtk::MenuBar());
vbox->pack_start(*menubar, Gtk::PACK_SHRINK, 0);

This will create a menubar and pack it on top. Cells are created automatically from the top down. The pack_start function is given the pointer to the menubar, told to shrink the cell to the size of the menubar and lastly not to pad the cell.

Gtk::MenuItem *menuitem_file = Gtk::manage(new Gtk::MenuItem("_File", true));
menubar->append(*menuitem_file);
Gtk::Menu *filemenu = Gtk::manage(new Gtk::Menu());
menuitem_file->set_submenu(*filemenu);
Gtk::MenuItem *menuitem_quit = Gtk::manage(new Gtk::MenuItem("_Quit", true));
filemenu->append(*menuitem_quit);

The above will create the menubar items which will be covered in a later tutorial.

Gtk::Grid *grid = Gtk::manage(new Gtk::Grid);
grid->set_border_width(10);
vbox->add(*grid);

This will create the grid container, tell the vertical box container to create another cell and then add the grid container to it. The grid is also given a border width of 10 to give some space between the buttons and the edge of the window.

Gtk::Button *b1 = Gtk::manage(new Gtk::Button("Big Button 1"));
b1->set_hexpand(true);
b1->set_vexpand(true);
grid->attach(*b1, 0, 0, 1, 2);

This will create a button with the name “Big Button 1″ and tell it to take up all unused space vertically (set_vexpand) and horizontally (set_hexpand). The button is then placed in position 0(x) ,0(y) in the grid. It is also told to span 1 cell wide and 2 cells down using the grid attach function.

Gtk::Button *b2 = Gtk::manage(new Gtk::Button("Button 2"));
grid->attach(*b2, 1, 0, 1, 1);

Gtk::Button *b3 = Gtk::manage(new Gtk::Button("Button 3"));
grid->attach(*b3, 1, 1, 1, 1);

This will create 2 more buttons. These buttons are created in positions 1(x) ,0(y) and 1(x) ,1(y) only spanning 1 cell wide and in height and there is no expand functions for them.

vbox->show_all();

This function will show the vbox and all of it’s children. If the show_all() function was not called, an empty window would be displayed.

To Come
In Tutorial 3 will explain how to catch signals from widgets such as buttons and menus.

gui, how to, linux, programming, tutorial,

4 Responses to “C++ Gtkmm Tutorial 2”


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress. Designed by elogi.