From Forum Nokia Wiki

Qt for S60 Beginners with Qt 4 Cross Platform experience

---

Contents 1 Introduction 2 Installing Qt for Windows 2.1 Preconditions 3 First Qt GUI application 3.1 Creating the "Exit" button 3.2 Creating the "Hello World" comboButton 3.3 Creating the "Output Hello" button 3.4 Creating the "Add Numbers" values 3.5 Creating the "Add Numbers" button 3.6 Creating the "Add Numbers" answer box 4 Making the application code 4.1 Building the application 4.2 Running application in emulator 4.3 QtS60app.pro 4.4 QtS60app.cpp 4.5 main.cpp 4.6 ui_QtS60App.h 4.7 QtS60app.h 4.8 QtS60app.ui 4.9 Download 5 Other Articles 6 Summary

Introduction

There are many tutorials for Qt for Windows, Linux and Mac. The Qt for Symbian has one main restriction which is the screen size.

Installing Qt for Windows

Install the kit and the windows patch for the missing "mingwm10.dll" Windows Qt kit install details

Preconditions

• Download and Install latest version Qt for Symbian - Installation packages which has links on how to install the latest version

First Qt GUI application

On Windows Vista start the Qt Designer, (Start -> All Programs -> Qt by Nokia v4.4.3 (OpenSource) -> Designer). In many other systems simply Designer.exe.

When QtDesigner starts the "New Form Dialog" will appear, click "Close". From the Menu along the top (Edit -> Preferences -> User Interface Mode -> Docked Window).

From the Menu (File -> New ) on the left pane select "Widget", then click "Create". On the right side in the "Property Editor" click the 'objectName' replace the default name Form by delete of the characters and type "QtS60AppDLG" and press enter to save new name.

The mobile phone will be a Nokia N95 with display of 240 x 320. In the "Property Editor" click the "geometry" tab to open up width and height set "width" to 240 and height 300.

Move down and click "maximum" tab to open up width and height set "width" to 240 and height 300. Move down and click "windowTitle" tab to open up enter the window name "First S60 Qt GUI"

When saving this suggested directory is "\examples\QtS60app". This will allow easier configuration for compilation builds.

This has now set the main restriction of display size on mobile phones.

Creating the "Exit" button

From the left column window select the Buttons pane. Click and drag the "Push Button" onto the form at bottom right.

Look in the Property editor. Select QObject -> 'objectName'from "pushButton" change this to "pushButton_exit". Now scroll down using the Property Editor scroll bar on the right hand side, until the 'QAbstractButton', the background is green, in 'text' change "pushButton" to "Exit".

This object will connect to the line in "QtS60app.c" which will quit the application

connect( pushButton_exit, SIGNAL( clicked() ), qApp, SLOT( quit() ) );

Creating the "Hello World" comboButton

To continue, we need to add some more object items from the left panel to achieve the to be able to have "Hello World" in multiple languages which can be selected.

So lets click and drag "Combo Box" from "Input Widgets" pane to the main form around the middle.Leave the 'objectName' as "comboBox" as there is only one.

Double click on the Combo box an edit Combo box pops up. Click "+" to enter the text "Hello World".

Now open up a new brower and go to Google.com on the top near the search entry box and click Language tools. In the text box put "Hello World" and Select the French language. Click "translate" and you will get "Bonjour tout le monde" Copy this into the paste buffer.

Back on the comboBox double click and click "+". Paste the French text copied from Google "Bonjour tout le monde".

Now you can carry on doing this for any languages. China/Japan will not show on the phone if you have only European Languages. So in this example the country language in English has been added on on the right.

Creating the "Output Hello" button

From the left column window select the Buttons pane. Click and drag the "Push Button" onto the form at bottom right. Languages currently are:-
English,Spanish,German,French,Russian,Portugese,Chinese. You will need the relevant character encoding to see the Russian and Chinese

Select QObject -> 'objectName'from "pushButton" change this to "pushButton_hello". Now scroll down using the Property Editor on the right hand side, until the 'QAbstractButton', the background is green, in 'text' change "pushButton" to "Output Hello".

This will connect to the line in "QtS60app.c" which will output the selected multi-language "Hello World"

connect( pushButton_hello, SIGNAL( clicked() ), this, SLOT( helloMessage() ) );

From the left column window select the Input Widgets pane. Click and drag the "textEdit" onto the form at bottom above Exit button enlarge from left to right. elect QObject -> 'objectName'from "textEdit" change this to "textEdit_message".

Creating the "Add Numbers" values

From the left column window select the "Input Widgets" pane.
Click and drag the "spinBox" onto the form at Top left. Select QObject -> 'objectName 'from "spinBox" change this to "spinBox1".

