How and where to start Qt5

tomy

Hi guys,

I have some experience in C++ and want to start Qt5. I searched the web much to find a good book on it. But apparently there is no complete book on Qt5 for beginners :(
I really love to start Qt now. But I don't want to go through a wrong way.
I have heard that Qt Documentations are good to start with, but they just confuse a beginner like me :(
As well as, I couldn't find a reliable website that teaches Qt5 completely :(
And also I have heard that Qt5 isn't stable yet.

What can I do now? Should I only wait for some months so that it will be stable and a complete good reference on it will be published?

Thanks in advance.

SGaist

Hi and welcome to devnet,

There's indeed currently no complete Qt 5 book in english however you can safely take the Qt 4 references to get started. Most of them are still relevant to get you on started and for the minor differences the Qt documentation contains the migration path if any is needed.

What do you mean by "teaches Qt 5 completely" ? Qt is a vast framework so I would not consider trying to learn everything from it from the start as a good idea. Learn the modules you need to use, then expend on other that interests you. e.g. there's no need to start learning Qt3D if you are planning to develop a database front end.

Not stable yet ? Considering the number of projects using it actively I wouldn't consider it "not stable". Note that Qt 5.6 will be a LTS (Long Term Support) release.

Hi and welcome to the Qt forum! Great that you want to start using Qt.

It is true that there are only a handful of books available. The thing is that Qt is a huge framework with many many components and writing a book that covers everything will basically only reproduce our (excellent) documentation. Also the framework is a moving target as new modules are added and old ones become deprecated over time. The rumor you say you heard that Qt5 isn't stable is not true. It's solid and widely used in many industries and in the free software community.

It's a great advantage that you already know C++. In my opinion the easiest way to learn to use the Qt framework is to find a program that you want to have but that doesn't exist yet and then implement it. The documentation and this forum will be your best friends. :-)

JKSH

Hi, and welcome to the Qt Dev Net!

@tomy said:

I really love to start Qt now. But I don't want to go through a wrong way.
I have heard that Qt Documentations are good to start with, but they just confuse a beginner like me :(
As well as, I couldn't find a reliable website that teaches Qt5 completely :(

I recommend you start with http://doc.qt.io/qt-5/gettingstartedqt.html . Follow the tutorial closely (carry out every action yourself and type out the code yourself, don't just read it). By the end of this, you should know how to use many core concepts in Qt.

After that, you can continue learning by following more tutorials, and/or implementing small projects in Qt.

And also I have heard that Qt5 isn't stable yet.

Where did you hear this from? I find it very stable. If you take a program written for Qt 5.0.0 (released in 19 Dec 2012) and replace its DLLs with the Qt 5.5.1 (released in 15 Oct 2015) versions, the program would probably still run correctly, possibly even with performance improvements.

Charby

In addition to the tutorials already mentionned, I find the Cadaques book to be a great one (but mostly focus on QML), you can find it here : http://qmlbook.github.io/
I found the training materials (http://www.qt.io/training-materials/) very helpful to start having a good overview.

The Cadaques book @Charby mentioned is really good; IMAO the official QML/QtQuick documentation is still a bit confusing.

tomy

Thank you all very much. You are really nice guys and I'm happy to be a member of here programming in Qt :)

I read all of your advices. Since Qt is very massive and have many directions (if I have understood it correctly) I like to mention my favorite stuffs. I like to first learn to write code for creating iOS and Android apps (applicable on smartphones). It is my first goal. After that I like to create programs for MS Windows.

As you say and I have heard it, the Qt documentation is very great, but for me as an absolute beginner of Qt, there is a problem :(
That is, it's not regularly arranged like a book. When you read a book, you start from page one then two through end. The documentation jumps form one subject to another (it's what I've seen when trying to use that documentation) and then I miss the path and cannot consistently follow all of the contents step-by-step.

Dear JKSH suggested a start point. Now, for example, how to start from http://doc.qt.io/qt-5/index.html and then find a link that points to http://doc.qt.io/qt-5/gettingstartedqt.html?
That is, it's not clear how to use the documentation, at least in my experience.

First I want (if you agree) to start from http://doc.qt.io/qt-5/index.html (because I think I should be familiar with Qt that what the Qt is at all) then find a link there that leads to http://doc.qt.io/qt-5/gettingstartedqt.html? (if it's good for my first directions that is being able to write iOS and Android apps).

Thanks again to all of you.

The first thing to know is your toolchain: Integrated development environment, version control system, build system, compiler, debugger, profiler. Although you can choose from a number of different tools I'd recommend to become familiar with Qt Creator, git, QMake and the compiler of your choice (gcc, Xcode, MSVC).

We also have a wiki. Content quality there varies from great to ... well, not so great :-) Two good articles there that I'd like to mention are What is Qt? and Qt for Beginners. You should also read the Qt Creator manual and the QMake manual.

tomy

@Wieland said:

The first thing to know is your toolchain: Integrated development environment, version control system, build system, compiler, debugger, profiler. Although you can choose from a number of different tools I'd recommend to become familiar with Qt Creator, git, QMake and the compiler of your choice (gcc, Xcode, MSVC).

Thank you Wieland, but to which need of me do the above comments refer to please?

@Wieland said:

We also have a wiki. Content quality there varies from great to ... well, not so great :-) Two good articles there that I'd like to mention are What is Qt? and Qt for Beginners. You should also read the Qt Creator manual and the QMake manual.

I read Wiki and What's Qt pages but since I don't have Qt creator installed on my Windows 7 x64 machine, I cannot follow Qt For Beginners part.

For a beginner like me with needs that I mentioned above, which flavor of Qt creator should I download and install please? The open-source one or the commercial one?

Go for the open source MS Windows installer: qt-unified-windows-x86-online.exe.

@tomy said:

to which need of me do the above comments refer to please?

As you already know how to write programs in C++ you also already know that you'll need a code editor and a compiler. Qt Creator is the integrated development environment of choice for developing software with Qt. It has a code editor with integrated help system, code completion, syntax highlighting etc. It is cross platform, so Qt Creator runs on Linux, Windows and OS X. Git is the version control system of choice today for every software developer, no matter if she uses Qt, C++, JavaScript or anything else. Qt Creator has git integration. You can use git on any platform (Linux, Windows, OS X, ...). The choice for the compiler depends on your host and target platform. If you write software for Windows and have a MS Visual Studio license then you can use that compiler (MSVC). If you don't have such license you can use gcc for Windows. On OS X you will most likely use XCode's compiler (clang). On Linux you can use gcc or clang. You said you're on Windows. You can compile software for Windows and Android there. If you want to compile software for iOS you'll need a Mac. If you want to build your software for Linux you'll also need a Linux host.

JKSH

@tomy said:

Thank you all very much. You are really nice guys and I'm happy to be a member of here programming in Qt :)

You're welcome! :)

I like to first learn to write code for creating iOS and Android apps (applicable on smartphones). It is my first goal. After that I like to create programs for MS Windows.

I think it's easier to learn how to create programs for Windows than for Android and iOS. Because of this, I recommend you first spend a few days learning how to build a simple Qt program for Windows. This experience will help you learn how to write and build Qt programs for Android and iOS.

This is the sequence I recommend:

Follow http://doc.qt.io/qt-5/gettingstartedqt.html closely. This teaches you how to use the Qt Creator IDE and build a small program for Windows.
Follow http://doc.qt.io/qt-5/androidgs.html. This teaches you how to set up your system for creating Android apps.
Follow http://doc.qt.io/qtcreator/creator-mobile-app-tutorial.html. This teaches you how to build a small program for Android and run it on your device.
Follow http://doc.qt.io/qtcreator/creator-developing-ios.html. This teaches you how to set up your system for creating iOS apps.
Go back to #3 and run the same program on your iOS device. (Note: You need to use OS X to develop iOS apps)

Another note: In #1, you will use the C++ language and the Qt Widgets module. In #3, you will use the QML language and the Qt Quick module. Qt Widgets is easier for beginners to learn (especially if you already know C++), but Qt Quick is more suitable for mobile apps.

Dear JKSH suggested a start point. Now, for example, how to start from http://doc.qt.io/qt-5/index.html and then find a link that points to http://doc.qt.io/qt-5/gettingstartedqt.html?
That is, it's not clear how to use the documentation, at least in my experience.

The Qt documentation uses a reference format. As you have found out, you shouldn't try to read it from start to finish like a book.

Instead, use a search engine to find information about the topics that you are interested in. For example, you can fo to http://doc.qt.io/qt-5/index.html and type "getting started" into the search box.

First I want (if you agree) to start from http://doc.qt.io/qt-5/index.html (because I think I should be familiar with Qt that what the Qt is at all) then find a link there that leads to http://doc.qt.io/qt-5/gettingstartedqt.html? (if it's good for my first directions that is being able to write iOS and Android apps).

Personally, I think http://doc.qt.io/qt-5/index.html is not a good place to start. It leads to too many advanced topics, but It doesn't lead to http://doc.qt.io/qt-5/gettingstartedqt.html easily.

tomy

I thank both of you very much. I'm sorry for asking those many questions.
According to what I understood from your explanations, I'm going to do the following works, respectively. If any work is not suitable for me or you don't recommend it to me, please aware me of that.

1- First I go to qt-unified-windows-x86-online.exe. and install Qt creator in default mode. Although I have MS VS 2015 licensed installed on my Windows machine, but I don't like Qt creator as an add-in to it. I like to have Qt creator as a complete IDE on my system.

2- Then after installing Qt creator I go through number 1 to number 5 of the last post of JKSH. I try to completely read and do the tasks/codes written there.

3- Then, I install a Mac OS on as virtual machine on my Windows machine. I think I should install another Qt creator on it to begin to write codes for iOS. Am I right?

4- And at the end, if I have any problem or question, I'll try to create a new thread about that or post the matter here.

Do you guys agree with these please?

Don't know about your point number 3 (I don't develop for OS X and iOS) but the rest sounds like a good plan. And don't hesitate to ask the forum. Good luck, young Padawan! ;-)

mrjj

" I'm sorry for asking those many questions."

Well we kind lurk around here hoping people will in fact, ask questions :)

