Qt/QML을 iOS (iPhone/iPad) 상에서 구동시키는 법 (QML-ui based)

Qt/QML 를 iOS 상에서 구동시키는 방법

무엇보다도 먼저 이 글은 Eike Ziller의 Qt Labs Developer Blogs 의 글을 기반으로 쓰여 졌으며 그의 Original글은 (http://labs.qt.nokia.com/2011/08/09/update-on-uikit-lighthouse-platform/)을 통해 확인 할 수 있음을 알린다.

이 글의 목적은 원본 글에서 나타나는 바와 같이 pre-Qt 4.8 이나 pre-Qt 5 에서 제공된 UIKit plugin의 기능을 사용하여 QML/Qt가 iOS device에 동작 혹은 Qt application 사용 가능함을 보여주는 데 있을 뿐이지, 현재 Qt가 공식적으로 iOS를 사용하는 device들을 지원함을 의미하지 않습니다. 특히 아래글은 iOS Device에서 QML-based GUI 를 사용하는 방법에 대해서 기술하고 있습니다.
그리고 현재 cocoa (Mac support) plugin이 아닌 UIKit (iOS support) plugin은 모든 Qt class들의 성능을 보장하지 않습니다.

20011년 9월말 현재 Qt/QML 을 iOS 상에서 구동시킬 수 있는 방법은 다음과 같다고 알려져 있습니다.
1) Qt-iPhone Project
http://www.qt-iphone.com
2-1) Qt 4.8 lighthouse (QPA open source)
https://qt.gitorious.org/qt
2-2) Qt 4.8 lighthouse (QPA close source)
3) Qt 5.0
https://qt.gitorious.org/qt/qt5

각 Plugin의 장단점과 제약 사항에 대해서는 이글의 범위에 벗어 나므로, 기회가 있을 때 다른 블로그 글을 통해 소개 드리도록 하겠습니다.
제가 이 글을 통해 여러분에게 소개하려는 case는 2-1 Qt 4.8 lighthouse open source를 통한 방법입니다.
그리고 위에 상태에 대한 원본글은 다음과 같습니다. 참조 바랍니다.

There is general work being done in Qt 4.8 to ensure that it is iOS-compatible when it is released. There are two plugins being developed for Qt on iOS, but only one of them is currently open source. The open source plugin (aka. proof-of-concept UIKit plugin) was developed at Nokia, is (currently) part of Qt 4.8 and was discussed in a QtLabs blog post (in February?). That plugin however is only able to run simple QML apps and does not support more advanced features like auto-rotation, multi-touch, OpenGL, retina displays & widgets.
The other plugin (aka. Qt iOS plugin) is currently closed source, supports full Qt GUI with widgets, multi-touch, multi-threaded OpenGL, shader effects, Qt3D, Qt Scenegraph & parts of Qt Mobility. This is the plugin that was used to make some YouTube demo videos (in Oct/Nov last year) & was shown on the iPad at QtCS.
The Qt iOS plugin is currently being used to produce a trial-run application for submission to the Apple App Store, and more information etc. about that plugin will be made available once it has passed the App Store trial-run and can be considered for commercial application development.
PS. The qt-iphone project is unrelated to these efforts and will most likely never be able to be used to run QML on iOS (if it is in fact still being developed). The purpose of that project is to be able to use Qt to write native UIKit applications. The purpose of Lighthouse (and the iOS plugins for it) is to be able to build and run standard Qt applications on iOS.


준비 해야 할 사항
1) Mac OS X machine ( Lion 혹은 Snow Leopard )
2) XCode 설치 http://developer.apple.com/technologies/tools/
만일 OS 텐 라이언을 사용하고 계시다면 XCode 4, OS 텐 스노우 레오퍼드를 사용하고 계시다면 XCode 3를
설치하셔야 합니다.이후 설명은 Mac OS X Lion + XCode 4를 사용하고 계시는 것을 기준으로 설명드립니다.
3) Qt SDK 설치 (optional) http://qt.nokia.com/downloads/
Repository에 존재하는 example이 아닌 Qt module을 만들거나 Template들을 가져오고자 할때 쓰입니다.
4) MacPorts 설치 (optional) http://www.macports.org/
Gitorious를 사용하기 위해 필요합니다. dmg 파일을 다운로드 받아 사용하시면 편합니다.

