C++ Gtkmm Tutorial 4

26 October , 2013 Bill C++ Programming

Introduction
In part 4 of this C++ Gtkmm tutorial I will show you how to use the label and entry widgets as well as send parameters with a Gtkmm signal. In this tutorial the code will demonstrate a very simple login application. The username and password entry widget pointers will be sent to the event function when the login button is pressed. The entry widgets could have been made accessible using the header file but in this tutorial I will show you how to send them when the event button click event is triggered.

Label and Entry Widgets
This tutorial is going to be very basic and show how to display labels with text, entry boxes for plain text and entry boxes for hidden passwords. There is much more that can be achieved with these widgets such as styling the labels with markup.

 The Code
There is no better way of learning than to dive into some code! The same 3 files from tutorial 3 can be edited.

main.cpp

#include <gtkmm.h>
#include "mywindow.h"

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

    mywindow window;

    return app->run(window);
}

mywindow.h

#ifndef MYWINDOW_H
#define MYWINDOW_H

#include <gtkmm.h>

class mywindow : public Gtk::Window
{
    public:
        mywindow();
        virtual ~mywindow();
    protected:
        void on_login_click(Gtk::Entry *euname, Gtk::Entry *epword);
        void on_quit_click();
    private:
};

#endif // MYWINDOW_H

mywindow.cpp

#include <iostream>
#include "mywindow.h"

mywindow::mywindow()
{
    set_default_size(400, 100);
    set_title("Tutorial 4");

    Gtk::Box *vbox = Gtk::manage(new Gtk::Box(Gtk::ORIENTATION_VERTICAL, 0));
    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));
    menuitem_quit->signal_activate().connect(sigc::mem_fun(*this, &mywindow::on_quit_click));
    filemenu->append(*menuitem_quit);

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

    Gtk::Label *lusername = Gtk::manage(new Gtk::Label("Username: "));
    grid->attach(*lusername, 0, 0, 1, 1);

    Gtk::Label *lpassword = Gtk::manage(new Gtk::Label("Password: "));
    grid->attach(*lpassword, 0, 1, 1, 1);

    Gtk::Entry *eusername = Gtk::manage(new Gtk::Entry());
    eusername->set_hexpand(true);
    grid->attach(*eusername, 1, 0, 2, 1);

    Gtk::Entry *epassword = Gtk::manage(new Gtk::Entry());
    epassword->set_hexpand(true);
    epassword->set_visibility(false);
    grid->attach(*epassword, 1, 1, 2, 1);

    Gtk::Button *blogin = Gtk::manage(new Gtk::Button("Login"));
    blogin->signal_clicked().connect(sigc::bind<Gtk::Entry*, Gtk::Entry*>(sigc::mem_fun(*this, &mywindow::on_login_click), eusername, epassword));
    grid->attach(*blogin, 2, 2, 1, 1);

    vbox->show_all();
}

mywindow::~mywindow()
{
    //dtor
}

void mywindow::on_login_click(Gtk::Entry *euname, Gtk::Entry *epword)
{
    if(euname->get_text().compare("admin") == 0 && epword->get_text().compare("password") == 0)
    {
        Gtk::MessageDialog dlg("You are now logged in.", false, Gtk::MESSAGE_INFO, Gtk::BUTTONS_OK, true);
        dlg.set_title("Gtkmm Tutorial 4");
        dlg.run();
    }
else
    {
        Gtk::MessageDialog dlg("Unknown username or password.", false, Gtk::MESSAGE_ERROR, Gtk::BUTTONS_OK, true);
        dlg.set_title("Gtkmm Tutorial 4");
    dlg.run();
    }
}

void mywindow::on_quit_click()
{
    hide();
}

gtmm_tut4_app
(The username is “admin” and password is “password”.)

Explaining The Code
In main.cpp nothing has really changed since tutorial 3.

In mywindow.h all of the button event functions have been removed since tutorial 3. The quit function is still there and a login function has been added.

void on_login_click(Gtk::Entry *euname, Gtk::Entry *epword);

This is a new function to handle the login button click. The function will require the entry widgets which will be the username and password.

In mywindow.cpp the layout is the same meaning there is still a vertical box container and a grid container. The difference from tutorial 3 is that the labels and entry widgets are used and placed in different cells of the grid container. The grid is 3 cells wide and 3 cells high. The 2 entry widgets are spanning 2 cells wide so the login button can be placed in the last cell horizontally and not look as wide as the entry widgets.

Gtk::Label *lusername = Gtk::manage(new Gtk::Label("Username: "));
grid->attach(*lusername, 0, 0, 1, 1);

Gtk::Label *lpassword = Gtk::manage(new Gtk::Label("Password: "));
grid->attach(*lpassword, 0, 1, 1, 1);

This will create 2 labels with the given text and place them in the far left cells with the password label being below the username (0,0 and 0,1). Both label widgets will only span 1 cell wide and 1 cell in height.

Gtk::Entry *eusername = Gtk::manage(new Gtk::Entry());
eusername->set_hexpand(true);
grid->attach(*eusername, 1, 0, 2, 1);

Gtk::Entry *epassword = Gtk::manage(new Gtk::Entry());
epassword->set_hexpand(true);
epassword->set_visibility(false);
grid->attach(*epassword, 1, 1, 2, 1);

This will create 2 entry widgets for accepting text. The username and password entry boxes will be placed on the cell right of the labels (1,0 and 1,1). Both entry boxes will span 2 cells wide so the login button will only be half the size of the entry boxes. Both entry boxes will be told to expand horizontally and take up all available space (set_hexpand(true)). The password entry box is set to not show the text as it is a password box (set_visibility(false)).

Gtk::Button *blogin = Gtk::manage(new Gtk::Button("Login"));
blogin->signal_clicked().connect(sigc::bind<Gtk::Entry*, Gtk::Entry*>(sigc::mem_fun(*this, &mywindow::on_login_click), eusername, epassword));
grid->attach(*blogin, 2, 2, 1, 1);

This will create a button with the label “Login” and place it on the third row both horizontally and vertically (2,2). The button will only span 1 row horizontally and vertically. The connect function is given a cast of <Gtk::Entry*, Gtk::Entry*> and the 2 entry boxes are given at the end. This will automatically send the pointers of the 2 entry boxes when the event is triggered. This is the difference between the connect functions in tutorial 3 and this one.

if(euname->get_text().compare("admin") == 0 && epword->get_text().compare("password") == 0)

This will compare the text of both the entry boxes with the text “admin” and “password”. If the compare is true it will equal 0. If both compares equal 0 the info dialog to show “You are now logged in.” will be shown. If both compares do not equal 0 the error dialog to show “Unknown username or password.” will be shown. To change the username and password, edit this line.

To Come
I will show you how to use a treeview and markup in a label.

callback, gui, how to, linux, programming,

4 Responses to “C++ Gtkmm Tutorial 4”


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.