Widgets in PHP GTK

In this part of the PHP GTK programming tutorial, we will introduce some widgets.

Widgets are basic building blocks of a GUI application. Over the years, several widgets became a standard in all toolkits on all OS platforms. For example a button, a check box or a scroll bar. The GTK toolkit's philosophy is to keep the number of widgets at a minimum level. More specialised widgets are created as custom GTK widgets.

GtkCheckButton

A GtkCheckButton is a widget that has two states: on and off. The on state is visualised by a check mark. It is used to denote some boolean property.

<?php
 
/* 
ZetCode PHP GTK tutorial

This program toggles the title of the
window with the GtkCheckButton widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this->init_ui();

    } 

    private function init_ui() {

        $this->set_title('Check button');         
        $this->connect_simple('destroy', array('gtk', 'main_quit')); 

        $fixed = new GtkFixed();
        $this->add($fixed);
        
        $cb = new GtkCheckButton("Show title");
        $cb->set_active(true);
        $cb->connect('clicked', array($this, 'on_clicked'));
        $fixed->put($cb, 50, 50);     

        $this->set_default_size(250, 200); 
        $this->set_position(GTK::WIN_POS_CENTER);
        $this->show_all();         
    }

    public function on_clicked($sender) {

        if ($sender->get_active()) {
            $this->set_title("Check button");
        } else {
            $this->set_title("");
        }         
    }
} 
     
new Example(); 
Gtk::main();
 
?>

We will display a title in the titlebar of the window, depending on the state of the GtkCheckButton.

$cb = new GtkCheckButton("Show title");

The GtkCheckButton widget is created. The constructor of the widget takes one parameter, a label. The label is shown next to the check box.

$cb->set_active(true);

The title is visible by default, so we check the check button by default.

$cb->connect('clicked', array($this, 'on_clicked'));

If we click on the check box widget a clicked signal is emitted. We hook on_clicked() method to the signal.

if ($sender->get_active()) {
    $this->set_title("Check button");
} else {
    $this->set_title("");
}

We show the title if the button is checked. The get_active() method is used to determine the state of the check button. The set_title() method is used to set the title of the window. To clear the title of the window, we use an empty string.

GtkLabel

The GtkLabel widget shows text. No user interaction is available with this widget.

<?php
 
/* 
ZetCode PHP GTK tutorial

In this example, we show a text on the
window. For this, we use the GtkLabel widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this->init_ui();
    } 

    private function init_ui() {

        // no trailing white space!
        $lyrics = <<<LYRICS
Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray

cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore

I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good
LYRICS;

        $this->set_title('GtkLabel');         
        $this->connect_simple('destroy', array('gtk', 'main_quit')); 

        $this->set_border_width(10);
        $label = new GtkLabel($lyrics);
        $this->add($label);

        $this->set_default_size(250, 200); 
        $this->set_position(GTK::WIN_POS_CENTER);
        $this->show_all();         
    }
} 
     
new Example(); 
Gtk::main();
 
?>

The code example shows some lyrics on the window.

    // no trailing white space!
    $lyrics = <<<LYRICS
Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt

We create a multi-line text. In PHP, a multi-line text can be created using the heredoc syntax.

$this->set_border_width(10);

The GtkLabel is surrounded by some empty space.

$label = new GtkLabel($lyrics);
$this->add($label);

The GtkLabel widget is created and added to the window.

GtkEntry

The GtkEntry is a single line text entry field. This widget is used to enter textual data.

<?php
 
/* 
ZetCode PHP GTK tutorial

This example demonstrates the GtkEntry widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     
    private $label;

    public function __construct() { 

        parent::__construct(); 
         
        $this->init_ui();

    } 

    private function init_ui() {

        $this->set_title('GtkEntry');         
        $this->connect_simple('destroy', array('gtk', 'main_quit')); 

        $fixed = new GtkFixed();              

        $this->label = new GtkLabel("...");
        $fixed->put($this->label, 60, 40);

        $entry = new GtkEntry();
        $fixed->put($entry, 60, 100);
        $entry->connect('key_release_event', array($this, 'on_key_release'));

        $this->add($fixed); 

        $this->set_default_size(250, 200); 
        $this->set_position(GTK::WIN_POS_CENTER);
        $this->show_all();         
    }

    public function on_key_release($sender, $event) {

        $this->label->set_text($sender->get_text());
    }
} 
     
new Example(); 
Gtk::main();
 
?>

This example shows an entry widget and a label. The text that we key in the entry is displayed immediately in the label widget.

$entry = new GtkEntry();

GtkEntry widget is created.

$entry->connect('key_release_event', array($this, 'on_key_release'));

We plug the the on_key_release() method to the key_release_event of the GtkEntry widget.

public function on_key_release($sender, $event) {

    $this->label->set_text($sender->get_text());
}

Inside the method, we get the text from the GtkEntry widget via the get_text() method and set it to the label using the set_text() method of the label.

GtkImage

The GtkImage widget shows an image.

<?php
 
/* 
ZetCode PHP GTK tutorial

This example demonstrates the GtkImage widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this->init_ui();

    } 

    private function init_ui() {

        $this->set_title('Red Rock');         
        $this->connect_simple('destroy', array('gtk', 'main_quit')); 
        
        $this->set_border_width(2);
        $image = GtkImage::new_from_file("redrock.png");                        
        $this->add($image);

        $this->set_default_size(250, 200); 
        $this->set_position(GTK::WIN_POS_CENTER);
        $this->show_all();         
    }
} 
     
new Example(); 
Gtk::main();
 
?>

In our example, we show an image on the window.

$this->set_border_width(2);

We put some empty border around the image.

$image = GtkImage::new_from_file("redrock.png");

The GtkImage widget is created. We load the image from the file using the static new_from_file() method. If the file isn't found or can't be loaded, the resulting GtkImage will display a broken image icon.

$this->add($image);

Widget is added to the container.

GtkComboBox

A ComboBox is a widget that allows the user to choose from a list of options.

 
<?php

/* 
ZetCode PHP GTK tutorial

This example demonstrates the GtkComboBox widget

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     
    private $label;

    public function __construct() { 

        parent::__construct(); 
         
        $this->init_ui();

    } 

    private function init_ui() {

        $this->set_title('GtkComboBox');         
        $this->connect_simple('destroy', array('gtk', 'main_quit')); 
        
        $fixed = new GtkFixed();
        $this->label = new GtkLabel('-');
        $fixed->put($this->label, 50, 140);

        $cb = GtkComboBox::new_text();
        $cb->connect('changed', array($this, 'on_changed'));
        
        $cb->append_text('Ubuntu');
        $cb->append_text('Mandriva');
        $cb->append_text('Redhat');
        $cb->append_text('Gentoo');
        $cb->append_text('Mint');

        $fixed->put($cb, 50, 30);

        $this->add($fixed);

        $this->set_default_size(250, 200); 
        $this->set_position(GTK::WIN_POS_CENTER);
        $this->show_all();         
    }

    public function on_changed($sender) {
        $this->label->set_label($sender->get_active_text());
    }
} 
     
new Example(); 
Gtk::main();
 
?>

The example shows a combo box and a label. The combo box has a list of five options. These are the names of Linux distros. The label widget shows the selected option from the combo box.

$cb = GtkComboBox::new_text();

The GtkComboBox widget is created. The new_text() is a method that creates a GtkComboBox just displaying strings.

$cb->append_text('Ubuntu');
$cb->append_text('Mandriva');
$cb->append_text('Redhat');
$cb->append_text('Gentoo');
$cb->append_text('Mint');

It is filled with data.

public function on_changed($sender) {
    $this->label->set_label($sender->get_active_text());
}

Inside the on_changed() method, we get the selected text out of the combo box and set it to the label.