Reply
Jun 02 2013
By: FiveFourteen Keyblade Wielder 8191 posts
Offline

Quick Guide on getting started in C++

[ Edited ]
0 replies 72 views Edited Jun 2, 2013

 If you tend on following this tut, please turn off emoticons in your settings Smiley Happy

 

QTCreator is, in my opinion, a wonderful way to start learning coding in C++ it has its goods and its bads. The best part about it is probably how compatible it is with other operating systems! I myself am a Linux guy so having this is very helpful! And like I said it does have its down sides. If you are brand new to programming it can be very overwhelming if you don't know what your doing and just jumping right in like a mad dog chasing a flock of sheep.. if that made any since lol. It can also be a bit crowded if you have a small screen to work on. There are many things that make this program great for beginners and for advanced people! 

So when you start up QTc you will be welcomed with a 'Getting Started' screen.
Should look like this ( may be different on each operating system ) I highly recommend you go through it. So after you have done that, look around the interface, you will see things likeWelcomeEditDesignDebugProjectsAnalyze, and last but not least Help. Those icons will be what you will be mostly using to navigate through while creating projects. Edit will be for editing project and source files. Design will be for designing and developing application user interfaces. Debug will be for inspecting the state of your application while debugging. Projects will be for configuring project building and execution. Analyze will be for using code analysis tools to detect memory leaks and profile C++ or QML code. Help will be for viewing Qt documentation on anything you may need help with. 

Now lets get started on making your first project, Click on the Edit icon then right-click on the space under Projects at the top. Should pop up a windows that looks like this. For our first project we are going to make a simple Hello World. So on the window that popped up your going to wanna click on Applications then click on QT Console Application then Choose at the bottom right. Now that you did that you should now beable to name your project ( for this tutorial just name it HelloWorld ) and you can choose where you would like your project to be saved at. For the next few windows you can just press next, we will look more into those windows later.

So right after you did all that you will be brought back to the Edit tab and on a file called 
main.cpp here will be where you will be doing most of your writing.

Code:
#include <QCoreApplication>

int main(int argc, char *argv[])
{
    QCoreApplication a(argc, argv);
    
    return a.exec();
}

So for the HelloWorld what your gonna wanna do is add #include <QDebug> under # <QCoreApplication>

Code:
#include <QCoreApplication>
#include <QDebug>

int main(int argc, char *argv[])
{
    QCoreApplication a(argc, argv);
    
    return a.exec();
}

That will basicly give us action to the Debug function. So now what we are going to do is create a QString or just a string. So under 

Code:
QCoreApplication a(argc, argv);

You are gonna wanna press enter acouple of times and type qDebug() << "Hello World";

Code:
#include <QCoreApplication>
#include <QDebug>

int main(int argc, char *argv[])
{
    QCoreApplication a(argc, argv);


    qDebug() << "Hello World";
    
    return a.exec();
}

Now to start it up and see if it works or not your gonna wanna click the top Play button on the bottom left. It will save it and start up. Now if your writing up a project and you make an error.. lets say you misspell a word. Example here, You will get an error symbol next to the line of code that has the error so you won't find your self getting frustrated on where the error is. And at the bottom you will see a tab called Issues that is where the description of each issue you had or may have when trying to run what you have made. Notice in this screenshot it says " 'QDeebug' was not declared in this scope " To fix this in this case would just simply spell it right, but in other cases you may have spelt it right and will still have an error next to it. You will notice as while you are writing the code everynow and then you will get a dropdown menu. Think of it as searching google and google is picking up keywords you are trying to type and giving you some of the best results it can find. So I recommend you use that, that way you don't end up trying to figure out what to put there.
For example, later on I will be showing you how to program a GUI project ( will go more indepth later ) you will be able to add sliders to your GUI.

Code:
connect(ui->horizontalSlider,SIGNAL(valueChanged(int)),
                ui->progressBar,SLOT(setValue(int)));

LIke I said I will go more indepth later so dont get overwhelmed. Here is an example of a Signal and Slot, using that code will alow you to change the value of the progress bar using the horizontal slider. Now how this ties up with the drop down menu while writing your code is, lets say you didnt know that horizontal was lowercase and Slider was uppercase. If you just had your code.

Code:
connect(ui->horizontalslider,SIGNAL(valueChanged(int)),
                ui->progressbar,SLOT(setValue(int)));

You will get an error because it wont be declared as a scope. So with that dropdown menu you will beable to find out what you needa type out without having any errors.

Congrats! You have made your first Hello World  Now lets move on to a more complex form of writing in QTc called GUI. GUI stands for Graphical User Interface if you didn't already know. In a GUI project you can make tons of things for example a Notepad program., but for this next tutorial we are gonna mess around with Signals and Slots.

So what you are going to to is right-click in the blank space under Projects on the top left in the Edit tab, and click Close All Projects. Then right-click in the same place and click New Project, You ill get the same popup menu when you started your Hello World project, but for this one you gonna wanna click on Applications then on QT Gui Application. Then press Choose. Go ahead and name your project SignalsandSlots, and choose the save loaction to where you wish. Press next for the next window. Now you will see a new window you may have not seen before called Class Information. Here you can name many different things such as Class Name. Renaming you Class Name will change the name of your GUI. For example if you open up Notepad the window name will be Notepad, that would be the Class Name of the project. So for this tutorial go ahead and name the Class Name, SandS. You will see all the others change aswell, dont worry its perfectly normal. Go ahead and click Finish on the next window.