Qt 4.8 가져오기
Gitorious Tool은 아무 것이나 사용하셔도 됩니다.
Qt repository를 Cloning 해 줍니다.
# git clone git://gitorious.org/qt/qt.git qt
(Qt의 전체 소스를 가져오기 때문에 시간이 조금 걸립니다)
# cd qt
원격 레포지토리를 로컬 레포지토리로 추가
# git remote add qt git://gitorious.org/qt/qt.git
# git fetch qt
# git checkout -b my-local-Qt4.8 qt/4.8
위와 같이 하면 4.8의 소스 코드가 다운로드 됩니다.
자신의 branch를 확인해 보고 싶으시다면
# git branch -a
와 같이 해보면 됩니다. 정상적으로 되었다면 *my-local-Qt4.8 과 같이 본인이 만든 branch 이름 앞에 (*)표시가 되어 있습니다.

Qt의 shadow build
일반적인 경우는 normal build를 해도 관계없지만 iOS용으로 Qt를 compile 하실 경우에는 shadow build를 추천드립니다.
왜냐하면 xcode에서 device용과 simulator용을 구분하기 때문에 한 디렉터리에서 device용과 simulator용을 번갈아가며 컴파일하게 되면 어려운 점이 발생할 수 있습니다. 저의 경우를 예를 들자면 다음과 같이 디렉터리를 구성하였습니다.

drwxr-xr-x 21 HoTaeWang staff 714 10 6 14:16 Qt-BuildiOS-device/
drwxr-xr-x 21 HoTaeWang staff 714 10 6 14:33 Qt-BuildiOS-simulator/
drwxr-xr-x 36 HoTaeWang staff 1224 10 6 14:27 qt/


Configure 파일 만들기
Qt-BuildiOS-device 폴더에는 다음과 같은 Qt-iOS-device.sh 셀스크립트를 만들었습니다.

#!/bin/sh

../qt/configure -qpa -xplatform qpa/macx-iphonedevice-g++ -arch armv7 -no-neon -developer-build -release -opengl es2 -no-accessibility -no-qt3support -no-multimedia -no-phonon-backend -no-webkit -no-scripttools -no-openssl -no-sql-mysql -no-sql-odbc -no-cups -no-iconv -no-dbus -static -nomake tools -nomake demos -nomake docs -nomake examples -nomake translations

해당 셀스크립트 실행
# . ./Qt-iOS-device.sh
# make -j4
-j(n) option은 자신의 CPU의 성능에 따라 선택할 것

UIKit plugin compile 하기
# cd src/plugins/platforms/uikit
# make


Qt-BuildiOS-simulator 폴더에는 다음과 같은 Qt-iOS-simulator.sh 셀스크립트를 만들었습니다.

#!/bin/sh

../qt/configure -qpa -xplatform qpa/macx-iphonesimulator-g++ -arch i386 -developer-build -release -opengl es2 -no-accessibility -no-qt3support -no-multimedia -no-phonon-backend -no-webkit -no-scripttools -no-openssl -no-sql-mysql -no-sql-odbc -no-cups -no-iconv -no-dbus -static -nomake tools -nomake demos -nomake docs -nomake examples -nomake translations

해당 셀스크립트 실행
# . ./Qt-iOS-simulator.sh
# make -j4
-j(n) option은 자신의 CPU 성능에 따라 선택할 것

UIKit plugin compile 하기
# cd src/plugins/platforms/uikit
# make
Qt와 UIKit plugin 까지 compile이 성공하였다면 Qt for iOS 세상에 들어올 준비가 모두 끝난 것이다.

