Developing Cross Platform Application using Qt, PyQt and PySide : First Iteration of The Overall Application Design and Hello World! - Part 2 of 5

First iteration application flow

Figure 1 - First iteration application flow

Special Note : I beg you pardon, that my subsequent Kivy article eventually must wait until after this Qt cross platform article being published. I found that, this Qt cross platform application to be somewhat challenging and interesting to discuss Smile

As the type of autodidact programmer who love to learn new programming language / framework / library by first thinking in global view of what my first application I would like to create, hereby I designed this tutorial with that principle in mind. The first application we are about to be build doesn't have to be a full blown application. But surely not a simple Hello World or an application whose its single purpose is to reflect the understanding of a one piece of this new things being learned. It should be complex enough to orchestrate many aspect of this new things, and by striving its completion, we will be in the right track of learning it fast. Surely we ought to start with the Hello World first, but while doing our Hello World application, we also have to have something rather complex application design in our mind. That's my two goals in this article : we are going to start with the overall application design and a guided Hello World application development for each of the technology : C++ Qt, PyQt and PySide.

First Iteration of the Overall Application Design

Figure 1 above (created with the free Pencil Project) demonstrated a very frequent scenario used in an application : before entering the main window of an application, user must first authenticate themselves. (S)he can also opted to register to the application, if currently not a registered one. This scenario will definitely need database access in some sort : whether local database, remote database or database fetched using a Web API. And this is what we will accomplished in the first iteration of our application developed in this series.

"What is it after the login process? Or, what will the application Main Window be like? Or, what is the overall application design that we are going to be build?", you may asked. I have several ideas actually, but in this first article, let just deal with this first part of the overall application design. Whatever we are going to be build, we will still need this first iteration in the overall application design : user authentication.

Complex enough for a first timer in Qt, PyQt and PySide, right? Wink

Hello World in Three Different Ways

I think I maybe over optimistic in this series : trying to cope up with three different ways to build the same application. But, nevertheless, I still opted to do it. I believe it will bring fair judgement for these three technologies. And it will surely gives a quite sense of holistic view of Qt as a complete Application Framework. Hereby, you will find all the code will be presented in C++, PyQt and PySide. 

C++ Qt

As C++ Qt application need to be cross platform, it will also need a cross platform project file. Meaning that, by using this single project file, Qt application can be build in many different platform : Linux, Windows, OSX etc. This impose a great challenge : different OSes will likely to have its own C++ compiler and linker. Therefor, to solve this problem, C++ Qt application was defined in a single *.pro file which will reside in main application project directory. Using this *.pro file, Qt qmake (which come with all Qt distributions) will be able to generate specific Makefile for each of the target C++ compiler and linker in different OS. Eventually, this auto generated Makefile is the one that will be processed by a specific C++ compiler and linker to build the resultant OS dependent C++ binary Qt application.

Nowadays, creating cross platform C++ Qt project can be easily done by using Qt Creator, which is a cross platform C++ IDE, that beside specifically designed toward Qt application development, can also be used to develop regular C++ application. In this first article we will avoid using Qt Creator, by using just command line qmake tool to manage our *.pro file. I hope this will give you a better understanding of cross platform C++ Qt application development. Here, I am going to use Windows as the operating system, complete with Visual Studio 2012 as its IDE. Due to its cross platform nature, you can easily use Linux, OSX, or other.

What are we waiting for? Lets begin the development of this C++ Qt application!

First, open a terminal / command prompt. Not just a regular terminal, but a specific Visual Studio 2012 terminal that bootstrapped with necessary shell variables and path to utilities needed to develop C++ application from command line. Be sure to open a Visual Studio terminal that matches your Qt distributable. Have a look at this picture below:

Pick the one that match your Qt distribution!

Pick the one that match your Qt distribution!

If your Qt distribution is a 32 bit distribution, you must choose the "Developer Command Prompt for VS2012". If instead it is a 64 bit one, you must choose "VS2012 x64 Cross Tools Command Prompt". Failed to choose a matching command prompt will result a linker error : fatal error LNK1112: module machine type 'x64' conflicts with target machine type 'X86', which is because you are trying to to build 32 bit binary with 64 bit library. Before doing it though, you should add Qt bin folder to the system path, so you can easily issue Qt qmake command. You can use this guide, in case it is a new issue for you. In my workstation, I add this path to the system wide path : C:\Qt\Qt5.2.0\5.2.0\msvc2012_64_opengl\bin.

If however you were downloading Qt distribution with Mingw compiler, you don't have to use Visual Studio 2012 command prompt, as it already shipped with the cross platform GNU compiler and linker. With mingw, any command prompt will do, although its preferably to use mingw Bash shell. 

Second, create your project directory and and once inside it, create a single C++ file with the following introductory source code taken directly from "C++ GUI Programming with Qt 4" by Jasmin Blanchette and Mark Summerfield, Page 3:

1
2
3
4
5
6
7
8
9
#include <QApplication>
#include <QLabel>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QLabel *label = new QLabel("Hello Qt!");
    label->show();
    return app.exec();
}

Lets name it main.cpp (you can name it anything though!) and issue this command : qmake -project. It will generate a *.pro file with the name of the current directory and it will automatically include all of the existing *.cpp file in the current directory, to the sources in the autogenerated *.pro file. That's why I instructed you to first create the C++ file and not the *.pro file. If the *.pro file was created first, you will have to manually add main.cpp to its sources in the *.pro file. Inspect the following picture that visualize of how it is done:

Here, I simply copy the existing main.cpp to current directory. Of course you will have to create it on your own!

 

