TreeViewウィジェットの概要 - Gtk::TreeView、Gtk::TreeModel、およびその関連クラスについて

※ このページは、GTK+ 2 Reference Manual: Tree and List Widget Overviewを翻訳し、Ruby-GNOME2向けに書き換えたものですが、サンプルコードに使う言語の違いのせいもあって、大幅に文章の追加・改変をしています。後から追加した部分は背景色を変えていますが、厳密に区別できていないところもあります。

このページの目次

ツリー／リスト表示を実現するための主な部品
"モデル"を作成する

"ビュー"部を組み立てる

（比較的）シンプルなサンプル
参考リンク
このページの更新履歴
脚注

ツリー／リスト表示を実現するための主な部品

"モデル"を作成する

　ここからは具体的なクラスの使い方になります。まずは表示データを準備します。

model = Gtk::ListStore.new( String, Object )

MODEL_FIELD_NAME = 0
MODEL_FIELD_NAME_COLOR = 1
MODEL_FIELD_TITLE = 2
MODEL_FIELD_CHECKED = 3

model = Gtk::TreeStore.new( String, String, String, Object )

iter = model.append( nil )
model.set_value( iter, MODEL_FIELD_NAME, 'Michael Jackson' )
model.set_value( iter, MODEL_FIELD_NAME_COLOR, 'blue' )
iter = model.append( iter )
model.set_value( iter, MODEL_FIELD_TITLE, 'BAD' )
model.set_value( iter, MODEL_FIELD_CHECKED, 'true'=='true' )

"ビュー"部を組み立てる

　ここからはデータ表示を担当する部分の作り方です。

　ここまでで説明したように、"モデル"（ストアオブジェクト）は複数の種類を使い分ける必要がありますが、"ビュー"部分には常に同じクラスを使います。これでリストビューもツリービューも作ることができます。

view = Gtk::TreeView.new( model )

renderer1 = Gtk::CellRendererText.new
renderer2 = Gtk::CellRendererText.new
renderer3 = Gtk::CellRendererToggle.new

column = Gtk::TreeViewColumn.new( 
  "Name", renderer1, 
  :text => MODEL_FIELD_NAME, 
  :foreground => MODEL_FIELD_COLOR )
view.append_column( column )

column = Gtk::TreeViewColumn.new( 
  "Title", renderer2, 
  :text => MODEL_FIELD_TITLE )
view.append_column( column )

column = Gtk::TreeViewColumn.new( 
  "Checked", renderer3, 
  :active => MODEL_FIELD_CHECKED )
view.append_column( column )

select = view.selection
select.mode = Gtk::SELECTION_SINGLE

select.signal_connect( 'changed' ) do |obj, *args|
  if obj.selected
    value = model.get_value( obj.selected, MODEL_FIELD_NAME )
    if value == nil
      puts 'TITLE node is selected.'
    else
      puts 'NAME node is selected.'
    end
  end
end

（比較的）シンプルなサンプル

# coding: utf-8
require 'gtk2'
#require 'gtk3'

MODEL_FIELD_NAME = 0
MODEL_FIELD_COLOR = 1
MODEL_FIELD_TITLE = 2
MODEL_FIELD_CHECKED = 3

model = Gtk::TreeStore.new( String, String, String, Object )
iter = model.append( nil )
model.set_value( iter, MODEL_FIELD_NAME, 'Michael Jackson' )
model.set_value( iter, MODEL_FIELD_COLOR, 'blue' )
iter = model.append( iter )
model.set_value( iter, MODEL_FIELD_TITLE, 'BAD' )
model.set_value( iter, MODEL_FIELD_CHECKED, 'true'=='true' )
iter = model.append( nil )
model.set_value( iter, MODEL_FIELD_NAME, 'Janet Jackson' )
model.set_value( iter, MODEL_FIELD_COLOR, 'red' )
iter = model.append( iter )
model.set_value( iter, MODEL_FIELD_TITLE, 'Black Cat ' )
model.set_value( iter, MODEL_FIELD_CHECKED, 'false'=='true' )

view = Gtk::TreeView.new( model )

select = view.selection
select.mode = Gtk::SELECTION_SINGLE
# for gtk3
#select.mode = Gtk::SelectionMode::SINGLE
select.signal_connect( 'changed' ) do |obj, *args|
  if obj.selected
    value = model.get_value( obj.selected, MODEL_FIELD_NAME )
    if value == nil
      puts 'TITLE node is selected.'
    else
      puts 'NAME node is selected.'
    end
  end
end

renderer1 = Gtk::CellRendererText.new
renderer2 = Gtk::CellRendererText.new
renderer3 = Gtk::CellRendererToggle.new

column = Gtk::TreeViewColumn.new( 
  "Name", renderer1, 
  :text => MODEL_FIELD_NAME, 
  :foreground => MODEL_FIELD_COLOR )
view.append_column( column )

column = Gtk::TreeViewColumn.new( 
  "Title", renderer2, 
  :text => MODEL_FIELD_TITLE )
view.append_column( column )

column = Gtk::TreeViewColumn.new( 
  "Checked", renderer3, 
  :active => MODEL_FIELD_CHECKED )
view.append_column( column )

window = Gtk::Window.new
window.set_size_request( 400, 150 )
window.signal_connect( 'destroy' ) { Gtk.main_quit }
window.add( view )

window.show_all
Gtk::main

参考リンク

　Ruby-GNOME2 Project Website （公式Wiki）

このページの更新履歴

2014/08/10

　ツリー／リスト表示を実現するための主な部品の項目を修正。

2014/06/01

　脚注1を修正。

2014/05/25

　公開