461. How to display tooltips in GtkTreeView - Part 4?

Problem

This is the first of a series of articles to showcase some of the new widgets and methods in the new release of PHP-GTK v2.0, which incorporates gtk+v2.12.

The first I would like to show is the new widget GtkTooltip. This is a very exciting widget, because with this, you can add tooltip to almost any standard GtkWidget.

Since GtkTreeView is a subclass of GtkWidget, it means you can now add tooltip to a GtkTreeView, as shown in the example below!

How to display tooltips in GtkTreeView - Part 4?


Solution

  • The new widgegt GtkTooltip makes displaying tooltip very easy.
  • Please refer to the sample code and explanations below. I think it's quite self-explanatory.

Important Note: This only works for PHP-GTK v2.0 (or PHP-GTK2 compliled with gtk+ v2.12 and above. If you are using an older version, for linux, you may follow the step-by-step instructions to recompile php-gtk2 with gtk+ v2.12. For windows, please refer to How to install php gtk2 on windows?


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   
50   
51   
52   
53   
54   
55   
56   
57   
58   
59   
60   
61   
62   
63   
64   
65   
66   
67   
68   
69   
70   
71   
72   
73   
74   
75   
76   
77   
78   
79   
80   
81   
82   
83   
84   
85   
86   
87   
88   
89   
90   
91   
92   
93   
94   
95   
99   
100   
101   
102   
103   
104   
105   
106   
107   
108   
109   
110   
111   
112   
113   
114   
115   
116   
118   
119   
122   
126   
127   
128   
131   
134   
135   
136   
137   
138   
139   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(400, 210);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Display tooltip in GtkTreeView");
$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 42', 2, 3.1),
array('row1', 'item 36', 20, 6.21),
array('row2', 'item 21', 8, 9.36),
array('row3', 'item 10', 11, 12.4),
array('row4', 'item 7', 5, 15.5),
array('row5', 'item 4', 17, 18.6),
array('row6', 'item 3', 20, 21.73));

display_table($vbox, $data);

$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);
    } else {
        $model = new GtkListStore(Gtk::TYPE_STRING, Gtk::TYPE_STRING,
            Gtk::TYPE_LONG, Gtk::TYPE_DOUBLE);
    }
    $field_header = array('Row #', 'Description', 'Qty', 'Price');
    $field_justification = array(0.0, 0.0, 0.5, 1.0);

    // Creates the view to display the list store
    $view = new GtkTreeView($model);
    $scrolled_win->add($view);

    // Creates the columns
    for ($col=0; $col<count($field_header); ++$col) {
        $cell_renderer = new GtkCellRendererText();
        $cell_renderer->set_property("xalign", $field_justification[$col]);
        $column = new GtkTreeViewColumn($field_header[$col],
            $cell_renderer, 'text', $col);
        $column->set_alignment($field_justification[$col]);
        $column->set_sort_column_id($col);

        // set the header font and color
        $label = new GtkLabel($field_header[$col]);
        $label->modify_font(new PangoFontDescription("Arial Bold"));
        $label->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000FF"));
        $column->set_widget($label);
        $label->show();

        // setup self-defined function to display alternate row color
        $column->set_cell_data_func($cell_renderer, "format_col", $col);
        $view->append_column($column);
    }

    // pupulates the data
    for ($row=0; $row<count($data); ++$row) {
        $values = array();
        for ($col=0; $col<count($data[$row]); ++$col) {
            $values[] = $data[$row][$col];
        }
        $model->append($values);
    }

    $selection = $view->get_selection();
    $selection->connect('changed', 'on_selection');

    $view->set_property('has-tooltip', true); // note 1
    $view->connect('query-tooltip', 'on_tooltip'); // note 1

}

// self-defined function to format the price column
function format_col($column, $cell, $model, $iter, $col_num) {
    $path = $model->get_path($iter); // get the current path
    $row_num = $path[0]; // get the row number
    if ($col_num==3) {
        $amt = $model->get_value($iter, 3);
        $cell->set_property('text', '$'.number_format($amt,2));
    }
    $row_color = ($row_num%2==1) ? '#dddddd' : '#ffffff';
    $cell->set_property('cell-background', $row_color);
}

// the function that is called when user selects a row
function on_selection($selection) {
    list($model, $iter) = $selection->get_selected();
    $desc = $model->get_value($iter, 1);
    $qty = $model->get_value($iter, 2);
    $price = $model->get_value($iter, 3);
    print "You have selected $desc: $qty ($price)\n";
}

function on_tooltip($widget, $x, $y, $keyboard_mode, $tooltip) {
    $path = $widget->get_path_at_pos($x, $y); // note 2
    if ($path==null) return false;

    $col_title = $path[1]->get_title(); // note 3
    $path2 = $path[0][0]-1;
    if ($path2<0) return false; // note 4
    $widget->set_tooltip_cell($tooltip, $path2, $path[1], null); // note 5
    $tooltip->set_markup("this is <i>treeview tooltip!</i> <b>path=$path2</b> col=$col_title"); // note 6

    return true;
}

?>

Output

As shown above.

 

Explanation

The bulk of the code is exactly the same as the famililar treeview example: How to display a 2D array in GtkTreeView - Part 5 - get user selection?.

What's new here:

  1. Enable tooltip for treeview.
  2. Get the path of the current mouse location.
  3. Get the column of the current mouse location.
  4. This one takes care of the case when the mouse is over the column header.
  5. Set the tip area of tooltip.
  6. Set the tooltip text. Note that you can use any Pango markup in the text. You can refer to The Pango Markup Language - Quick Reference for a list of available Pango markup.

Related Links

Add comment


Security code
Refresh