From the left column window select the "Input Widgets" pane.
Click and drag the "spinBox" onto the form at Top left. Select QObject -> 'objectName 'from "spinBox" change this to "spinBox2".

Creating the "Add Numbers" button

From the left column window select the Buttons pane. Click and drag the "Push Button" onto the form at bottom right.

Select QObject -> 'objectName'from "pushButton" change this to "pushButton_add". Now scroll down using the Property Editor on the right hand side, until the 'QAbstractButton', the background is green, in 'text' change "pushButton" to "Add Numbers".

This will connect to the line in "QtS60app.c" which will output the selected multi-language "Hello World"

connect( pushButton_add, SIGNAL( clicked() ), this, SLOT( addNumbers() ) );

From the left column window select the Input Widgets pane. Click and drag the "Push Button" onto the form at bottom right.

Creating the "Add Numbers" answer box

From the left column window select the Input Widgets pane. Click and drag the "textEdit" onto the form at the top right of the form. Select QObject -> 'objectName'from "textEdit" change this to "textEdit_answer".

Making the application code

The file has been saved in QtDesigner, those who have used Qt4 on other platforms will know that the QtDesigner file QtS60App.ui is processed using a program uic which will generate the C++ code used in qtS60app.h in the line "#include "ui_QtS60app.h". Every time you change the form in QtDesigner the uic program will generate another updated code file.
The files below are simply the code to support the GUI objects buttons etc. The main lines having being described above. The project is made using

Building the application

qmake QtS60app.pro
bldmake bldfiles
abld build winscw udeb

Running application in emulator

Start the emulator and go to the installed programs, select QtS60app at the bottom of list. When the QtS60app GUI appears click the spinner for number between 1 to 99 on both spinners the use arrow keys to move to "Add Numbers" button the values of spinners will appear in the text message box and answer will appear in the number box.
Next navigate to the Hello World Combo and select the language.
Navigate to click the "Output Hello". and "Hello World" in the specific language e.g. Russian

QtS60app.pro

######################################################################
# Automatically generated by qmake (2.01a) Fri 26. Dec 15:11:38 2008
######################################################################
 
 
# Input
HEADERS = QtS60app.h ui_qts60app.h
FORMS = Qts60app.ui
SOURCES = main.cpp QtS60app.cpp
 
# install
target.path = QtS60app
sources.files = $$SOURCES $$HEADERS $$RESOURCES $$FORMS *.pro
sources.path = .
INSTALLS += target sources

QtS60app.cpp

#include <QtGui> 
#include "QtS60app.h"
 
// including <QtGui> saves us to include every class user
// this may be large for a initial program but saves any problems
// with missing classes for new users
 
QtS60app::QtS60app(QWidget *parent)
{
	setupUi(this); // this sets up GUI
 
	// signals/slots mechanism in action
	connect( pushButton_hello, SIGNAL( clicked() ), this, SLOT( helloMessage() ) ); 
	connect( pushButton_add, SIGNAL( clicked() ), this, SLOT( addNumbers() ) );
	connect( pushButton_exit, SIGNAL( clicked() ), qApp, SLOT( quit() ) ); 
}
 
 
 
void QtS60app::addNumbers()
{
  int value1, value2, valueTotal;
 
 
 
 
	value1 = spinBox1->value();
	value2 = spinBox2->value();
	valueTotal = value1 + value2;
	//debug values
	textEdit_message->append( "Number 1 value: " + QString::number(value1) );
	textEdit_message->append( "Number 2 value: " + QString::number(value2) );
	textEdit_answer->append( QString::number(valueTotal)); // top right text box
 
}
 
 
void QtS60app::helloMessage()
{
	// This is a multi language translated by Google Languages of "Hello World"
	// The language name is in English,and demonstrates the function of how to obtain
	// the selected language
 
	QString str;
 
	//debug values
	//textEdit_message->append( "ComboBox current text: " + comboBox->currentText() );
	//textEdit_message->append( "ComboBox current item: " + QString::number(comboBox->currentIndex()) );
	textEdit_message->append( "Hello World is: " + comboBox->currentText() );
 
 
}

In the above code the debug code has been commented out to show how access to various other fuctions is obtained. Clearly a more powerful technique than a simple "printf".

main.cpp

#include <QApplication>
 
#include "QtS60app.h"
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QtS60app *dialog = new QtS60app;
 
    dialog->show();
    return app.exec();
}

ui_QtS60App.h

This generated by "uic QtS60app.iu -o ui_QtS60app.h" and when qmake runs this file is generated

QtS60app.h

#ifndef QTS60APP_H
#define QTS60APP_H
 
#include "ui_QtS60app.h"
 
 
class QtS60app : public QWidget, private Ui::QtS60appDLG
{
	Q_OBJECT
 
public:
	QtS60app(QWidget *parent = 0);
 
public slots:
	void helloMessage();
	void addNumbers();
};
 
 
#endif