Now that we have named our project you will be welcomed to the sands.cpp. For just alittle bit we are gonna skip over that and go straight to the Design tab. You may have noticed that you cant click on the Design tab. So to fix that go ahead and double click the Forms folder and the Headers folder on the top left like this. Then click on the sands.ui file.
Should look like this. Here is where you will beable to change up your GUI to how you like it. Lets start off by adding a couple horizontal sliders and a couple progress bars and one push button. So on the left you will see a bunch of items you can add. Scroll down and add those things onto your GUI like so. Now if you press the play button you will see that you have a button that doesnt do anything, to sliders that dont do anything, and 2 progress bars dont do anything. Now go ahead and close that and click on the Edit tab and open up the sands.cpp file. You should see the following lines of code.

Code:
#include "sands.h"
#include "ui_sands.h"

SandS::SandS(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::SandS)
{
    ui->setupUi(this);
}

SandS::~SandS()
{
    delete ui;
}

Under ui->setupUi(this); go ahead and type out

Code:
ui->pushButton->setText("Close");

Should look like this.

Code:
#include "sands.h"
#include "ui_sands.h"

SandS::SandS(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::SandS)
{
    ui->setupUi(this);
    ui->pushButton->setText("Close");
}

SandS::~SandS()
{
    delete ui;
}

Now if you press the play button you will notice that the push button is not labled Close.
You can do this from both the Edit tab and the Design tab. If you wanna do it from the Deisgn tab just double click the push button and rename it what you wish. Now for the Sliders and the progress bar we are gonna wanna go back to the Design tab and click on the Edit Signal/Slots tool on the top. Now click on the top slider and drag your mouse to the top progress bar and you should have a popup like this. Now click on Value Changed ( It should be the last one ) then put a check in the box that says Show Signals and Slots inherited from QWidget. now on the right selection box choose SetValue. Now do the same thing but for the other slider and the other progress bar. When you are done it should look something like this screenshot. Now if you press the play button you will see that changing the slider changes the value of the progress bar. Like I said you can do this in code if you wish to do so.

Here is how you would put it in code.

Code:
#include "sands.h"
#include "ui_sands.h"

SandS::SandS(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::SandS)
{
    ui->setupUi(this);
    ui->pushButton->setText("Close");

    connect(ui->horizontalScrollBar,SIGNAL(valueChanged(int)),
            ui->progressBar,SLOT(setValue(int)));

            connect(ui->horizontalScrollBar_2,SIGNAL(valueChanged(int)),
                    ui->progressBar_2,SLOT(setValue(int)));


}

SandS::~SandS()
{
    delete ui;
}

Now you may be wondering how can i get my Close button to close my window? Well if you go back to the Design tab and you click on the Edit Signals and Slots tool and connect the push button anywhere on your project and on the popup menu select Clicked then put a check in the box below then on the right selection box click Close then ok. It should look something likethis. Now if you press play everything should be functioning how its supposed to. 

There you go you now have made your first GUI project! Now for your homework try to mess around with the different items you can add to your GUI and see what fun combinations you can come up with. On our next tutorial I will be guiding you on how to add a popup window to your GUI for example an about window like this.

So lets start up a clean project like we normaly do it. Go ahead and start up a GUI and as for the class name go ahead and title it DisplayingMultipleWindows. For the next window go ahead and press next so you will be on the Class Information window. For this tutorial go ahead and name the class DMW. And like normal skip over the next few windows.

Now that we did that lets go straight to the Design tab. If you are unable to open the Design tab double click on the dms.ui file under the Forms folder in the Edit tab. Lets start off my resizing your main window, right when you go to the Design tab you should see blue squares around your main window, go ahead and drag some out to make it bigger.
Then add a push button and edit it to make it able to close your window. Here is how mine looks once I have done those things, you should try to make yours as similar to mine as possible that way it will be easier to follow along. Now if you have played around with your GUI after last tutorial you may have noticed the Type Here lable at the top of your project on the Design tab. You may have tried to type there and pressed the play button and noticed nothing has changed there. Now what I want you to do is type New Window in that label at the top on the Design tab and press enter. When you press enter you should have a drop down menu that says. Type Here and Add Separator. Where it says Type here go ahead and type New Window again and press enter. Then added to that dropdown menu you should see something new that says New Window. Now I want you to look at the bottom and if you did everything correctly you should see a new tab called Action Editor, and in it should be something like this. What we just did was basicly turned New Window into an action, kinda like what you did to the push button, you turned the non functioning button into a button that closes your project. So now drag the New Window action from the Action Editor tab to the top of your project, you should see it clip to a toolbar like this. Now if you press the play button you will see that you now have the start of a toolbar at the top of your project. Alot of you have already pressed New Window hoping it would generate a new window seeing is how I said we made New Window an action. But its not a complete action yet now we have to move onto coding the action. So on the Action Editor tab go ahead and right click on the New Window action and click Go to slot and press OK. You should then be brought to the dms.cpp file with the following lines of code

