Meego Wiki
Views

SDK/Docs/1.1/Creating Hello World

From MeeGo wiki
< SDK | Docs | 1.1(Difference between revisions)
Jump to: navigation, search
(Configure the project ready for debugging)
(Creating a Hello World)
 
(31 intermediate revisions not shown)
Line 1: Line 1:
[[Category:meego-1.1]]
[[Category:meego-1.1]]
-
 
-
'''Note:''' This page is work-in-progress (26 Oct 2010).
 
This page explains how to create a Hello World application with Qt Creator and run it on a MeeGo device (real or emulated).
This page explains how to create a Hello World application with Qt Creator and run it on a MeeGo device (real or emulated).
 +
 +
'''Note that these instructions are applicable for both Linux and Windows versions of the SDK. However, the screenshots below are taken from the Linux SDK and contain Linux-style file and directory paths.'''
== Prerequisites ==
== Prerequisites ==
-
* You have [[SDK/Docs/1.1/Getting_started_with_the_MeeGo_SDK_for_Linux|set up MeeGo SDK environment on Linux]]
+
* You have set up MeeGo SDK environment for [[SDK/Docs/1.1/Getting_started_with_the_MeeGo_SDK_for_Linux|Linux]] or [[SDK/Docs/1.1/Getting_started_with_the_MeeGo_SDK_for_Windows|Windows]].
-
* You have installed the MeeGo image and configured the device access in Qt Creator.
+
== Creating a Hello World ==
== Creating a Hello World ==
Line 19: Line 18:
#: '''Note:''' Make sure that the path to the location does not contain spaces.
#: '''Note:''' Make sure that the path to the location does not contain spaces.
#: [[File:Qt Creator naming mobility project.png|frame|none|Naming your project]]
#: [[File:Qt Creator naming mobility project.png|frame|none|Naming your project]]
-
# Select MeeGo target and click '''Next'''.
+
# Select MeeGo target(s) and click '''Next'''.
-
#: [[File:Qt Creator selecting target mobility.png|frame|none|Selecting the MeeGo target]]
+
#: [[File:Qt Creator selecting targets mobility.png|frame|none|Selecting the MeeGo target(s)]]
 +
#: These targets are the same as the ones you set up when configuring Qt Creator to use MADDE targets. ([[SDK/Docs/1.1/Getting_started_with_the_MeeGo_SDK_for_Windows#Configuring_Qt_Creator_to_use_the_MeeGo_toolchain.28s.29|Windows instructions]], [[SDK/Docs/1.1/Getting_started_with_the_MeeGo_SDK_for_Linux#Configuring_Qt_Creator_to_use_the_MeeGo_toolchain.28s.29|Linux instructions]]). Which means that the target name in the screen shot should be "MeeGo netbook" if you are following Windows instructions.
# Name the files that will be automatically created for your project.
# Name the files that will be automatically created for your project.
#: [[File:Qt Creator naming classes mobility.png|frame|none|Naming classes for your project]]
#: [[File:Qt Creator naming classes mobility.png|frame|none|Naming classes for your project]]
Line 29: Line 29:
'''To create a Hello World application:'''
'''To create a Hello World application:'''
-
For more information on the Hello World created here, see [http://apidocs.meego.com/qtmobility/quickstart.html the Qt Mobility Quickstart Example].
+
For more information on the Hello World created here, see [http://apidocs.meego.com/1.0/qtmobility/quickstart.html the Qt Mobility Quickstart Example].
1. In Qt Creator, select '''Edit''' mode.
1. In Qt Creator, select '''Edit''' mode.
Line 46: Line 46:
     QApplication app(argc, argv);
     QApplication app(argc, argv);
     QSystemInfo s;
     QSystemInfo s;
-
     QLabel *label = new QLabel(QObject::tr("hello ").append(s.currentCountryCode()));
+
     QLabel label(QObject::tr("hello ").append(s.currentCountryCode()));
-
     label->show();
+
     label.show();
-
     label->resize(100,30);
+
     label.resize(100,30);
     return app.exec();
     return app.exec();
}
}
</pre>
</pre>
-
4. Replace the corresponding lines in your <code>.pro</code> file with the following System Information API declaration:
+
4. Add following System Information API declaration in your <code>.pro</code> file:
<pre>
<pre>
CONFIG += mobility
CONFIG += mobility
Line 64: Line 64:
Your application is now ready to be configured for building.
Your application is now ready to be configured for building.
-
 
