276. How to make a 200x200 frame always centered no matter how you resize the app window?

Problem

This is in reponse to Adz07's post titled "Aligning a fixed size panel".

He wants to be able to have a frame 200x200 that always stay centered in the application no matter how the user resizes the window as shown below:

How to make a 200x200 frame always centered no matter how you resize the app window?


Solution

When I first started on PHP-GTK, I find size and positioning one of the most confusing areas in PHP-GTK. I believe it's the same for many of the people new to PHP-GTK2.

To develop any serious application, the first step is always to layout the widgets. It's something so fundamental, such as making the buttons to be of size 80x32, or making the Help button always stay at the top right-hand corner no matter how the user resize the application. But, unless you have learned it before, you will find it a challenge trying to accomplish these supposedly simple tasks.

That's why I devoted one-third of my ebook PHP-GTK2 Demystified just on size and positioning. I called them the three fundamental building blocks of PHP-GTK2, the other two being signal handling and object-oriented framework.

Of course it's not possible for me to explain everything about size and positioning in this article.

But with the sample code below, together with some of the explanations in the official PHP-GTK2 documentation, it will be a good start.

Basically, size and positioning is just like playing with Lego building blocks. By combining various hboxes and vboxes, with appropriate use of the expand and fill parameters, you can achieve precise positioning and sizing of all widgets in PHP-GTK2.


Sample Code

1   
 2   
 3   
 4   
 5   
 6   
 7   
 8   
 9   
 10   
 11   
 12   
 13   
 14   
 15   
 16   
 17   
 18   
 19   
 20   
 21   
 22   
 23   
 24   
 25   
 26   
 27   
 28   
 29   
 30   
 31   
 32   
<?php
$window = new GtkWindow();
$window->set_size_request(400, 300);
$window->connect_simple('destroy', array('Gtk','main_quit'));

$vbox2 = new GtkVBox(); // note 1
$vbox2->pack_start(new GtkLabel("This frame of size 200x200"));
$vbox2->pack_start(new GtkLabel("will always stay stay centered"));
$vbox2->pack_start(new GtkLabel("no matter how you resize the app"));

$eventbox = new GtkEventBox(); // note 2
$eventbox->add($vbox2);
$eventbox->modify_bg(Gtk::STATE_NORMAL, GdkColor::parse("#CCFF99"));

$frame_200_200 = new GtkFrame(); // note 3
$frame_200_200->set_size_request(200, 200);
$frame_200_200->add($eventbox);

$hbox = new GtkHBox(); // note 4
$hbox->pack_start(new GtkHBox());
$hbox->pack_start($frame_200_200, 0);
$hbox->pack_start(new GtkHBox());

$vbox = new GtkVBox(); // note 5
$vbox->pack_start(new GtkHBox());
$vbox->pack_start($hbox, 0);
$vbox->pack_start(new GtkHBox());

$window->add($vbox); // note 6
$window->show_all();
Gtk::main();
?>

Output

As shown above.

 

Explanation

  1. First create the 200x200 box. I used a vbox here. You can use a hbox depending on what you want to put inside the box.
  2. Stuff the box in an eventbox. I used an additional eventbox here to set the box's background color to light green. If you do not need to set the background color, you can ignore this.
  3. Now stuff box in a frame. If you do not need a frame for the box, you can skip this too.
  4. Create an hbox. You need to add two empty hboxes on the left and side of your 200x200 box so that the box gets centered horizontally.
  5. Now create the one more vbox and stuff the hbox created in the previous step into this vbox. Again, we add two empty vboxes, one on top and one below, so that the 200x200 box gets centered horizontally
  6. Lastly, stuff the vbox in the previous step into the GtkWindow. That's it!

Note

Of course you can use the Glade tool to help you with size and positioning of widgets. However, if you are really serious about php-gtk2, you should try to understand the fundamentals. Once you know the "why's", you will be able to use the Glade tool more effectively.

Related Links

Add comment

Security code
Refresh