Pictorial Guide to Making A Simple GUI-based Application in Qt Creator.

(C) 2009- Jason Leigh- University of Illinois at Chicago
Main Steps:
  1. Launch Qt Creator
  2. Create a new Qt application
  3. Design the User-Interface
  4. Connect Signals to Slots
  5. Add any necessary code for Slots
  6. Compile and Run the program

1. Launch Qt: When you launch Qt Creator, it should look like this.



2. Create a new Qt Application: Go to File menu and select New. In the dialog box select Qt4 Gui Application.



A number of dialog boxes will appear to ask you to specify a name for your project and a location to put it.



... and the modules you want to include... for now all you need are the default modules.



After this dialog boxes there will be two more. Just go with their defaults.



Qt will then create a bunch of files like: MyGUIApp.pro, main.cpp, mainwindow.cpp, mainwindow.h, mainwindow.ui.

3. Design the User Interface: Click on mainwindow.ui to bring up the interface designer.



Using the interface designer add 2 push buttons and a text label (by clicking and dragging those items from the widget palette) to the main window widget.



4. Connect Signals to Slots: Under the Edit menu, select "Edit signals/slots"- You are now in Signal/Slots editing mode.



Click and drag (and release) from Push Button 1 to somewhere on the main window's widget.

A dialog box will appear asking you to configure signals and slots. On the left are signals emitted by a push button. On the right are signals currently received by MainWindow.



We are going to connect the "clicked()" signal to a custom slot of our own called "button1Pressed()"
Click on the "clicked()" item on the left. Then click on "Edit" on the right.




Click on the big green "+" to add a new slot for MainWindow. Type in "button1Pressed" into the entry box when it appears.



Once you're done, select "button1Pressed()" as the slot to receive the signal "clicked()". Then accept this by pressing OK.



Your GUI should look something like this. Notice the red highlighted items showing the signal and slots that are connected together.



Repeat the above steps to create a slot to handle Push Button 2 called "button2Pressed()"
The GUI should now look like this...



5. Add the code to handle the button1Pressed() and button2Pressed() slots: Click on mainwindow.h and insert the member function declarations code for the slots.



Click on mainwindow.cpp and insert the actual code of the member functions button1Pressed() and button2Pressed(). All I want to do in this example is to change the text in label widget to reflect that I have pressed a button. I am doing this be explicitly writing: ui->label->setText("Button1");

I could have been more elegant and declared a new signal for MainWindow, perhaps called UpdateLabel(char*) and instead said: emit UpdateLabel. Then I can connect UpdateLabel to the label's SetText(char*) slot.



6. Compile and Run the program: Click the Green Arrow near the bottom left of the screen to get your program to compile and run.

The main window should launch. Click on the two push buttons to see what happens to the label.





Oh by the way, notice the files created by Qt. Qt Creator automatically created the .pro (project) file. The Designer created the .ui file. And Qt's User-Interface Compiler (uic) created the ui_mainwindow.h file.



Also if you look at the ui_mainwindow.h file you can see the code generated by Qt for your widgets. Notice in particular the connections between the signals and slots.