Popover Menu

The script shows how to create a popover menu in a GTK3 app, users can activate the menu by clicking the menu button placed on the top left corner of this app.

1. Define a popover with Gtk.Popover. Basically, a popover can hold any gtk widget. In this example, a menu with some options are hold by the popover.
   
2. Define a set of menu items by Gtk.ModelButton, each button when clicked will trigger an event handler. Place all buttons in a box, and place the box in the popover.
3. Define a menu button by Gtk.MenuButton, attach the popover to the menu button during the creation of the button.
4. Define an entry for editing selected list item. The key-press-event of the entry can trigger a handler, named self.entryKey in this app, which processes the change of text.
5. In self.entryKey, the function Gtk.keyval_name(event.keyval) returns the name of the key which has just been pressed. The name for the return key is Return. 
   

Source Code

---

#!/usr/bin/env python3 # -*- coding: utf-8 -*- import gi gi.require_version('Gtk', '3.0') from gi.repository import Gtk, Gdk, Pango class Base: def __init__(self): self.win = Gtk.Window() self.win.set_title("Popover") self.win.set_default_size(width=320, height=450) self.win.set_border_width(4) self.win.connect("delete-event", self.WinDelete_event) # # vbox holding all controls mBox = Gtk.VBox(homogeneous=False, spacing=3) self.win.add(mBox) # # # popover self.mainpop = Gtk.Popover() mvbox = Gtk.Box(orientation=Gtk.Orientation.VERTICAL) mMenuItem1 = Gtk.ModelButton(label="Move up") mMenuItem1.connect('clicked', self.callback, "mvUp") mMenuItem1.set_property('xalign',0) # left aligned mMenuItem2 = Gtk.ModelButton(label="Move down") mMenuItem2.connect('clicked', self.callback, "mvDown") mMenuItem2.set_property('xalign',0) # left aligned mMenuItem3 = Gtk.ModelButton(label="Delete") mMenuItem3.connect('clicked', self.callback, "delItem") mMenuItem3.set_property('xalign',0) # left aligned mMenuItem4 = Gtk.ModelButton(label="Clear All") mMenuItem4.connect('clicked', self.callback, "clrItems") mMenuItem4.set_property('xalign',0) # left aligned mvbox.pack_start(mMenuItem1, True, True, 2) mvbox.pack_start(mMenuItem2, True, True, 2) mvbox.pack_start(Gtk.SeparatorMenuItem(), True, True, 2) mvbox.pack_start(mMenuItem3, True, True, 2) mvbox.pack_start(mMenuItem4, True, True, 2) self.mainpop.add(mvbox) mvbox.show_all() # menu button mMenubutt = Gtk.MenuButton(popover=self.mainpop) # entry self.entry = Gtk.Entry() self.entry.connect("key-press-event", self.entryKey) mtip = "Click an item below, edit its content "+\ "here and \npress Return to save changes." self.entry.set_tooltip_text(mtip) mHBox = Gtk.HBox(homogeneous=False, spacing=2) mHBox.pack_start(mMenubutt,False,True,2) mHBox.pack_start(self.entry,True,True,2) mBox.pack_start(mHBox,False,True,2) # # liststore, treeview, cellrenderer, # treeviewcolumn, scrolledwindow self.lstore = Gtk.ListStore(str, int) # add data mItems = (("Orange 橙",18), ("Cherry 櫻桃",25), ("Water Melon 西瓜",19), ('Apple 蘋果', 15), ('Banana 香蕉', 24), ('Papaya 木瓜', 34)) for mi in mItems: self.lstore.append(mi) self.tview = Gtk.TreeView(model=self.lstore) self.tview.connect( "button-release-event", self.RowClick_event) # column 0 mcellrend = Gtk.CellRendererText() mFont = Pango.FontDescription('San 10') mcellrend.set_property('font-desc',mFont) # text = 0 means get data from [0] of the list store lstore mtvcol00 = Gtk.TreeViewColumn("Fruit", mcellrend, text=0) mtvcol00.set_min_width(200) mtvcol00.set_resizable(True) mtvcol00.set_sort_column_id(0) self.tview.append_column(mtvcol00) # column 1 mcellrend = Gtk.CellRendererText() mFont = Pango.FontDescription('Serif Bold 10') mcellrend.set_property('font-desc',mFont) mcellrend.set_property('xalign',0.9) # right aligned mtvcol01 = Gtk.TreeViewColumn("Price $", mcellrend, text=1) mtvcol01.set_alignment(0.9) # column header righted aligned mtvcol01.set_sort_column_id(1) self.tview.append_column(mtvcol01) # self.tview.set_headers_clickable(True) # make column 0 searchable, # press Ctrl-f to start searching self.tview.set_search_column(0) # mscwin = Gtk.ScrolledWindow() mscwin.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC) mscwin.set_shadow_type(Gtk.ShadowType.IN) mscwin.add(self.tview) mBox.pack_start(mscwin,True,True,2) # # status bar self.stsBar = Gtk.Statusbar() mBox.pack_start(self.stsBar,False,True,2) # self.win.show_all() # Event Handlers # --------------------------------------------------------- # callback def callback(self, widget, data): if data == 'clrItems': self.lstore.clear() self.pushStatus("clrItems","The list is empty.") self.entry.set_text('') self.entry.grab_focus() return # get iter of the selected item mModel = self.tview.get_selection().get_selected()[0] mIter = self.tview.get_selection().get_selected()[1] if mIter == None: return elif data == 'edtItem': # edit an item in the list mItem = self.entry.get_text() mItem = mItem.strip() if mItem=='': return self.lstore.set_value(mIter,0,mItem) # change col 0 to mItem # make the newly added item being selected self.tview.get_selection().select_iter(mIter) # push message to status bar mStr = "Edit: " + mItem self.pushStatus("edtItem",mStr) self.entry.set_text('') elif data == 'delItem': # delete an item from the list mNextIter = None mName = mModel.get_value(mIter,0) mNextIter = self.lstore.iter_next(mIter) self.lstore.remove(mIter) # remove iter from list mStr = "Del: " + mName self.pushStatus("delItem",mStr) if mNextIter != None: # highlight the next item in the list self.tview.get_selection().select_iter(mNextIter) else: # highlight the last item mLast = len(self.lstore) if mLast > 0: mLast = mLast - 1 self.tview.get_selection().select_path(mLast) else: # the list is cleared self.pushStatus("delItem","The list is empty.") self.entry.set_text('') self.entry.grab_focus() elif data == 'mvUp': mPrevIter = self.lstore.iter_previous(mIter) if mPrevIter == None: return mPrevName = mModel.get_value(mPrevIter,0) mPrevPrice = mModel.get_value(mPrevIter,1) mName = mModel.get_value(mIter,0) mPrice = mModel.get_value(mIter,1) self.lstore.set_value(mPrevIter,0,mName) self.lstore.set_value(mPrevIter,1,mPrice) self.lstore.set_value(mIter,0,mPrevName) self.lstore.set_value(mIter,1,mPrevPrice) self.tview.get_selection().select_iter(mPrevIter) elif data == 'mvDown': mNextIter = self.lstore.iter_next(mIter) if mNextIter == None: return mNextName = mModel.get_value(mNextIter,0) mNextPrice = mModel.get_value(mNextIter,1) mName = mModel.get_value(mIter,0) mPrice = mModel.get_value(mIter,1) self.lstore.set_value(mNextIter,0,mName) self.lstore.set_value(mNextIter,1,mPrice) self.lstore.set_value(mIter,0,mNextName) self.lstore.set_value(mIter,1,mNextPrice) self.tview.get_selection().select_iter(mNextIter) # handle entry key change def entryKey(self, widget, event): mv = self.tview.get_selection().get_selected() mModel = mv[0] mIter = mv[1] if mIter != None and \ Gdk.keyval_name(event.keyval)=='Return': self.lstore.set_value(mIter,0,widget.get_text()) # Delete event def WinDelete_event(self, event, data=None): Gtk.main_quit() return False # row click or row change event in list def RowClick_event(self, widget, event=None): mtreepath = widget.get_path_at_pos(int(event.x), int(event.y)) if mtreepath != None: mIter = self.lstore.get_iter(mtreepath[0]) mName = self.lstore.get_value(mIter,0) # get column 0 mIdx = self.lstore.get_path(mIter)[0] # get index in list self.entry.set_text(mName) self.entry.grab_focus() if event.button==1: # normal click mStr = 'Click: ' mStr += str(mIdx) + ' Tag: ' + mName self.pushStatus("clickTag",mStr) # push message to status bar def pushStatus(self, pCtxt, pMsg): mctxid = self.stsBar.get_context_id(pCtxt) self.stsBar.push(mctxid, pMsg) def main(): Gtk.main() if __name__ == "__main__": base = Base() main()