One note for 1:
You can use VS with Creator. as its compiler. So its also a full solution.
That said. Its less fuss just to use mingw
and install and have all just work out of the box.

tomy

@Wieland said:

Don't know about your point number 3 (I don't develop for OS X and iOS) but the rest sounds like a good plan. And don't hesitate to ask the forum. Good luck, young Padawan! ;-)

Thanks. I appreciate your helps :-)

@mrjj said:

" I'm sorry for asking those many questions."
Well we kind lurk around here hoping people will in fact, ask questions :)

Thank you. :-) That's very kind of you.

@mrjj said:

One note for 1:
You can use VS with Creator. as its compiler. So its also a full solution.
That said. Its less fuss just to use mingw
and install and have all just work out of the box.

I'm sorry I didn't understand the above part completely. I'm not an English native speaker. :(
Do you mean that I can use Qt creator with VS 2015? Is it like an add-in item? Can it offer all of the stuff the Qt creator as a separate program offer? If so and you recommend it to me, where and how can I install it on my VS please?

mrjj

note part 1:
I was trying to say that using visual studio can also be good.
However, vs 2015 is so new that im not sure there is good support yet.
So I suggest just use the standard setup so U can get going fast.
sorry for the confusion.

tomy

@mrjj said:

note part 1:
I was trying to say that using visual studio can also be good.
However, vs 2015 is so new that im not sure there is good support yet.
So I suggest just use the standard setup so U can get going fast.

