Dynamic table in Quickly

When participating with a friend on the Ubuntu App Showdown, I realized that there aren't many tutorials and examples around regarding Ubuntu development with Quickly. So I got the idea to share some code I struggled with. I have extracted the necessarily code from my Quickly project to illustrate how clickable dynamic tables are constructed.

Glade

We need to create container to hold our table. For this I have chosen to use a  viewport inside a  scrolledwindow. In this example I'm using glade as an interface designer.

Open glade:

• Terminal : path_to_project/project_folder/ quickly design

Add a viewport inside a scrolledwindow :

• Drag & drop: scrolledwindow from the Containers-tab inside the vbox1 
• Drag & drop: viewport from the Containers-tab inside the the scrolledwindow

  Dynamic table

A dynamic table construction of 2 elements:

• Data store: which holds the data
• Tree view: user interface element that holds the data store

A Tree view is constructed out of columns. Those columns hold CellRenderers. In this example we use 2 children classes of the CellRenderer class. The first one is the CellRenderText class which is used to display text. The second one is a custom implementation of a  CellRendererPixBuff . A CellRendererPixbuff is used to display an image. We needed to extend from CellRendererPixBuff so we could make the cell that holds an icon clickable (implement the clicked signal). 

Snippet Window.py

# IMPORTS USED IN THIS EXAMPLEfrom gi.repository import GdkPixbuffrom CellRendererIcon import CellRendererIcon        from gi.repository import Gtk         # MAIN CODE        # VIEWPORT CREATED WITH GLADE
      self.viewport = self.builder.get_object('viewport')

        # CREATE LISTSTORE & TREEVIEW
        self.liststore = Gtk.ListStore(str, str)
        self.treeview = Gtk.TreeView(self.liststore)

        # COLUMNS
        column_text = Gtk.TreeViewColumn("Name")
        column_text.set_expand(True)
        column_icon = Gtk.TreeViewColumn("Delete")
        column_icon.set_expand(False)
        
        # ADD COLUMNS
        self.treeview.append_column(column_text)
        self.treeview.append_column(column_icon)        
        
        # CREATE TEXTRENDERER
        cellrenderer_text = Gtk.CellRendererText()
        column_text.pack_start(cellrenderer_text, False)
        column_text.add_attribute(cellrenderer_text, "text", 0)
     
        # CREATE ICONRENDERER
        cellrenderer_icon = CellRendererIcon()
        column_icon.pack_start(cellrenderer_icon, False)
        column_icon.add_attribute(cellrenderer_icon, "stock-id", 1)

        # CONNECT SIGNALS FOR CALLBACK CLICK ON CELL
        cellrenderer_icon.connect('clicked', self.on_custom_function)
        
        # CONNECT LISTSTORE WITH TREEVIEW
        self.treeview.set_model(self.liststore)
        
        # FILL DATASET IN TABLE
        for row in dataset:
            self.liststore.append([row['name'], Gtk.STOCK_DELETE])
        
        # SHOW & ADD treeview to viewport
        self.treeview.show()   
        self.viewport.add(self.treeview)

Code CellRendererIcon.py

#!/usr/bin/python
# import needed for this project
from gi.repository import Gtk
from gi.repository import GObject

class CellRendererIcon(Gtk.CellRendererPixbuf):
     __gsignals__    = { 'clicked' : (GObject.SIGNAL_RUN_LAST,
                                      GObject.TYPE_NONE,
                                      (GObject.TYPE_STRING,)), }
 
     def __init__(self):
         Gtk.CellRendererPixbuf.__init__(self)
         self.set_property('mode', 1)
         self.set_property('follow-state', True)
 
     def do_activate(self, even, widget, path, background_area, cell_area, flags):
  self.emit('clicked', path)

Source

Launchpad of Unity Bookmarks project