OPEN SOURCE LAB MANUAL (CS2406 & CS77)
Open Source Lab Exercise : 7
GUI programming – using GTK or Qt
Aim : To write GUI programs using FOSS tools in Linux.
Introduction : GUI programming on Linux is based on the X Window system. X provides windowing on computer displays and manages keyboard, pointing device control functions and touch-screens. X provides the basic framework, or primitives, for building such GUI environments: drawing and moving windows on the display and interacting with a mouse, keyboard or touchscreen.
X uses GUI toolkits to help the development of GUI programs. GUI toolkit is a set of widgets for use in designing applications with graphical user interfaces (GUIs). GUI toolkits can be based on different languages. The most commonly used languages are C/C++. Often the toolkits provide higher level language bindings which allow the user to program GUIs using an easier to use higher level language like Python, Ruby etc.
There are two popular GUI toolkits which are widely used today. They are Qt and GTK+. Qt is written in C++ while GTK+ is written in C. Both toolkits provide bindings in a wide variety of languages.
For users who are familiar with Visual basic, Gambas is a full-featured object language and development environment built on a BASIC interpreter which runs on top of the X window system. It in turn relies on the underlying GUI toolkits (both Qt and Gtk+).
This exercise consists of developing GUI programs using the Qt toolkit.
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in Pre-requisites: To ensure that all tools required are installed. [fosslab@fosslab ~]$ rpm -qa qt-devel qt-devel-4.7.0-3.fc14.i686 [fosslab@fosslab ~]$ rpm -qa qt-demos qt-demos-4.7.0-3.fc14.i686 [fosslab@fosslab ~]$ rpm -qa qt-examples qt-examples-4.7.0-3.fc14.i686
A GUI Hello World Create a new directory for the program. [fosslab@fosslab ~]$mkdir qthello Go to the newly created directory. [fosslab@fosslab ~]$cd qthello [fosslab@fosslab qthello]$ create the file in the qthello directory. [fosslab@fosslab qthello]$gedit qthello.cpp
Type the following code, save and close gedit #include
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in Once the file has been saved, use the following commands to compile and execute the program. [fosslab@fosslab qthello]$ qmake-qt4 -project [fosslab@fosslab qthello]$ qmake-qt4 [fosslab@fosslab qthello]$ make [fosslab@fosslab qthello]$ ./qthello
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in The output will be a window like this:
Window with a Button Create a new directory for the program. [fosslab@fosslab ~]$mkdir qtbutton Go to the newly created directory. [fosslab@fosslab ~]$cd qtbutton [fosslab@fosslab qthello]$ create the file in the qthello directory. [fosslab@fosslab qthello]$gedit qtbutton.cpp
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in Type the following code, save and close gedit #include
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in once the file has been saved, use the following commands to compile and execute the program. [fosslab@fosslab qthello]$ qmake-qt4 -project [fosslab@fosslab qthello]$ qmake-qt4 [fosslab@fosslab qthello]$ make [fosslab@fosslab qthello]$ ./qtbutton
The output will be a window like this:
Using Layouts. Create a new directory for the program. [fosslab@fosslab ~]$mkdir qtlayout Go to the newly created directory. [fosslab@fosslab ~]$cd qtlayout [fosslab@fosslab qtlayout]$ create the file in the qtlayout directory. [fosslab@fosslab qtlayout]$gedit qtlayout.cpp
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in Type the following code, save and close gedit //qtlayout.cpp #include
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in The output will be a window like this:
Signals and Slots This program demonstrates the use of signals and slots to make two widgets interact with each other.
The entire application is divided into 3 files: 1. communicate.h 2. communicate.cpp 3. main.cpp Create a new directory for the program. [fosslab@fosslab ~]$mkdir qtsignals Go to the newly created directory. [fosslab@fosslab ~]$cd qtsignals [fosslab@fosslab qtsignals]$ create the communicate.h file in the qtsignals directory. [fosslab@fosslab qtsignals]$gedit qommunicate.h
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in Type the following code and save gedit //communicate.h #include
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in create the communicate.cpp file in the qtsignals directory. [fosslab@fosslab qtsignals]$gedit qommunicate.cpp Type the following code and save gedit //communicate.cpp #include "communicate.h" #include
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in create the main.cpp file in the qtsignals directory. [fosslab@fosslab qtsignals]$gedit main.cpp Type the following code and save gedit
//main.cpp #include "communicate.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Communicate window; window.setWindowTitle("Communicate"); window.show(); return app.exec(); }
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in To compile and execute the program. [fosslab@fosslab qtsignals]$ qmake-qt4 -project [fosslab@fosslab qtsignals]$ qmake-qt4 [fosslab@fosslab qtsignals]$ make [fosslab@fosslab qtsignals]$ ./qtsignals
The output will be a window like this:
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in Menus and Toolbars. This program will display a menu which can be used to close the program. The entire application is divided into 3 files: 1. mymenu.h 2. mymenu.cpp 3. main.cpp
Create a new directory for the program. [fosslab@fosslab ~]$mkdir qtmenu Go to the newly created directory. [fosslab@fosslab ~]$cd qtmenu [fosslab@fosslab qtmenu]$ create the mymenu.h file in the qtmenu directory. [fosslab@fosslab qtmenu]$gedit mymenu.h
Type the following code and save gedit //mymenu.h #include
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in create the mymenu.cpp file in the qtmenu directory. [fosslab@fosslab qtmenu]$gedit mymenu.cpp
Type the following code and save gedit
//mymenu.cpp #include "mymenu.h" #include
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in create the main.cpp file in the qtmenu directory. [fosslab@fosslab qtmenu]$gedit main.cpp
Type the following code and close gedit //main.cpp #include "mymenu.h" #include
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in To compile and execute the program. [[fosslab@fosslab qtmenu]$ qmake-qt4 -project [fosslab@fosslab qtmenu]$ qmake-qt4 [fosslab@fosslab qtmenu]$ make [fosslab@fosslab qtmenu]$ ./qtmenu
The output will be a window like this:
Leenux Technologies , 1st Floor, Almarkz Complex, 222 – Arcot Road, Kodambakkam, Chennai – 24. www.leenux.in