OK. I tried to install Qt creator in its normal way (connecting to the Qt resources) but faced an error. It's in the link below:
http://uploads.im/QXBsp.png
Is there any other way to download that Qt creator completely as a file please?

@mrjj said:

sorry for the confusion.

Not at all, that's fine :-)

mrjj

hi
http://download.qt.io/official_releases/qt/5.5/5.5.1/qt-opensource-windows-x86-mingw492-5.5.1.exe
Note: this is full packet and do not use visual studio but mingw compiler.

tomy

@mrjj said:

http://download.qt.io/official_releases/qt/5.5/5.5.1/qt-opensource-windows-x86-mingw492-5.5.1.exe

Thanks. I'm downloading it now. But one small question! In the normal method (downloading through Qt) that installation would occupy about 3.8 GB on the computer but this file's size is even less than 1 GB! should I update/add the missed stuff to that smaller one after installing?

mrjj

hi u get a maintenance tool that can update stuff/add elements.

tomy

Thank you.

mrjj

@tomy
as final remark.
this book
http://www.bogotobogo.com/cplusplus/files/c-gui-programming-with-qt-4-2ndedition.pdf
i found pretty ok when starting with qt.
Its for qt4 but much of it still the same in Qt5.5.

SGaist

To develop for iOS and OS X you will indeed need to install Qt Creator on your Mac machine (be it virtual or not) but you will be using the same for both platform. Xcode is mandatory to develop for OS X and iOS. It provides the SDKs and emulators needed as well as the software stack needed to connect to your device and make your application available through the App Store.

