393. How to change the stock image of a button on the fly - Part 1 - stock image and label?

Problem

Suppose you're developing an mp3 player with a 'Play' button as shown below.

How to change the stock image of a button on the fly - Part 1 - stock image and label?

When the user clicks the 'Play' button, you would like the button to change to 'Stop' button as shown below.

When the user clicks the 'Stop' button, the button will change back to 'Play' button:

How to change the stock image of a button on the fly - Part 1 - stock image and label?


Solution

  • To change the label of a button, use GtkButton::set_label().
  • To change the image of a button, use GtkButton::set_image().
  • For windows users, in order to see the stock images, look for a file called gtkrc. If you have used Gnope Installer to set up php-gtk2, it should be in <dir>\etc\gtk-2.0, where <dir> is the directory where you have installed php-gtk2. Open the file with an editor, on line 5, you should see a line gtk-button-images = 0. Change the 0 to 1 and save the file. Run the script again. You should be able to see the stock images now.

Sample Code

1   
 2   
 3   
 4   
 5   
 6   
 7   
 8   
 9   
 10   
 11   
 12   
 13   
 14   
 15   
 16   
 18   
 19   
 20   
 21   
 22   
 23   
 24   
 25   
 26   
 29   
 31   
 32   
 33   
 34   
 36   
 37   
 38   
 39   
 40   
 42   
 43   
 44   
 45   
 46   
 47   
 50   
 51   
 52   
 53   
 54   
 56   
 57   
 58   
 59   
 60   
 62   
 64   
 65   
 66   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(400, 200);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Change the stock image of a button\n".
"    Part 1 - stock image + label");
$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);
$title->set_justify(Gtk::JUSTIFY_CENTER);
$alignment = new GtkAlignment(0.5, 0, 0, 0);
$alignment->add($title);
$vbox->pack_start($alignment, 0);
$vbox->pack_start(new GtkLabel(), 0);

$vbox->pack_start(new GtkLabel("Click the play button below.\n".
"The button will change to stop button.\n".
"Click the button again. The stop button will change to play button."), 0);
$vbox->pack_start(new GtkLabel(), 0);

// setup button
$vbox->pack_start($hbox = new GtkHBox(), 0);
$button = new GtkButton('Play');
$img = GtkImage::new_from_stock(Gtk::STOCK_MEDIA_PLAY, 
    Gtk::ICON_SIZE_BUTTON); // note 1
$button->set_image($img); // note 1
$button->set_size_request(80, 32);
$button->connect('clicked', 'on_click');
$button_status = 'play';

$hbox->pack_start($button, 0);

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

function on_click($button) {
    global $button_status;
    if ($button_status=='play') {
        $button->set_label('Stop ');
        $button_status = 'stop'; // note 4
        $img = GtkImage::new_from_stock(Gtk::STOCK_MEDIA_STOP, 
            Gtk::ICON_SIZE_BUTTON); // note 2
    } else {
        $button->set_label('Play '); // note 4
        $button_status = 'play';
        $img = GtkImage::new_from_stock(Gtk::STOCK_MEDIA_PLAY, 
            Gtk::ICON_SIZE_BUTTON); // note 3
    }
    $button->set_image($img); // note 2
}
?>

Output

As shown above.

 

Add comment

Security code
Refresh