292. How to set up toolbar with custom text and graphics - Part 1 - labels below graphics?

Problem

This is in response to the post from Jeffrey of Netherlands.

He would like to set up toolbars with custom text and graphics as shown below/.

How to set up toolbar with custom text and graphics - Part 1 - labels below graphics?


Solution

One of the great thing about PHP-GTK2 is that it comes with a lot of "off-the-shelf" methods e.g. GtkToolButton::new_from_stock(). On the other hand, it leaves a lot of hooks here and there that give us controls over the exact details. For example, if you don't like the stock images for the tool buttons, you can use your own custom text and graphics.

Now you get your own toolbar with custom text and graphics!


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.

 0070.1.png
 0070.2.png
 0070.3.png
 0070.4.png

1   
 2   
 3   
 4   
 5   
 6   
 9   
 10   
 11   
 12   
 13   
 14   
 15   
 16   
 17   
 18   
 19   
 20   
 21   
 22   
 23   
 24   
 25   
 26   
 27   
 28   
 30   
 31   
 32   
 33   
 34   
 35   
 36   
 37   
 39   
 41   
 42   
 43   
 44   
 45   
 46   
 47   
 48   
 50   
 51   
 52   
 53   
 56   
 57   
 58   
 59   
 61   
 62   
 63   
 64   
 65   
 66   
 67   
 68   
 69   
 70   
 71   
 72   
 73   
 75   
 77   
 78   
 79   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(400, 180);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// define menu definition
$toolbar_definition1 = array('New', 'Open', 'Save', '<hr>', // note 1
    'Cut', 'Copy', 'Paste', '<hr>',
    'Undo','Redo');

$toolbar_definition2 = array( // note 2
    'Archive' => '0070.1.png',
    'Folders' => '0070.2.png',
    'Edit' => '0070.3.png',
    'Fax' => '0070.4.png');

setup_toolbar($vbox, $toolbar_definition1);
setup_toolbar($vbox, $toolbar_definition2);

// display title
$title = new GtkLabel("Set up Toolbar with custom text and graphics\n".
"      Part 1 - with labels below the graphics");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$vbox->pack_start($title);
$vbox->pack_start(new GtkLabel(''));

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

// setup toolbar
function setup_toolbar($vbox, $toolbar_definition) {
    $toolbar = new GtkToolBar();
    $vbox->pack_start($toolbar, 0, 0);

    foreach($toolbar_definition as $label=>$item) {
        if ($item=='<hr>') {
            $toolbar->insert(new GtkSeparatorToolItem(), -1);
        } else {
            $stock_image_name = 'Gtk::STOCK_'.strtoupper($item);
            if (defined($stock_image_name)) {
                $toolbar_item = GtkToolButton::new_from_stock(
                    constant($stock_image_name));
                    $toolbar_item->connect('clicked', 'on_toolbar_button', $item);
            } else {
                $toolbutton = new GtkVBox(); // note 3
                $img=GtkImage::new_from_file($item); // note 4
                $toolbutton->pack_start($img, 0, 0); // note 5

                $toolbutton->pack_start(new GtkLabel($label), 0, 0); // note 6

                $toolbar_item = new GtkToolButton();
                $toolbar_item->set_label_widget($toolbutton); // note 7
                $toolbar_item->connect('clicked', 'on_toolbar_button', $label);
            }
            $toolbar->insert($toolbar_item, -1);
        }
    }
}

// process toolbar
function on_toolbar_button($button, $item) {
    echo "toolbar clicked: $item\n";
}

?>

Output

As shown above.
 

Explanation

We make use of the code from How to set up toolbar?

What's new here:

  1. Toolbar_definition for the first row. Note that this uses the standard stock image.
  2. Toolbar definition for the second row. This uses custom text and graphics.
  3. Create a vbox.
  4. Load the custom image.
  5. Stuff the image into the vbox.
  6. Stuff the label into the vbox.
  7. Set the vbox as the tool button.

Note

You may want to compare this with the setting up of buttons with images - How to display button with image?. The techniques used are very similar.

Related Links

Add comment

Security code
Refresh