Code:
#include "dms.h"
#include "ui_dms.h"

DMS::DMS(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::DMS)
{
    ui->setupUi(this);
}

DMS::~DMS()
{
    delete ui;
}

void DMS::on_actionNew_Window_triggered()
{
    
}

The code

Code:
void DMS::on_actionNew_Window_triggered()

Will be your New Window action now even if you press the play button it still wont do anything because we havnt gave it a function to act upon. But before we do that lets go back to the Design tab and we are gonna add a Plain Text Edit to our project. So scroll down till you see the Plain Text Edit item and go ahead and drag it to your project. Then switch back over to the Edit tab. Now open the dms.cpp file so we can write some new code inside it. 

------------------------------
Pop Quiz!
-- Go back into the Design tab and rename your push button to Push Button. Then go back into the Edit tab and rename your Push Button to Close using code.
------------------------------

Okay so now what we are going to do before we code an action for New Window we are going to make the Plain Text Edit our central widget for our project. So in the code type out

Code:
setCentralWidget(ui->plainTextEdit);

under where you renamed your Push Button.
Should look something like this when done.

Code:
#include "dms.h"
#include "ui_dms.h"

DMS::DMS(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::DMS)
{
    ui->setupUi(this);
    ui->pushButton->setText("Close");
    
    
    setCentralWidget(ui->plainTextEdit);
}

DMS::~DMS()
{
    delete ui;
}

void DMS::on_actionNew_Window_triggered()
{

}

What this did was make the Plain Text Edit your main widget for your project, so when you press the play button you will notice your Close button has been taken over by the Plain Text Edit. so if you ever wanna make a documentation program for example Notepad you would use that so your Plain Text Edit will be the main attraction to your program. Kinda like when you goto Best Buy and you see that everyone is at the 3DTv section, in that case the 3DTv section would be the central widget of the store lol hope that made since.

So lets move on to making New Window a complete action. Right click on the Forms folder and click Add New. You should have a window pop up that looks similar to this. Go ahead and click on Qt then click on Qt Designer For Class and press Choose at the bottom right. Now for this window. Choose Dialog without Buttons that way we can review over how the buttons work. You may be getting tired of reviewing but trust me if you dont review you will forget it very easily. Now for the Class Name go ahead and name it NewWindow. Then click finish on the next window. Now lets add some widgets to our popup window. Lets add two Push Buttons and a Plain Text Edit and place them like this on your window. Now go back to the Edit tab and click on newwindow.cpp and rename one button to Close and one button to Accept. Should look like this when you are finished.

Code:
#include "newwindow.h"
#include "ui_newwindow.h"

NewWindow::NewWindow(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::NewWindow)
{
    ui->setupUi(this);
    ui->pushButton->setText("Accept");
    ui->pushButton_2->setText("Close");
}

NewWindow::~NewWindow()
{
    delete ui;
}

Now that you have that lets finally code our New Window action  So under dms.cpp in the Edit tab go ahead and write out the code 

Code:
#include "newwindow.h"

Under 

Code:
#include "dms.h"
#include "ui_dms.h"

Should look like this ( thats if you named everything the same as me )

Code:
#include "dms.h"
#include "ui_dms.h"
#include "newwindow.h"

DMS::DMS(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::DMS)
{
    ui->setupUi(this);
    ui->pushButton->setText("Close");


    setCentralWidget(ui->plainTextEdit);
}

DMS::~DMS()
{
    delete ui;
}

void DMS::on_actionNew_Window_triggered()
{
    
}

Then what your gonna wanna do is inbetween the { } in the following lines of code

Code:
void DMS::on_actionNew_Window_triggered()
{
    
}

You need write this code ( again thats if you named everything the same as i did )

Code:
NewWindow mDialog;
    mDialog.setModal(true);
    mDialog.exec();

Should look like this

Code:
#include "dms.h"
#include "ui_dms.h"
#include "newwindow.h"

DMS::DMS(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::DMS)
{
    ui->setupUi(this);
    ui->pushButton->setText("Close");


    setCentralWidget(ui->plainTextEdit);
}

DMS::~DMS()
{
    delete ui;
}

void DMS::on_actionNew_Window_triggered()
{
    NewWindow mDialog;
    mDialog.setModal(true);
    mDialog.exec();
}

Now press the play button at the bottom left and BAM you now have a successful popup, but we arent finished yet we still needa give the buttons a function for the New Window. Lets see if you can do this on your own without my help. The only thing different will be the Accept button, instead of doing Clicked, Close you will choose Clicked, Accept. What that will do will accept what you have then it will close the window similar to a login screen where you would type in your username and password then press accept. When you have finished giving the buttons a function here is how it will look in the Design tab.
Now when you press the play button you should have no errors and you will beable to open the window and close the window.

FiveFourteen
Ask FiveFourteen,Twitter,Google+
"I am passionate, vigilant, motivated, and I am proud to be a part of the PlayStation Community."
Message 1 of 1 (72 Views)
Reply
0 Likes