다음으로 해야 할 일은 XCode 4를 실행 시키고
qt/src/plugins/platforms/uikit/examples에서 XCode project를 열어 실행시키면 된다.
XCode Toolbar에서 iPhone Simulator 4.3/iPad Simulator 4.3을 선택하고 Run Key를 누르면 아래와 같은 동영상을 확인 하실 수 있을 것이다.

예제 실행 동영상
http://www.youtube.com/watch?v=glv_E3KOYuA&feature=player_embedded

XCode 4의 다른 Project를 만들고 싶다면 https://qt.gitorious.org/qt/qt/blobs/4.8/src/plugins/platforms/uikit/README
를 참조해서 새롭게 만들 수 있습니다.

긴글 읽어 주셔서 감사합니다.
수정 해야 하거나 조금 더 가르침을 주실 사항이 있으시면 언제든지 comment나 e-mail 주십시요.

http://developer.qt.nokia.com/wiki/HowToQtQmlOnTheIOS

QML과 Qt C++ Native 코드를 Integrating 하기

QML은 QDeclarativeEngine에 의해서 실행된다.
다음의 코드를 통해서 QML 모듈을 C++ native code내에서 실행 시킬 수 있다.
일반적으로 사용되는 component는 QGraphicsObject이지만 QObject의 타입으로도
사용할 수 있다.

[GraphicsScene]



QGraphicsScene *pScene = myExistingGraphicsScene();


QDeclarativeEngine *pEngine = new QDeclarativeEngine;


QDeclarativeComponent component( pEngine, QUrl::fromLocalFile("myQml.qml"));
QGraphicsObject *pObject = qobject_cast(component.create());


pScene->addItem(pObject);


[Widget]


QDeclarativeView *pQmlView = new QDeclarativeView;
pQmlView->setSource(QUrl::fromLocalFile("myQml.qml"));

Official Qt Mobility 1.2.0 릴리스

Qt Mobility 플러그인 라이브러리가 2011년 5월 12일자로 1.2.0으로 Release 되었습니다.

Qt Mobility version 1.2.0 의 새로운 feature로 소개된 것들로는
- 기존 mobility module들의 개선 사항 추가
- Bluetooth device 와의 쉬운 integration 기능
- NFC ready device support
(Near Field Communication : 5m 이내 통신에 유용하며 RFID와 유사합니다)
- 그외 QtMessaging, QtServiceFramework, QtSensors 와 QML 지원 모듈들
http://doc.qt.nokia.com/qtmobility-1.2/index.html

다음에서 다운 로드 받아 사용하실 수 있습니다.
http://get.qt.nokia.com/qt/add-ons/qt-mobility-opensource-src-1.2.0.zip
http://get.qt.nokia.com/qt/add-ons/qt-mobility-opensource-src-1.2.0.tar.gz

Meego 사용자의 경우 : http://download.meego.com/live/devel:/qt-mtf/Trunk/
sudo zypper addrepo http://download.meego.com/live/devel:/qt-mtf/Trunk/ devel-qt-mtf
sudo zypper refresh
sudo zypper install qt-mobility
sudo zypper install qt-mobility-example

Gitorious (깃토리오스) 사용자의 경우
http://qt.gitorious.org/ 에서 Qt-mobility의 'v1.2.0' Tag를 사용하실 수 있습니다.

Qt Signal 과 QML function 을 연결하기

QML은 UI를 구성하는 데 편의성을 제공하기는 하지만
Native code처럼 정밀한 작업을 하거나 세밀한 조작을 할때는 답답한 부분이 상당히 있다.

그래서 UI 는 QML로 구성하고, 세밀하고 빠른 속도를 요구되어지는 부분은
Qt로 구성하는 경우가 많은데, 이때 주의해야 할 부분이 QML과 Signal/Slot을 Communicate할 수 있느냐이다.

결론부터 말하자면
rootObject() 와 QVariant를 사용해서 Signal/Slot을 QML에서도 사용할 수 있다.

