seedとGtkTreeView関係とMVCモデル

SeedでList表示しようと思い、いろいろ調べていたんだけど、結局完全には理解できていない。基本的には、seed-exampleの gtktreeview.js を使い回しすれば良いのですが、微妙に納得できていないところがあるので、思うままに書きます。

devhelp では "Tree and List Widget Overview" がList表示の概念で、MVC モデルになっています。

まず、モデルから。モデルは GtkListStore と GtkTreeStore が使えますが、sample にもあるので、 GtkListStore を使います。イテレーターとして、 GtkTreeIter を使ってそれぞれの要素を保持します。

次にビューだが、リスト形式のviewは無いので、 GtkTreeView を使います。GteTreeView の個々の列は、 GtkTreeViewColumn とし、セルひとつひとつは GtkCellRendererText を使って表示します。セルの表示には、 GtkCellRendererText GtkCellRendererPixbuf GtkCellRendererToggle があり、テキストや画像やブール値を表示できます。

ここまでできれば、後はプログラムを書くだけです。

#! /usr/bin/env seed

var Gtk = imports.gi.Gtk;
var GObject = imports.gi.GObject;

Gtk.init(Seed.argv);

// model 
var store = new Gtk.ListStore();
store.set_column_types(1, [GObject.TYPE_STRING]);

var iter = new Gtk.TreeIter();

store.append(iter);
store.set_value(iter, 0, [GObject.TYPE_STRING, "first"]);
store.append(iter);
store.set_value(iter, 0, [GObject.TYPE_STRING, "second"]);
store.append(iter);
store.set_value(iter, 0, [GObject.TYPE_STRING, "third"]);
store.append(iter);
store.set_value(iter, 0, [GObject.TYPE_STRING, "short"]);

// view
var column = new Gtk.TreeViewColumn();
var cell = new Gtk.CellRendererText();
column.pack_start(cell);
column.add_attribute(cell, "text", 0);

var tree = new Gtk.TreeView();
tree.append_column(column);
tree.set_model(store);

var win = new Gtk.Window();
win.signal.destroy.connect(Gtk.main_quit);
win.add(tree);
win.show_all();

Gtk.main();

初めはモデルを作ります。

var store = new Gtk.ListStore();　で GtkListStore を作成し、store.set_column_types(1, [GObject.TYPE_STRING]); で、コラムは1列に形式はGObject.TYPE_STRING (文字列)にします。本来なら、形式を指定して Gtk.ListView を new すべきですが、、、やり方が分からないので後から指定します。

var iter = new Gtk.TreeIter(); で要素ひとつのオブジェクトを作り、 store.append(iter); で、第一要素を追加します。内部ソースは確認してないが、この時 GtkTreeIter iter 分のメモリが確保されると思います。次に、 store.set_value(iter, 0, [GObject.TYPE_STRING, "first"]); で、 iter 形式の 0 列目(1列しか無いけど)を [GObject.TYPE_STRING, "first"] にします。
その後、次々に要素を追加し、値を代入していきます。

次にビューを作ります。
var column = new Gtk.TreeViewColumn();
これで、 GtkTreeView に挿入する列オブジェクトを作成します。次に、各セルの表示用 widget を var cell = new Gtk.CellRendererText(); で作成し、 column.pack_start(cell); で cell を最初の列に pack を開始します。そして、
column.add_attribute(cell, "text", 0); で属性を "text" にします。 0 は最初の列を意味します。 GtkCellRendererText の場合は "text" で問題ありません。

そして、 var tree = new Gtk.TreeView(); で GtkTreeView を作り、 tree.append_column(column); で、列のビューを追加します。そして、tree.set_model(store); で GtkTreeView のモデルを GtkListStore にします。

最後に、 var win = new Gtk.Window(); でトップレベルの widget を作っていつもどおりの処理になります。

流れとして、モデルを作成し、ビューを作って表示する感じになります。本来なら、コントロール(signal処理)が必要になりますが、今回はありません。

やっと、seedでMVCプログラムが書けそうです。