-
'''To configure your Hello World for building:'''
 
-
# Switch to '''Projects''' mode.
 
-
# Click '''Build Settings'''.
 
-
# On '''Edit build configuration:''' line, select '''Add''' > '''Using Qt version "MeeGo sysroot"'''.
 
-
# Change '''Debug''' into '''MeeGo sysroot Release'''.
 
-
#: [[File:Qt Creator build settings mobility.png|frame|none|Configuring build settings in Qt Creator]]
 
-
#: Your Hello World is now ready to be configured for running in QEMU or your device.
 
== Packaging the Hello World ==
== Packaging the Hello World ==
Line 83: Line 75:
== Configuring device access in Qt Creator ==
== Configuring device access in Qt Creator ==
-
The process is slightly different, depending on whether you are deploying to a real device or an emulated one.
+
Configuring device access in Qt Creator is slightly different depending on whether you are deploying to a real device or an emulated one.
-
However, in both cases, the mode of access is the same: Qt Creator will deploy and install an RPM on the device, then run its executable.
+
However, the mode of access is the same: Qt Creator deploys and installs an .rpm package on the device, and runs the executable.
-
=== Configuring access to a real device ===
+
For instructions on configuring device access, see:
-
 
+
* [[SDK/Docs/1.1/Configuring_QEMU_runtimes#Configuring_access_to_an_emulated_device_in_Qt_Creator|QEMU image]]
-
[[File:Qt Creator configuring N900 device access usb.png|thumb|500px]]
+
* [[SDK/Docs/1.1/Setting_up_Netbook#Configuring_device_access_in_Qt_Creator|Netbook]]
-
To configure device access:
+
* [[SDK/Docs/1.1/Setting_up_N900_device#Configuring_device_access_in_Qt_Creator|N900]]
-
# Open '''Tools''' > '''Options''' > '''Projects''' > '''MeeGo Device Configurations'''.
+
-
# In the dialog box, create a new Device Configuration by clicking on '''Add'''.
+
-
# Give the new Device Configuration a name in the Configuration Name text field, and add the following settings in the other test fields:
+
-
#* Device type: choose Remote device
+
-
#* Authentication type: Password
+
-
#* Host name: <device IP address> (USB port IP address 192.168.2.15 by default)
+
-
#* Ports, SSH: 22
+
-
#* Ports, Gdb Server: 10000
+
-
#: '''Note:''' If this port is not free, you can select another one.
+
-
#* Connection Timeout: 30
+
-
#* User Name: root
+
-
#* Password: meego
+
-
# Click '''Apply'''.
+
-
# To test the settings, click '''Test'''.
+
-
#: If successful, you'll see a dialog box with the message "Device configuration successful".
+
-
#: If the message "Could not connect to host" is displayed, check your setting selections and make sure that the network is connected.
+
-
# Click '''Close''' and '''OK'''.
+
-
 
+
-
=== Configuring access to an emulated device ===
+
-
 
+
-
[[File:sdk-docs-QtCreator-configuring-emulator-access.png|thumb|500px]]
+
-
To configure access to an emulated device:
+
-
# Open '''Tools''' > '''Options''' > '''Projects''' > '''MeeGo Device Configurations'''.
+
-
# In the dialog box, create a new Device Configuration by clicking on '''Add'''.
+
-
# Give the new Device Configuration a name in the Configuration Name text field, and add the following settings in the other test fields:
+
-
#* Device type: choose MeeGo emulator
+
-
#* Authentication type: Password
+
-
#* Host name: 127.0.0.1
+
-
#* Ports, SSH: 6666
+
-
#*: Note that the emulator is setup with a redirect from port 6666 on localhost to the SSH port (22) of the emulated device.
+
-
#* Ports, Gdb Server: 13219 (the default)
+
-
#: '''Note:''' If this port is not free, you can select another one.
+
-
#* Connection Timeout: 30
+
-
#* User Name: root
+
-
#* Password: meego
+
-
# Click '''Apply'''.
+
-
# To test the settings, ensure that the emulated device is running, then click '''Test'''.
+
-
#: If successful, you'll see a dialog box with the message "Device configuration successful".
+
-
#: If the message "Could not connect to host" is displayed, check your setting selections and make sure that the network is connected.
+
-
# Click '''Close''' and '''OK'''.
+
== Running the Hello World ==
== Running the Hello World ==
To run your Hello World on your device:
To run your Hello World on your device:
-
# Switch to '''Projects''' mode.
+
# Switch to '''Projects''' mode [[File:Qt Creator Projects mode button.png]].
-
# Click '''Run Settings'''.
+
# On the target toolbar, select '''MeeGo''' > '''Run''' to configure Run settings.
# In '''Device configuration''' drop-down menu, select the device configuration you created when [[#Configuring device access in Qt Creator|configuring device access]].
# In '''Device configuration''' drop-down menu, select the device configuration you created when [[#Configuring device access in Qt Creator|configuring device access]].
#: [[File:Qt Creator run settings mobility.png|800px]]
#: [[File:Qt Creator run settings mobility.png|800px]]
Line 142: Line 94:
#: Your Hello World runs on your device.
#: Your Hello World runs on your device.
-
Here's an example of the application running on a netbook:
+
On a netbook image, the Hello World application runs as shown in the following screenshot:
[[File:sdk-docs-helloworld-on-netbook.png|800px]]
[[File:sdk-docs-helloworld-on-netbook.png|800px]]
-
== Debugging the project ==
+
== Debugging the Hello World ==
-
== Prerequisites ==
+
For more information on debugging, see [[SDK/Docs/1.1/Debugging_with_Qt_Creator|Debugging with Qt Creator]].
-
You will need '''gdb''' to be installed on the host before you can do any debugging with Qt Creator. On Linux, use the package manager to install it;  for example, on Fedora:
+
== Running the Hello World on n900 Meego Community Edition ==
-
sudo yum install gdb
+
As Meego Community Edition didn't provide theme to plain qt app, your app will look ugly on it. So install the meegotouch-qt-style.
 +
<pre>
 +
zypper refresh
 +
zypper install meegotouch-qt-style
 +
</pre>
-
=== Configure the Qt Creator project for debugging ===
+
As meegotouch-qt-style isn't stable enought to make it available for all qt apps, and made qmlviewer crash, we will desactivate for all apps by default. As none theme is setted in the preference, by default qt use meegotouch style.
-
First, ensure that debugging is enabled for the version of Qt in use:
+
Edit the file ~/.config/Trolltech.conf to add the following line at the beginning :
-
 
+
-
# Click on the ''Projects'' button in the left-hand panel.
+
-
# Under ''General'', click on the ''Manage'' button next to ''Qt Version''.
+
-
# Select the Qt version you are using: use the MeeGo Qt version for your particular target (in this case, '''MeeGo sysroot''').
+
-
# Click on the ''Rebuild'' button next to ''Debugging helpers'' (near the bottom of the dialog box). This builds the debugging helper for this version of Qt. You should see a green tick under the ''Debugging'' column for that Qt version.
+
-
 
+
-
=== Set a breakpoint ===
+
-
 
+
-
Next, you need something to debug. For example, add a ''Push Button'' to the form (defined in <code>mainwindow.ui</code>):
+
-
 
+
-
[[File:sdk-docs-QtCreator-form-with-push-button.png|800px]]
+
-
 
+
-
Then add a click handler for it, so that when the button is clicked, a message string is assigned into a variable then output to the console. The code looks like this:
+
<pre>
<pre>
-
/* file: Headers/mainwindow.h */
+
[Qt]
-
#ifndef MAINWINDOW_H
+
style=plastique
-
#define MAINWINDOW_H
+
</pre>
-
#include <QMainWindow>
+
And then to apply the meegotouch style to your app, you can launch via command line with the argument -style meegotouch or use :
-
 
+
-
namespace Ui {
+
-
    class MainWindow;
+
-
}
+
-
 
+
-
class MainWindow : public QMainWindow
+
-
{
+
-
    Q_OBJECT
+
-
 
+
-
public:
+
-
    explicit MainWindow(QWidget *parent = 0);
+
-
    ~MainWindow();
+
-
 
+
-
private:
+
-
    Ui::MainWindow *ui;
+
-
 
+
-
// our new handler
+
-
private slots:
+
-
    void on_pushButton_clicked();
+
-
};
+
-
 
+
-
#endif // MAINWINDOW_H
+
-
</pre>
+
<pre>
<pre>
-
/* file: Sources/mainwindow.cpp */
+
QApplication::setStyle("meegotouch")
-
#include "mainwindow.h"
+
-
#include "ui_mainwindow.h"
+
-
#include <QDebug>
+
-
#include <QString>
+
-
 
+
-
MainWindow::MainWindow(QWidget *parent) :
+
-
    QMainWindow(parent),
+
-
    ui(new Ui::MainWindow)
+
-
{
+
-
    ui->setupUi(this);
+
-
}
+
-
 
+
-
MainWindow::~MainWindow()
+
-
{
+
-
    delete ui;
+
-
}
+
-
 
+
-
void MainWindow::on_pushButton_clicked()
+
-
{
+
-
    QString message;
+
-
    message = "I have been well and truly clicked";
+
-
    qDebug() << message;
+
-
}
+
</pre>
</pre>
-
 
-
Most of this is boilerplate generated when I started the project, but the <code>MainWindow::on_pushButton_clicked</code> method is mine. Notice how it also needs to be defined as a private slot in the header file.
 
-
 
-
Add a breakpoint next to the line where you want the debugger to break by clicking in the editor margin. It looks like this:
 
-
 
-
[[File:sdk-docs-QtCreator-set-breakpoint.png|800px]]
 
-
 
-
(See the red circle on line 22 after <code>message</code> is initialized.)
 
-
 
-
To put Qt Creator into debug mode, click on ''Debug''/the bug icon in the left-hand toolbar. This adds some extra panels to the window which are used to show the stack, watch expressions etc.
 
-
 
-
Next, you need to change the configuration, so that Qt with debugging enabled is used to run the project.
 
-
 
-
# In the left-hand panel, click on ''Projects''.
 
-
# Under ''Build Settings'', select '''Debug''' from the drop-down box next to ''Edit build configuration''.
 
-
# From the ''Build'' menu, select ''Rebuild all''. This recompiles the project using the debug-enabled Qt.
 
-
 
-
=== Debug the application on the device ===
 
-
 
-
To run the application in debug mode, click on the green arrow with a bug overlaid on it (bottom left). This deploys the application to the remote device and starts it, [[#Running the Hello World|as above]]; however, it also enables you to debug the remote application inside Qt Creator.
 
-
 
-
Now, click on the ''Click me!'' button in the application running on the device. The program should pause at the breakpoint. Switch back to Qt Creator and look at the debug panels:
 
-
 
-
[[File:sdk-docs-QtCreator-paused-at-breakpoint.png|800px]]
 
-
 
-
The application should pause at the breakpoint; and in Qt Creator, the <code>message</code> variable should then be visible in the ''Locals and Watchers'' tab, set to "I have been well and truly clicked".
 
-
 
-
For more information about using Qt Creator in debug mode, see http://doc.qt.nokia.com/qtcreator-snapshot/creator-debugging.html.
 

Latest revision as of 12:35, 24 June 2011


This page explains how to create a Hello World application with Qt Creator and run it on a MeeGo device (real or emulated).

Note that these instructions are applicable for both Linux and Windows versions of the SDK. However, the screenshots below are taken from the Linux SDK and contain Linux-style file and directory paths.

Contents

Prerequisites

  • You have set up MeeGo SDK environment for Linux or Windows.

Creating a Hello World

To create a project:

  1. In Qt Creator, select File > New File or Project.
  2. Select Mobile Qt Application and click Choose....
    Creating your project
  3. Name your project, select where you want to save it, and click Next.
    Note: Make sure that the path to the location does not contain spaces.
    Naming your project
  4. Select MeeGo target(s) and click Next.
    Selecting the MeeGo target(s)
    These targets are the same as the ones you set up when configuring Qt Creator to use MADDE targets. (Windows instructions, Linux instructions). Which means that the target name in the screen shot should be "MeeGo netbook" if you are following Windows instructions.
  5. Name the files that will be automatically created for your project.
    Naming classes for your project
  6. If you want to add the project to version control, do so. Otherwise click Finish.
    Adding your project to version control
Your project has now been created.

To create a Hello World application:

For more information on the Hello World created here, see the Qt Mobility Quickstart Example.

1. In Qt Creator, select Edit mode.

2. To view your project files, open Forms, Headers, and Sources folders in Projects sidebar.

3. To create an application that uses the QSystemInfo headers to print out the system's current country code, replace the existing example code in your main.cpp file with the following example code:

#include <QApplication>
#include <QLabel>
#include <QSystemInfo>
using namespace QtMobility;

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QSystemInfo s;
    QLabel label(QObject::tr("hello ").append(s.currentCountryCode()));
    label.show();
    label.resize(100,30);
    return app.exec();
}

4. Add following System Information API declaration in your .pro file:

CONFIG += mobility
MOBILITY += systeminfo

Do not remove the existing code in the file.

5. In the File menu, select Save All.

Your application is now ready to be configured for building.

Packaging the Hello World

If you run your Hello World application, an .rpm package is created automatically.

If you want to create a package of your Hello World application without running it, click Build All or select Build > Build Project "<project name>".

Compile Output view shows the message "Package created." and an .rpm package file (<project name>-<project version>-<release version>.<device architecture>.rpm) has been created in the build-specific project subdirectory ("<project name>-build-meego").

Configuring device access in Qt Creator

Configuring device access in Qt Creator is slightly different depending on whether you are deploying to a real device or an emulated one.

However, the mode of access is the same: Qt Creator deploys and installs an .rpm package on the device, and runs the executable.

For instructions on configuring device access, see:

Running the Hello World

To run your Hello World on your device:

  1. Switch to Projects mode Qt Creator Projects mode button.png.
  2. On the target toolbar, select MeeGo > Run to configure Run settings.
  3. In Device configuration drop-down menu, select the device configuration you created when configuring device access.
    Qt Creator run settings mobility.png
  4. Click Run.
    Your Hello World runs on your device.

On a netbook image, the Hello World application runs as shown in the following screenshot:

Sdk-docs-helloworld-on-netbook.png

Debugging the Hello World

For more information on debugging, see Debugging with Qt Creator.

Running the Hello World on n900 Meego Community Edition

As Meego Community Edition didn't provide theme to plain qt app, your app will look ugly on it. So install the meegotouch-qt-style.

zypper refresh
zypper install meegotouch-qt-style

As meegotouch-qt-style isn't stable enought to make it available for all qt apps, and made qmlviewer crash, we will desactivate for all apps by default. As none theme is setted in the preference, by default qt use meegotouch style.

Edit the file ~/.config/Trolltech.conf to add the following line at the beginning :

[Qt]
style=plastique

And then to apply the meegotouch style to your app, you can launch via command line with the argument -style meegotouch or use :

QApplication::setStyle("meegotouch")
Personal tools