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.
- 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)
No comments:
Post a Comment