GTKCcodingHelpDemo-1

Open 'side4linux' and click on 'Project>New Project' in the Main Menue.
Select 'GTKBUILDER 'C' GUI Program' as in figure-1 below and click on 'NEXT' in the Dialog Box.
Select the 'PRODUCTS' Product Area in the Product Selection Dialog and click on 'OK' as in figure-2,
Select 'MC-1' from the Product Area selection Combo Box ( figure-3 ) and click on the 'Next' button,
In the New Project dialog enter the name of 'About' as in figure-4 and click on 'Build'.
Once the Project is Built, close the project then re-open it to let things settle into place.
'Project>Close Project'
'Project>Open Project'
Double click on the 'PRODUCTS' Product Area,
Double click on the 'MC1' Product,
In the file dialog double click the 'GTKC' folder, this takes you to where 'GTK' visual 'C' language projects are kept.
Double click on 'About', this opens the 'About' project folder.
Double click on 'about.prf', this opens the 'About' project file.
Now open the Glade-3 GUI builder program, 'Edit Project>Edit Project Visuals with Glade-3'
( un-dock the windows and shrink the Main window to about one third screen size )
Double click on the 'mainWindow' widget in the 'Inspector' window to make it appear if it is not already visible in the 'Main' window ( figure-5 ).
Notice that the top of the Glade program's Main window says that we are editing 'about.glade'.
Notice the 'Palette' window from where we 'pick' our visual widgets from ( figure-6 ).
Notice in the 'Properties' window that the 'Name' of the main window widget is set to 'mainWindow' ( figure-7 ),
Now let us add our 'About Box', click on 'Toplevels' in the 'Palette' window and then click on 'About Dialog' ( third from top left )
This should enter the 'aboutdialog1' into our 'Project Box' below the 'Main Window' entry ( figure-8 ),
Click on 'Save' in the Glade Main window to save the 'glade' GUI XML file ( about.glade ).
Now close the Glade-3 GUI Builder program.
Close the newly created project 'Project>Close Project'.
Note that it will be stored in the 'GTKC' section of the 'MC-1' Product.

Open the newly created 'About' project 'Project>Open Project' in the IDE.
Note that it will be stored in the 'GTKC' section of the 'MC-1' Product.
Let us now add the callback to show the 'About Box',
We will 'run' the Program 'about' in a terminal.
Change workspaces and open a terminal program in the ' ~~ /SIDE/PRODUCTS/MC1/GTKC/About/src ' directory,
and run the program ( ./about ) notice the full stop and forward slash to run a program in the current directory to get the following messages ( or similar ),

db@wks1:~/Data/Projects/SIDE/PRODUCTS/MC1/GTKC/About/src$ ./about
Trying local 'glade' file
Local 'glade' file found!

(about:8359): Gtk-WARNING **: Could not find signal handler 'on_programQuitToolbutton_clicked'
(about:8359): Gtk-WARNING **: Could not find signal handler 'on_fileSaveAsToolbutton_clicked'
(about:8359): Gtk-WARNING **: Could not find signal handler 'on_fileSaveToolbutton_clicked'
(about:8359): Gtk-WARNING **: Could not find signal handler 'on_fileOpenToolbutton_clicked'
(about:8359): Gtk-WARNING **: Could not find signal handler 'on_fileOpenToolbutton_clicked'
(about:8359): Gtk-WARNING **: Could not find signal handler 'on_aboutMenuitem_activate'
(about:8359): Gtk-WARNING **: Could not find signal handler 'on_programQuitMenuitem_activate'
(about:8359): Gtk-WARNING **: Could not find signal handler 'on_saveFileAsMenuitem_activate'
(about:8359): Gtk-WARNING **: Could not find signal handler 'on_openFileMenuitem_activate'
(about:8359): Gtk-WARNING **: Could not find signal handler 'on_newFileMenuitem_activate'

Notice that these are all 'callback signals' that the IDE has set up for you when it built your new project 'About'.
We will note that there needs to be 'signal handler functions' created ( often referred to as 'callback functions' ) to match the callback signals.

You will create two callback handler functions, one to 'show' the About Box and one to 'close' the About Box.
Note you should follow the norm of placing the prototypes into your 'callbacks.h' file as follows ( you can just copy and paste the following! ),

void aboutdialog1_response_cb();
void on_aboutMenuitem_activate();

followed by the actual functions into 'callbacks.c' as follows,

GtkWidget *aboutPtr=NULL;

void aboutdialog1_response_cb()
{
gtk_widget_hide(aboutPtr);
g_print("About box close button pressed\n");
}

void on_aboutMenuitem_activate()
{
char versionString[256];

sprintf(versionString," %s",VERSION);
g_print("fetching About Box\n");
if(aboutPtr == NULL)
aboutPtr = GTK_WIDGET(gtk_builder_get_object(builder,"aboutdialog1"));
gtk_about_dialog_set_version(GTK_ABOUT_DIALOG(aboutPtr),versionString);
g_signal_connect(GTK_OBJECT(aboutPtr),"response",G_CALLBACK(aboutdialog1_response_cb),NULL);
gtk_widget_show(aboutPtr);
}

Open the files in the Notebook of the IDE ( click on 'Open-Txt' Toolbar button ) and cut/paste from above.
Make sure there is at least one blank line below your code so that your 'C' compiler does not complain!
Then click on 'Build'.

Now change to the other workspace and in a terminal run the file as above,
you should see your visual Program ( figure-9 ) and the warning messages should no longer refer to 'on_aboutMenuitem_activate'.

