C++ Beginner: Lesson 2 - Introduction to Qt environment
The series of lessons in C++ will be developed based on tasks differently from the java lessons which are based on specific concepts for each lesson and will be depended on Qt Creator IDE, which is a very powerful IDE, strength of which we will see in every lesson and project.
In this lesson we will explore a little bit more the environment of Qt Creator. As we saw in the lesson 1, after we create the project we get the window with the view shown in the figure 1.
Figure 1: Design mode
The square marked with number 1 in the figure 1 shows the are of the window which we can edit by adding other elements or by changing its properties.
The square marked with number 2 shows the toolbox area from where elements can be dragged and dropped in the are 1.
The square marked with number 3 shows the properties of the selected item, in case of the figure 1 the selected item is the entire window, but we can select other elements that we drop on window in order to see their properties or change them if we would like to.
In the area 4 are shown different view modes that Qt Creator offers. The first one, welcome view mode offers us the opportunity to open a recent project or create a new project. The second view mode, the edit one, which is shown in the figure 2, allows the programmer to explore and edit the files of the project. The design mode found bellow the edit mode is the one shown in the figure 1. In this mode the programmer can edit the graphical components of the project. This are the view modes of interest for the beginner's lessons, we will let the options in the other view modes in their default state.
The last area marked with number 5 in the figure 1 is the area which allows the programmer to choose the platform on which we would like to run/build the application, remember the cross platform ability of Qt Creator. Bellow the option which allows us to select the platform are the options of run, debug and build.
Now after exploring the design mode we will see the edit mode, which is shown in the figure 2 as mentioned above.
Figure 2: Edit mode
As mentioned in the lesson 1 this is the default structure of a Qt Widget Application. In the Forms folder are shown all the files which contain the graphical description of the windows of the project in an XML format. As shown from the text marked with the red circle in the figure 2, this kind of files can be edited only in the design mode, so they are updated automatically by Qt Creator when we make a change on the window. The sources folder contains all the .cpp source files of the project. The main.cpp file is generated in every project that is created and as mentioned in the lesson 1 is the entry point in the project. For this lesson we are interested in the mainwindow.cpp. We will edit this file to change the text in a label on window. In order to be able to do this, first of all we need to have a label on window. To add the label on window we have to get back in design mode. After we get back in the design mode we need to add the label in the window as shown in the lesson 1 or we can search for the label element as shown in the figure 3.
Figure 3: Search component
After we add the element on window, we change its text in the "Hello world" by double clicking on it. If we run the application in this condition we will get as result the window with Hello world text on it as shown on figure 9 of lesson 1. As we mentioned above, we will edit the text of the label by adding code in the mainwindow.cpp file. In order to edit the mainwindow.cpp file we need to get back to edit mode and double click on mainwindow.cpp. After we double click on mainwindow.cpp file on the right will be opened the content of this file. In the MainWindow(QWidget *parent = 0) constructor we will add a line which will edit the text of the label when the application starts. We will cover the constructors in the next lessons. In order to edit the label's text we need to add the line shown in the figure 4.
Figure 4: Editing mainwindow.cpp file
The ui is a global instance which allows us to access the graphical elements, which is named label in this case, read or edit their values through getter and setter methods, which in this case is setText, which we will explore in the next lessons. In the next lessons we will see the global instances mentioned in the previous sentence. If we run the application after adding the line shown in the figure 4 we get as result the window shown in the figure 5, the text that we have passed as parameter in the setText method is shown in the label on the window.
Figure 5: Edited text of the label from code
(please report broken link in the comment)
In this lesson we will explore a little bit more the environment of Qt Creator. As we saw in the lesson 1, after we create the project we get the window with the view shown in the figure 1.
Figure 1: Design mode
The square marked with number 1 in the figure 1 shows the are of the window which we can edit by adding other elements or by changing its properties.
The square marked with number 2 shows the toolbox area from where elements can be dragged and dropped in the are 1.
The square marked with number 3 shows the properties of the selected item, in case of the figure 1 the selected item is the entire window, but we can select other elements that we drop on window in order to see their properties or change them if we would like to.
In the area 4 are shown different view modes that Qt Creator offers. The first one, welcome view mode offers us the opportunity to open a recent project or create a new project. The second view mode, the edit one, which is shown in the figure 2, allows the programmer to explore and edit the files of the project. The design mode found bellow the edit mode is the one shown in the figure 1. In this mode the programmer can edit the graphical components of the project. This are the view modes of interest for the beginner's lessons, we will let the options in the other view modes in their default state.
The last area marked with number 5 in the figure 1 is the area which allows the programmer to choose the platform on which we would like to run/build the application, remember the cross platform ability of Qt Creator. Bellow the option which allows us to select the platform are the options of run, debug and build.
Now after exploring the design mode we will see the edit mode, which is shown in the figure 2 as mentioned above.
Figure 2: Edit mode
As mentioned in the lesson 1 this is the default structure of a Qt Widget Application. In the Forms folder are shown all the files which contain the graphical description of the windows of the project in an XML format. As shown from the text marked with the red circle in the figure 2, this kind of files can be edited only in the design mode, so they are updated automatically by Qt Creator when we make a change on the window. The sources folder contains all the .cpp source files of the project. The main.cpp file is generated in every project that is created and as mentioned in the lesson 1 is the entry point in the project. For this lesson we are interested in the mainwindow.cpp. We will edit this file to change the text in a label on window. In order to be able to do this, first of all we need to have a label on window. To add the label on window we have to get back in design mode. After we get back in the design mode we need to add the label in the window as shown in the lesson 1 or we can search for the label element as shown in the figure 3.
Figure 3: Search component
After we add the element on window, we change its text in the "Hello world" by double clicking on it. If we run the application in this condition we will get as result the window with Hello world text on it as shown on figure 9 of lesson 1. As we mentioned above, we will edit the text of the label by adding code in the mainwindow.cpp file. In order to edit the mainwindow.cpp file we need to get back to edit mode and double click on mainwindow.cpp. After we double click on mainwindow.cpp file on the right will be opened the content of this file. In the MainWindow(QWidget *parent = 0) constructor we will add a line which will edit the text of the label when the application starts. We will cover the constructors in the next lessons. In order to edit the label's text we need to add the line shown in the figure 4.
Figure 4: Editing mainwindow.cpp file
The ui is a global instance which allows us to access the graphical elements, which is named label in this case, read or edit their values through getter and setter methods, which in this case is setText, which we will explore in the next lessons. In the next lessons we will see the global instances mentioned in the previous sentence. If we run the application after adding the line shown in the figure 4 we get as result the window shown in the figure 5, the text that we have passed as parameter in the setText method is shown in the label on the window.
Figure 5: Edited text of the label from code
(please report broken link in the comment)
Comments
Post a Comment