Editing QML

Warning: You are not logged in. Your IP address will be recorded in this page's edit history.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.

Learn more about Contributing to the wiki.

[[Category:Qt]]
[[Category:Development]]
== QML on N900 ==

=== Introduction ===
QML is the latest experimental feature based on Qt 4.6. If you don't know QML yet, probably you would like to look at demo [http://labs.trolltech.com/blogs/2009/11/04/qt-declarative-binaries/ here].

It's a Javascript like language and allow you to build your own application rapidly. And yes, you don't need to really care about your development platform too much. All you need to do is using QmlViewer to examine your code. That's pretty much the same when you run on the device (though might be slightly different because of resolution and performance. And note that currently it's still highly experimental!)

== QtScript ==
[http://doc.trolltech.com/4.6/qtscript.html Qt Script 4.6]

[http://qt.linux-life.net/4/doc/ja/porting-qsa.html Tutorial on Qt Scripting]

=== Binary Package ===
Binary package is available on [[Extras-devel|extras-devel]] now:
* libqt4-maemo5-declarative: The QtDeclarative library
* libqt4-maemo5-declarative-dev: The development package, contains the headers for QtDeclarative
* libqt4-maemo5-declarative-dbg: The debugging symbols, for more meaningful backtraces
* qt4-maemo5-declarative-qmlviewer: The “player” for QML based apps
* qt4-maemo5-samegame: The SameGame demo

To install qt4-maemo5-samegame example, simple type the command within your console with root permission:
<code>apt-get install qt4-maemo5-samegame</code>

=== Building Qt 4.6 with QML ===
To build Qt with QML support on N900, you need a 32-bit Linux box (better choice is Ubuntu, I am using Karmic, but you can use other versions as well).

I assumed you already have Maemo SDK running (also Nokia closed binary with SGX). Now it's time to download [http://qt.gitorious.org/+qt-kinetic-developers/qt/kinetic/commits/kinetic-declarativeui Qt-declarative UI branch].

Once you unpack it within your scratchbox, say ''~/qt-kinetic'', create a build directory anywhere you like, e.g.: ''~/qt-build'', then do the following within scratchbox:

# Execute <code> export PKG_CONFIG_PATH=/usr/lib/pkgconfig; export PKG_CONFIG_SYSROOT=/ </code>
# Edit ''~/qt-kinetic/mkspecs/common/g++.conf'', and remove <code> -fvisibility=hidden -fvisibility-inlines-hidden</code>, otherwise qemu would crash during compiling.
# Configure Qt with <code>~/qt-kinetic/configure -platform linux-g++ -release -opengl es -webkit -force-pkg-config --prefix=/opt/qt</code>
# <code>make</code>
# <code>make install</code>

It will take a whole day to compile this sexy devil. Make sure you have brewed the coffee. In case of running into linking problem (or you have trouble to pass EGL test), please try <code>export SUBLIBS='-lX11 -lXau -lEGL -lGLESv2 ...'</code>, throwing whatever GCC complains what's missing (I left my laptop in the office, forgive me I am typing this in my plain memory).

Now, you should have the Qt 4.6 DUI binary sitting in your scratchbox. You can either copy those binaries under ''/opt/qt'' to your device or mount it as NFS.

=== Test Run on Device ===
On this stage, you should be able to write your first QML application.

<code><pre><nowiki>
#include <QtGui/QApplication>
#include <QmlView>
#include <QUrl>
#include <QGLWidget>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

QmlView *canvas = new QmlView;
    QGLFormat format = QGLFormat::defaultFormat();
    format.setSampleBuffers(false);
    QGLWidget *glWidget = new QGLWidget(format); // make QmlView use OpenGL ES2 backend.
    glWidget->setAutoFillBackground(false);
    canvas->setViewport(glWidget);
    canvas->setUrl(QUrl::fromLocalFile("/home/user/demos/declarative/flickr/flickr-desktop.qml")); // wherever your qml file is.
    canvas->execute();
    canvas->show();

return a.exec();
}</nowiki></pre></code>

Then you will see the program running as same as this [http://labs.trolltech.com/blogs/2009/05/13/qt-declarative-ui/ demo].

Some screenshots running on N900:

[[Image:Screenshot1.png|400px]]
[[Image:Screenshot2.png|400px]]
[[Image:Screenshot3.png|400px]]

=== Conclusion ===

Finally, here are some few notices / limitation of current Qt4.6-QML:
* Performance is not that great yet. You may suffer some tearing issues. Write your Qt app in full screen mode will give you some boost. Another alternative is turning off hildon-desktop (gives you 40-50 fps on the device):
 $ dsmetool -k /usr/bin/hildon-desktop
To turn back on:
 $ dsmetool -t /usr/bin/hildon-desktop
* On PR1.1 and onwards all fullscreen applications are automatically non-composited, so no trickery like the above is needed on N900 once that drops to end users devices. 
* Document is bundle inside the source tree. Execute the following command will generate proper document for you:
 $ make docs
* <code>-webkit</code> may crash your qmlviewer under N900 if you wish to try. That's why I wrote the code with QmlView binding. If you want to play with qmlviewer, please remove <code>-webkit</code> from your configuration.
* All credits go to Qt team. Thanks for their help on technical support. If you have any questions / comments, please don't hesitate to visit [http://labs.trolltech.com/page/Projects/Graphics/Kinetic QML Team] and give response.
* Happy hacking!

=== External Link ===
* [http://labs.trolltech.com/blogs/2009/12/17/qt-declarative-for-maemo-5/ Qt Labs Blogs: Qt Declarative for Maemo 5]
* [http://labs.trolltech.com/forums/forum/14 Qt Declarative UI Team Forum]

Please note that all contributions to maemo.org wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see maemo.org wiki:Copyrights for details). Do not submit copyrighted work without permission!

Summary:

Cancel | Editing help (opens in new window)

Retrieved from "http://wiki.maemo.org/QML"

Personal tools

Navigation

Views

Editing QML

@@ Line 8: / Line 8: @@
 It's a Javascript like language and allow you to build your own application rapidly. And yes, you don't need to really care about your development platform too much. All you need to do is using QmlViewer to examine your code. That's pretty much the same when you run on the device (though might be slightly different because of resolution and performance. And note that currently it's still highly experimental!)
-A small example on QML use [[QML-EnhancedCalcExample]]
 == QtScript ==