Qt-Quick-/QML-Tutorial

pbouda am 11. Jan 14:01

Nach dem ganzen (natürlich berechtigtem) Genöhle in Richtung Nokia hier in letzter Zeit soll natürlich die Hauptsache dieses Blogs nicht aus den Augen verloren werden: Qt-Programmierung! Spaß macht's ja trotzdem, und vielleicht kann man es ja doch mal wieder brauchen, hehe. Deswegen habe ich mich mal an Qt Quick und QML-Programmierung gewagt, und für euch gleich ein kleines Tutorial dazu erstellt:

Einführung in Qt Quick und QML: Hallo RSS!

Meine erstes Fazit: QML macht auf Anhieb erst einmal Spaß. Man hat viele Freiheiten und kann Anwendungen endlich mal ohne Einschränkung so gestalten, wie man sich das vorstellt. Bald stellt sich aber auch Frust ein: um das tatsächlich genau so hinzubekommen, ist schon viel Fummelei nötig, und die vorhandene Dokumenation hilft einem nur begrenzt weiter, vor allem wenn es ans Eingemachte geht. Ich habe im Tutorial auch auf das Qt-Components-Projekt hingewiesen, das vielleicht Abhilfe schafft. Wenn man sich die Komponenten aber genau anschaut, dann sieht das alles noch nicht besonders schick aus, und irgendwas Spannendes und Neues ist da auch nicht in Sichtweite. Mal wieder: Abwarten...

Artikel und Kommentare

Tutorial zur App-Entwicklung mit dem Nokia Qt SDK - Teil 2

pbouda am 30. Sep 17:05

Soeben ist er online gegangen, der zweite Teil des Tutorials zur App-Entwicklung mit Qt. Und wie das letzte Mal auch parallel auf meego.de sowie hier im Wiki. Dieses Mal wird das mit MADDE erstellte Grundgerüst erweitert, so dass man eine allgemeine Grundlage für Maemo- und Symbian-Anwendungen erhält. Viel Spaß damit!

Artikel und Kommentare

Tutorial zur App-Entwicklung mit dem Nokia Qt SDK

pbouda am 14. Sep 16:01

Ich habe heute einen neuen Wiki-Artikel online gestellt, der sich mit der App-Entwicklung mit dem Nokia Qt SDK beschäftigt. Das Tutorial ist in diesem Fall eine Art Fortsetzungsgeschichte, die auch auf meego.de veröffentlicht wird. Das Tutorial wird anhand einer Beispielanwendung zeigen, wie man eine Qt-App für Maemo und Symbian erstellt, die sich ohne großen Aufwand unter beiden Betriebssystemen nutzen lässt. Vielleicht kommt sogar noch MeeGo als Betriebssystem hinzu, mal sehen... Für Fragen und Anregungen stehe gern hier im Forum oder auch im meego.de-Forum zur Verfügung.

Ich habe außerdem hier mal versucht kurz zusammenzufassen, wie man denn nun als Einsteiger in die mobile Qt-Programmierung am Besten vorgeht. Das Wiki war bisher ja etwas durcheinander, dieser Artikel bietet hoffentlich einen guten Ansatzpunkt für Anfänger.

Artikel und Kommentare

Neues Tutorial: Qt auf dem Dingoo A320

pbouda am 20. Apr 12:08

Ich hatte hier ja schon erwähnt, dass ich die Anschaffung eines Dingoo A320 in Betracht ziehe; nun ist es mir sogar gelungen Qt und das Asteroids-Demo des Qt-Pakets für das Gerät zu kompilieren. Für den Dingoo hat der Hersteller eine GCC Toolchain veröffentlicht, und mit dieser wurde schnell ein Linux-Kernel für das Gerät erstellt. Und darauf wiederum können nun Qt-Anwendungen laufen. Das ganze basiert auf Qt Embedded, der Qt-Variante für X-Server-lose Unix- und Linux-basierte-Betriebssysteme. Und hier geht's auch schon zum Tutorial:

Qt und Asteroids-Demo für Dingux auf dem Dingoo A320

Ein kleines Video habe ich auch noch gemacht, genießt hier also Asteroids auf dem Dingoo, gespielt in der einhändigen Variante ;-):

Artikel und Kommentare

Neues Tutorial: Daten des Accelerometer-Sensors mit einem OpenGL-Objekt verknüpfen

pbouda am 05. Apr 20:24

