×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Getting started with Qt

From Nokia Developer Wiki
Jump to: navigation, search
jimgilmour1 (Talk | contribs)
m (remove reference to Qt s60 sdk garden)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
(39 intermediate revisions by 7 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:Qt]][[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 want 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).
  
 +
{{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 />
 +
{{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.
  
 +
The static site has links to many other resources, and we include a few additional links below.
  
== Prerequisite==
+
== Further resources ==
  
* Install latest Qt for S60 see [http://wiki.forum.nokia.com/index.php/Qt_for_S60_-_Installation_packages Qt for S60 - Installation packages]
+
* [http://www.developer.nokia.com/Develop/Qt/ Nokia Developer:Qt]. This includes separate tabs for tools, getting started, examples, videos etc.
* Check this link for installation guide: [http://pepper.troll.no/s60prereleases/doc/install-s60.html How to install the package].
+
* [[:Category:Qt Quick]] - articles about writing Qt Quick based applications, or which use Qt Quick in their UI
* Go through this article: [[Getting started with Qt for S60]]
+
* [[:Category:Qt]] - all Qt articles, except those that use [[:Category:QWidget UI|QWidget]] based UIs.
 
+
* [http://www.developer.nokia.com/Community/Discussion/forumdisplay.php?219-Qt Qt Discussion Boards]
 
+
* 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 ==
+
Open the Carbide IDE and click File > New > Qt Project.
+
 
+
[[Image:step1.jpg]]
+
 
+
 
+
== Second Step ==
+
A new window will open on the screen. This will show the application types that can be created. Click Qt GUI Widget and then click Next.
+
 
+
[[Image:Step2.jpg]]
+
 
+
 
+
== Third Step ==
+
Enter a name for the project and click Next.
+
 
+
[[Image:Step3.jpg]]
+
 
+
 
+
== Fourth Step ==
+
Select the SDK to create the project for and click Next.
+
 
+
[[Image:Step4.jpg]]
+
 
+
 
+
== Fifth Step ==
+
Select the module(s) and click Next. For our example, click Next without selecting any extra modules.
+
 
+
[[Image:Step5.jpg]]
+
 
+
 
+
== Sixth Step ==
+
The class name is required. By default it is the application name. Click Finish to proceed.
+
 
+
[[Image:Step6.jpg]]
+
 
+
After finishing these steps, the project is ready. Several files are created automatically as shown in the following screenshot.
+
 
+
[[Image:Step7.jpg]]
+
 
+
If you have more than one version of [[Qt for S60]] installed on your machine, choose the correct version as shown here:
+
 
+
[[Image:Properties.JPG]]
+
 
+
[[Image:Properties1.JPG]]
+
 
+
 
+
 
+
== Include Qt Views ==
+
* Include views for Qt from:
+
  '''Carbide.c++ > Windows > Show View > Other... > Qt'''
+
[[Image:QtView.png]]
+
* View selection depends on the application. However, at least the following views must be selected:
+
# 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 the '''Qt C++ Widget Box'''.
+
[[Image:QtWidgetBox.png]]
+
* In this example, two push buttons and one text label will be added.
+
* 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 the '''Qt C++ Signal Slot Editor''' view.
+
[[Image:QtSignalSlotView.png]]
+
* Click  [[Image:QtSignalPlus.png]] to add an entry for handling events on control.
+
* In this example, we will handle events on the Exit push button
+
* The application will terminate when the user clicks the Exit push button
+
=== Sender ===
+
* exitButton is the sender of the signal.
+
[[Image:QtSender.png]]
+
 
+
=== Signal ===
+
* Select the signal clicked() to be sent by exitButton.
+
[[Image:QtSignal.png]]
+
 
+
=== Receiver ===
+
* <tt>HelloClass</tt> is the receiver of this event handling mechanism.
+
[[Image:QtReceiver.png]]
+
 
+
=== Slot ===
+
* Slot is the action performed when exitButton is clicked(). To exit from the application, select close().
+
[[Image:QtSlot.png]]
+
 
+
 
+
== Implementing the Hello push button ==
+
* In this example, we implement the Hello button event by coding in the files Hello.h and Hello.cpp.
+
===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 the .pro file from the previously extracted application in your Carbide.c++ IDE.
+
  '''Carbide.c++ >> Import >> Qt >> Qt Project >> Hello.pro'''
+
 
+
== Feedback ==
+
* If you encounter any problems in creating your HelloWorld application in Qt, please enter your feedback in the  <u>[[Talk:Getting started with Qt for S60|Comment page]]</u> of this article.
+
 
+
* Raise any other [[Qt for S60]] related questions on the [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

368 page views in the last 30 days.