QtS60app.ui

This is the QtDesigner generated file which contains buttons and objects on the GUI. This file below can be saved and loaded into QtDesigner or Carbide 2.0 Qt Project, without doing the form creation steps above

<ui version="4.0" >
 <class>QtS60appDLG</class>
 <widget class="QWidget" name="QtS60appDLG" >
  <property name="geometry" >
   <rect>
    <x>0</x>
    <y>0</y>
    <width>220</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle" >
   <string>My first Qt GUI App</string>
  </property>
  <widget class="QLabel" name="label" >
   <property name="geometry" >
    <rect>
     <x>10</x>
     <y>10</y>
     <width>51</width>
     <height>21</height>
    </rect>
   </property>
   <property name="text" >
    <string>Number 1</string>
   </property>
  </widget>
  <widget class="QLabel" name="label_2" >
   <property name="geometry" >
    <rect>
     <x>10</x>
     <y>40</y>
     <width>61</width>
     <height>21</height>
    </rect>
   </property>
   <property name="text" >
    <string>Number 2</string>
   </property>
  </widget>
  <widget class="QPushButton" name="pushButton_hello" >
   <property name="geometry" >
    <rect>
     <x>10</x>
     <y>140</y>
     <width>91</width>
     <height>24</height>
    </rect>
   </property>
   <property name="text" >
    <string>Output Hello</string>
   </property>
  </widget>
  <widget class="QPushButton" name="pushButton_add" >
   <property name="geometry" >
    <rect>
     <x>10</x>
     <y>70</y>
     <width>121</width>
     <height>24</height>
    </rect>
   </property>
   <property name="text" >
    <string>Add numbers</string>
   </property>
  </widget>
  <widget class="QSpinBox" name="spinBox2" >
   <property name="geometry" >
    <rect>
     <x>70</x>
     <y>40</y>
     <width>46</width>
     <height>22</height>
    </rect>
   </property>
  </widget>
  <widget class="QSpinBox" name="spinBox1" >
   <property name="geometry" >
    <rect>
     <x>70</x>
     <y>10</y>
     <width>46</width>
     <height>22</height>
    </rect>
   </property>
  </widget>
  <widget class="QComboBox" name="comboBox" >
   <property name="geometry" >
    <rect>
     <x>10</x>
     <y>110</y>
     <width>161</width>
     <height>22</height>
    </rect>
   </property>
   <item>
    <property name="text" >
     <string>Hello World English</string>
    </property>
   </item>
   <item>
    <property name="text" >
     <string>Hola Mundo Spanish</string>
    </property>
   </item>
   <item>
    <property name="text" >
     <string>Hallo Welt German</string>
    </property>
   </item>
   <item>
    <property name="text" >
     <string>Bonjour tout le monde French</string>
    </property>
   </item>
   <item>
    <property name="text" >
     <string>Привет мир Russian</string>
    </property>
   </item>
   <item>
    <property name="text" >
     <string>Olá Mundo Portuguese</string>
    </property>
   </item>
   <item>
    <property name="text" >
     <string>世界您好 Chinese</string>
    </property>
   </item>
  </widget>
  <widget class="QTextEdit" name="textEdit_answer" >
   <property name="geometry" >
    <rect>
     <x>120</x>
     <y>40</y>
     <width>51</width>
     <height>21</height>
    </rect>
   </property>
   <property name="minimumSize" >
    <size>
     <width>51</width>
     <height>21</height>
    </size>
   </property>
  </widget>
  <widget class="QLabel" name="label_3" >
   <property name="geometry" >
    <rect>
     <x>120</x>
     <y>10</y>
     <width>71</width>
     <height>16</height>
    </rect>
   </property>
   <property name="minimumSize" >
    <size>
     <width>46</width>
     <height>14</height>
    </size>
   </property>
   <property name="text" >
    <string>Answer</string>
   </property>
  </widget>
  <widget class="QTextEdit" name="textEdit_message" >
   <property name="geometry" >
    <rect>
     <x>10</x>
     <y>180</y>
     <width>201</width>
     <height>51</height>
    </rect>
   </property>
  </widget>
  <widget class="QPushButton" name="pushButton_exit" >
   <property name="geometry" >
    <rect>
     <x>90</x>
     <y>260</y>
     <width>75</width>
     <height>23</height>
    </rect>
   </property>
   <property name="text" >
    <string>Exit</string>
   </property>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

Download

• Download the working example from this link: qtSymApp.zip

Other Articles

• Multi Lingual Hello World using Carbide 2.0

Summary

This example and tutorial has built on cross platform Qt skills using QtDesigner and the another article shows how to move to S60 IDE Carbide 2.0.