tomy

@mrjj said:

@tomy
as final remark.
this book
http://www.bogotobogo.com/cplusplus/files/c-gui-programming-with-qt-4-2ndedition.pdf
i found pretty ok when starting with qt.
Its for qt4 but much of it still the same in Qt5.5.

I have that book but haven't read it still! I like to start straightly with Qt5. Anyway, thanks for your remarks :-)

@SGaist said:

To develop for iOS and OS X you will indeed need to install Qt Creator on your Mac machine (be it virtual or not) but you will be using the same for both platform. Xcode is mandatory to develop for OS X and iOS. It provides the SDKs and emulators needed as well as the software stack needed to connect to your device and make your application available through the App Store.

Thanks, these are great info. Now I've VmWare workstation containing Win XP, Win 10, Linux(Ubuntu) and FreeBSD installed on my Win 7 machine. I'll add another virtual machine (the Mac OS) on it before starting developing iOS apps.
Thanks. :-)

tomy

Hi guys,

Along the way I chose for starting to learn Qt 5, I went to create a Qt Quick Application in here: http://doc.qt.io/qtcreator/qtcreator-transitions-example.html
Now one of my problems is that I cannot find that (Export) button (said in item #11 of Creating the Main View section of the above link) in the navigator pane on my Qt creator IDE :-(
Can anybody please help me?

Charby

@tomy This button is aside the "eye" button for each element listed in the navigator pane.
In the example, in the bottom left, you will see the navigator panel. The panel contains Item which contains "Icon" and at the end of this "Icon" row you will find the toggle property export and toggle visibity controls.
Hope this helps. If not just send me a screenshot and I will return it to you with a marking.

tomy

@Charby said:

@tomy This button is aside the "eye" button for each element listed in the navigator pane.
In the example, in the bottom left, you will see the navigator panel. The panel contains Item which contains "Icon" and at the end of this "Icon" row you will find the toggle property export and toggle visibity controls.
Hope this helps. If not just send me a screenshot and I will return it to you with a marking.

Thanks for the reply.
I retried that application creation for 5 times from beginning to the end, but neither that export button appeared nor my code (the one below) is exactly like this (http://doc.qt.io/qtcreator/qtcreator-transitions-mainform-ui-qml.html) :-(
I don't know how I can learn Qt from the documentation if I have those many problems at the first step! :-( Very disappointing.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

Item {
id: item1
width: 640
height: 480

property alias button1: button1
property alias button2: button2

Image {
    id: icon
    x: 10
    y: 20
    source: "qt-logo.PNG"
}

Rectangle {
    id: topLeftRect
    width: 46
    height: 55
    color: "#00000000"
    radius: 6
    anchors.left: parent.left
    anchors.leftMargin: 10
    anchors.top: parent.top
    anchors.topMargin: 20
    border.color: "#808080"
    
    MouseArea {
        id: mouseArea1
        anchors.fill: parent
    }
}

Rectangle {
    id: middleRightRect
    x: -9
    y: -7
    width: 46
    height: 55
    color: "#00000000"
    radius: 6
    anchors.right: parent.right
    anchors.rightMargin: 10
    anchors.horizontalCenter: parent.horizontalCenter
    border.color: "#808080"
    MouseArea {
        id: mouseArea2
        anchors.fill: parent
    }
}

Rectangle {
    id: bottomLeftRect
    y: 1
    width: 46
    height: 55
    color: "#00000000"
    radius: 6
    anchors.left: parent.left
    anchors.leftMargin: 10
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 20
    border.color: "#808080"
    MouseArea {
        id: mouseArea3
        anchors.fill: parent
    }
}

}

Apparently uploading images to the posts is not allowed so I uploaded my design page of the IDE of that code here: http://uploads.im/ip2hb.png

JKSH

@tomy said:

I uploaded my design page of the IDE of that code here: http://uploads.im/ip2hb.png

The "Export" button is a new feature in Qt Creator 3.6. It looks like you are using Qt Creator 3.5 (which is the version that was bundled with Qt 5.5.1)

If you want to use that tutorial as a starting point, you have 2 options:

Use the older version of the documentation. In Qt Creator 3.5, click Help -> Index and search for "Creating a Qt Quick Application", OR
Go to http://www.qt.io/download-open-source/ and download Qt Creator 3.6 (Note: This means you will have 2 copies of Qt Creator on your system)

eureka

As a rank beginner myself I'm following this thread with some interest.
Please view this post as beginner's notes to add to advice you receive from experts.

I had to jump through the same hoops in getting Qt 5.5.1 up and running.
Recently I started on my Qt 5+ learning curve by first installing the older version of Qt 4 from Ubuntu Software Centre. But I soon realised that I needed Qt 5.5.1.
So I uninstalled all older versions of Qt to avoid conflicts and started afresh.
It seems that you are on Windows 64 and previously you installed Qt 5.1.0.
My experiences are on Linux Ubuntu 14.04 32bit.
However I see that you have installed several OS virtual machines including Ubuntu so you could use Ubuntu VM to try the following Qt 5.5.1 installation workflow.

http://softmemos.blogspot.co.uk/2015/11/qt551-on-ubuntu-1404-at-virtualbox.html

Note: VirtualBox is similar to VMWare.

I followed just Step 2A: The easy way
and Qt 5.5.1 was installed successfully in directory /opt/qt55 (I didn't use /opt/qt5.5.1 as suggested).

More details here on Qt 5.5.1 PPA installation on Ubuntu ..
https://launchpad.net/~beineri/+archive/ubuntu/opt-qt551-trusty

After installation run terminal commands

qtchooser -print-env
and
qmake -v

Now since I wanted Python bindings and to use eric6 Python IDE I next installed PyQt5.
https://www.riverbankcomputing.com/software/pyqt/download5
Prerequisites .. qscintilla and eric6 installation advice found here ...
http://stackoverflow.com/questions/30730288/how-do-i-compile-qscintilla-and-eric6-on-linux

After all this I now have under Applications > Programming these launchers

eric6
Qt 5.5 Assistant
Qt 5.5 Creator (this is Qt Creator 3.6.0 based on Qt 5.5.1)
Qt 5.5 Designer
Qt 5.5 Linguist

I use Sublime Text 3 as my editor.

eric6 launches Qt 5.5 Designer from its IDE.
...

Regarding getting into Qt 5.5.1 I refer to examples in Qt Creator to get an idea of the app layout.
Qt 5 + documentation does seem to be scattered around so it helps to keep notes.
I use CherryTree from http://www.giuspen.com/cherrytree/ as notes manager.
...

This book can be added to your reading list.
https://qmlbook.github.io/

tomy

Thank you very much eureka for your comprehensive explanations. I want to firstly go for Qt on Windows. Some later time I may go for it on Linux. At that time I will follow and do your instructions carefully. :-)

Thank you JKSH.
I went for your link and the system is downloading it. But apparently this one is also Qt creator 5.5! Further more, I had tried downloading the Qt using that file before. And I had faced an error when downloading. The error at the time was: http://uploads.im/QXBsp.png
But this I hope it can be downloaded successfully.

If that version be downloaded, is it the most recent version (Qt creator 3.6) please?

JKSH

@tomy said:

I went for your link and the system is downloading it. But apparently this one is also Qt creator 5.5!

It is useful to know the difference between Qt and Qt Creator:

Qt is the library. Qt contains the C++ classes that you can use in your app. The latest version is Qt 5.5.1.
Qt Creator is the Integrated Development Environment (IDE). Qt Creator lets you manage multiple compilers and multiple versions of Qt. It also lets you write code and compile your app. The latest version is Qt Creator 3.6.0.

If you install Qt, it gives you the Qt library AND the Qt Creator IDE. However, Qt 5.5.1 only comes with Qt Creator 3.5.1.

If you install Qt Creator, you only get the IDE.

Right now, you already have Qt 5.5 and Qt Creator 3.5 in your system. You want to install Qt Creator 3.6, so you don't need to download Qt anymore.

Go to http://www.qt.io/download-open-source/ and click on "Qt Creator". Then, click on "Qt Creator 3.6.0 for Windows (80 MB)".

JKSH

After you install Qt Creator 3.6.0, you need to do some setup, because does not know about the previous version that you installed:

See Adding Compilers to tell Qt Creator where to find your compiler.
See Adding Qt Versions to tell Qt Creator where to find the Qt binaries.
Finally, see Adding Kits to tell Qt Creator how to combine your compiler with the Qt binaries.

eureka

@JKSH said:

However, Qt 5.5.1 only comes with Qt Creator 3.5.1.

I my Qt 5.5.1 installation (Ubuntu 14.04) when I click on Qt 5.5 Creator > Help
I see ... "Qt Creator 3.6.0
Based on Qt 5.5.1 (GCC 4.8.4, 32 bit)"

just to add to the confusion.

eureka

@JKSH said:
Right now, you already have Qt 5.5 and Qt Creator 3.5 in your system.

But surely the version of Qt shown in this link refers to Qt 5.1.0 .. not Qt 5.5?
http://uploads.im/QXBsp.png
/qt5/qt.510.win64_msvc2012_64 ... etc

JKSH

@eureka said:

@JKSH said:

However, Qt 5.5.1 only comes with Qt Creator 3.5.1.

I my Qt 5.5.1 installation (Ubuntu 14.04) when I click on Qt 5.5 Creator > Help
I see ... "Qt Creator 3.6.0
Based on Qt 5.5.1 (GCC 4.8.4, 32 bit)"

just to add to the confusion.

Did you use the Online installer? That lets you install multiple versions of Qt, and lets you upgrade Qt Creator to the latest version.

The Offline installer doesn't provide that. It only contains one fixed version of Qt and one fixed version of Qt Creator.

But surely the version of Qt shown in this link refers to Qt 5.1.0 .. not Qt 5.5?
http://uploads.im/QXBsp.png
/qt5/qt.510.win64_msvc2012_64 ... etc

Yes, that image shows an attempt to download Qt 5.1.0 via the Online installer.

But before that, @tomy already installed Qt 5.5.1 + Qt Creator 3.5.1 (using the Offline installer): https://forum.qt.io/topic/63499/how-and-where-to-start-qt5/21

tomy

@JKSH said:

After you install Qt Creator 3.6.0, you need to do some setup, because does not know about the previous version that you installed:

See Adding Compilers to tell Qt Creator where to find your compiler.

See Adding Qt Versions to tell Qt Creator where to find the Qt binaries.

Finally, see Adding Kits to tell Qt Creator how to combine your compiler with the Qt binaries.

Since I had the file qt-opensource-windows-x86-mingw492-5.5.1 (size = 997 MB) on my system so first I uninstalled it and tried to install Qt creator though the online method via that small file. And then when you said it's not needed to download/install Qt creator that way because I had it already, so I canceled the process and reinstalled the file above (997 MB) and then went for Qt Creator 3.6.0 for Windows (80 MB). Now I have two Qt creator icons on my desktop named Qt Creator 3.6.0 and Qt Creator (Community).
PS: When I installed the Qt creator (the 997 MB one) I selected all the options:
http://uploads.im/RuZQ9.png

Now the tasks I have done are:
For the #1 (Adding Compilers) whatever I could to do is in the link below:
http://uploads.im/5K23g.png
The Compiler path field and Platform codegen flags field are empty. I don't know the path of what file I should insert into those paths.

For the #2 (Adding Qt Versions) I did this: http://uploads.im/mgBTo.png
And for the #3 (Adding Kits) I did this: http://uploads.im/kufsC.png

Then I recreated the project and the Export icons appeared this time :-)
Isn't there any wrong done task in my works please?
And which one of the Qt creator apps should I use for my projects, Qt Creator 3.6.0 or Qt Creator (Community) from now on please?

JKSH

@tomy said:

Since I had the file qt-opensource-windows-x86-mingw492-5.5.1 (size = 997 MB) on my system so first I uninstalled it and tried to install Qt creator though the online method via that small file. And then when you said it's not needed to download/install Qt creator that way because I had it already, so I canceled the process and reinstalled the file above (997 MB) and then went for Qt Creator 3.6.0 for Windows (80 MB).

That's fine.

Now I have two Qt creator icons on my desktop named Qt Creator 3.6.0 and Qt Creator (Community).

Yes, that's expected.

The ideal way is to use the online installer. However, since you are experiencing errors, we won't use that. (There is a way to work around that error, but it involves lots of extra work)

PS: When I installed the Qt creator (the 997 MB one) I selected all the options:
http://uploads.im/RuZQ9.png

That's fine.

Now the tasks I have done are:
For the #1 (Adding Compilers) whatever I could to do is in the link below:
http://uploads.im/5K23g.png
The Compiler path field and Platform codegen flags field are empty. I don't know the path of what file I should insert into those paths.

For the #2 (Adding Qt Versions) I did this: http://uploads.im/mgBTo.png
And for the #3 (Adding Kits) I did this: http://uploads.im/kufsC.png

Isn't there any wrong done task in my works please?

Everything looks good! I don't see anything wrong.

And which one of the Qt creator apps should I use for my projects, Qt Creator 3.6.0 or Qt Creator (Community) from now on please?

Use Qt Creator 3.6.0, since it has more features and bugfixes.

(http://code.qt.io/cgit/qt-creator/qt-creator.git/tree/dist/changes-3.6.0.md?h=3.6 shows you all the improvements that Qt Creator 3.6.0 has, compared to Qt Creator 3.5.1)

Then I recreated the project and the Export icons appeared this time :-)

Great! :)