Soeben ist ein neues Tutorial online gegangen, dieses mal geht es ans Eingemachte: Wie man Daten des Accelerometer-Sensors mit einem OpenGL-Objekt verknüpft.

Das Ganze zeige ich anhand einer kleinen Beispielanwendung, die ein Qt-Logo rotieren lässt, wenn man das N900 in verschiedene Richtungen neigt. Schöner Effekt, hier ein Video:

Den Code der kompletten Anwendung gibt's natürlich im Tutorial. Viel Spaß damit!

Artikel und Kommentare

Neues Tutorial: Ein Icon für den Programmmanager

pbouda am 02. Apr 11:37

Soeben ist ein neues Tutorial online, das euch zeigt, wie ihr eurem debian-Paket ein Icon für den Programmmanager hinzufügt. Diese Icons werden neben eurer Anwendung auf dem N900 angezeigt, wenn ihr die Anwendung in eines der offiziellen Repositories gestellt habt. Die komplette Vorgehensweise ist hier nachzulesen.

Artikel und Kommentare

Neues Tutorial: Wie man ein Python- oder PySide-Projekt für Maemo erstellt

pbouda am 23. Mär 19:39

Ab sofort ist das erste Python-Tutorial zur Anwendungsentwickung für Maemo und das N900 auf mobileqt.de online:

Wie man ein Python- oder PySide-Projekt für Maemo erstellt

Am Beispiel einer kleinen PySide-Anwendung wird gezeigt, wie ihr eure Python-Anwendungen aufbauen und verpacken müsst, damit sie auf dem N900 installiert werden können. Für alle, die nicht in die Untiefen der Qt/C++-Programmierung einsteigen wollen ist Python eine leichte und schnelle Alternative. Die Hautpdatei der Beispielanwendung habe ich übrigens komplett mit dem PyGTKEditor auf dem N900 entwickelt.

Artikel und Kommentare

Neues Tutorial: Wie man mit MADDE ein Qt-Projekt für Maemo erstellt

pbouda am 15. Mär 11:02

Nachdem das Tutorial zur Qt-Entwicklung ja nun schon eine Weile online ist folgt nun die MADDE-Variante zur mobilen Qt-Entwicklung. Das Tutorial zeigt euch schrittweise, wie ihr mit MADDE euer Projekt anlegt, durch eine Integration mit dem Qt Creator die Anwendung entwicklerfreundlich weiter entwickelt und abschließend ein Debian-Paket für die Installation erstellt. Qt-Anwendungen fürs N900 waren noch nie so einfach. :-)

Artikel und Kommentare

Neues Tutorial: MADDE und Qt Creator

pbouda am 10. Mär 16:14

Ich habe eben ein neues Tutorial online gestellt: Wie man unter Linux MADDE mit dem Qt Creator integriert. Bisher gibt es ja nur vorläufige Versionen von MADDE, früher oder später wird MADDE aber Scratchbox als offizielle Methode zur Anwendungsentwicklung ablösen. Bei meinen Versuchen ist mir aufgefallen, dass die Qt Mobility-API noch nicht in MADDE vorhanden ist; da bin ich mal gespannt, wann das kommt. Im Moment spiele ich viel mit diesen Schnittstellen herum, da wäre eine MADDE-Variante fein.

Artikel und Kommentare

Tutorial: Wie man ein Qt-Projekt für Maemo erstellt (Teil 2)

pbouda am 05. Mär 17:05

Hier also nun der zweite Teil des Tutorials über das erstellen eines Qt-Projekts für Maemo. Für alle, die neu dabei sind: hier geht's zum ersten Teil. Dort werden die ersten vier Schritte beschrieben.

Im fünften Schritt bereiten wir das Projekt für die Debian-Paketierung vor. Dazu könnt ihr den Qt Creator wieder schließen. Der Debian-Paketierer braucht etwa zwei Hände voll Dateien, die das Paket beschreiben. Diese Datein müssen in dem im ersten Schritt erstellte "debian"-Ordner liegen. Um euch die Sache zu vereinfachen habe ich euch diese Dateien als Beispiel in ein Archiv gepackt:

Debian-Dateien für das mobileqt-Projekt

Die Dateien müsst ihr also aus dem Archiv in den "debian"-Ordner entpacken. Folgende Dateien müssen für jedes Projekt angepasst werden:

