A ComboBox is an extremely customizable drop-down menu. It holds the equivalent of a TreeView widget that appears when you click on it, complete with a ListStore (basically a spreadsheet) that says what's in the rows and columns. In this example, our ListStore has the name of each option in one column, and the name of a stock icon in the other, which the ComboBox then turns into an icon for each option.
You select a whole horizontal row at a time, so the icons aren't treated as separate options. They and the text beside them make up each option you can click on.
Working with a ListStore can be time-consuming. If you just want a simple text-only drop-down menu, take a look at the ComboBoxText. It doesn't take as much time to set up, and is easier to work with.
These are the libraries we need to import for this application to run. Remember that the line which tells GNOME that we're using Gjs always needs to go at the start.
All the code for this sample goes in the ComboBoxExample class. The above code creates a Gtk.Application for our widgets and window to go in.
The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new Gtk.ApplicationWindow to put all our widgets into.
This ListStore works like the one used in the TreeView example. We're giving it two columns, both strings, because one of them will contain the names of stock Gtk icons.
If we'd wanted to use our own icons that weren't already built in to GNOME, we'd have needed to use the
You need to put the line
Here we create an array of the text options and their corresponding icons, then put them into the ListStore in much the same way we would for a TreeView's ListStore. We only want to put an icon in if there's actually an icon in the options array, so we make sure to check for that first.
"Select" isn't really an option so much as an invitation to click on our ComboBox, so it doesn't need an icon.
Each ComboBox has an underlying "model" it takes all its options from. You can use a TreeStore if you want to have a ComboBox with branching options. In this case, we're just using the ListStore we already created.
This part, again, works much like creating CellRenderers and packing them into the columns of a TreeView. The biggest difference is that we don't need to create the ComboBox's columns as separate objects. We just pack the CellRenderers into it in the order we want them to show up, then tell them to pull information from the ListStore (and what type of information we want them to expect).
We use a CellRendererText to show the text, and a CellRendererPixbuf to show the icons. We can store the names of the icons' stock types as strings, but when we display them we need a CellRenderer that's designed for pictures.
Just like with a TreeView, the "model" (in this case a ListStore) and the "view" (in this case our ComboBox) are separate. Because of that, we can do things like have the columns in one order in the ListStore, and then pack the CellRenderers that correspond to those columns into the ComboBox in a different order. We can even create a TreeView or other widget that shows the information in the ListStore in a different way, without it affecting our ComboBox.
We want the "Select" text to be the part people see at first, that gets them to click on the ComboBox. So we set it to be the active entry. We also connect the ComboBox's
Finally, we add the ComboBox to the window, and tell the window to show itself and everything inside it.
We're going to create a pop-up MessageDialog, which shows you a silly haiku based on which distro you select. First, we create the array of haiku to use. Since the first string in our ComboBox is just the "Select" message, we make the first string in our array blank.
Before showing a MessageDialog, we first test to make sure you didn't choose the "Select" message. After that, we set its text to be the haiku in the array that corresponds to the active entry in our ComboBoxText. We do that using the
Other methods you can use include
After we create the MessageDialog, we connect its response signal to the _onDialogResponse function, then tell it to show itself.
Since the only button the MessageDialog has is an OK button, we don't need to test its response_id to see which button was clicked. All we do here is destroy the popup.
Finally, we create a new instance of the finished ComboBoxExample class, and set the application running.
In this sample we used the following:
Gtk.Application
Gtk.ApplicationWindow
Gtk.CellRendererPixbuf
Gtk.CellRendererText
Gtk.ComboBox
Gtk.ListStore
Gtk.MessageDialog
Gtk.TreeIter