tomy

Thank you very much dear JKSH.

After finishing the design part. I went to the Adding Application Logic section of this attempt. And continued until #7 and pressed Ctrl+R to run the application.
I got these from the Application Output window:

*The program has unexpectedly finished.
C:\Users\CS\Documents\build-test1-Desktop-Debug\debug\test1.exe crashed

Starting C:\Users\CS\Documents\build-test1-Desktop-Debug\debug\test1.exe...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:25 Type MainForm unavailable
qrc:/MainForm.ui.qml:73 Syntax error

The program has unexpectedly finished.
C:\Users\CS\Documents\build-test1-Desktop-Debug\debug\test1.exe crashed

Starting C:\Users\CS\Documents\build-test1-Desktop-Debug\debug\test1.exe...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:25 Type MainForm unavailable
qrc:/MainForm.ui.qml:73 Syntax error

The program has unexpectedly finished.
C:\Users\CS\Documents\build-test1-Desktop-Debug\debug\test1.exe crashed

Starting C:\Users\CS\Documents\build-test1-Desktop-Debug\debug\test1.exe...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:25 Type MainForm unavailable
qrc:/MainForm.ui.qml:73 Syntax error

The program has unexpectedly finished.
C:\Users\CS\Documents\build-test1-Desktop-Debug\debug\test1.exe crashed
Starting C:\Users\CS\Documents\build-test1-Desktop-Debug\debug\test1.exe...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:25 Type MainForm unavailable
qrc:/MainForm.ui.qml:12 Invalid alias reference. Unable to find id "mouseArea3"*

