how to install and create a simple program with QT (C++)

my fourth assignment post... is to create an instruction on how to install Qt and create a simple program with it.

so first of all, you need to visit their website;
This is their website
after visiting their website, you should see a big green button that says "download QT", click on that.
it should take you to a page that asks you about several stuff regarding your level of distribution and stuff... i'm going to go get the open source version because i have no money, if you wanted to get the open source version you could answer it in this order...
"in-house deployment, private use, student use" --> "no" -->  "yes"
and the download button would light up with the text saying "get open source QT"

Click on in!

it should take you to the download page, and there will be another button that says "download now"

click it and the installer should start downloading

since i'm on a mac, i got the .dmg file, just run the installer like normal

it should open up the installer window

just click continue, and it will ask you if you want to create a QT account, just click skip for now...

after that click continue and it should start downloading some of the necessary stuff.

after that it will ask you to pick a destination on where you want it to install, remember; after you've installed it, don't move it anywhere...

after that select the latest version and click continue.

and after that click i agree to the terms and conditions and click continue and install...

wait for it to install.

after it's done, locate the folder where you installed it in, i'm on a mac so it looks like this;

click the Qt creator application and it should open up the program and you can start making your GUI applications;

i'm going to make a program that will have a button and a text field, when you press the button, it will take whatever is in the text field and say hello, <what's in the text field>

in the end it'll look like this

(sorry, no time to make the GUI fancier)

firstly we need to create a new project so go ahead and click that "+ new project" button...

after that name your project and add in the path

leave everything at it's default values as we will only need the defaults to create this simple program.

after that, the program will create the project folder for you, which will contain several different files, but in this example we will only need to be focusing on two files, the mainwindow.cpp inside the sources folder and the mainwindow.ui inside the forms folder.

go ahead and double click the mainwindow.ui folder, this will take you to the design tab, which is an easy to use drag and drop system.

drag the button, and the textedit elements into your GUI, also drag and drop a label element where you want the text to be displayed...

you can also access the properties of these elements in the bottom right side of the design tab, which is the one colored yellow in my screen...

there you can edit the variable names that will be used to reference these ui elements in the code, you can also change several other properties regarding the elements such as the displayed text on the button (which in my case i changed to "press Me")

after you're done "designing" your GUI go ahead and right click your button element, and press the "go to slot..."

it will pop out a new window to choose the action to be listened to, choose clicked() and hit ok.

this will take you to the mainewindow.cpp with an added block of code, now everything within the block of this code will execute whenever the button is clicked...

now within this block, add these lines of code...

it's pretty self explanatory, really... what we're doing here is we create a new variable with the type of QString (which is the QT version of strings with additional functionality regarding UIs), we assign to it the value of whatever is in the textEdit (the instance name is textEdit, ofcourse you can change it in the properties field)  field when the button is pressed converted it into a string (hence the toPlainText() method).

now we grab an element of the UI with the instance name of "label" and set it's text (setText()) to "hello, " and the variable we created...

run the code and it'll look just like the one i did!