Calculator - Step 1. Layout the Widgets

Objective for this step

To layout the widgets and produce the following:

 

The Widgets

For a calculator, we will need the following widgets:

  • A GtkEntry as a display
  • GtkButtons for all the buttons. Note that there are a total of 5 rows. Each row has 5 buttons, except the first one which has 3.

The Code

1   
2   
3   
4   
5   
6   
7   
8   
9   
10   
11   
12   
13   
14   
15   
16   
17   
18   
20   
22   
23   
24   
25   
26   
27   
28   
29   
33   
34   
35   
41   
45   
46   
47   
48   
49   
50   
51   
52   
53   
54   
55   
56   
57   
58   
59   
60   
61   
62   
64   
65   
66   
67   
68   
69   
70   
71   
72   
73   
74   
<?php

class Calculator{

    // constructor
    function Calculator() {
    }

    function main() {
        $this->setup_window();
        $this->setup_layout();
        $this->window->show_all(); // display the calculator
        Gtk::main(); // and let's go!
    }

    function setup_window() {
        $this->window = new GtkWindow();
        $this->window->set_size_request(200, 240);
        $this->window->connect_simple('destroy', array('Gtk','main_quit'));
    }

    function setup_layout() {
        // setup a vbox to hold display and buttons
        $vbox = new GtkVBox();
        $this->window->add($vbox);

        // setup display
        $this->display = new GtkEntry();
        $this->display->set_alignment(1.0); // right-justified
        $this->display->set_editable(false); // for display only
        $vbox->pack_start($this->display);

        // the button labels
        $button_label = array(
            array('Backspc', 'CE', 'C'),
            array('7', '8', '9', '/', 'sqrt'),
            array('4', '5', '6', '*', '%'),
            array('1', '2', '3', '-', '1/x'),
            array('0', '+/-', '.', '+', '=')
        );

        // setup the buttons
        for ($j=0; $j<5; ++$j) {
            $hbox = new GtkHBox();
            $vbox->pack_start($hbox); // use a hbox to hold each row of buttons
            for ($i=0; $i<5; ++$i) {
                if ($j==0 && $i>2) continue; // first row contains only 3 buttons
                $button = new GtkButton($button_label[$j][$i]);
                $button->set_size_request(40, 32); // set the size
                $hbox->pack_start($button);
            }
        }
    }
}


$cal = new Calculator(); // cerate a new calculator
$cal->main(); // let's run it!

?>
 

Use of Classes

Note that for this sample application, we start to use classes.

For those who have not used classes before, don't worry too much. Just try to read the code, and I think you should be able to understand. The major difference is that the class variables and functions precede with '$this->'.

It's absolutely possible to develop php-gtk2 applications without using classes, as we have seen in all the recipes. However, as you develop bigger and more complex php-gtk applications, you will find that classes help a lot in keeping the codes clean and neat. Most notably, you do not need to use any global variables, or pass along too many arguments between functions.

 

Want a calculator with bigger buttons?

Don't like the small buttons? Want it bigger? No worry. Just resize the window to get this:

 

Notice how php-gtk2 automatically rearranges and resize the widgets to fit the bigger window - without the need of you to do any programming. This is a nice feature to have. But it also explains why most of the positioning of widgets in php-gtk is relative, and not absolute. When you design a php-gtk application, always test it with different window sizes and see if your widgets layout are still the way you want it to be.

What's Next

Now that we have the buttons in place, in the next step, we will put in the event handlers so that you can enter the numbers with mouse click or keyboard.

Links

Search This Site

Google
Web This Site

Search PHP-GTK2 Manual

Full-text search on php-gtk2 manual

Members Login

Username:
Password:
Key:
What is this?
  Forget Password?