×
Namespaces

Variants
Actions

Archived:Multi Language Hello World using QtDesign in Qt for Symbian

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (based on QWidget

This (archived) article provides a walkthrough of how to create QWidget based applications for mobile devices using Qt Creator/Qt Designer. ) is deprecated.

Note also that this is out of date in terms of SDK and describes ancient versions of Qt creator.

Article Metadata
Code Example
Source file: Media:qtSymApp.zip
Compatibility
Platform(s):
Symbian
Article
Created: jimgilmour1 (30 Dec 2008)
Last edited: hamishwillee (11 Oct 2012)
{{{width}}}
11 Jan
2009

There are many tutorials for Qt for Windows, Linux and Mac. On mobile devices the main restriction is screen size.

Contents

Installing Qt

Install the Qt SDK.

First Qt GUI application

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

QtS60AppForm.jpg

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 browser and go to Goggle 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. Select 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.ui -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

Other Articles

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.

This page was last modified on 11 October 2012, at 04:14.
108 page views in the last 30 days.