Saturday, August 6, 2011

How to Setup Qt Quick 4.7.3 / QML Project with Microsoft Visual Studio C++ 2008 Express

It's possible to configure Qt Quick 4.7.3 / QML Development using Microsoft Visual Studio C++ 2008 Express project.

Quick Start

  1. Install Microsoft Visual Studio C++ 2008 (Express)
  2. Install Qt Library 4.7.x for Visual C++ 2008
  3. Set environment QTDIR to C:\Qt\4.7.x
How to Create A New Qt Project in Visual Studio 2008
  1. Create a new Makefile project
  2. For Debug, set the build command as: qmake && nmake
    Set the Debug launch command as: debug\YourApp.exe
  3. For Release, set the build command as: qmake && nmake release-all
    Set the Release launch command as: release\YourApp.exe
  4. Add a YourApp.cpp file
  5. Create initial Qt .pro project file by running: qmake -project
You should get this:

TEMPLATE = app
TARGET =
DEPENDPATH += .
INCLUDEPATH += .

# Input
SOURCES += YourApp.cpp

You need to update this .pro Qt project file when you add source or header files.

A simple YourApp.cpp would be:

#include <QApplication>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QPushButton hello("Hello world");
    hello.resize(100, 30);

    hello.show();
    return app.exec();
}

You can see how this simple Qt GUI application looks on the screenshot.

How to Add Qt Quick / QML Support

To support QML / Qt Quick, add to .pro file:

QT += gui declarative

Create the .qml file :

import QtQuick 1.0

Rectangle { width: 100; height: 100; color: "red" }

Then load the .qml file from the main .cpp :

#include <QApplication>
#include <QPushButton>
#include <QDeclarativeView>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QDeclarativeView view;
    view.setSource(QUrl::fromLocalFile("qmlvs.qml"));
    view.show();

    return app.exec();
}

You can see how this QML / Qt Quick application looks on the screenshot.

What about Visual Studio 2010?

It's possible but you'll have to download Qt sources and
build using Visual Studio compiler which can take 3 hours or more.

Download / Clone Sample Projects from Git Repository

To make it easy for you, the sample projects are freely available as Apache Licensed open source projects in my Nokia Developer Projects Git repository:

https://projects.developer.nokia.com/qmlexperiments

Learning Resources


To get started on Qt GUI / Qt Quick Development on desktop and mobile devices, check out these recommended books:

  1. C++ GUI Programming with Qt 4 (2nd Edition) - Prentice Hall
  2. Beginning Nokia Apps Development: Qt and HTML5 for Symbian and MeeGo
  3. Foundations of Qt Development
  4. Advanced Qt Programming: Creating Great Software with C++ and Qt 4

15 comments:

  1. That was really a great tutorial i feel.It was really helpful.Thank you !

    ReplyDelete
  2. I always find difficult to work with QML development.These days many projects are held with handling this programming.

    ReplyDelete
  3. I have read this post. collection of post is a nice one ..that am doing website designing company chennai india and website development company chennai india. That I will inform about your post to my friends and all the best for your future posts..

    ReplyDelete
  4. Grt Tutorial For Setup Qt Quick 4.7.3 / QML It's the fantastic example of growing technology.
    iPhone App Development And iOS App Development

    ReplyDelete
  5. Best SEo Service organization in Bangalore, INDIA. Suppliers of SEO, Search Engine Optimization Online Marketing Services to customers over all business segments. We have possessed the capacity to make our interesting position in Internet Marketing space
    Best SEO Company in Bangalore|Best SEO Service|Best SEO Company in india

    ReplyDelete
  6. Hi, this blog is really amazing and provide me answers to all my questions .This is really informative and I will for sure refer my friends the same.Web Designing Company Bangalore | Website Design Companies Bangalore

    ReplyDelete
  7. Your post is just outstanding! thanx for such a post,its really going great and great work.You have provided great knowledge.
    Web Design Bangalore

    ReplyDelete

  8. Thank you. I just wanted to know where to ship it since I know now to keep producing it


    Software Development Company in Chennai

    ReplyDelete
  9. we will provide you the best app as per your requirement. it would be fully responsive with all type of mobile devices. app would be fully functional.Mobile Application Development

    ReplyDelete
  10. Thank you for posting such nice article read. I am very glad to read this. Really good one.
    Bangalore Web Designing Company, UI Designing Company Bangalore

    ReplyDelete
  11. In particular there are instructions on how to build Qt 5 for x64 platform contributed by Vincenzo Mercuri. For best and cheap manual Seo services, Web designings. Must check Web Design Bangalore

    ReplyDelete
  12. Thanks for sharing this blog with us...
    Hvantage Technologies offer best Mobile app development and Web Development Services with affordable price. If anyone is required for these services visit as: www.hvantagetechnologies.com

    ReplyDelete
  13. Thank you for sharing the information. Yberry Infosystem is a Mobile and Web Solutions Technology Services company. We specialize in Mobile Apps and Web Devlopment, Ecommerce Solutions. Visit: www.yberryinfosystem.com

    ReplyDelete

Be the first to comment!