Re: pygtk: gtk.CellRendererText().set_property(...) and pango markup (HTML)

[dieterv <dieterv optionexplicit be>]

On Fri, 09 Sep 2011 09:50:42 +0200, Marek Kozlowski wrote:

> I'm afraid I'm dumb cause I still don't understand :-(

Don't despair just yet! It's just that the techniques used
in Gtk's TreeView might not seem obvious at first. Looking
at the parts that matter most for us application developers,
there's a split between:
- the model (the part that holds the data you want to show
  on screen as a list or tree) and;
- the view (the part that actually draws the data from the
  model on screen).

After working with the various objects involved for some time
(ListStore, TreeView, CellRenderers, etc), you'll soon start
to recognize which object (or widget) belongs to what category.

> What do you mean: >>the "columns" (markup, foreground, background)<<
> ?

Sometimes it helps to think of the "columns" of the model
more like "fields" in a record in some database. If you
do that, model "fields" cannot be confused with
view "columns".

That might make it a bit easier to wrap your head around this.

> Let's take an example: 
> http://stackoverflow.com/questions/1447187/embed-a-spreadsheet-table-in-a-pygtk-application
> May I ask for corresponding, modified set_property() ?

Sure. Look at the attached example. It's a slightly modified
version of the example you've linked to above.

mvg,
Dieter

#!/usr/bin/env python

import pygtk
pygtk.require('2.0')
import gtk

class TreeViewColumnExample(object):

    # close the window and quit
    def delete_event(self, widget, event, data=None):
        gtk.main_quit()
        return False

    def __init__(self):
        # Create a new window
        self.window = gtk.Window(gtk.WINDOW_TOPLEVEL)
        self.window.set_title("TreeViewColumn Example")
        self.window.connect("delete_event", self.delete_event)

        ############################################################
        # Model
        ############################################################
        
        # Create a ListStore with 5 "fields". Let's give these
        # "fields" a name, for example:
        # (label, icon, short-text, long-text, has-background)
        #
        # The indexes that the view uses to reference these fiels are 0-based:
        # label=0, icon=1, short-text=2 ...
        self.liststore = gtk.ListStore(str, str, str, str, 'gboolean')
        self.liststore.append(['Open', gtk.STOCK_OPEN, 'Open a File', '<b>Some long text about Open</b>', True])
        self.liststore.append(['New', gtk.STOCK_NEW, 'New File', '<i>Some long text about New</i>', True])
        self.liststore.append(['Print', gtk.STOCK_PRINT, 'Print File', '<u>Some long text about Print</u>', False])

        ############################################################
        # View
        ############################################################       
        
        # Create a TreeView and let it know about the model we created above
        self.treeview = gtk.TreeView(self.liststore)

        # A TreeView widget holds colums, so let us create some of them
        self.tvcolumn1 = gtk.TreeViewColumn('icon and label')
        self.treeview.append_column(self.tvcolumn1)
        self.tvcolumn2 = gtk.TreeViewColumn('short-text')
        self.treeview.append_column(self.tvcolumn2)
        self.tvcolumn3 = gtk.TreeViewColumn('long-text')
        self.treeview.append_column(self.tvcolumn3)

        # TreeViewColumns doesn't do much other than horizontally separate
        # stuff on screen. We want to visualize the date we have in
        # our model inside these TreeViewColumns. So we need CellRenderers:

        # Render icon in first TreeViewColumn
        cell = gtk.CellRendererPixbuf()
        cell.set_property('cell-background', 'yellow')
        self.tvcolumn1.pack_start(cell, False)
        self.tvcolumn1.set_attributes(cell, stock_id=1) # 1 is the index of the icon "field" in the model
        
        # Render label in first TreeViewColumn, next to the icon
        cell = gtk.CellRendererText()
        cell.set_property('cell-background', 'cyan')
        self.tvcolumn1.pack_start(cell, True)
        self.tvcolumn1.set_attributes(cell, text=0) # 0 is the index of the label "field" in the model

        # Render short-text in second TreeViewColumn
        # We can reuse the CellRendererText from above because
        self.tvcolumn2.pack_start(cell, True)
        self.tvcolumn2.set_attributes(cell, text=1,     # 2 is the index of the short-text "field" in the model
                                      cell_background_set=4) # 4 is the index of the has-background "field" in the model

        # Render long-text as markup in third TreeViewColumn
        cell = gtk.CellRendererText()
        self.tvcolumn3.pack_start(cell, True)
        self.tvcolumn3.set_attributes(cell, markup=3) # 3 is the index of the long-text "field" in the model

        # make treeview searchable
        self.treeview.set_search_column(0)

        # Allow sorting on the column
        self.tvcolumn1.set_sort_column_id(0)

        # Allow drag and drop reordering of rows
        self.treeview.set_reorderable(True)

        self.window.add(self.treeview)
        self.window.show_all()

def main():
    gtk.main()

if __name__ == "__main__":
    tvcexample = TreeViewColumnExample()
    main()