Introduction To Graphical User Interface Programming –GTK

Introduction toGraphical User InterfaceProgramming – GTK SEEM3460/ESTR35041

Backgound GTK supports the develop of graphical user interface (GUI)in Linux. GTK was adopted as the default graphical toolkit of GNOMEand XFCE, two of the most popular Linux desktopenvironments. GTK is written entirely in C, and the majority of GTK software is also written in C. GTK is built on top of a number of other libraries such asATK, Pango, etc.SEEM3460/ESTR35042

Simple ExampleAim We will write a simple GTK program using GTK 2.0, whichshows the basic structure with a GUI on Linux. Below is a screenshot of the program The program will not be killed even though you click on the’X’ button on the top right corner.SEEM3460/ESTR35043

Simple ExampleCode/* hello.c */#include gtk/gtk.h int main (int argc, char *argv[]) {GtkWidget *window;/* Initialize the GTK and all of its supporting libraries. */gtk init (&argc, &argv);/* Create a new window, give it a title and display it to the user. */window gtk window new (GTK WINDOW TOPLEVEL);gtk window set title (GTK WINDOW (window), "Hello World");gtk widget show (window);/* Hand control over to the main loop. */gtk main ();return 0;}SEEM3460/ESTR35044

Simple ExampleDescription The gtk/gtk.h file includes all of the widgets, variables,functions, and structures available in GTK as well as headerfiles from other libraries that GTK depends on. When you implement applications using GTK , it isenough to use only gtk/gtk.h , except for some advancedapplications. The following code declares a pointer variable for aGtkWidget object.GTkWidget *window; A GTK program consists of widgets. Components such as windows, buttons, and scrollbars arecalled widgets.SEEM3460/ESTR35045

Simple ExampleDescription The following function initializes GTK gtk init (&argc, &argv); By calling gtk init(), all initialization work is performed. It begins by setting up the GTK environment, includingobtaining the GDK display and preparing the GLib mainevent loop and basic signal handling. It is important to call gtk init() before any other functioncalls to the GTK libraries. Otherwise, your applicationwill not work properly. The following code creates a new GtkWindow object and setssome properties.window gtk window new (GTK WINDOW TOPLEVEL);gtk window set title (GTK WINDOW (window), "Hello World");SEEM3460/ESTR3504gtk widget show (window);6

Simple ExampleDescription gtk window new() creates a GtkWindow object that is set tothe default width and height of 200 pixels. GTK WINDOW TOPLEVEL and GTK WINDOW POPUP are the onlytwo elements available in the GtkWindowType enumeration. GTK WINDOW TOPLEVEL makes GTK create a new top‐level window, whichuse window manager decorations, have a border frame, and allow themselves tobe placed by the window manager.GTK WINDOW POPUP creates a pop‐up window, which is used for things thatare not normally thought of as windows, such as tooltips and menus. gtk window set title(), requests the title bar and taskbar todisplay ”Hello World” as the title of the window. The firstparameter is for GtkWindow object and the second one isthe string that you want to display. gtk widget show() function tells GTK to set the specifiedwidget as visible.SEEM3460/ESTR35047

Simple ExampleDescription The following function initializes GTK gtk main (); gtk main() function will continue to run until you callgtk main quit() or the application terminates. This should be the last GTK function called in main().SEEM3460/ESTR35048

Simple ExampleCompile The following command compiles the codegcc hello.c ‐o hello pkg‐config ‐‐cflags ‐‐libs gtk ‐2.0 Take care to type backticks In addition to the GCC compiler, you need to use the pkg‐config application, which returns a list of specified libraries orpaths. pkg‐config ‐‐cflags, returns directory names to the compiler’s’include path’. This will make sure that the GTK header files areavailable to the compiler.pkg‐config ‐‐libs gtk ‐2.0, appends options to the command line usedby the linker including library directory path extensions and a list oflibraries needed for linking to the executable.SEEM3460/ESTR35049

Events, Signals, and CallbacksBasic information Events represent some activities to which we may want torespond For example, we may want our program to perform someaction when the following occurs:––––––the mouse is movedthe mouse is draggeda mouse button is clickeda graphical button is clickeda keyboard key is presseda timer expires Events often correspond to user actions.SEEM3460/ESTR350410

Events, Signals, and CallbacksBasic information GTK is a system that relies on events, signals, and callbacks. An event is a message emitted by the X Window System such asclicking mouse or typing a keyboard etc. it is emitted and sent toyour application to be interpreted by the signal system provided byGLib.A signal is reaction to an event, which is emitted by a GtkObject.You can tell GTK to run a function when the signal is emitted. This iscalled a callback function. After we initialize our user interface, the control is given tothe gtk main() function, which sleeps until a signal isemitted. The callback function will be called when the action hasoccurred and the signal is emitted or when you haveexplicitly emitted the signal.SEEM3460/ESTR350411

Events, Signals, and CallbacksBasic information The g signal connect() function connects the signal.gulong g signal connect ( gpointer object,const gchar *signal name,GCallback handler,gpointer data); The object is the widget that is to be monitored for the signal. You specify the name of the signal you want to keep track ofwith the signal name. The handler is the callback function that will be called whenthe signal is emitted, cast with G CALLBACK(). The data allows you to send a pointer to the callback function. The return value of g signal connect() is the handler identifierof the signal.SEEM3460/ESTR350412

