|
Problem GtkTreeView is an extremely useful widgets to display both a list view as well as a tree structure.
This article introduces the basics of setting up a treeview. We will display a 2D array in a list view as shown below:
Solution To display data in a treeview, the standard steps are:
- Create a GtkListStore or GtkTreeStore to store the data. In this example, we will use a GtkListStore to store the 2D array.
- Create a GtkTreeView for the display of data.
- Create a GtkTreeViewColumn for each column of data.
- Each GtkTreeViewColumn will require at least one cell renderer. This example uses only strings. So we will use the GtkCellRendererText.
- Populates the model.
- We usually pack the treeview inside a GtkScrolledWindow to add a scroll bar to the treeview.
Sample Code 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <?php
$window = new GtkWindow();
$window->set_size_request(400, 200);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());
// display title
$title = new GtkLabel("Display 2D Array in GtkTreeView - Part 1");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 40);
$vbox->pack_start($title, 0, 0);
$vbox->pack_start(new GtkLabel(), 0, 0);
// the 2D table
$data = array(
array('row0', 'item 1', 2, 3.1),
array('row1', 'item 4', 5, 6.21),
array('row2', 'item 7', 8, 9.36),
array('row3', 'item 10', 11, 12.4),
array('row4', 'item 21', 14, 15.5),
array('row5', 'item 36', 17, 18.6),
array('row6', 'item 42', 20, 21.73));
display_table($vbox, $data); // note 1
$window->show_all();
Gtk::main();
function display_table($vbox, $data) {
// Set up a scroll window
$scrolled_win = new GtkScrolledWindow();
$scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC,
Gtk::POLICY_AUTOMATIC);
$vbox->pack_start($scrolled_win);
// Creates the list store
if (defined("GObject::TYPE_STRING")) {
$model = new GtkListStore(GObject::TYPE_STRING, GObject::TYPE_STRING,
GObject::TYPE_LONG, GObject::TYPE_DOUBLE); // note 2
} else {
$model = new GtkListStore(Gtk::TYPE_STRING, Gtk::TYPE_STRING,
Gtk::TYPE_LONG, Gtk::TYPE_DOUBLE); // note 2
}
$field_header = array('Row #', 'Description', 'Qty', 'Price'); // note 3
// Creates the view to display the list store
$view = new GtkTreeView($model); // note 4
|
- Note that this is only 70% of the sample code. You have to be a registered member to see the entire sample code. Please login or register.
- Registration is free and immediate.
- Have some doubt about the registration? Please read this forum article.
Explanation The way to display a list is very different between PHP-GTK1 and PHP-GTK2. PHP-GTK2 adopts the data-view concept. The data is stored is a data model (e.g. GtkListStore or GtkTreeStore), and we create a view to display the data.
- Create a function to simplify the display of the 2D array in GtkTreeView
- Create a data model with GtkListstore. We have four columns here. The first two are text. Hence the use of
Gtk::TYPE_STRING. The third is an integer: Gtk::TYPE_LONG. And the last is price which is a floating point number: Gtk::TYPE_DOUBLE. You can look up other data types here: GtkType
- Create an array here to store the column header for each column.
- Create a GtkTreeView. It is here that we bind the data model to the view.
- Add the view to a scroll window.
- We add data to the data model with GtkListstore::append(). Note that the data has to be in the form of an array, and the number of columns of the array to be appended must match that of the data model.
Note
Yes, I know you must have noticed that there are many rooms for improvements for the above list view:
- Quantiy could be centered or right-justified
- Price should be right-justified
- Price should be 2 decimal-place
Please be patient. Do understand this example first before we move on to fix the above and also add the following features:
- Allow sorting by clicking the header
- Change header to different font and color
- Alternate colored rows!
Related Links
User reviews There are no user reviews yet. Note: You have to be a registered member to leave a comment. Free registration here. |