조금 더 상세히 말하자면 QML 파일은 결국 QDeclarativeView를 사용하여 동작이 이루어지게 되는데, 이 QDeclarativeView를 통하여 QML Controller의 pointer를 가져 올 수 있다.

QDeclarativeView view;
view.setSource( QUrl("QML파일.qml"));

QObject *rootObject = dynamic_cast(view.rootObject());

object의 포인터를 가져 오게 되면 그 다음은 일반 Qt 프로그램과 동일 해 진다.
QObject::connect(rootObject, SIGNAL(.....), &QtClass pointer, SLOT(....));
QObject::connect(&QtClass pointer, SIGNAL(...), rootObject, SLOT(...));

그리고 QML 파일과 Qt Native 사이의 parameter는 QVariant를 통하여 전달 시키면 된다.
NativeFunction( QVariant text ); // Qt
function QMLFunction( text ) // QML

다음의 forum nokia 예제를 참조한다.
<참조>
http://wiki.forum.nokia.com/index.php/CS001625_-_Connecting_Qt_signal_to_QML_function

myclass.h

#ifndef __MYCLASS_H__
#define __MYCLASS_H__

#include <qobject>
#include <qvariant>

class MyClass : public QObject
{
Q_OBJECT

public:
MyClass() {}

public slots:
void getData() {
QString text("New data");
emit data(QVariant(text));
}

signals:
void data(QVariant data);
};

#endif

main.cpp


#include <qapplication>
#include <qgraphicsobject>
#include <qdeclarativeview>
#include "myclass.h"


int main(int argc, char *argv[])
{
QApplication app(argc, argv);
MyClass myClass;

QDeclarativeView view;
view.setSource(QUrl("./ui.qml"));
view.setResizeMode(QDeclarativeView::SizeRootObjectToView);

QObject *rootObject = dynamic_cast(view.rootObject());

QObject::connect(rootObject, SIGNAL(dataRequired()), &myClass, SLOT(getData()));
QObject::connect(&myClass, SIGNAL(data(QVariant)), rootObject, SLOT(updateData(QVariant)));

view.setGeometry(QRect(100,100,800, 480));
view.show();

return app.exec();
}


ui.qml

import Qt 4.7

Rectangle {
signal dataRequired;

function updateData(text) { dataText.text = text } // slot

anchors.fill: parent; color: "black"

Text {
id: dataText
anchors.centerIn: parent; color: "white"
}

MouseArea {
anchors.fill: parent
onClicked: dataRequired()
}
}

QML 에서 mp3 file playback

QML은 Qt 용 Application 개발시 UI의 요소를 빨리 개발하기 위한 Markup 언어로,

iPhone이나 Cocoa 개발시 사용되는 xib 파일과 비슷한 개념이라고 생각할 수 있다.

QML에서 mp3 file playback은 다음과 같이 간단히 만들수 있는데

예제는 QDeclarativeView를 이용해서 Binary 실행 파일의 일부로 만들어 주거나

# qmlviewer main.qml

과 같이 실행 시켜 주면 된다.

19줄로 만드는 mp3 player 는 backend가 필요한데

backend는 Qt-mobility 와 OS 별 multimedia backend가 필요하다

Qt-mobility ( http://qt.nokia.com/products/qt-addons/mobility )

OS 별 multimedia backend

예) GStreamer , DirectShow, QuickTime 등

Qt SDK 1.1 (Qt 4.7.3) Release

Qt SDK 1.1 이 Release 되었습니다.

특징으로는 Qt 4.7.3을 기본으로 사용하고 있다는 것이구요.

Qt 4.7.3을 쓴다는 의미는 Nokia에서 강력하게 밀고 있는 QML (Qt Quick) Feature들을 기본으로 사용할 수 있게 되었다는 것이구요.

그리고 기존에는 Mobile용과 Desktop용이 구분되던 Qt가 Qt SDK 1.1을 기점으로 두버전이 한개 버전으로 합쳐졌다는 것이 가장 큰 특징이라고 할 수 있습니다.

http://qt.nokia.com/downloads 에서 확인 하실 수 있습니다.