Try also to 'show' your 'about box' by clicking on 'Help>About' in your new program ( figure-10 ).
Notice ( in main.c ) that all of the widgets are instantiated in the call to mainWindow = buildWidgets(cmdString);;
Notice ( in main.c ) that all of the callback signals are created in the call togtk_builder_connect_signals(builder,NULL); ;
Notice ( in main.c ) 'mainWindow = GTK_WIDGET(gtk_builder_get_object(builder,"mainWindow"));' to set the pointer to mainWindow.
Notice ( in callbacks.c ) 'aboutPtr = GTK_WIDGET(gtk_builder_get_object(builder,"aboutdialog1"));' to set aboutPtr.
Notice ( in callbacks.c ) 'gtk_about_dialog_set_version(GTK_ABOUT_DIALOG(aboutPtr),versionString);', setting a widget 'Property'.
Notice ( in main.c ) 'g_signal_connect(GTK_OBJECT(mainWindow),"delete_event",G_CALLBACK(gtkQuit),NULL);', manual callback connection.
Notice ( in callbacks.c ) 'g_signal_connect(GTK_OBJECT(aboutPtr),"response",G_CALLBACK(aboutdialog1_response_cb),NULL);', manual callback.
Click on the 'Close' button in the 'About Box' (Box disapears and the message on the command line is 'About box close button pressed').
Click on 'File>Quit' (nothing should happen yet!).

Fig-9

Fig-10

Close the 'about' program window by clicking on the top right 'X'.
Close the newly created project 'Project>Close Project'.
Note that it will be stored in the 'GTKC' section of the 'MC-1' Product.

Open the newly created 'About' project 'Project>Open Project'.
Note that it will be stored in the 'GTKC' section of the 'MC-1' Product.
Open the Glade-3 GUI Builder program, 'Edit Project>Edit Project Visuals with Glade-3'
Now double click on the 'mainWindow' widget so that we can connect the 'File>Quit' signal.
Double clicking should make the 'mainWindow' active in the Glade-3 Main Window so click on 'mainWindow' widget 'File' then 'File>Quit'.
Look at the 'Properties' window for 'Quit1' in the 'General' tab, click on the 'Signals' tab and notice the signal 'activate <on_programQuitMenuitem_activate>'.
As we already have a quit function in callbacks.c ( void gtkQuit(void); ) we need to add just an 'on_programQuitMenuitem_activate()' function that calls it as follows,

add to callbacks.c

void on_programQuitMenuitem_activate()
{
g_print("Main Menue quit button pressed\n");
gtkQuit();
}

also add to callbacks.h

void on_programQuitMenuitem_activate();

Quit the Glade-3 program to return to the IDE editor notebook.
Add the above text to the respective files.
Click on the 'Build' toolbar button in the IDE to re-build the 'About' Project.
Now change to the other workspace and in a terminal re-run the 'about' file as above,

Try to 'show' your 'about box' by clicking on 'Help>About' in your new program.
Click on the 'Close' button in the 'About Box' ( About Box should be hidden ).
Try to re-show the About Box ( it should re-appear because it has been hidden previously but not destroyed ).
Click on 'File>Quit' ( the program should close also closing the About Box ).

To end the Practical we cannot have Users clicking the 'X' in the top right corner of the About Box widget ( figure-10 ) as it will destroy it such that it will not show later. So in the Glade-3 program click on the 'aboutdialog1' widget entry in the 'Inspector' window and in the 'Properties' window, in the 'General' tag, change the 'Deletable' property of the widget to 'No' . Also in the Glade3 program, erase the 'Program name' property which currently says 'Glade' so that the line is empty of all characters and spaces.
Now try running the program again after you have clicked on 'Save' in Glade-3 and clicked on the 'Build' button in the IDE, to see if the little cross has gone away! ( figure-12 )

Finally we can alter the Project Version String to show that we have updated the Project, 'Project>Edit Project>Edit Project Properties'.
Set the Project to Version '0.0.2' in the Dialog Box and click on 'Apply' ( figure-13 ).

Now try running the program again after you have clicked on the 'Build' button to get the revised 'About Box'. ( figure-14 )

Open the newly created 'About' project 'Project>Open Project'.
Note that it will be stored in the 'GTKC' section of the 'MC-1' Product.
Open the Glade-3 GUI Builder program, 'Edit Project>Edit Project Visuals with Glade-3'
Now click on the 'mainWindow' widget if it is not visible so that we can connect the 'Edit>Cut' Main Menu Button callback signal.
Clicking should make the 'mainWindow' active in the Glade-3 Main Window so click on 'cutMenuitem' in the 'Inspector' window ( figure 15 below ).
Look at the 'Properties' window for 'cutMenuitem' in the 'General' tab,
Click on the 'Signals' tab and create the signal 'activate <on_cutMenuitem_activate>' ( figure 16 below ).
HINT: Left click on the down arrow to open the entry box and select 'on_cutMenuitem_activate>',
HINT: Left click once on <Type Here> below ( activate-item ), changing the line enters the above signal and closes the entry box!
Click on 'Save' in the Glade3 Main Menu and quit the program back to the IDE and click on 'Build'.
You could now open a terminal to run 'about' and check if an error message comes up for your new callback signal.

(about:10843): Gtk-WARNING **: Could not find signal handler 'on_cutMenuitem_activate'

We will now create the callback function!
In the IDE to enter the callback function into 'callbacks.c' as follows..

add to callbacks.c

void on_cutMenuitem_activate()
{
g_print("Main Menue Edit>Cut button pressed\n");
on_aboutMenuitem_activate(); // calling existing 'About Box'
}

Fig-1	Fig-2
Fig-3	Fig-4
Fig-5	Fig-6
Fig-7	Fig-8

Fig-12	Fig-13
Fig-14


Fig-15	Fig-16