[Gtk.Template]Gtk.Notebookの使用②　Gtk.Notebookにアイコン付きのタグ追加、タグ位置変更

XMLデータにより定義したGtk.Notebookの使用②

　Gtk.NoteBookのタブは表示位置を上下左右に変更することが可能であり、タブにはGtk.Widgetを指定するため、ラベル以外を表示することも可能です。

　今回は、これらをXMLデータで指定する方法を紹介します。

今回紹介する内容
　・タブの表示位置の変更する
　・タブにアイコンを表示（タブにGtk.Label以外を使用）する

その他の[Gtk.Template]Gtk.NoteBookの記事

Gtk.NoteBookの設定②

タブの表示位置の変更する

　タブの表示位置は、Gtk.Notebookのプロパティtab_posで指定します。tab_posの値はGtk.PositionTypeであり、XMLデータでは以下のように指定します。

値	内容
left	タブを左側に配置
right	タブを右側に配置
top	タブを上側に配置（既定値）
bottom	タブを下側に配置

XMLデータに記入する場合の値

        <object class="GtkNotebook" id="notebook">
            <property name="tab_pos">left</property>

タブにアイコンを表示（タブにGtk.Label以外を使用）する

　タブに載せるWidgetの設定は、以下のように<child type=”tab”></child>の中にWidgetの内容を記入することでおこないます。

　下の例では、タブにGtk.ImageとGtk.Labelを載せたGtk.Boxを指定しています。

            <child type="tab">
                <object class="GtkBox" id="tbox">
                    <child>
                        <object class="GtkImage" id="timage1">
                            <property name="icon_name">media-playback-start</property>
                        </object>
                    </child>
                    <child>
                        <object class="GtkLabel" id="tlabel1">
                            <property name="label">ページ制御</property>
                            <property name="width_request">180</property>
                            <property name="xalign">0.2</property>
                        </object>
                    </child>
                </object>
　　　　　　</child>

サンプルプログラム

　以下のサンプルプログラムを実行すると図のように、タブが左側に表示されたGtk.Notebookが表示されます。タブ「ページ制御」にある追加ボタンを押すとタブ「追加ページ」が表示され、「削除」ボタンを押すと「追加ページ」が削除されます。

　それぞれのタブには、ラベルの前に再生マークが表示されています。

実行方法

　下の２つのファイルを同じフォルダに保存して、そのフォルダで以下のコマンドを実行します。

python main2.py

<?xml version="1.0" encoding="UTF-8"?>
<interface>
    <template class="window" parent="GtkWindow">
        <property name="default_width">450</property>
        <property name="default_height">60</property>
        <property name="title">Template Notebook Test2</property>
        <child>
            <object class="GtkNotebook" id="notebook">
                <property name="tab_pos">left</property>
                <child>
                    <object class="GtkBox">
                        <property name="margin_top">20</property>
                        <property name="margin_bottom">20</property>
                        <property name="margin_start">20</property>
                        <property name="margin_end">20</property>
                        <property name="spacing">20</property>
                        <child>
                            <object class="GtkLabel" id="label1_1">
                                <property name="label">「追加ページ」を追加/削除
をおこないます。</property>
                            </object>
                        </child>
                        <child>
                            <object class="GtkButton" id="button1">
                                <property name="label">追加</property>
                                <signal name="clicked" handler="on_button1_clicked"/>
                            </object>
                        </child>
                        <child>
                            <object class="GtkButton" id="button2">
                                <property name="label">削除</property>
                                <property name="sensitive">False</property>
                                <signal name="clicked" handler="on_button2_clicked"/>
                            </object>
                        </child>
                    </object>
                </child>
                <child type="tab">
                    <object class="GtkBox" id="tbox">
                        <child>
                            <object class="GtkImage" id="timage1">
                                <property name="icon_name">media-playback-start</property>
                            </object>
                        </child>
                        <child>
                            <object class="GtkLabel" id="tlabel1">
                                <property name="label">ページ制御</property>
                                <property name="width_request">180</property>
                                <property name="xalign">0.2</property>
                            </object>
                        </child>
                    </object>
                </child>
            </object>
        </child>
    </template>
    <object class="GtkBox" id='box2'>
        <property name="margin_top">20</property>
        <property name="margin_bottom">20</property>
        <property name="margin_start">20</property>
        <property name="margin_end">20</property>
        <property name="spacing">20</property>
        <child>
            <object class="GtkLabel" id="label2">
                <property name="label">追加ページです</property>
            </object>
        </child>    
    </object>
    <object class="GtkBox" id="tbox2">
        <child>
            <object class="GtkImage" id="timage2">
                <property name="icon_name">media-playback-start</property>
            </object>
        </child>
        <child>
            <object class="GtkLabel" id="tlabel2">
                <property name="label">追加ページ</property>
                <property name="width_request">180</property>
                <property name="xalign">0.2</property>
            </object>
        </child>
    </object>
</interface>

import os
import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gtk


APPID = 'com.github.taniyoshima.g4_fblogt_notebook'


@Gtk.Template(filename=os.path.dirname(__file__) + '/ui_file2.ui')
class Gtk4TestTest(Gtk.Window):
    __gtype_name__ = "window"

    notebook = Gtk.Template.Child()
    button1 = Gtk.Template.Child()
    button2 = Gtk.Template.Child()
    box2 = Gtk.Template.Child()
    tbox2 = Gtk.Template.Child()
    page = None

    def __init__(self, app):
        Gtk.Window.__init__(
            self, application=app)

    @Gtk.Template.Callback()
    def on_button1_clicked(self, button):
        self.button1.set_sensitive(False)
        self.button2.set_sensitive(True)
        self.page = self.notebook.append_page_menu(self.box2, self.tbox2)

    @Gtk.Template.Callback()
    def on_button2_clicked(self, button):
        self.button1.set_sensitive(True)
        self.button2.set_sensitive(False)
        self.notebook.remove_page(self.page)


class Gtk4TestApp(Gtk.Application):

    def __init__(self):
        Gtk.Application.__init__(self, application_id=APPID)

    def do_activate(self):
        window = Gtk4TestTest(self)
        window.present()


def main():
    app = Gtk4TestApp()
    app.run()


if __name__ == '__main__':
    main()