Organizing your UI

Formatting UI using GTKmm-3.0 and C++ programming language
The last post was about adding button and textblock to your window and in this one we are going to add some formatter in to our window such us: Grid, Panel etc...
To do that create a new c++ project and add in a class which inherit from the window class, add the following variables in it.
As in below

#ifndef MAINWINDOW_H  
#define MAINWINDOW_H  
   
#include <gtkmm.h>  
   
   
class MainWindow : public Gtk::Window  
 {  
   public:  
     MainWindow(); 
           virtual ~MainWindow();
           void quit_clicked();
           void left_clicked();
           void right_clicked();  
   protected:  
     Gtk::Box m_Vbox;  
     Gtk::Grid myGrid;  
     Gtk::Frame topFrame, downFrame;  
     Gtk::ButtonBox myButtonBox, controlButtons;  
     Gtk::Button left, right, quit;  
     Gtk::Label textBlock;  
 };  
   
 #endif // MAINWINDOW_H  
   

The class above creates a grid, two frames (panel) and two button boxes, one for "quit" and the other for "left" and "right" buttons. As for formatting the window, write the following code:

#include "mainwindow.h"  
   
 MainWindow::MainWindow():  
 m_Vbox(Gtk::ORIENTATION_VERTICAL),topFrame("Display"), downFrame("Controls"), left("Left"), right("right"),quit("Quit")  
 {  
   set_title("Organized UI");  
   set_default_size(400, 400);  
   
   add(m_Vbox); //Adding the main container to window  
   
   // Adding Grid and and quit button to main container  
   m_Vbox.pack_start(myGrid);  
   m_Vbox.pack_start(myButtonBox, Gtk::PACK_SHRINK);  
   
   // Adding quit button to buttonbox  
   myButtonBox.pack_start(quit, Gtk::PACK_SHRINK);  
   
   // quit click handler  
   quit.signal_clicked().connect(sigc::mem_fun(*this, &MainWindow::quit_clicked));  
   
   quit.set_margin_bottom(10);  
   
   // Adding display and control frames to the grid  
   myGrid.set_column_homogeneous(true);  
   myGrid.set_row_homogeneous(true);  
   myGrid.attach(topFrame,0,0,1,1);  
   myGrid.attach(downFrame,0,1,1,1);  
   
   // Adding textblock and and button control to display  
   topFrame.add(textBlock);  
   topFrame.set_margin_left(20);  
   topFrame.set_margin_right(20);  
   downFrame.add(controlButtons);  
   downFrame.set_margin_left(20);  
   downFrame.set_margin_right(20);  
   
   controlButtons.set_halign(Gtk::ALIGN_CENTER);  
   controlButtons.set_valign(Gtk::ALIGN_CENTER);  
   
   controlButtons.pack_start(left, Gtk::PACK_SHRINK);  
   
   // left click handler  
   left.signal_clicked().connect(sigc::mem_fun(*this, &MainWindow::left_clicked));  
   
   controlButtons.pack_start(right, Gtk::PACK_SHRINK);  
   
   // right click handler  
   right.signal_clicked().connect(sigc::mem_fun(*this, &MainWindow::right_clicked));  
   
   show_all_children();  
 }  
   
 MainWindow::~MainWindow()  
 {  
   //dtor  
 }  
   
 void MainWindow::quit_clicked()  
 {  
   close();  
   exit(0);  
 }  
   
 void MainWindow::left_clicked()  
 {  
   textBlock.set_text("Left button clicked");  
 }  
   
 void MainWindow::right_clicked()  
 {  
   textBlock.set_text("Right button clicked");  
 }   

Here is the output :

 You can download the source code at https://github.com/Bakary-baktech/Gtkmm-3.0-tuto.

Next: Display image in UI