php-gtk2 Cookbook: How to display a 2D array in GtkTreeView - Part 1?

Google's new CSE Search

PHP-GTK2 eBooks

Main Menu

Home

Sample Codes

List all sample codes

Browse all sample codes

RSS Feed (PHP-GTK2)

Joomla Samples Menu

Links

link1
link2
link3
link4
link5

PHP-GTK2 Newsletter

PHP-GTK2 Tips & Techniques
FREE Newsletter
by kksou

Your privacy is respected.

Sample Code 27: How to display a 2D array in GtkTreeView - Part 1?

Written by kksou

Thursday, 21 September 2006

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:

How to display a 2D array in GtkTreeView - Part 1?

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!

Add comment

JComments

< Prev		Next >

[ Back ]