Events, Signals, and CallbacksCallback functions Callback functions specified in g signal connect() will be calledwhen the signal is emitted on the widget to which it wasconnected. The callback functions are in the following form andare named by a programmer.static void callback function ( GtkWidget *widget,. /* other possible arguments */ . ,gpointer data); The widget is the object from g signal connect(). It must alwaysbe cast as the widget type for which the signal was created. There are other possible arguments that may appear in themiddle as well, although this is not always the case. The data correspond to the last argument of g signal connect(),which is gpointer data. Since the data is passed as a void pointer,you can replace the data type with what you want to cast.SEEM3460/ESTR350413

Events, Signals, and CallbacksExample to connect callback functions We will extend the simple ’hello world’ application which hasbeen implemented. The extension is to connect callbackfunctions to the window signal, so the application canterminate itself without using Ctrl C.SEEM3460/ESTR350414

Events, Signals, and CallbacksCode to connect callback functions (hello2.c)#include gtk/gtk.h void destroy(GtkWidget *widget, gpointer data){gtk main quit();}int main(int argc, char *argv[]){GtkWidget *window;gtk init(&argc, &argv);window gtk window new(GTK WINDOW TOPLEVEL);gtk window set title(GTK WINDOW(window), "Hello World!");gtk widget show (window);/* Connect the main window to the destroy */g signal connect(G OBJECT(window), "destroy", G CALLBACK(destroy), NULL);gtk widget show(window);gtk main();return 0;SEEM3460/ESTR3504}15

WidgetsBasic information Widgets are the basic building blocks of a GUI application. There are some common widgets such as window widget,container (layout) widget, label widget, button widget,single‐line entry widget, etcSEEM3460/ESTR350416

WidgetsWindow widget GtkWindow is the basic element of all GTK applications. There are dozens of GtkWindow API calls, but here are thefunctions worthy of special attention./* creates a new, empty window in memory */GtkWidget* gtk window new (GtkWindowType type);/* changes the text of the tile bar by informing the window manager ofthe request */void gtk window set title (GtkWindow *window, const gchar *title);/* controls the position of the initial placement onscreen */void gtk window set position (GtkWindow *window,GtkWindowPosition position);/* sets the size of the window onscreen in GTK drawing units */void gtk window set default size (GtkWindow *window, gint width,gint height);SEEM3460/ESTR350417

WidgetsWindow widget (con’t) GtkWindow is the basic element of all GTK applications. There are dozens of GtkWindow API calls, but here are thefunctions worthy of special attention./* forces a resize of the window once it’s onscreen */void gtk window resize (GtkWindow *window, gint width, gint height);/* sets whether the user can resize a window */void gtk window set resizable (GtkWindow *window, gbooleanresizable);/* asks to maximize window, so that it becomes full‐screen */void gtk window maximize (GtkWindow *window)SEEM3460/ESTR350418

WidgetsContainer widget (layout) The main purpose of a container class is to allow a parentwidget to contain one or more children. We can organize ourwidgets with non‐visible widgets called layout containers. GtkBox widget is an abstract container widget that allows multiplechildren to be packed in a one dimensional, rectangular area.There are two types of boxes: GtkVBox and GtkHBox. GtkHBox widget is a single row horizontal packing box widget.GtkVBox widget is a single column vertical packing box widget.SEEM3460/ESTR350419

WidgetsExample of layout In this example, we will implement the application whichcontains hbox and vbox widgets.vboxhbox/* layout.c */#include gtk/gtk.h void closeApp(GtkWidget *widget, gpointer data) {gtk main quit();}SEEM3460/ESTR350420

WidgetsCode of layoutint main( int argc, char *argv[]){GtkWidget *window, *label1, *label2, *label3, *hbox, *vbox;gtk init(&argc, &argv);window gtk window new(GTK WINDOW TOPLEVEL);gtk window set title(GTK WINDOW(window), "Layout");gtk window set position(GTK WINDOW(window), GTK WIN POS CENTER);gtk window set default size(GTK WINDOW(window), 300, 200);g signal connect(G OBJECT(window), "destroy", G CALLBACK(closeApp), NULL);label1 gtk label new("Label 1");label2 gtk label new("Label 2");label3 gtk label new("Label 3");hbox gtk hbox new(TRUE, 5);vbox gtk vbox new(FALSE, 10);gtk box pack start(GTK BOX(vbox), label1, TRUE, FALSE, 5);gtk box pack start(GTK BOX(vbox), label2, TRUE, FALSE, 5);gtk box pack start(GTK BOX(hbox), vbox, FALSE, FALSE, 5);gtk box pack start(GTK BOX(hbox), label3, FALSE, FALSE, 5);gtk container add(GTK CONTAINER(window), hbox);gtk widget show all(window);gtk main();return 0;}SEEM3460/ESTR350421

WidgetsDescription of layout The following command compiles the codegcc layout.c ‐o layout pkg‐config ‐‐cflags ‐‐libs gtk ‐2.0 We have three labels and one vbox and one hbox in theprogram. The vbox contains the label1 and the lable2.The hbox contains the vbox which consists of label1 and label2 andthe label3.Finally, the hbox is located in the window These functions create a new hbox and vbox, respectively.hbox gtk hbox new(TRUE, 5);vbox gtk vbox new(FALSE, 10); The first parameter represents homogeneity of all children. Ifit is set to TRUE, all children have equal space allotments. The second one is space betweenchildren.SEEM3460/ESTR350422