• changelog: Hier könnt ihr zunächst einmal euren Projektnamen eintragen. Für spätere Versionen muss das changelog jeweils erweitert werden, und zwar über den Befehl "debchange". Genaueres dazu gibt es hier.
• control: Hier muss zunächst Projektname und -beschreibung angepasst werden. In der Zeile "Maintainer:" sollte euer Name und E-Mail-Adresse stehen. Wichtig sind die Felder mit den Präfixen "XSBC-" bzw. "XB-". Um euer Paket später in das maemo-Repository zu bekommen (zur Installation über den Programmmanager), solltet ihr einen "XSBC-Bugtracker:" angeben. Die einfachste Möglichkeit ist eine Anmeldung eurer Anwendung bei "bugs.maemo.org", so wie es hier beschrieben ist. Anschliessend könnt ihr den Anwendungsnamen in die Beispiel-control-Datei in den "product="-Parameter eintragen. Die Felder "XB-Maemo-Icon-26:" und "XSBC-Maemo-Display-Name:" geben ein Icon und einen Namen für den Programmmanager auf dem N900 an. Wenn ihr diese Felder leer lasst, dann wird kein Icon verwendet und es erscheint der Name, wie er in der "Package:" Zeile steht. Das Icon muss die Größe 48x48 haben. Wie ihr den Icon-Code für die "control"-Datei erstellt, könnt ihr hier nachlesen. Wenn ihr kein Icon braucht dann könnt ihr das entsprechende Feld einfach aus "control" entfernen. Dieses Icon ist wie gesagt nur für den Programmmanager. Das Anwendungsicon für den Desktop haben wir im vierten Schritt abgehandelt.
• copyright: Hier müsst hier halt euren Namen und die entsprechenden Copyright-Informationen eintragen.
• files: In dieser Datei den Projektnamen ändern, bei späteren, neuen Versionen eurer Anwendung auch die Versionsnummer.

Das war es dann auch schon für die Vorbereitung der Paketierung. Eine genauere Beschreibung der einzelnen Dateien findet ihr beispielsweise hier.

Nun müsst ihr für den sechsten Schritt den gesamten Verzeichnisbaum in die virtuelle Maschine des SDKs kopieren. Also den VMWare Player anwerfen, warten bis das SDK gebootet wurde, dann das Projekt komplett in die Maschine kopieren; das sollte per Copy&Paste funktionieren, wenn ihr die "VMWare Tools" innerhalb der virtuellen Maschine installiert habt. Dort am Besten in den Pfad "/scratchbox/users/maemo/home/maemo", dann habt ihr aus Scratchbox gleich Zugriff darauf:



Anschließend startet ihr in der virtuellen Maschine ein Terminal. In diesem Terminal startet ihr Scratchbox mit dem Befehl "/scratchbox/login", in dieser Umgebung werden alle Maemo-Anwendungen kompiliert. Mit "sb-conf select FREMANTLE_ARMEL" wählt ihr innerhalb von Scratchbox das ARMEL-Target aus, so läuft die Anwendung dann später auf dem ARM-Prozessor des N900:

maemo@maemo-desktop:~$ /scratchbox/login 

Welcome to Scratchbox, the cross-compilation toolkit!

Use 'sb-menu' to change your compilation target.
See /scratchbox/doc/ for documentation.

[sbox-FREMANTLE_X86: ~] > sb-conf select FREMANTLE_ARMEL

Shell restarting...
[sbox-FREMANTLE_ARMEL: ~] >

Mit "cd mobileqt" ins Projektverzeichnis wechseln. Nun reicht ein einfaches "dpkg-buildpackage -rfakeroot" um das .deb-Paket zu erstellen:

[sbox-FREMANTLE_ARMEL: ~] > cd mobileqt/
[sbox-FREMANTLE_ARMEL: ~/mobileqt] > dpkg-buildpackage -rfakeroot  
dpkg-buildpackage: source package is mobileqt
dpkg-buildpackage: source version is 0.1-1
dpkg-buildpackage: source changed by Peter Bouda 
dpkg-buildpackage: host architecture armel
dpkg-buildpackage: source version without epoch 0.1-1
: Using Scratchbox tools to satisfy builddeps

... hier kommen viele Zeilen ...

dpkg-deb: ignoring 3 warnings about the control file(s)
 dpkg-genchanges
