×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Getting started with Qt

From Nokia Developer Wiki
Jump to: navigation, search
kiran10182 (Talk | contribs)
m (small typos)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
(47 intermediate revisions by 11 users not shown)
Line 1: Line 1:
{{FeaturedArticle}}
+
[[Category:Qt]][[Category:Symbian]][[Category:MeeGo Harmattan]][[Category:Getting Started]]
{{CodeSnippet
+
{{FeaturedArticle|timestamp=20120219}}
|id=
+
{{ArticleMetaData <!-- v1.2 -->
|platform=S60 3rd Edition, S60 5th Edition
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
|devices=Emulator
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|category=Qt for S60
+
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
|subcategory= Getting started
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
|creationdate=29 December 2008
+
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|keywords=PushButton, TextLabel, Signal and Slot
+
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= [[User:hamishwillee]]
 +
|update-timestamp= 20120217
 +
|creationdate= 20081229
 +
|author= [[User:James1980]]
 
}}
 
}}
  
[[Category:S60]][[Category:Qt for S60]][[Category:How To]]
+
{{Abstract|This article is for developers who want to start creating [[Qt]] apps. You may also choose to start using the static [http://www.developer.nokia.com/Develop/Qt/Getting_started/ getting started] site.}}
  
 +
== Overview ==
 +
Qt (pronounced "cute") is a cross platform development framework which allows you to target both mobile devices and desktop platforms.
  
== Introduction ==
+
App user interfaces for mobile devices are created using [[:Category:Qt Quick|Qt Quick]] and the [[Qt Quick Components]] (an application framework for Qt Quick). The "programming language" of Qt Quick is called QML, a declarative language which combines a CSS like declaration of how the UI ''looks'' in different states and how it animates between them, along with JavaScript. The language is intuitive and relatively easy to learn - even relative novices can create very fluid interfaces with little effort.
  
This article is for beginners who desire to start development in [[Qt for S60]]. Before following the steps given here please make sure that [http://forum.nokia.com/main/resources/tools_and_sdks/carbide_cpp/ Carbide.c++], S60 [[SDK]] and [[Qt for S60]] are properly installed.
+
Application engines can often be written directly in Qt Quick/QML using JavaScript as many useful C++ APIs are exposed or can trivially be imported into QM. Where JavaScript does not provide the needed functionality or is simply not fast enough, you can always write your engine using the full power of Qt C++ and then expose both properties and functions to your QML app (this requires some C++ programming ability, but is well documented).
  
* Install Qt for S60 Temple release from here: [http://pepper.troll.no/s60prereleases/ Qt for S60 "Temple" pre-release]
+
{{Note|Qt UIs have historically been developed using cross-platform C++ libraries based on [[:Category:QWidget UI|QWidget]], and more recently on {{Qapiname|QGraphicsView}}. While these UIs are still available and supported for desktop platforms, you may find that Qt Quick is more effective for creating more fluid animated UIs. <br />
* Check this link for installation guide: [http://pepper.troll.no/s60prereleases/doc/install-s60.html How to install the package].
+
{{Qapiname|QWidget}} based UIs should '''not''' be used for mobile devices; while the may "work" they are not optimised for any mobile platform, and do not come with framework support for the sorts view/page based UIs most common on mobile devices.<br /><br />You may also see [[:Category:Qt Mobility|Qt Mobility]] APIs being mentioned in the documentation set. These are a set of C++ and QML/JavaScript APIs that provide access to use cases that are more important in mobile contexts (for example contacts or location information). These may be considered to be part of Qt, although they are not as relevant for desktop platforms.}}
  
 +
== Getting started ==
 +
We recommend you start with the [http://www.developer.nokia.com/Develop/Qt/Getting_started/ Getting Started with Qt] section on the static site. This explains how to download the latest [http://www.developer.nokia.com/Develop/Qt/Tools/ Qt SDK]. This contains the Qt Creator IDE, which in turn contains documentation and everything else you need to get started.
  
== Prerequisite==
+
The static site has links to many other resources, and we include a few additional links below.
* Carbide.c++ 2.0 does not automatically locate your Qt installation so you need to tell it where Qt is installed. This is done through the following settings:
+
  '''Carbide.c++ preferences: Window >> Preferences >> Qt >> Add...'''
+
[[Image:Qt_Preference.PNG]]
+
  
== First Step ==
+
== Further resources ==
Open the Carbide IDE and click on File->New->Qt Project.
+
  
[[Image:step1.jpg]]
+
* [http://www.developer.nokia.com/Develop/Qt/ Nokia Developer:Qt]. This includes separate tabs for tools, getting started, examples, videos etc.
 
+
* [[:Category:Qt Quick]] - articles about writing Qt Quick based applications, or which use Qt Quick in their UI
 
+
* [[:Category:Qt]] - all Qt articles, except those that use [[:Category:QWidget UI|QWidget]] based UIs.
== Second Step ==
+
* [http://www.developer.nokia.com/Community/Discussion/forumdisplay.php?219-Qt Qt Discussion Boards]
New window will open on the screen. This will show the type of the application one can create. Click on "Qt GUI Widget" and then click Next.
+
 
+
[[Image:Step2.jpg]]
+
 
+
 
+
== Third Step ==
+
Give the name of the project and click on Next.
+
 
+
[[Image:Step3.jpg]]
+
 
+
 
+
== Fourth Step ==
+
In this step one has to select the SDK for which the project is to be created and click Next.
+
 
+
[[Image:Step4.jpg]]
+
 
+
 
+
== Fifth Step ==
+
In this window, click Next after selecting the module. For our example one has to click Next without selecting any extra modules.
+
 
+
[[Image:Step5.jpg]]
+
 
+
 
+
== Sixth Step ==
+
Here, the class name is required. By default it is the application name. Click on Finish to proceed.
+
 
+
[[Image:Step6.jpg]]
+
 
+
After finishing these steps, the project is ready. Several files will have been created automatically as shown in the screenshot below.
+
 
+
[[Image:Step7.jpg]]
+
 
+
If you have more than one version of [[Qt for S60]] installed on your machine then opt for the correct version as shown below.
+
 
+
[[Image:Properties.JPG]]
+
 
+
[[Image:Properties1.JPG]]
+
 
+
 
+
 
+
== Include Qt Views ==
+
* Include views for Qt from:
+
  '''Carbide.c++ >> Windows >> Show View >> Other... >> Qt'''
+
[[Image:QtView.png]]
+
* Select following views at minimal depending on the application:
+
# Qt C++ Widget Box
+
# Qt C++ Property Editor
+
# Qt C++ Signal Slot Editor
+
 
+
== Adding controls ==
+
* Open '''<tt>Hello.ui</tt>''' and place the control from '''Qt C++ Widget Box'''
+
[[Image:QtWidgetBox.png]]
+
* We will add two push buttons and one text label in this article.
+
* The display text of an object can be changed by right clicking on object -> Change text...
+
* The name of an object can be changed as shown in the following screenshots.
+
 
+
=== Text label ===
+
[[Image:TextLabel.png]]
+
 
+
=== Hello push button ===
+
[[Image:HelloButton.png]]
+
 
+
=== Exit push button ===
+
[[Image:ExitButton.png]]
+
 
+
 
+
== Implementing Signal and Slot mechanism for Exit push button==
+
* Open '''<tt>Hello.ui</tt>'''
+
* Open '''Qt C++ Signal Slot Editor''' view
+
[[Image:QtSignalSlotView.png]]
+
* Click on [[Image:QtSignalPlus.png]] to add entry for handling events on control
+
* In this article we will handle events on "Exit" push button
+
* The application will terminate when the user clicks on the "Exit" push button
+
=== Sender ===
+
* Here "exitButton" is the sender of the signal
+
[[Image:QtSender.png]]
+
 
+
=== Signal ===
+
* Here we will select "clicked()" signal to be sent by "exitButton"
+
[[Image:QtSignal.png]]
+
 
+
=== Receiver ===
+
* Here <tt>HelloClass</tt> is the receiver of this event handling mechanism.
+
[[Image:QtReceiver.png]]
+
 
+
=== Slot ===
+
* Here "Slot" is the action performed when "exitButton" will be "clicked()" and here we want to exit from the application therefore we will select "close()"
+
[[Image:QtSlot.png]]
+
 
+
 
+
== Implementing Hello push button ==
+
* We will implement Hello button event through coding in <tt>Hello.h</tt> and <tt>Hello.cpp</tt> files.
+
===Header file ===
+
<code cpp>
+
#ifndef HELLO_H
+
#define HELLO_H
+
 
+
#include <QtGui/QWidget>
+
#include "ui_Hello.h"
+
 
+
class Hello : public QWidget
+
{
+
    Q_OBJECT
+
 
+
public:
+
    Hello(QWidget *parent = 0);
+
    ~Hello();
+
 
+
public slots: //We have added this section to handle "clicked()" event on "helloButton"
+
    void ShowHelloText(); // Fill the label text on clicking "Hello" button
+
 
+
private:
+
    Ui::HelloClass ui;
+
};
+
 
+
#endif // HELLO_H
+
</code>
+
 
+
=== Source file ===
+
<code cpp>
+
#include "Hello.h"
+
 
+
Hello::Hello(QWidget *parent)
+
    : QWidget(parent)
+
{
+
ui.setupUi(this);
+
+
        // Signal and slot mechanism for "helloButton"
+
QObject::connect(ui.helloButton, SIGNAL(clicked()), this, SLOT(ShowHelloText()));
+
}
+
 
+
Hello::~Hello()
+
{
+
 
+
}
+
 
+
//We have implemented the following function to display "HelloWorld!!!" text in TextLabel
+
void Hello::ShowHelloText()
+
{
+
ui.label->setText("HelloWorld!!!");
+
}
+
</code>
+
 
+
 
+
== Output ==
+
=== Initial state ===
+
[[Image:InitialStateEmulator.png]]
+
 
+
=== Hello button pressed state ===
+
[[Image:HelloPressedEmulator.png]]
+
 
+
 
+
== Example application ==
+
* Extract this example application: [[Media:Hello.zip|Hello.zip]]
+
* Import .pro file from the above extracted application in your Carbide.c++ IDE.
+
  '''Carbide.c++ >> Import >> Qt >> Qt Project >> Hello.pro'''
+
 
+
== Feedback ==
+
* If you find any problem in creating your HelloWorld application in Qt, then please write your feedback in <u>[[Talk:Getting started with Qt for S60|Comment page]]</u> of this article. We will try to help you at our best.
+
 
+
* Raise your other [[Qt for S60]] related questions in this discussion board section: [http://discussion.forum.nokia.com/forum/forumdisplay.php?f=196 Qt for S60 Discussion Boards]
+

Revision as of 08:35, 17 July 2012

{{{width}}}
19 Feb
2012
Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: james1980 (29 Dec 2008)
Updated: hamishwillee (17 Feb 2012)
Last edited: hamishwillee (17 Jul 2012)

This article is for developers who want to start creating Qt apps. You may also choose to start using the static getting started site.

Overview

Qt (pronounced "cute") is a cross platform development framework which allows you to target both mobile devices and desktop platforms.

App user interfaces for mobile devices are created using Qt Quick and the Qt Quick Components (an application framework for Qt Quick). The "programming language" of Qt Quick is called QML, a declarative language which combines a CSS like declaration of how the UI looks in different states and how it animates between them, along with JavaScript. The language is intuitive and relatively easy to learn - even relative novices can create very fluid interfaces with little effort.

Application engines can often be written directly in Qt Quick/QML using JavaScript as many useful C++ APIs are exposed or can trivially be imported into QM. Where JavaScript does not provide the needed functionality or is simply not fast enough, you can always write your engine using the full power of Qt C++ and then expose both properties and functions to your QML app (this requires some C++ programming ability, but is well documented).

Note.pngNote: Qt UIs have historically been developed using cross-platform C++ libraries based on QWidget, and more recently on QGraphicsView. While these UIs are still available and supported for desktop platforms, you may find that Qt Quick is more effective for creating more fluid animated UIs.
QWidget based UIs should not be used for mobile devices; while the may "work" they are not optimised for any mobile platform, and do not come with framework support for the sorts view/page based UIs most common on mobile devices.

You may also see Qt Mobility APIs being mentioned in the documentation set. These are a set of C++ and QML/JavaScript APIs that provide access to use cases that are more important in mobile contexts (for example contacts or location information). These may be considered to be part of Qt, although they are not as relevant for desktop platforms.

Getting started

We recommend you start with the Getting Started with Qt section on the static site. This explains how to download the latest Qt SDK. This contains the Qt Creator IDE, which in turn contains documentation and everything else you need to get started.

The static site has links to many other resources, and we include a few additional links below.

Further resources

287 page views in the last 30 days.