Third, lets compile and run it! But first, we have to tell qmake that we are about to create a GUI application. Open up the *.pro file and add this line at the end : QT += widgets. Failed to do so, will generate this error message : .\main.cpp(1) : fatal error C1083: Cannot open include file: 'QApplication': No such file or directory.

Next, generate a cross platform Makefile by issuing the command : qmake. And finally, run VC++ make utility : nmake. You will find the resultant *.exe file in the release directory. Run it!

Successfully generating a 64 bit C++ Qt application

Interesting isn't it? Smile 

Fourth, this last step is optional, but l am sure you love to have this C++ Qt code to be manageable in a decent IDE. qmake can create the required files to let this project to be opened in Visual Studio or XCode. Lets create a Visual Studio C++ project file for this project, by issuing the command : qmake -tp vc. You will find a generated *.vcxproj in the current directory, ready to be opened with Visual Studio C++ 2012.

PyQt

I do hope you really get a hands on C++ Qt, as --amongst other things-- it will gives you a grateful feeling toward easiness of Qt cross application development using PyQt..

Here, we are going to use Visual Studio 2012 with Python Tools for Visual Studio (PTVS) to ease us in developing Python application in Windows environment (there is also Qt Visual Studio 2012 add-ins, but we are going to postponed the use of it, until the next subsequent article). Create a new Python Application using PTVS provided project template.

 Create Python application using PTVS provided template

Create Python application using PTVS provided template

It will create a single *.py file with the name of your Python project. You can opted to rename it into main.py or simply leave it that way. Here, I am going to rename it into main.py, for the sake of ease of discussion.

Because PyQt5 was only shipped with Python 3.3, you will have to explicitly use Python 3.3 as the python environment. Right click on Python Environments node directly beneath your project name, and choose Python 3.3 in the subsequent dialog box.

Using PyQt5, required you to use Python 3.3 environment

The dialog above will display all of the existing Python environments detected in your system. I intentionally installed both Python 2.7 and Python 3.3 in my workstation, to let me work with the existing project developed with Python 2.7 and to test its migration within the new Python 3.3 environment. 

For the main.py code itself, use the following Python code:

1
2
3
4
5
6
7
8
import sys
from PyQt5.Qt import *
 
if __name__ == "__main__":
    app = QApplication(sys.argv)
    label = QLabel("Hello Qt!")
    label.show()
    app.exec_()

Run it (hit F5), and you will have the same output as the previous C++ Qt version. 

PySide

The PySide version of this introductory application will also use PTVS for its IDE. Therefor, all of these three projects can be directly managed by Visual Studio 2012 as shown below:

Different project types within Visual Studio

Different project types within Visual Studio

As for the PySide's main.py code itself, the code merely differs in its import statement, as PySide using a different namespace than PyQ, as seen below:

1
2
3
4
5
6
7
8
import sys
from PySide.QtGui import *
 
if __name__ == "__main__":
    app = QApplication(sys.argv)
    label = QLabel("Hello Qt!")
    label.show()
    app.exec_()

By running this project, you will know that you have the exact application as its C++ or PyQt version. 

What's Next?

In this article I start with the notion that we are going to build a rather complex application as our first timer either in C++ Qt, PyQt or PySide. But my first step is to introduced the Hello World application for each of the technology, in hoping that it gives a great sense of holistic view for all of the above tech. I hope my approach is correct and I can accomplished my goal.

Although you  have build a working (three!) Qt applications, in this article I haven't talked much about Qt API itself. I plan to discuss it in the subsequent article that will begin the development of a more complex Qt application. Therefor, please be patient and bear with me for a moment Smile

You can follow the application development from this Github repository : pythonthusiast/CrossPlatformQt.

Or download its current release in : crossplatformqt-1.zip

Stay tuned!

 





Leave comments

 authimage
  • Hi Cka,

    Got to say, this day I never really give a deep thought whether I should use stack / heap based object. I think it had came from a long wisdom that, creating object in the heap made much more of a broader purpose for it. So, even though its good enough for a stack based object, I always prefer it to be created in the heap. Although, yeah, sometimes that was the cause of memory leak :(

    That's one important link you gave me
    Thanks!

    • eko
  • Hi;
    Qt's own examples and Qt Creator's new project wizard "prefer" objects on stack when it makes sense:
    http://qt-project.org/doc/qt-5/gettingstartedqt.html#main-source-file

    That C++ objects can be created on stack is one of the distinctive features of C++ that makes RAII such a useful idiom.

    • cka
  • Hi Cka,

    I simply took this code from "C++ GUI Programming with Qt 4" by Jasmin Blanchette and Mark Summerfield, Page 3. You're correct : that'll make the code more consistent.

    * Now I add this info to this article

    Thanks!

    • eko
  • The C++ example could also be

    QLabel label("Hello Qt!");
    label.show();

    similar to how QApplication is created on the stack.

    • cka
  • Hi Marcell,

    It really nice having you here! :)

    I think you're right : using Qt Creator surely will make the project cross platform. But, then again, currently I am too fond of developing many Python project using PTVS, that lets me work on either C++ or Python project within a single IDE. In this respect, Qt Creator missed this feature.

    But, surely I will include it later in my subsequent article.

    Thanks for your feedback

    • eko
  • it would be much more cross-platform if you could use cross-platform qt creator [1]. it integrates well with other components:
    * qt quick designer
    * qml profiler
    * qt designer
    * qt linguist
    * qt assistant

    thanx for blog posts...

    [1] http://qt.digia.com/Product/Qt-Core-Features-Functions/Developer-Tools/#creator

    • marcell

Copyright(c) 2014 - PythonBlogs.com
By using this website, you signify your acceptance of Terms and Conditions and Privacy Policy
All rights reserved