[Gtk.Template]Gtk.Notebookの使用　Gtk.Notebookへのページの追加・削除

2023.07.14

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

　Gtk.NoteBook(以下、NoteBookという)は、タブ部分を選択することでページを切り替えることができるコンテナです。NoteBookもXMLデータで作成することが可能であり、あらかじめXMLデータでページを作成しておいて後からそのページをNoteBookに追加したり削除することが可能です。

　今回は、NotebookをXMLデータで作成する方法と、Notebookに後からXMLデータで作成したページを追加・削除する方法を紹介します。

今回紹介する内容
　・ Gtk.NoteBookを作成する
　・ Gtk.Notebookにページを追加する
　・ Gtk.Notebookのページを削除する

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

[Gtk.Template]Gtk.Notebookの使用②　Gtk.Notebookにアイコン付きのタグ追加、タグ位置変更
Gtk.NoteBookのタブは表示位置を上下左右に変更することが可能であり、タブにはGtk.Widgetを指定するため、ラベル以外を表示することが可能です。これらをXMLデータで指定する方法を紹介します。
tannipat.blog
2023.07.17

Gtk.NoteBookの設定

Gtk.NoteBookを作成する

　Gtk.Notebookの定義は、以下のようにします。
　1. <object class=”GtkNotebook” id=”（id名）”）”></object>を記入する。
　2. ページの内容を1.内に記入する。（青色の部分）
　3. ページのタブを記入する。（緑色の部分）
　　タブには、Gtk.Widgetを入れることが可能です。
　　また、記入しない場合は、タブは「ページ N」（Nは数字）となります。

            <object class="GtkNotebook" id="notebook">
                <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>
                <child type="tab">
                    <object class="GtkLabel" id="label1">
                        <property name="label">追加</property>
                    </object>
                </child>
            </object>

Gtk.Notebookにページを追加する

　Gtk.Notebookのページの追加には、①最後にページを追加するメソッドappend_page (child, tab_label)、②最初にページを追加するメソッドprepend_page (child, tab_label)、③positionで指定した位置にページを追加するメソッドinsert_page (child, tab_label, position)があります。今回は、append_page(child, tab_label)の使い方を紹介します。

append_page(child, tab_label)について

　append_page(child, tab_label)の引数childにはページ内容のGtk.Widgetを、tab_labelにはタブ用のGtk.WidgetもしくはNoneを指定します。Noneを指定した場合、タブは「ページ N」（Nは数字）となります。

　append_page(child, tab_label)の戻り値はint型であり、ページの追加が成功した場合はそのページの番号を、失敗した場合は-1になります。

XMLデータによるページの作成とNotebookへの追加

　Gtk.NotebookにXMLデータで定義したページの追加は、以下のようにおこないます。
　1. </template>の下にページとタブのデータを記入する。

    </template>
    <object class="GtkBox" id='box3'>
        <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="label3_1">
                <property name="label">追加ページです</property>
            </object>
        </child>    
    </object>
    <object class="GtkLabel" id="label3">
        <property name="label">追加ページ</property>
    </object>

　2. Pythonプログラム(main.py)側にXMLデータで定義したWidgetを読み込む。

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

    notebook = Gtk.Template.Child() 
    button1 = Gtk.Template.Child()
    button2 = Gtk.Template.Child()
    box3 = Gtk.Template.Child()
    label3 = Gtk.Template.Child()
    page = None
    …省略…

　3.メソッドappend_page_menu()を使用して定義したタブやページをGtk.Notebookに挿入する。

@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.box3, self.label3)

Gtk.Notebookのページを削除する

　Gtk.Notebookからページを削除するのには、メッソドremove_page(page_num)を使用します。page_numはint型でありGtk.Notebookのページの番号（０からスタート）もしくは−１を入れます。page_numを−1にした場合は、一番最後のページが削除されます。

    @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)

サンプルプログラム

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

実行方法

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

python main.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 Test</property>
        <child>
            <object class="GtkNotebook" id="notebook">
                <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>
                    </object>
                </child>
                <child type="tab">
                    <object class="GtkLabel" id="label1">
                        <property name="label">追加</property>
                    </object>
                </child>
                <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="label2_1">
                                <property name="label">右ボタンを押すと
「追加ページ」を削除します。</property>
                            </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="GtkLabel" id="label2">
                        <property name="label">削除</property>
                    </object>
                </child>
            </object>
        </child>
    </template>
    <object class="GtkBox" id='box3'>
        <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="label3_1">
                <property name="label">追加ページです</property>
            </object>
        </child>    
    </object>
    <object class="GtkLabel" id="label3">
        <property name="label">追加ページ</property>
    </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_file.ui')
class Gtk4TestTest(Gtk.Window):
    __gtype_name__ = "window"

    notebook = Gtk.Template.Child() 
    button1 = Gtk.Template.Child()
    button2 = Gtk.Template.Child()
    box3 = Gtk.Template.Child()
    label3 = 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.box3, self.label3)

    @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()
タイトルとURLをコピーしました