INTRODUCTION

Qt Designer is a tool for designing and implementing user interfaces built with the Qt multiplatform application development framework. Qt Designer makes it easy to experiment with user interface design. At any time you can generate the code required to reproduce the user interface from the files Qt Designer produces, changing your design as often as you like. Qt Designer helps you build user interfaces with layout tools that move and scale your widgets (controls in Windows terminology) automatically at runtime. The resulting interfaces are both functional and attractive, comfortably suiting your users' operating environments and preferences. Qt Designer supports Qt's signals and slots mechanism for type-safe communication between widgets. Qt Designer includes a code editor which you can use to embed your own custom slots inside the generated code. Those who prefer to separate generated code from hand crafted code can continue to use the subclassing approach pioneered in the first version of Qt Designer.

BASIC STEPS TO CREATE & RUN A QT DESIGNER APPLICATION

To create any application we opened a new C++ project in some newly created directory with a “ .pro “ extension. Then we added to it some form called “Dialog Boxes” in QT which contains various buttons and controls like pushbuttons, textedit widgets, line edit widgets etc. All these buttons and controls have different properties and some signal handlers which decide actions to be performed when we run these controls. Like for a pushbutton we have a “text” property which tells what will be the text printed on it when we run it and has a signal handler i.e “clicked( )” which tells what operation to be performed when we click on the pushbutton.This form is saved in the same project with a “ .ui “ extension and its coding with “ .ui.h “ extension. Then we have other things which we can include in our project like some C++ header files , C++ source files and an inbuilt C++ main. ( as QT designer is based on C++ thus to run any application on it we need a main() program. ).

Then to compile & run this application the main tool used is QMAKE.We open some editor window( terminal window) , change into our directory in which we have saved our project and run this command “QMAKE”.This command creates a file named “MAKEFILE” (by default)which will now become the “exe” file for our application now. This is if you have only 1 project in that directory, else you have to mention the name of target exe file and the source project to be compiled with this command. i.e syntax for QMAKE is as follows : -

qmake –o targetfile proj.pro

ie our target exe file is named as “targetfile” i.e output will be stored in this file for the project named “proj.pro” in the current folder.

Then to start the compilation we use “MAKE” command which compiles the application and generates errors if any.

Then finally if no errors , to run the application , we have to type : - “ ./proj “. i.e a dot followed by a slash and then your project’s name.

FIRST INTERFACE CREATED

The “ Hello !! World ” program.This is a basic program which we used to start learning QT Designer.This program generates an interface displaying a push button with text as Hello world!!. You can resize it as you like. Here, is the code:-

#include <qapplication.h>#include <qpushbutton.h>

int main( int argc, char **argv ){ QApplication a( argc, argv ); QPushButton hello( "Hello world!", 0 ); hello.resize( 100, 30 ); a.setMainWidget( &hello ); hello.show(); return a.exec(); }

Here, the first header included is the “ qapplicatin.h” which is must to create any interface in QT Designer as it contains functions needed to implement them. Then is the “ qpushbutton.h “ header file which contain functions required to handle a push button( as we have included a push button in this).Inside main the command “ Qpushbutton hello( “hello world” ,0)” creates a push button named hello with text “Hello world!! “ on it. Then the resize command is used to size the pushbutton i.e you can change the size of the pushbutton by specifying the required coordinates with this command.Then the “hello.show()” command displays the required output.