haskell-giのtreeviewで複数列を扱いたい

Question

前提・実現したいこと

HaskellでGUIプログラミング（haskell-gi）を勉強しています。
サンプルプログラムを色々探して、表をtreeviewで表示できましたが単列の表となっております。
複数列（項目）の表を表示したいのですが、どのようにコーディングしたらよいのかわかりません。

該当のソースコード

{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE OverloadedLabels #-}
{-# LANGUAGE ScopedTypeVariables #-}

module Main where

import Data.GI.Base
import Control.Monad
import Data.Text (Text, pack)
import Data.GI.Base.GType (gtypeString)
import qualified GI.Gtk as Gtk
import qualified GI.Pango as Pango

demoList::[Text]
demoList = ["1 James","2 John","3 Robert","4 Michael","5 William","6 David","7 Richard","8 Joseph","9 Thomas","10 Charles"]

setValuesToListStore :: Gtk.ListStore ->  [Text] -> Int -> IO Gtk.TreeIter
setValuesToListStore lsts artx counter = do
             let stT::Text = artx !! counter
             gv <- toGValue (Just stT)
             if (counter == (length artx)-1) then Gtk.listStoreInsertWithValuesv lsts (-1) [0] [gv]
             else do
               m <- (Gtk.listStoreInsertWithValuesv lsts (-1) [0] [gv])
               setValuesToListStore lsts artx (counter + 1)

main :: IO ()
main = do
    void $ Gtk.init Nothing

    window <- new Gtk.Window []
    on window #destroy Gtk.mainQuit

    column <- new Gtk.TreeViewColumn [ #title := "Column name" ]
    render <- new Gtk.CellRendererText [ #ellipsize :=  Pango.EllipsizeModeEnd
                                       , #editable := False ]
    #packStart column render True
    #addAttribute column render "text" 0

    mlistStore <- Gtk.listStoreNew [gtypeString]

    setValuesToListStore mlistStore demoList 0

    view <- new Gtk.TreeView[#enableTreeLines := True, #headersVisible := True]
    lk <- (Gtk.treeViewSetModel view (Just mlistStore))

    #appendColumn view column

    #expandAll view
    #add window view
    #showAll window

    Gtk.main

全てのソースコード

試したこと

上記コード上の数字をいじってみましたが複数列にはなりませんでした。
haskell-giの基になるGTKを調べてみると、列の設定にはListStoreを使っているようで、haskell-giのListStoreを調べるとhttps://hackage.haskell.org/package/gi-gtk-4.0.4/docs/GI-Gtk-Objects-ListStore.htmlだとわかりましたが、具体的にどのようにコーディングしたらよいのかわかりませんでした。
「haskell-gi treeview liststore」などでググったり、GithubやQiitaを見てみましたが参考になるようなサイトやコードは見つけられませんでした。

補足情報（FW/ツールのバージョンなど）

lts: 18.0
stack: Version 2.7.1
haskell-gi: 0.25
OS: ArchLinux
GNOME:　GNOME Shell 40.2

よろしくお願いします。

Answer 1

Haskellは知りません。
とりあえずHaskell抜きでお話します。

TreeViewウィジェットは、いろんなクラスを元に動作しています。

• GTK+3 Reference Manual - Tree, List and Icon Grid Widgets

まぁこれ全部を使うわけではないのですが、とりあえず質問者さんのソースコードで使われているものを抜粋します。

• GtkTreeView - TreeViewウィジェット本体
• GtkTreeViewColumn - TreeViewカラム
• GtkCellRendererText - セルの描画オブジェクト
• GtkListStore - データモデルオブジェクト

というわけで、列を増やすのであればまず**GtkTreeViewColumnを増やさなければならないのですが、それとともに、データを管理しているのはGtkListStoreですので、GtkListStoreのカラムも増やさなければなりません。**

Haskellは知らない、とは言いましたが、他言語でもGTK+をやっていれば知らない言語でもおおよそ何をやっているかは想像がつくので、軽く説明します。

まず、GtkListStoreについて。

    mlistStore <- Gtk.listStoreNew [gtypeString]

GtkListStoreの生成する際に、各カラムの型をカラム数分指定します。
元はカラムが一つしかないので、列を増やすのであれば２つ指定する必要があります。

setValuesToListStore :: Gtk.ListStore ->  [Text] -> Int -> IO Gtk.TreeIter
setValuesToListStore lsts artx counter = do
             let stT::Text = artx !! counter
             gv <- toGValue (Just stT)
             if (counter == (length artx)-1) then Gtk.listStoreInsertWithValuesv lsts (-1) [0] [gv]
             else do
               m <- (Gtk.listStoreInsertWithValuesv lsts (-1) [0] [gv])
               setValuesToListStore lsts artx (counter + 1)

gtk_list_store_insert_with_valuesv(HaskellだとGtk.listStoreInsertWithValuesv)で、データモデルであるGtkListStoreにデータを追加します。
一番目の引数にGtkListStoreオブジェクト、二番目に追加する場所(-1であれば最後)を指定します。
三番目と四番目に、「カラム番号」と「そのカラムにセットするデータ値」を指定します。ここも元はカラムが一つしかなかったので各々一つのみしかありませんが、列を増やすのであれば２つ指定します。(他にも方法がありますが、説明を省きます)

次に、GtkTreeViewColumnとGtkCellRendererTextについて。

    column <- new Gtk.TreeViewColumn [ #title := "Column name" ]
    render <- new Gtk.CellRendererText [ #ellipsize :=  Pango.EllipsizeModeEnd
                                       , #editable := False ]
    #packStart column render True
    #addAttribute column render "text" 0

    #appendColumn view column

ここが表示カラムを追加している箇所です。
複数のカラムを表示するのであれば、上記の処理をその回数分実行しなければなりません。

その際に注意しなければならないのは、gtk_tree_view_column_add_attribute(#addAttribute)です。
最後の「0」は、GtkListStoreの0番目のカラムを参照するという指定になりますから、2番めのカラムは「1」を指定して、1番目のカラムを参照するようにしなければなりません。

Haskellを知らない自分が説明できるのはこの辺りまでですが、参考までに、Pythonで書いたソースコードを載せておきます。

# coding: utf-8

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk, GObject, Pango

demoList = [("1", "James"),("2", "John"),("3", "Robert"),("4", "Michael"),("5", "William"),("6", "David"),("7", "Richard"),("8", "Joseph"),("9", "Thomas"),("10", "Charles")]

def setValuesToListStore(lsts, artx, counter):
	v0, v1 = artx[counter]
	gv0 = GObject.Value(GObject.TYPE_STRING, v0)
	gv1 = GObject.Value(GObject.TYPE_STRING, v1)
	if counter == len(artx) - 1:
		lsts.insert_with_valuesv(-1, [0, 1], [gv0, gv1])
	else:
		lsts.insert_with_valuesv(-1, [0, 1], [gv0, gv1])
		setValuesToListStore(lsts, artx, counter + 1)

def main():
	window = Gtk.Window()
	window.connect('destroy', Gtk.main_quit)

	column0 = Gtk.TreeViewColumn(title='Column0')
	render = Gtk.CellRendererText(ellipsize=Pango.EllipsizeMode.END, editable=False)

	column0.pack_start(render, True)
	column0.add_attribute(render, 'text', 0)

	column1 = Gtk.TreeViewColumn(title='Column1')
	render = Gtk.CellRendererText(ellipsize=Pango.EllipsizeMode.END, editable=False)

	column1.pack_start(render, True)
	column1.add_attribute(render, 'text', 1)

	mlistStore = Gtk.ListStore(GObject.TYPE_STRING, GObject.TYPE_STRING)

	setValuesToListStore(mlistStore, demoList, 0)

	view = Gtk.TreeView(enable_tree_lines=True, headers_visible=True)
	view.set_model(mlistStore)

	view.append_column(column0)
	view.append_column(column1)

	view.expand_all()
	window.add(view)
	window.show_all()

	Gtk.main()

if __name__ == '__main__':
	main()

Comments

[apo]

pythonのコードを実行してみました、このようなことをしたいです。ご提示頂いたコードを参考にHaskellに組み直してみます。ありがとうございます。

[apo]

ご教示頂いたPythonコードをそのままHaskellに書き直したらできました。

```
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE OverloadedLabels #-}
{-# LANGUAGE ScopedTypeVariables #-}

module Main where

import Data.GI.Base
import Control.Monad
import Data.Text (Text, pack)
import Data.GI.Base.GType (gtypeString)
import qualified GI.Gtk as Gtk
import qualified GI.Pango as Pango

demoList::[(Text, Text)]

demoList = [("1","James"),("2","John"),("3","Robert"),("4","Michael"),("5","William"),("6","David"),("7","Richard"),("8","Joseph"),("9","Thomas"),("10","
Charles")]

setValuesToListStore :: Gtk.ListStore -> [(Text, Text)] -> Int -> IO Gtk.TreeIter

setValuesToListStore lsts artx counter = do

let (stT::Text, stT2::Text) = artx !! counter

gv <- toGValue (Just stT)
gv2 <- toGValue (Just stT2)

if (counter == (length artx)-1) then Gtk.listStoreInsertWithValuesv lsts (-1) [0, 1] [gv, gv2]
else do
m <- (Gtk.listStoreInsertWithValuesv lsts (-1) [0, 1] [gv, gv2])
setValuesToListStore lsts artx (counter + 1)

main :: IO ()
main = do

void $ Gtk.init Nothing

window <- new Gtk.Window []
on window #destroy Gtk.mainQuit

column <- new Gtk.TreeViewColumn [ #title := "Column name" ]
render <- new Gtk.CellRendererText [ #ellipsize := Pango.EllipsizeModeEnd
, #editable := False ]
#packStart column render True
#addAttribute column render "text" 0

column2 <- new Gtk.TreeViewColumn [ #title := "Column name2" ]
render <- new Gtk.CellRendererText [ #ellipsize := Pango.EllipsizeModeEnd
, #editable := False ]

#packStart column2 render True
#addAttribute column2 render "text" 1

mlistStore <- Gtk.listStoreNew [gtypeString, gtypeString]

setValuesToListStore mlistStore demoList 0

view <- new Gtk.TreeView[#enableTreeLines := True, #headersVisible := True]

lk <- (Gtk.treeViewSetModel view (Just mlistStore))

#appendColumn view column
#appendColumn view column2

#expandAll view

#add window view

#showAll window

Gtk.main
```

[https://github.com/ringo-apo/haskell-gi_treeview/blob/main/app/Main.hs](https://github.com/ringo-apo/haskell-gi_treeview/blob/main/app/Main.hs)

ありがとうございます！

[apo]

細かな解説もすごく勉強になりました。ありがとうございます。