389. How to setup checkboxes with images as options - Part 1?

Problem

Suppose you would like to set up checkboxes or check buttons with images as options as shown below:

How to setup checkboxes with images as options - Part 1?


Solution

  • A GtkCheckButton is a subclass of GtkButton.
  • As such, we can make use of exactly the same technique as outlined in How to display button with image? to display images in the check button label.

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_yellow.jpg
 square_green.jpg
 square_blue.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   
 44   
 45   
 46   
 47   
 48   
 49   
 50   
 51   
 52   
 53   
 54   
 55   
 56   
 57   
 58   
 59   
 61   
 62   
 63   
 64   
 65   
 66   
 67   
 68   
 69   
 70   
 71   
 72   
<?php
$window = new GtkWindow();
$window->set_size_request(450, 400);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Check buttons with images as options\n".
"      Part 1 - Images + Text 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);
$vbox->pack_start($title, 0, 0);
$vbox->pack_start(new GtkLabel(), 0, 0);
$vbox->pack_start(new GtkLabel('Please select a color:'), 0, 0);

// setup checkboxes
$checkbox1 = setup_checkbox('Yellow', 'square_yellow.jpg'); // note 1
$checkbox2 = setup_checkbox('Green', 'square_green.jpg'); // note 1
$checkbox3 = setup_checkbox('Blue', 'square_blue.jpg'); // note 1

// pack them inside vbox
$vbox->pack_start($checkbox1, 0, 0);
$vbox->pack_start($checkbox2, 0, 0);
$vbox->pack_start($checkbox3, 0, 0);

// add a status area
$vbox->pack_start($status_area = new GtkLabel('Select the checkboxes'));

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

function setup_checkbox($label, $img_filename) {
    $checkbox = new GtkCheckButton();
    $checkbox->connect('toggled', "on_toggle");

    $button_hbox = new GtkHBox(); // note 2
    $checkbox->add($button_hbox);

       $img = GtkImage::new_from_file($img_filename); // note 3
       $button_hbox->pack_start($img, 0, 0); // note 3

       $button_hbox->pack_start(new GtkLabel(), 0, 0);
    $button_hbox->pack_start(new GtkLabel($label), 0, 0); // note 4

    return $checkbox;
}

// call-back function when user pressed a check button
function on_toggle($checkbox) {
    global $status_area;
    $button_hbox = $checkbox->child->get_children(); // note 5
    $label = $button_hbox[2]->get_text(); // note 5

    global $checkbox1, $checkbox2, $checkbox3;
    $status1 = $checkbox1->get_active() ? 'on' : 'off'; // note 6
    $status2 = $checkbox2->get_active() ? 'on' : 'off'; // note 6
    $status3 = $checkbox3->get_active() ? 'on' : 'off'; // note 6
    $status_area->set_text("Status of checkbox1: $status1\n
Status of checkbox2: $status2\n
Status of checkbox3: $status3");
}
?>

Output

As shown above.

 

Explanation

The above makes use of the code from How to setup and process checkboxes? and How to display button with image?

What's new here:

  1. Note that the filename of the image is passed as the last parameter.
  2. Create an hbox to hold both the image and the label.
  3. Load the image and stuff it inside the hbox.
  4. Now attach the text label too.
  5. To retrieve the check button label, we need to access the hbox first then get the text label.
  6. Check whether the check button is active.

Related Links

Add comment

Security code
Refresh