Problem
You have displayed a list of thumbnail images using GtkIconView as shown below:
Suppose you would like to allow users to do some filtering such that only the blue and green images are displayed as shown below:
Solution
We make use of exactly the same technique as outlined in the article How to selectively display rows in GtkTreeView with GtkTreeModelFilter - Part 1? with the use of GtkTreeModelFilter.
Important Note: This only works for PHP-GTK2 compliled with gtk+ v2.10 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.10. For windows, please refer to How to install php gtk2 on windows? You may also want to take a look here to see some of the new exciting PHP-GTK2 Functionalities.
Sample Code
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.
square_red.jpg | |
square_yellow.jpg | |
square_green.jpg | |
square_blue.jpg | |
square_blue2.jpg | |
square_blue3.jpg |
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 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 | <?php $window = new GtkWindow(); $window->set_title($argv[0]); $window->set_size_request(425, 300); $window->connect_simple('destroy', array('Gtk','main_quit')); $window->add($vbox = new GtkVBox()); // display title $title = new GtkLabel(" Display filtered list of thumbnail images\n". "using GtkIconView with GtkTreeModelFilter"); $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); $radio1 = setup_radio(null, 'display all', 'all'); $radio2 = setup_radio($radio1, 'display blue/green only', 'filter1'); $vbox->pack_start($radio1, 0); $vbox->pack_start($radio2, 0); // Set up a scroll window $scrolled_win = new GtkScrolledWindow(); $scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC, Gtk::POLICY_AUTOMATIC); if (defined("GObject::TYPE_STRING")) { $model = new GtkListStore(GdkPixbuf::gtype, GObject::TYPE_STRING, GObject::TYPE_BOOLEAN); // note 1 } else { $model = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING, Gtk::TYPE_BOOLEAN); // note 1 } $modelfilter = new GtkTreeModelFilter($model); // note 2 $modelfilter->set_visible_column(2); // note 2 foreach(array('square_red.jpg', 'square_yellow.jpg', 'square_green.jpg', 'square_blue.jpg', 'square_blue2.jpg', 'square_blue3.jpg') as $img) { $pixbuf = GdkPixbuf::new_from_file($img); $flag = (preg_match('/blue/', $img) || preg_match('/green/', $img)) ? 1 : 0; $model->append(array($pixbuf, $img, $flag)); } $view = new GtkIconView($model); $view->set_pixbuf_column(0); $view->set_text_column(1); $view->set_selection_mode(Gtk::SELECTION_MULTIPLE); $view->set_columns(0); $view->set_item_width(120); $view->set_reorderable(1); $scrolled_win->add($view); $vbox->pack_start($scrolled_win); $window->show_all(); Gtk::main(); function setup_radio($radio_button_grp, $button_label, $button_value) { $radio = new GtkRadioButton($radio_button_grp, $button_label); $radio->connect('toggled', "on_toggle", $button_value); return $radio; } function on_toggle($radio, $value) { global $view, $model, $modelfilter; $label = $radio->child->get_label(); $active = $radio->get_active(); if ($active) { echo "radio button pressed: $label (value = $value)\n"; if ($value=='filter1') { $view->set_model($modelfilter); // note 3 } else { $view->set_model($model); // note 4 } } } ?> |
Output
As shown above.
Explanation
The above sample code is based on How to display a list of thumbnail images using GtkIconView?.
We also make use of the code from How to display and process grouped radio buttons? to display and process the radio buttons.
What's new here:
- Remember to add one
Gtk::TYPE_BOOLEAN
field as a flag to let php-gtk know whether to show or hide a particular icon. - Here we create a new GtkTreeModelFilter, and inform php-gtk that the flag column is field #2.
- Display the filtered list.
- Display the entire list.
Related Links
- How to selectively display rows in GtkTreeView with GtkTreeModelFilter - Part 1?
- How to display a list of thumbnail images using GtkIconView?
- How to display and process grouped radio buttons?
- How to setup two filtered lists of thumbnail images using GtkIconView with GtkTreeModelFilter?
- How to drag and drop between two thumbnail images using GtkIconView - Part 1 - left to right append?
- How to drag and drop between two thumbnail images using GtkIconView - Part 2 - left to right insert?
- How to drag and drop between two thumbnail images using GtkIconView - Part 4 - prevent drag and drop to same view?
- How to display a list of thumbnail images using GtkIconView?
- How to select thumbnail images with drag and drop using GtkIconView - Part 1 - left to right?
- How to select thumbnail images with drag and drop using GtkIconView - Part 2 - in both directions?
- How to drag and drop between 2 GtkTreeViews - Part 1 - left to right?
- How to drag and drop between 2 GtkTreeViews - Part 2 - in both directions?
Read more...