{"id":205,"date":"2015-12-08T15:24:27","date_gmt":"2015-12-08T15:24:27","guid":{"rendered":"http:\/\/gexperts.com\/wp\/?p=205"},"modified":"2015-12-14T21:14:51","modified_gmt":"2015-12-14T21:14:51","slug":"creating-complex-popovers-in-d-and-gtkd","status":"publish","type":"post","link":"https:\/\/gexperts.com\/wp\/creating-complex-popovers-in-d-and-gtkd\/","title":{"rendered":"Creating Complex Popovers in D and GtkD"},"content":{"rendered":"

I’m working on a new terminal emulator in my spare time and one UI element I definitely wanted to make use of was Popovers. While creating a simple Popover is quite easy, I was struggling a bit with how to handle the more complex layouts like horizontal buttons as the documentation does not make it very clear. Fortunately, Christian Hergert of Builder fame was on IRC one night and was able to point me in the right direction.<\/p>\n

The Popover I created is shown in the image below, in the terminal emulator I’m working on it allows you to split the terminal into multiple views or tiles so the user can see multiple views at the same time in an easily managed container. The Popover allows the user to split the terminal horizontally or vertically (note the icons are temporary, plan on “borrowing” Builder’s icons for this at some point).<\/p>\n

\"Popover\"<\/a><\/p>\n

The issue I was struggling with was where to set the display-hint, the section being a gio.Menu doesn’t have methods to set an attribute. What Christian pointed out to me is that you need to create an empty MenuItem to represent the section, add the section to that and then add it the menu used in the Popover. You can then set the necessary attributes on the empty MenuItem to get the items displayed in the way you want.<\/p>\n

Here is the code I ended up with:<\/p>\n

\r\nPopover createPopover(Widget parent) {\r\nGMenu model = new GMenu();\r\n\r\nGMenuItem splitH = new GMenuItem(null, \"view.splith\");\r\nsplitH.setAttributeValue(\"verb-icon\", new GVariant(\"go-next-symbolic\"));\r\nsplitH.setIcon(new ThemedIcon(\"go-next-symbolic\"));\r\n\r\nGMenuItem splitV = new GMenuItem(null, \"view.splitv\");\r\nsplitV.setAttributeValue(\"verb-icon\", new GVariant(\"go-down-symbolic\"));\r\nsplitV.setIcon(new ThemedIcon(\"go-down-symbolic\"));\r\n\r\nGMenu section = new GMenu();\r\nsection.appendItem(splitH);\r\nsection.appendItem(splitV);\r\n\r\nGMenuItem splits = new GMenuItem(null, null);\r\nsplits.setSection(section);\r\nsplits.setLabel(\"Split\");\r\nsplits.setAttributeValue(\"display-hint\", new GVariant(\"horizontal-buttons\"));\r\n\r\nmodel.appendItem(splits);\r\n\r\nPopover pm = new Popover(parent, model);\r\nreturn pm;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
I’m working on a new terminal emulator in my spare time and one UI element I definitely wanted to make use of was Popovers. While creating a simple Popover is quite easy, I was struggling a bit with how to … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11,10],"tags":[],"class_list":["post-205","post","type-post","status-publish","format-standard","hentry","category-dlang","category-gtk"],"_links":{"self":[{"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":7,"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"predecessor-version":[{"id":222,"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/posts\/205\/revisions\/222"}],"wp:attachment":[{"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gexperts.com\/wp\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}