425. How to place a background image in GtkEventBox - Part 3 - with GtkTable and GtkTreeView?

Problem

This example achives the same as the previous one, i.e. placing a background image in a GtkEventBox. But I added a mixture of GtkVBox, GtkTable, GtkLabel, GtkEntry and GtkTreeView to show that this method works with any GtkEventBox contents as shown below:

How to place a background image in GtkEventBox - Part 3 - with GtkTable and GtkTreeView?


Solution


Sample Code

Note: The following image files are required by the sample code below. Please save a copy of the image files and put them in the same directory where you store the sample code.

 disc_green.png
 disc_blue.png

1   
 2   
 3   
 4   
 5   
 6   
 7   
 8   
 9   
 10   
 11   
 12   
 13   
 14   
 17   
 18   
 19   
 20   
 21   
 22   
 23   
 24   
 26   
 28   
 29   
 30   
 31   
 32   
 33   
 34   
 36   
 37   
 38   
 39   
 40   
 41   
 42   
 43   
 44   
 45   
 46   
 52   
 54   
 55   
 56   
 58   
 59   
 60   
 61   
 62   
 63   
 64   
 65   
 66   
 67   
 68   
 69   
 70   
 71   
 72   
 73   
 74   
 75   
 76   
 77   
 79   
 81   
 83   
 84   
 85   
 86   
 87   
 88   
 89   
 90   
 91   
 92   
 93   
 94   
 95   
 96   
 97   
 98   
 99   
100   
101   
102   
103   
104   
105   
106   
107   
108   
109   
110   
111   
113   
114   
115   
116   
117   
118   
119   
120   
121   
122   
123   
124   
125   
126   
127   
128   
129   
130   
131   
132   
133   
134   
135   
136   
137   
138   
139   
140   
141   
142   
143   
144   
145   
146   
147   
148   
149   
150   
151   
152   
153   
154   
155   
156   
157   
158   
159   
160   
161   
162   
163   
164   
165   
166   
167   
168   
169   
170   
171   
172   
173   
174   
175   
176   
177   
178   
182   
183   
184   
185   
186   
187   
188   
189   
190   
191   
192   
193   
194   
195   
196   
197   
198   
199   
200   
201   
202   
203   
204   
205   
206   
207   
208   
209   
210   
211   
212   
213   
<?php
$window = new GtkWindow();
$window->set_size_request(400, 600);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Place a background image in GtkEventBox\n".
"Part 3 - with GtkTable and 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);
$vbox->pack_start(new GtkLabel(), 0);

$vbox->pack_start($vbox2 = new GtkVBox());

$eventbox_top = new GtkEventBox();
$vbox2->pack_start($eventbox_top);
$eventbox_top->add($vbox_top = new GtkVBox());
$vbox_top->pack_start(new GtkLabel("This is top eventbox. ".
"The green disc is the background image."));
setup_top_eventbox($vbox_top);
$eventbox_top->connect('expose_event', 'expose_event', "disc_green.png"); // note 1

$eventbox_bottom = new GtkEventBox();
$vbox2->pack_start($eventbox_bottom);
$eventbox_bottom->add($vbox_bottom = new GtkVBox());
$vbox_bottom->pack_start(new GtkLabel("The is bottom eventbox. ".
"The blue disc is the background image."));
setup_bottom_eventbox($vbox_bottom);
$eventbox_bottom->modify_bg(Gtk::STATE_NORMAL, GdkColor::parse("#BAFFB3"));
$eventbox_bottom->connect('expose_event', 'expose_event', "disc_blue.png"); // note 1

$window->show_all();
Gtk::main();

function expose_event($widget, $event, $img) {
    $pixbuf = GdkPixbuf::new_from_file($img); // note 2
    $w = $pixbuf->get_width();
    $h = $pixbuf->get_height();
    $dest_x = $widget->allocation->width - $w; // note 3
    $dest_y = 0;
    $widget->window->draw_pixbuf($widget->style->bg_gc[Gtk::STATE_NORMAL], 
    $pixbuf, 0, 0, $dest_x, $dest_y); // note 4

    if($widget->get_child() != null)
    $widget->propagate_expose($widget->get_child(), $event);
    return true;
}

function setup_top_eventbox($vbox) { // note 5
    function display_table($table, $fields, $field_size) {
        global $entry;
        $row = 0;
        foreach ($fields as $field) {
            $label = new GtkLabel("  $field: ");
            $alignment = new GtkAlignment(1, .5, 0, 0);
            $alignment->add($label);
            $table->attach($alignment, 0, 1, $row, $row+1,
            Gtk::FILL, Gtk::SHRINK, 0, 0);

            $entry[$row] = new GtkEntry();
            $alignment = new GtkAlignment(0, .5, 0, 0);
            $alignment->add($entry[$row]);
            $entry[$row]->set_size_request($field_size[$row], -1);
            $table->attach($alignment, 1, 2, $row, $row+1);
            ++$row;
        }
    }

    function on_click($button) {
        global $fields, $entry;
        $i=0;
        foreach($fields as $field) {
            echo "$field: ".$entry[$i]->get_text()."\n";
            ++$i;
        }
    }

    global $fields, $entry;
    $fields = array('Item number', 'Item Description', 'Unit price', 'Quantity');
    $field_size = array(120, 200, 80, 80);
    $entry = array(); // to store the text entries

    $table = new GtkTable();
    display_table($table, $fields, $field_size); // display the table
    $vbox->pack_start($table);

    // create a submit button
    $button = new GtkButton('Submit');
    $button->set_size_request(60, 28);
    $button->connect('clicked', 'on_click');
    $row = count($fields);
    $alignment = new GtkAlignment(0, 0.5, 0, 0);
    $alignment->add($button);
    $table->attach($alignment, 1, 2, $row, $row+1);
}

function setup_bottom_eventbox($vbox) { // note 6

    function display_table_in_treeview($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');
    }

    // 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";
    }

    // 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_in_treeview($vbox, $data);

}

?>

Output

As shown above.
 

Explanation

The above makes use of the code from How to place a background image in GtkEventBox - Part 2 - using GdkDrawable draw_pixbuf?

We also make use of the code from How to align GtkEntry fields - Part 2? to set up the contents for the top eventbox, and the code from How to display a 2D array in GtkTreeView - Part 5 - get user selection? to set up the contents for the bottom eventbox.

  1. Register for the signal 'expose_event'.
  2. Load the background image. This works with all standard image file format such as .gif, .jpg or .png.
  3. Calculate where to place the background image. Here we place the image at the op right corner of the GtkEventBox.
  4. Sets the background image.
  5. Set up top eventbox.
  6. Set up bottom eventbox.

Related Links

Add comment

Security code
Refresh