And this is the code for my MainForm.ui.qml file:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

Item {
    id: item1
    width: 640
    height: 480
    property alias bottomLeftRect: bottomLeftRect
    property alias topLeftRect: topLeftRect
    property alias icon: icon
    property alias mouseArea3: mouseArea3
    property alias mouseArea2: mouseArea2
    property alias middleRightRect: middleRightRect
    property alias mouseArea1: mouseArea1

    Image {
        id: icon
        x: 10
        y: 20
        source: "qt-logo.PNG"
    }

    Rectangle {
        id: topLeftRect
        width: 46
        height: 55
        color: "#808080"
        radius: 6
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.top: icon.bottom
        anchors.topMargin: 20

        MouseArea {
            onClicked: stateGroup.state = ' '
        }
    }

    Rectangle {
        id: middleRightRect
        x: -4
        y: 9
        width: 46
        height: 55
        color: "#808080"
        radius: 6
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        MouseArea {
             onClicked: stateGroup.state = 'State1'
        }
    }

    Rectangle {
        id: bottomLeftRect
        x: -1
        y: -3
        width: 46
        height: 55
        color: "#808080"
        radius: 6
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        MouseArea {
           onClicked: stateGroup.state = 'State2'
        }
        anchors.left: parent.left
        anchors.leftMargin: 10
    }
    StateGroup {
           id: stateGroup
           states: [
               State {
                   name: "State1"

                   PropertyChanges {
                       target: page.icon
                       x: page.middleRightRect.x
                       y: page.middleRightRect.y
                   }
               },
               State {
                   name: "State2"

                   PropertyChanges {
                       target: page.icon
                       x: page.bottomLeftRect.x
                       y: page.bottomLeftRect.y
                   }
               }
           ]
    }
 }

And this one is the code for my main.qml file:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2

ApplicationWindow {
    visible: true
    title: qsTr("Transitions")
    width: 330
    height: 330

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: console.log("Open action triggered");
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    MainForm {
        anchors.fill: parent
                id: page
    }

    MessageDialog {
        id: messageDialog
        title: qsTr("May I have your attention, please?")

        function show(caption) {
            messageDialog.text = caption;
            messageDialog.open();
        }
    }
}

I tried to do my best according to the instructions given by that program, but I don't know how to solve the issues.
Would you guys please help me?