Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

Linux GUI gtkmm導入とgladeとの連携

今年一発目の技術ですが、Linux GUIアプリであるgtkmmの導入手順とGladeとの連携についてまとめたいと思います!!
一発目にしては少し地味😅



gtkmmの導入

下記コマンドを実行すればOKです。

 sudo apt-get install libgtkmm-3.0-dev

gtkmmでのGUI実装

では簡単なGUIアプリを作成していきます。
コードはこちら。

#include <gtkmm.h>

class MainWin : public Gtk::Window {
    Gtk::Button btnClick;
    Gtk::Label label;
    Gtk::VBox Vbox;

public:
    MainWin();

private:
    void Clickbtn();
};

MainWin::MainWin() : btnClick("Click Here") {
    label.set_text("Hello");
    
    Vbox.pack_start(label);
    Vbox.pack_start(btnClick);

    btnClick.signal_clicked().connect(sigc::mem_fun(*this, &MainWin::Clickbtn));
    
    add(Vbox);
    show_all_children();
}

void MainWin::Clickbtn() {
    label.set_text("World");
}    

int main(int argc, char *argv[]) {
    Gtk::Main kit(argc, argv);
    MainWin mainwin;

    mainwin.set_title("TestMain");

    Gtk::Main::run(mainwin);
    return 0;
}

こちらのクラスにて使用するwidgetを定義。

class MainWin : public Gtk::Window {
    Gtk::Button btnClick;
    Gtk::Label label;
    Gtk::VBox Vbox;

public:
    MainWin();

private:
    void Clickbtn();
};

widgetの配置やボタン押下時の割り込み処理などは先ほど定義したクラスのコンストラクタに定義していきます。

MainWin::MainWin() : btnClick("Click Here") {
    label.set_text("Hello");
    
    Vbox.pack_start(label);
    Vbox.pack_start(btnClick);

    btnClick.signal_clicked().connect(sigc::mem_fun(*this, &MainWin::Clickbtn));
    
    add(Vbox);
    show_all_children();
}

こちらの通り、ボタン押下時の割り込みを定義できるのですが、

btnClick.signal_clicked().connect(sigc::mem_fun(*this, &MainWin::Clickbtn));
>||

割り込みイベントの関数として、
>||
void MainWin::Clickbtn() {
    label.set_text("World");
}    

を定義しています。

gtkmmでのGUIアプリ動作確認

先ほどのコードを実行するとこちらのような動作となります。
f:id:Elsammit:20210104231506g:plain

■gladeとgtkmmの連携

では次にgladeを用いてGUIの作成を行っていきます。
gladeとは、GUI作成のためのインターフェースデザイナになります。
以前ご紹介しました、monodevelopと同じようなライブラリになります。
elsammit-beginnerblg.hatenablog.com


gladeを利用するためにまずはインストールを行います。

sudo apt install glade

インストールが完了したら、こちらのコマンドを実行してみてください。

glade

インストールが行えていれば、こちらの画面が表示されるかと思います。
f:id:Elsammit:20210108190427p:plain

その後、左上の新規作成ボタンを押下すると、
作成用画面が表示されます。
上段に、"トップレベル"、"コンテナー"、"Control"、"Display"
といったボタンがあります。
それぞれ、こちらのようにwidgetが格納されております。
・トップレベル:window系
・コンテナー:gridやboxなど、labelやボタンをセットするためのwidgetが格納
・Control:ボタンやスライドバーなどのwidgetが格納
・Display:labelなどの表示のみを行うwidgetが格納

それぞれ、windowやbox、label、buttonを組み合わせて今回はこちらのような画面を作成。
f:id:Elsammit:20210108190813p:plain

その後、gtkmmと連携させるコードはこちらになります。

#include <iostream>
#include <gtkmm.h>

class MainWin : public Gtk::Window {
    Gtk::Button *btnClick;
    Gtk::Label *label1;
    Glib::RefPtr<Gtk::Builder> builder;

public:
    MainWin(BaseObjectType* cobject, const Glib::RefPtr<Gtk::Builder>& refGlade);
    void Clickbtn();

};

MainWin::MainWin(BaseObjectType* cobject, const Glib::RefPtr<Gtk::Builder>& refGlade) :
    Gtk::Window(cobject), builder(refGlade) {
	
    this->builder->get_widget("label1", this->label1);
    this->builder->get_widget("btnClick", this->btnClick);
	this->btnClick->signal_clicked().connect(sigc::mem_fun(*this, &MainWin::Clickbtn));
	
}

void MainWin::Clickbtn() {
    label1->set_text("World");
}  

int main(int argc, char** argv) {
    
    MainWin *mainWin = nullptr; 

    Gtk::Main app(argc, argv);
	Glib::RefPtr<Gtk::Builder> builder = Gtk::Builder::create_from_file("MainWIndow.glade"); 

	builder->get_widget_derived("MainWindow", mainWin); 
	Gtk::Main::run(*mainWin);
}

先ほどのgtkmm単体の場合と大きく異なるのはこちらの2つになります。

    this->builder->get_widget("label1", this->label1);
    this->builder->get_widget("btnClick", this->btnClick);
	Glib::RefPtr<Gtk::Builder> builder = Gtk::Builder::create_from_file("MainWIndow.glade"); 
	builder->get_widget_derived("MainWindow", mainWin); 

Gtk::builderという変数を用意し、こちらから先ほど作成したglade内のwindowを読み出します。
window内のwidget群は

this->builder->get_widget("widget名", クラス定義変数);

で読み出しが可能になります。

■gladeとgtkmmで連携したアプリを実行

ビルドですが、先ほどのgtkmm単体と同様。

g++ ファイル名.cpp -o 実行ファイル `pkg-config gtkmm-3.0 --cflags --libs`

でOKです。

実行ファイルを実行すると、
f:id:Elsammit:20210108205252g:plain
といったようにGUIアプリが表示されます。

■最後に

GUIアプリとしてgtkmmを利用してみました。
また、インターフェースデザイナであるgladeも触ってみました。
感想しては、gtk#よりは使いやすいですし、情報もたくさんあるのでこちらの方が使い勝手が良いかな?と感じました。
もう少し触ってみて、またブログ作成出来たらいいな!!と考えております。