Question

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.

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.

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.

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.

Figure: GtkComboBox

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