Sample Code 124: How to select thumbnail images with drag and drop using GtkIconView - Part 1 - left to right?
Written by kksou   
Wednesday, 20 December 2006
Problem

You have displayed a list of thumbnail images using GtkIconView in How to display a list of thumbnail images using GtkIconView?

Now you would like to add in support for drag-and-drop selection as shown below:

How to select thumbnail images with drag and drop using GtkIconView - Part 1 - left to right?


Solution

You can add in drag-and-drop support using exactly the same technique as outlined in the article How to drag and drop between 2 GtkTreeViews - Part 1 - left to right?


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.

 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   
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   
96   
97   
98   
99   
<?php
$window = new GtkWindow();
$window->set_size_request(400, 380);
$window->connect_simple('destroy', array('Gtk','main_quit'));

$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Select thumbnail images with drag and drop - 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); // add a small gap
$vbox->pack_start(new GtkLabel(
"Drag thumbnails from the left and drop it on the right.\n".
"You can select multiple images with shift or ctrl-click."), 0, 0);
$vbox->pack_start(new GtkLabel(), 0, 0); // add a small gap

// Set up a scroll window
$scrolled_win = new GtkScrolledWindow();
$scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC, Gtk::POLICY_AUTOMATIC);

$images = array('square_red.jpg', 'square_yellow.jpg', 'square_green.jpg',
'square_blue.jpg', 'square_blue2.jpg', 'square_blue3.jpg');

if (defined("GObject::TYPE_STRING")) {
    $model = new GtkListStore(GdkPixbuf::gtype, GObject::TYPE_STRING);
} else {
    $model = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING);
}

foreach($images as $img) {
    $pixbuf = GdkPixbuf::new_from_file($img);
    $model->append(array($pixbuf, $img));
}

$view = new GtkIconView($model);
$view->set_pixbuf_column(0); // col 0 of the model
$view->set_text_column(1); // col 1 of the model
$view->set_selection_mode(Gtk::SELECTION_MULTIPLE);
$view->set_columns(0);
$view->set_item_width(120);

$view->drag_source_set(Gdk::BUTTON1_MASK, array( array( 'text/plain', 0, 0)), 
    Gdk::ACTION_COPY|Gdk::ACTION_MOVE); // note 1
$view->connect('drag-data-get', 'on_drag'); // note 1

// Set up treeview
$scrolled_win2 = &new GtkScrolledWindow();
$scrolled_win2->set_policy( Gtk::POLICY_AUTOMATIC, Gtk::POLICY_AUTOMATIC);
$data2 = array();
$view2 = display_table ($scrolled_win2, $data2);
$view2->drag_dest_set(Gtk::DEST_DEFAULT_ALL,
    array( array( 'text/plain', 0, 0)), Gdk::ACTION_COPY|Gdk::ACTION_MOVE); // note 2
$view2->connect('drag-data-received', 'on_drop', $images); // note 2

$scrolled_win->add($view);
$hbox = new GtkHBox();
$hbox->pack_start($scrolled_win);
$hbox->pack_start($scrolled_win2);
$vbox->pack_start($hbox);
$window->show_all();
Gtk::main();

function display_table($scrolled_win, $data) {
    // Creates the list store
    if (defined("GObject::TYPE_STRING")) {
        $model = new GtkListStore(GObject::TYPE_LONG, GObject::TYPE_STRING);
    } else {
        $model = new GtkListStore(Gtk::TYPE_LONG, Gtk::TYPE_STRING);
    }
    $field_header = array('Img #', 'Image Name');
    $field_justification = array(0.5, 0.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);
    }

  • 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

This example make use of the code from the article How to drag and drop between 2 GtkTreeViews - Part 1 - left to right?

What's new here:

  1. Set up drag on the left side (the icon view).
  2. Set up drop on the right side (the tree view).
  3. Set the data to be dragged.
  4. Grab the dragged data.
  5. Show the dragged data in the treeview. Note that we didn't do any check for duplicate data here to keep the code easier to read and understand.

Related Links

User reviews

There are no user reviews yet.

Note: You have to be a registered member to leave a comment. Free registration here.

 
< Prev   Next >

Copyright © 2006-2008. kksou.com. All Rights Reserved