×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Getting started with Qt

From Nokia Developer Wiki
Jump to: navigation, search
jaaura (Talk | contribs)
tanjaluodes (Talk | contribs)
Line 15: Line 15:
 
== Introduction ==
 
== Introduction ==
  
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.
+
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.
  
 
* Install Qt for S60 Temple release from here: [http://pepper.troll.no/s60prereleases/ Qt for S60 "Temple" pre-release]
 
* Install Qt for S60 Temple release from here: [http://pepper.troll.no/s60prereleases/ Qt for S60 "Temple" pre-release]
* Check this link for installation guide: [http://pepper.troll.no/s60prereleases/doc/install-s60.html How to install the package].
+
* See [http://pepper.troll.no/s60prereleases/doc/install-s60.html How to install the package] for the installation guide.
  
  
 
== Prerequisite==
 
== Prerequisite==
* 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++ 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...'''
+
   '''Carbide.c++ preferences: Window > Preferences > Qt > Add...'''
 
[[Image:Qt_Preference.PNG]]
 
[[Image:Qt_Preference.PNG]]
  
 
== First Step ==
 
== First Step ==
Open the Carbide IDE and click on File->New->Qt Project.
+
Open the Carbide IDE and click File > New > Qt Project.  
  
 
[[Image:step1.jpg]]
 
[[Image:step1.jpg]]
Line 33: Line 33:
  
 
== Second Step ==
 
== Second Step ==
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.
+
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]]
 
[[Image:Step2.jpg]]
Line 39: Line 39:
  
 
== Third Step ==
 
== Third Step ==
Give the name of the project and click on Next.
+
Enter a name for the project and click Next.  
  
 
[[Image:Step3.jpg]]
 
[[Image:Step3.jpg]]
Line 45: Line 45:
  
 
== Fourth Step ==
 
== Fourth Step ==
In this step one has to select the SDK for which the project is to be created and click Next.
+
Select the SDK to create the project for and click Next.  
  
 
[[Image:Step4.jpg]]
 
[[Image:Step4.jpg]]
Line 51: Line 51:
  
 
== Fifth Step ==
 
== Fifth Step ==
In this window, click Next after selecting the module. For our example one has to click Next without selecting any extra modules.
+
Select the module(s) and click Next. For our example, click Next without selecting any extra modules.  
  
 
[[Image:Step5.jpg]]
 
[[Image:Step5.jpg]]
Line 57: Line 57:
  
 
== Sixth Step ==
 
== Sixth Step ==
Here, the class name is required. By default it is the application name. Click on Finish to proceed.
+
The class name is required. By default it is the application name. Click Finish to proceed.  
  
 
[[Image:Step6.jpg]]
 
[[Image:Step6.jpg]]
  
After finishing these steps, the project is ready. Several files will have been created automatically as shown in the screenshot below.
+
After finishing these steps, the project is ready. Several files are created automatically as shown in the following screenshot.  
  
 
[[Image:Step7.jpg]]
 
[[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.
+
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:Properties.JPG]]
Line 75: Line 75:
 
== Include Qt Views ==
 
== Include Qt Views ==
 
* Include views for Qt from:
 
* Include views for Qt from:
   '''Carbide.c++ >> Windows >> Show View >> Other... >> Qt'''
+
   '''Carbide.c++ > Windows > Show View > Other... > Qt'''
 
[[Image:QtView.png]]
 
[[Image:QtView.png]]
* Select following views at minimal depending on the application:
+
* View selection depends on the application. However, at least the following views must be selected:  
 
# Qt C++ Widget Box
 
# Qt C++ Widget Box
 
# Qt C++ Property Editor
 
# Qt C++ Property Editor
Line 83: Line 83:
  
 
== Adding controls ==
 
== Adding controls ==
* Open '''<tt>Hello.ui</tt>''' and place the control from '''Qt C++ Widget Box'''
+
* Open '''<tt>Hello.ui</tt>''' and place the control from the '''Qt C++ Widget Box'''.
 
[[Image:QtWidgetBox.png]]
 
[[Image:QtWidgetBox.png]]
* We will add two push buttons and one text label in this article.
+
* 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 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.
 
* The name of an object can be changed as shown in the following screenshots.
  
Line 100: Line 100:
  
 
== Implementing Signal and Slot mechanism for Exit push button==
 
== Implementing Signal and Slot mechanism for Exit push button==
* Open '''<tt>Hello.ui</tt>'''
+
* Open '''<tt>Hello.ui</tt>'''.
* Open '''Qt C++ Signal Slot Editor''' view
+
* Open the '''Qt C++ Signal Slot Editor''' view.
 
[[Image:QtSignalSlotView.png]]
 
[[Image:QtSignalSlotView.png]]
* Click on [[Image:QtSignalPlus.png]] to add entry for handling events on control
+
* Click [[Image:QtSignalPlus.png]] to add an entry for handling events on control.
* In this article we will handle events on "Exit" push button
+
* In this example, we will handle events on the Exit push button
* The application will terminate when the user clicks on the "Exit" push button
+
* The application will terminate when the user clicks the Exit push button
 
=== Sender ===
 
=== Sender ===
* Here "exitButton" is the sender of the signal
+
* exitButton is the sender of the signal.
 
[[Image:QtSender.png]]
 
[[Image:QtSender.png]]
  
 
=== Signal ===
 
=== Signal ===
* Here we will select "clicked()" signal to be sent by "exitButton"
+
* Select the signal clicked() to be sent by exitButton.
 
[[Image:QtSignal.png]]
 
[[Image:QtSignal.png]]
  
 
=== Receiver ===
 
=== Receiver ===
* Here <tt>HelloClass</tt> is the receiver of this event handling mechanism.
+
* <tt>HelloClass</tt> is the receiver of this event handling mechanism.
 
[[Image:QtReceiver.png]]
 
[[Image:QtReceiver.png]]
  
 
=== Slot ===
 
=== 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()"
+
* Slot is the action performed when exitButton is clicked(). To exit from the application, select close().
 
[[Image:QtSlot.png]]
 
[[Image:QtSlot.png]]
  
  
== Implementing Hello push button ==
+
== Implementing the Hello push button ==
* We will implement Hello button event through coding in <tt>Hello.h</tt> and <tt>Hello.cpp</tt> files.
+
* In this example, we implement the Hello button event by coding in the files Hello.h and Hello.cpp.  
 
===Header file ===
 
===Header file ===
 
<code cpp>
 
<code cpp>
Line 187: Line 187:
 
== Example application ==
 
== Example application ==
 
* Extract this example application: [[Media:Hello.zip|Hello.zip]]
 
* Extract this example application: [[Media:Hello.zip|Hello.zip]]
* Import .pro file from the above extracted application in your Carbide.c++ IDE.
+
* Import the .pro file from the previously extracted application in your Carbide.c++ IDE.  
 
   '''Carbide.c++ >> Import >> Qt >> Qt Project >> Hello.pro'''
 
   '''Carbide.c++ >> Import >> Qt >> Qt Project >> Hello.pro'''
  
 
== Feedback ==
 
== 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.
+
* 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 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]
+
* 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 17:32, 25 February 2009

Featured Article
Article Metadata
Tested with
Devices(s): Emulator
Compatibility
Platform(s): S60 3rd Edition, S60 5th Edition
Symbian
Article
Keywords: PushButton, TextLabel, Signal and Slot
Created: (29 Dec 2008)
Last edited: tanjaluodes (25 Feb 2009)


Contents

Introduction

This article is for beginners who want to start development in Qt for S60. Before following the steps given here please make sure that Carbide.c++, S60 SDK and Qt for S60 are properly installed.


Prerequisite

  • 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...

Qt Preference.PNG

First Step

Open the Carbide IDE and click File > New > Qt Project.

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.

Step2.jpg


Third Step

Enter a name for the project and click Next.

Step3.jpg


Fourth Step

Select the SDK to create the project for and click Next.

Step4.jpg


Fifth Step

Select the module(s) and click Next. For our example, click Next without selecting any extra modules.

Step5.jpg


Sixth Step

The class name is required. By default it is the application name. Click Finish to proceed.

Step6.jpg

After finishing these steps, the project is ready. Several files are created automatically as shown in the following screenshot.

Step7.jpg

If you have more than one version of Qt for S60 installed on your machine, choose the correct version as shown here:

Properties.JPG

Error creating thumbnail: Image type not supported


Include Qt Views

  • Include views for Qt from:
  Carbide.c++ > Windows > Show View > Other... > Qt

QtView.png

  • View selection depends on the application. However, at least the following views must be selected:
  1. Qt C++ Widget Box
  2. Qt C++ Property Editor
  3. Qt C++ Signal Slot Editor

Adding controls

  • Open Hello.ui and place the control from the Qt C++ Widget Box.

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

TextLabel.png

Hello push button

HelloButton.png

Exit push button

ExitButton.png


Implementing Signal and Slot mechanism for Exit push button

  • Open Hello.ui.
  • Open the Qt C++ Signal Slot Editor view.

QtSignalSlotView.png

  • Click 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.

QtSender.png

Signal

  • Select the signal clicked() to be sent by exitButton.

QtSignal.png

Receiver

  • HelloClass is the receiver of this event handling mechanism.

QtReceiver.png

Slot

  • Slot is the action performed when exitButton is clicked(). To exit from the application, select close().

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

#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

Source file

#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!!!");
}


Output

Initial state

InitialStateEmulator.png

Hello button pressed state

HelloPressedEmulator.png


Example application

  • Extract this example application: 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 Comment page of this article.
284 page views in the last 30 days.
×