In this post I start to develop the GUI for the fractal generator which I planned in the former post. QT is coming with a handy UI designer tool called “Designer”. I guess the guys at QT didn’t spend too much time to come up with a name for this tool 
I imagine as they were sitting in a meeting room brainstorming the name and someone told: “What about Designer?” eheh. Anyway it is a necessary and sufficient name. Cool. I will use version 4.4.0.
Before we start to design the GUI, lets copy the fractal001 folder that we created in the former post to fractal002. Version control rulez. Now open a console and type: designer &
This will open the designer tool for you. It will drop up lots of windows. Find the one called New Form. Make sure Main Window is selected in the tamplates/forms list (this is the default) and click Create.
An empty main window is created. So far so good. At the upper left corner in the menu bar you can see the text Type Here. Double click the text and type File. This will create the File menu point in the main menu and also creates a submenu for it. You will see again Type Here in the submenu. Double click and type Open. Now we have a nice menu
Lets create a tool bar. Right click in the dotted area of main window. It will open a context menu. The first menu item is Add Tool Bar. Click it.
A very thin tool bar appears under the menu bar. When we created the menu item “Open” Designer created a new action which appeared as actionOpen in the Action Editor window. Drag and drop that to the tool bar in the main window. Now your main window should look like this:
Now, Lets add some scrollable image that occupies the rest of the window. We will need a container called Scroll Area. Find this widget in the Qt Designer window in the Containers list and drag and drop it to the main window dotted area. You will see something like this:
Now, we have to say Designer how the layout should be. Right click in the main window for the context menu. just like you did when we added the toolbar. Make sure you haven’t clicked inside the scroll area. At the bottom of the context menu you will find Lay out which will open a list. From that select Lay Out Vertically.
You will see that your scroll area is stretched to occupy the maximum available area. Good. Now lets add some widget that can display an image. Find Label from the Display Widgets list and drag and drop it inside the scroll area. It will have the text TextLabel. This is a bit misleading since it can show images, too. In the Property Editor window find the QLabel section and the text entry. Delete TextLabel from it. Click the pixmap entry. You will see three buttons on the right side of the cell. Click the second one with the triangle. Select Choose File… from the context menu. Open an image you like. I used the abstract002.bmp from the former post. Now your image is there, but the size of the label is not changed. It is because we didn’t give layout for the scroll area (only for the main window). So, right click in the scroll area, and set the layout to be vertical. Same way as we did with the main window. Now, the label gets the whole area. We can try what we did so far by selecting Form/Preview from the Qt Designer window or by pressing CTRL-R. Play with the window size, and be happy. The scrollbars are coming if necessary
Now, it is time to make an application from it. Save the ui to the fractal002 folder and give it a name main.ui Cool name, isn’t it? I start to think like the QT guys
OK. Now, we have to tell qmake to compile this ui to something usable. Lets open fractal.pro and make changes to get the followings:
TEMPLATE = app
TARGET = arthur
DEPENDPATH += . src
INCLUDEPATH += . include
# Input
INCLUDES += ui_main.h
SOURCES += src/main.cpp
FORMS += main.ui
The FORMS variable tells that we want to compile the form we have just created. When you call qmake to generate the Makefile, it will also generate a file called ui_main.h. We will need that as an include file in our application, therefore I added it to the INCLUDES variable.
Lets call qmake. ui_main.h will be generated in the fractal002 folder. Move it under the include folder.
Now we have to modify our main.cpp to use the form. Rewrite it as the followings:
#include <ui_main.h>
main(int argc, char *argv[])
{
QApplication app(argc, argv);
QMainWindow *widget = new QMainWindow;
Ui::MainWindow ui;
ui.setupUi(widget);
widget->show();
return app.exec();
}
This is basically completely different from the former one
You can see that we included the generated ui_main.h. We also added input parameters to main(). It is because the QApplication constructor requires those also. We need QApplication because we write an event driven program. In event driven programs there is typically a loop that check for new events and calls callbacks. We enter to this loop when calling app.exec(). The rest is just setting up the ui and showing our widget. Save the file, and call make.
If everything went fine, you will get the executable.
Type: ./arthur in the console and smile
You can download the sources from here: fractal002