dpkg-genchanges: warning: unknown information field `Xb-Maemo-Icon-26' in input data in package's section of control info file
dpkg-genchanges: including full source code in upload
dpkg-buildpackage: full upload; Debian-native package (full source is included)

In dem Verzeichnis "über" dem Projektverzeichnis (im Beispiel: "/scratchbox/users/maemo/home/maemo") findet ihr jetzt u.a. eine Datei mit dem Namen "projektname_0.1-1_armel.deb". Glückwunsch: Dieses Paket kann sofort auf dem N900 installiert werden!

Im siebten Schritte installieren wir das Paket per "X Terminal" und dem "dpkg"-Kommandozeilentool auf das N900. Dazu muss der root-Zugang auf dem Gerät aktiviert sein, am einfachsten geht das per rootsh-Paket. Dann einfach die im sechsten Schritt erstellt .deb-Datei auf das Gerät kopieren (per USB, Bluetooth, SSH oder auf eine Speicherkarte). Ich kopiere die Datei meist per SSH nach "/home/user/MyDocs", dann findet man die Datei später auch einfach per Dateimanager (im Prinzip kann man das Paket auuh einfach per Klick im N900-Dateimanager installieren, für coole Hacker wie uns wäre das aber viel zu einfach). Auf dem Gerät das "X Terminal" starten und als erstes mit "sudo gainroot" zum Chef werden. Dann in das Verzeichnis wecheln, in dem die .deb-Datei liegt, und das Paket mit "dpkg -i projektname_0.1-1_armel.deb" installieren:

~ $ sudo gainroot
Root shell enabled

BusyBox v1.10.2 (Debian 3:1.10.2.legal-1osso26+0,5) built-in shell (ash)
Enter 'help' for a list of built-in commands.

/home/user # cd MyDocs
/home/user/MyDocs # dpkg -i mobileqt_0.1-1_armel.deb
(Reading database ... 25458 files and directories currently installed.)
Unpacking mobileqt (from mobileqt_0.1-1_armel.deb) ...
Setting up mobileqt (0.1-1) ...
/home/user/MyDocs #

Fertig! Jetzt könnt ihr die Anwendung über den Anwendungsbildschirm starten:





Wahnsinn: ein leeres Hauptfenster auf dem N900, selbst programmiert und installiert! Bald mehr dazu, wie ihr das Fenster nun mit Inhalten füllt. :-) Die Anwendung kann übrigens jederzeit per "dpkg -r projektname" im Terminal oder über den Programmmanager wieder vom Gerät entfernt werden.

Soweit also zum ersten Tutorial über die Qt-Entwicklung hier auf mobileqt.de. Ich hoffe die Schritte waren verständlich erklärt und ihr konntet alles bei euch zu Hause nachvollziehen. Falls nicht: als Alternative kommt demnächst wohl MADDE in Frage, womit sich die Einstiegshürde deutlich senken wird. Über jede Rückmeldung zu diesem Tutorial würde ich mich sehr freuen! Hier noch der komplette Download der Beispielanwendung:

Download der kompletten Beispielanwendung inklusive aller Dateien

Artikel und Kommentare

Tutorial: Wie man ein Qt-Projekt für Maemo erstellt (Teil 1)

pbouda am 04. Mär 15:53

Hier mal kurz und knapp, wie ihr möglichst schnell zu einem Qt-Projekt kommt, das ihr als Debian-Paket auf dem N900 installieren könnt: definitiv das kompakteste Tutorial, das es zu diesem Thema gibt. Als Voraussetzung müsst ihr zunächst einmal den Qt Creator installieren, außerdem sollte ihr das offizielle Maemo-SDK als virtuelles Image installiert und startklar haben (ihr braucht die Desktop-Version des SDKs, also die Datei "Maemo_Ubuntu_Intrepid_Desktop_SDK_Virtual_Image_Final.7z"). Das SDK ist ein virtuelles Image, ihr startet das Entwicklungsbetriebssystem am Besten mit dem VMWare Player. Der Qt Creator-Download beinhaltet im Übrigen alle nötigen Bibliotheken, das Qt-SDK müsst ihr also nicht separat installieren.

Ich werde das Tutorial in zwei Teilen veröffentlichen, der erste Teil beschäftigt sich mit der Erstellung des Qt-Projekts, der zweite dann mit der Paketerstellung für das N900.

Als erstes erstellt ihr in eurem Projektordner drei Unterordner: "src" (für den ganzen Quellcode), "debian" (für die Debian-Daten) und "data" (für Icons usw.):

Als zweites legt ihr das Projekt mit dem Qt Creator an. Dieser wird also gestartet und dann über "Datei->Neu" ein neues Projekt angelegt. Im ersten Dialog wählt ihr als Projekttyp "Qt4-Gui-Anwendung":



Im zweiten Dialog gebt ihr den Projektnamen ein und wählt das oben erstellte "src"-Verzeichnis als "Erzeugen in:"-Pfad:



Die folgenden beiden Dialoge für die zu integrierenden Module und den Klassennamen für das Hauptfenster könnt ihr bei den vorgegebenen Einstellungen belassen. Am Schlusss auf "Abschließen" klicken, und Qt Creator erstellt euch alle nötigen Projektdateien. Blöderweise macht er das aber in einem "Projektname"-Unterordner in "src". Alle Dateien sollen aber direkt im Verzeichnis "src" liegen. Also schließt ihr den Qt Creator erst einmal wieder, und kopiert alle Dateien aus dem "Projektname"-Unterordner direkt nach "src". Der "Projektname"-Unterordner kann dann gelöscht werden. Bei dieser Gelegenheit nennt ihr die "Projektname.pro"-Datei um nach "src.pro". Nach diesem Schritt sollte euer Projektbaum so ausschauen:

Als dritten Schritt erstellt ihr in eurem Haupt-Projektordner (im Beispiel der Ordner "mobileqt") eine Datei mit dem Namen "projektname.pro" (klein geschrieben; im Beispiel "mobileqt.pro"). Diese Datei füllt ihr mit folgendem Inhalt, am Besten mit einem einfache Texteditor wie "gedit" o.ä.:

QMAKEVERSION = $$[QMAKE_VERSION]
ISQT4 = $$find(QMAKEVERSION, ^[2-9])
isEmpty( ISQT4 ) {
error("Use the qmake include with Qt4.4 or greater, on Debian that is qmake-qt4");
}

TEMPLATE = subdirs
SUBDIRS  = src

Diese Datei könnt ihr jetzt wieder mit dem Qt Creator öffnen, ein Doppelklick auf "projektname.pro" sollte das bewerkstelligen.

Im vierten Schritt sollte euer Qt Creator zunächst folgendermaßen ausschauen:



Mit dem Play-Button unten links könnt ihr das Projekt starten, es sollte ein leeres Hauptfenster erscheinen. Für den Anfang reicht uns das, wir werden das Fenster in anderen Tutorials mit Inhalt und Menü versehen. Um das Programm später auf dem N900 installieren zu können muss jetzt die "src.pro" angepasst werden. Mit einem beherzten Doppelklick auf den entsprechenden Eintrag unter "projektname->src->scr.pro" im Qt Creator öffnet ihr die Datei zum Editieren und fügt folgenden Code hinzu:

unix {
    #VARIABLES
    isEmpty(PREFIX) {
        PREFIX = /usr/local
    }

    BINDIR = $$PREFIX/bin
    DATADIR =$$PREFIX/share

    DEFINES += DATADIR=\"$$DATADIR\" PKGDATADIR=\"$$PKGDATADIR\"

    #MAKE INSTALL

    INSTALLS += target desktop scalable

    target.path =$$BINDIR

    desktop.path = $$DATADIR/applications/hildon
    desktop.files += ../data/$${TARGET}.desktop

    scalable.path = $$DATADIR/icons/hicolor/scalable/hildon
    scalable.files += ../data/scalable/$${TARGET}.png

}

Diese Anweisungen werden später, nach Erstellung des Debian-Pakets, das kompilierte Programm, eine Desktop-Datei und ein Icon auf das Gerät installieren. Dazu müsst ihr noch im "data"-Verzeichnis eine Datei "projektname.desktop" erstellen, die in etwa folgenden Inhalt haben sollte:

[Desktop Entry]
Encoding=UTF-8
Version=0.1
Type=Application
Name=mobileqt
Exec=mobileqt
Icon=mobileqt
X-HildonDesk-ShowInToolbar=true
X-Osso-Type=application/x-executable

Unter "data/scalable" legt ihr das Icon für die Anwendung als .png- oder .jpg-Datei ab, die Größe sollte 64x64 Pixel betragen. Am Ende dieses ersten Teils des Tutorials solltet ihr dann folgende Projektstruktur vor euch haben:

Dieses war der erste Teil des Tutorials. Im zweiten Teil werden wir die Anwendung für die Debian-Paketierung vorbereiten, das Ganze dann in Scratchbox (auf dem virtuellen Image) kompilieren und packen und anschließend auf das N900 installieren.

Hier geht's direkt zum zweiten Teil des Tutorials

Artikel und Kommentare