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:
Solution
- We use exactly the same technique as outlined in How to place a background image in GtkEventBox - Part 2 - using GdkDrawable draw_pixbuf? i.e. by drawing the background image directly onto the underlying GdkWindow.
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.
- Register for the signal 'expose_event'.
- Load the background image. This works with all standard image file format such as .gif, .jpg or .png.
- Calculate where to place the background image. Here we place the image at the op right corner of the GtkEventBox.
- Sets the background image.
- Set up top eventbox.
- Set up bottom eventbox.
Related Links
- How to place a background image in GtkEventBox - Part 1 - tiled background image?
- How to place a background image in GtkEventBox - Part 2 - using GdkDrawable draw_pixbuf?
- How to place a background image in GtkEventBox - Part 4 - tiled background image with transparencies?
- How to place a background image in GtkWindow - Part 2 - tiled background image?
- How to place a background image in GtkWindow - Part 3 - align top left - using GtkStyle?
- How to place a background image in GtkWindow - Part 4 - align bottom right - using GtkStyle?
- How to place a background image in GtkWindow - Part 5 - align top left - using GdkDrawable draw_pixbuf?
- How to place a background image in GtkWindow - Part 6 - align bottom right - GdkDrawable draw_pixbuf?
- How to change background image on the fly?
Read more...