[Gtk.Template]Gtk.ComboBoxの使用   Gtk.Storeの指定

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

 Gtk.ComboBoxは、ユーザーに選択肢の中から選択してもらう時などに使用するWidgetであり、選択肢にモデル使用します。このため、モデルにソートやフィルタを掛けたものを選択肢にしたり、選択した選択肢に対応した数字を設けて、その数字をもとに処理を行わせることなどが可能です。

 Gtk.ComboBoxは、Gtk4.10より非推奨となりましたが、Gtk4の間は継続して使用することが可能です。(代替Widgetは、Gtk.DorpDownです。)

 Gtk.ComboBoxをXMLデータにより作成する場合は、Gtk.ComboBoxTextのデフォルトで表示される部分だけでなく、クリックすると表示される選択肢(モデル)も作成することができます。

 今回は、XMLデータでGtk.ComboBoxを作成や選択肢の追加の方法について紹介します。

今回紹介する内容
 ・ XMLデータでGtk.ComboBoxの選択肢(モデル)を作成する
 ・ XMLデータでGtk.ComboBoxを作成する

XMLデータでのGtk.ComboBoxの記入

XMLデータでGtk.ComboBoxの選択肢(モデル)を作成する

 XMLデータでは、Gtk.ComboBox用のモデルは</template>の後に以下のように記入します。
 1. <object class=”GtkListStore” id=”id名”></objcet>の中に記入します。
 2. <columns></columns>の中に、データの型情報を記入します。
 3. データの型(typeに記入する内容)は、Glibで定義されたものを記入します。
  (※ 文字列には’gchararray’を指定)
 4. <date></data>に、実際のデータを記入します。
 5. 各データは1まとまりずつ、<row></row>の中に記入します。
 6. データの各項目は、<col id=”データの番号”>値</col>の形で記入します。
 7. データの番号は、<columns></columns>で記入したデータ型の何番目のものに
  ついての値であるかを記入します。

    </template>
    <object class="GtkListStore" id="store">
        <columns>
            <column type="gint"/>
            <column type="gchararray"/>
            <column type="gint"/>
        </columns>
        <data>
            <row>
                <col id="0">0</col>
                <col id="1">Data1</col>
                <col id="2">2</col>
            </row>
            <row>
                <col id="0">1</col>
                <col id="1">Data2</col>
                <col id="2">2</col>
            </row>
            <row>
                <col id="0">2</col>
                <col id="1">Data3</col>
                <col id="2">2</col>
            </row>
        </data>
    </object>
</interface>

XMLデータでGtk.ComboBoxを作成する

 XMLデータでGtk.ComboBoxを作成する場合は、それを載せるWidgetの<child></child>の中に <object class=”ComboBox” ></object>と記入して、その中にプロパティやレイアウト、表示部分(GtkCellRenderText)を記入します。

 Gtk.ComobBoxのモデルの指定は、<property name=”model”>store</property>部分で行っており、storeは、先ほど定義したモデルのid名にしています。

                <child>
                    <object class="GtkComboBox" id="combo">
                        <property name="model">store</property>
                        <property name="active">1</property>
                        <child>
                            <object class="GtkCellRendererText" id="cellrendertext"/>
                            <attributes>
                                <attribute name="text">1</attribute>
                            </attributes>
                        </child>
                        <layout>
                            <property name="column">1</property>
                            <property name="row">1</property>
                        </layout>
                    </object>
                </child>

サンプルプログラム

 プログラムを実行すると以下のような画面が表示されます。画面中の「取得」ボタンを押すと、その時Gtk.ComboBoxに表示されているテキストがターミナルに出力されます。

実行方法

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

python main.py
<?xml version="1.0" encoding="UTF-8"?>
<interface>
    <template class="window" parent="GtkWindow">
        <property name="default_width">500</property>
        <property name="default_height">250</property>
        <property name="title">Template ComboBox Test</property>
        <child>
            <object class="GtkGrid" id="grid">
                <property name="hexpand">True</property>
                <property name="margin-bottom">10</property>
                <property name="margin-end">10</property>
                <property name="margin-start">10</property>
                <property name="margin-top">10</property>
                <property name="column_spacing">10</property>
                <property name="row_spacing">10</property>
                <property name="vexpand">True</property>
                <child>
                    <object class="GtkLabel" id="label2">
                        <property name="label">①Gtk.Combobox</property>
                        <property name="xalign">0.0</property>
                        <property name="width_request">230</property>
                        <layout>
                            <property name="column">0</property>
                            <property name="row">1</property>
                        </layout>
                    </object>
                </child>
                <!-- Gtk.ComboBoxの定義 -->
                <child>
                    <object class="GtkComboBox" id="combo">
                        <property name="model">store</property>
                        <property name="active">1</property>
                        <child>
                            <object class="GtkCellRendererText" id="cellrendertext"/>
                            <attributes>
                                <attribute name="text">1</attribute>
                            </attributes>
                        </child>
                        <layout>
                            <property name="column">1</property>
                            <property name="row">1</property>
                        </layout>
                    </object>
                </child>
                <child>
                    <object class="GtkButton" id="button">
                        <property name="label">取得</property>
                        <signal name="clicked" handler="on_button_clicked"/>
                        <layout>
                            <property name="column">1</property>
                            <property name="row">2</property>
                        </layout>
                    </object>
                </child>
            </object>
        </child>
    </template>
    <object class="GtkListStore" id="store">
        <columns>
            <column type="gint"/>
            <column type="gchararray"/>
            <column type="gint"/>
        </columns>
        <data>
            <row>
                <col id="0">0</col>
                <col id="1">Data1</col>
                <col id="2">2</col>
            </row>
            <row>
                <col id="0">1</col>
                <col id="1">Data2</col>
                <col id="2">2</col>
            </row>
            <row>
                <col id="0">2</col>
                <col id="1">Data3</col>
                <col id="2">2</col>
            </row>
        </data>
    </object>
</interface>
import os
import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gtk


APPID = 'com.github.taniyoshima.g4_fblogt_combobox'


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

    combo = Gtk.Template.Child()

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

    @Gtk.Template.Callback()
    def on_button_clicked(self, button):
        text = self.combo.get_active_iter()
        model = self.combo.get_model()
        output = model[text][1]
        print('ComboBox: ' + output)


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をコピーしました