Getting started with Qtcreator

16 07 2010

Welcom screen

Instillation and Running

In this post I’m going to show you how to get started with qtcreator, the Qt IDE developed by Nokia. To start go to this page and scroll to the bottom and select your OS (use Linux, it’s great!). Once you have installed it fire it up.

When it starts you will be greeted by a welcome screen, and a sidebar with Welcome, Edit, Debug, Projects, Help and Ouput. For now click the “Develop” tab in the welcome screen, and click “Create new project”

Choose the “Qt4 Gui Application” option, call it “helloworld” and keep clicking “Next” and then finish. When this is done, you should be looking at an empty main window (you are in what’s called designer view), if not go to Forms->mainwindow.ui in the file selector pane.

Why use Qt?

“Qt (pronounced “cute”) is a cross-platform application development framework widely used for the development of GUI programs (in which case it is known as a widget toolkit), and also used for developing non-GUI programs such as console tools and servers.” One of the main reasons people use Qt is for the libraries, these are written in C++ and can do anything from handling strings to downloading a web page to creating a web browser. Another reasons is that it can be run anywhere and it has a translation service. But the main reason I use it is because of Qt Designer.

Qt Designer is a program that lets you (yes, you guessed it) design you application. It has a wide variety of widgets (buttons, labels etc) to use with your application and you can install more! It allows you to define signals and slots (which is Qt’s way of handling events — pushing a button etc) and it allows you to just drag and drop widgets, no need to drag in H/VBoxes like it Glade, you just drag your widgets, get them how you want them, and group them together. Best of all it’s all ready in Qt Creator!

Adding widgets & renaming

Now, on with the tutorial. In this we are going to create a simple app that takes a users name and says “hello”. To do this you need to drag a push button, line edit and label into the main window. Double click the push button and make the text say “Push me!”. Double click the label and remove the text.

Next we should rename the widgets with suitable names. Click the push button once and go to the properties area in the bottom right. Rename it to btnGo. Feel free to rename any of the other widgets.

Lining up & Signals and Slots

Next move the button and line edit to the top, next to each other and make the label as big as you can across the bottom of the screen. Next select the button and line edit with the ctrl key and right click and select Layout->Horizontally.  Right click on the background and select Layout->In grid.

Next up signals and slots. Press F4 and drag from the button to the background. A dialog will come up, select the edit and then the plus button in the next dialog, then type “btnClicked()”. Select OK. Now press the “clicked” signal from the left and then your newly created slot “btnClicked()” on the right, press OK and then save.

Making it “do stuff”

The only thing left to do now is hook everything up. In the file chooser pane select Headers->mainwindow.h and add:

private slots:
    void btnClicked();
After around line 15: “~MainWindow();”
Next open up mainwindow.cpp and enter this at the bottom:
void MainWindow::btnClicked()
While your typing this a box may come up, this is auto-completion, it allows you to see the available options for the object your accessing. This line sets the labels text to whatever is in the line edit. The ui variable just holds all the widgets you dropped into your window.

Finishing up

Press Ctrl+R to run you program enter some text and press the button 😉