Home  Contents

Widgets

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 specialized widgets are created as custom GTK widgets.

GtkCheckButton

A GtkCheckButton is a widget, that has two states. On and Off. The On state is visualized 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 the 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.

GtkCheckButton
Figure: GtkCheckButton

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.

GtkLabel Widget
Figure: GtkLabel Widget

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.

GtkEntry Widget
Figure: GtkEntry Widget

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.

GtkComboBox
Figure: GtkComboBox

In this chapter of the PHP GTK tutorial, we showed some basic widgets.


Home ‡ Contents ‡ Top of Page
ZetCode last modified August 27, 2011 © 2007 - 2013 Jan Bodnar