Qt 5 の未来は明るいブログ

qt-components-ubuntu を Gentoo Linux で動かしてみた

Published: 2013-01-05 / Last modified: 2013-01-05

Blackberry 10 の Cascades で Qt が採用されたり、元 MeeGo の人たちが Jolla という会社を作って Seilfish というプラットフォームで Qt を使ったり、Digia が Qt 5 の Android、iOS、Windows 8 対応をコミットしたりと、2013年はさらに Qt は様々なところで活躍しそうな予感がします。

そんな中、Qt 5 を採用した Ubuntu for phones の発表がありました。

Qt 5 の QtQuick 2.0 でユーザーインターフェースができているだけあって、綺麗なデザインでスムーズに動作しているように見えます。

そんな中、

というつぶやきを見てしまったので、自分でも試してみることにしました。

ダウンロード

Launchpad の https://launchpad.net/~ui-toolkit/+archive/ppa/+packages でコードが公開されています。

ページ下部の Source にある「qt-components-ubuntu - 0.1.24~quantal1」をクリックすると様々な形式のダウンロードのリンクが表示されます。

.deb 形式のパッケージが一通りダウンロードできるようですが、Gentoo Linux 上で試したいので今回は「qt-components-ubuntu_0.1.24~quantal1.tar.gz (929.9 KiB)」というソースコードのアーカイブをダウンロード。

Ubuntu をお使いの方は http://blog.hermit4.info/2013/01/ubuntu-for-phone.html こちらを参考にするといいと思います。

ビルド

パッケージを展開すると trunk というディレクトリが現れるので、そこの下で

$ ~/org/qt-project/qt-5.0.0/5.0.0/gcc_64/bin/qmake
$ nice make -j6

とするとビルドができます。

シャドウビルドは可能のようですが、インストールせずに実行することまでは考慮されてないので、簡単に試す場合はソースツリーのところでビルドする方がよさそうです。

デモの実行

launch_demos.sh を参考に、以下のコマンドで実行させてみました。

UITK_THEME_PATH=. ~/org/qt-project/qt-5.0.0/5.0.0/gcc_64/bin/qmlscene -I modules/ demos/PhoneComponentShowcase.qml &

実行結果

実行すると上記のようなデモが動作します。Tabs というエレメントの動きが新鮮ですね。

ドキュメントは http://developer.ubuntu.com/api/ubuntu-12.10/qml/mobile/overview-ubuntu-sdk.html こちらです。

最後にメインのソースも記念に貼っておきます。デモなので綺麗なソースではないですが、上のスクリーンショットと比較して見ると分かりやすいと思います。

/*
 * Copyright 2012 Canonical Ltd.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; version 3.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.Popups 0.1
import Ubuntu.Components.ListItems 0.1 as ListItem

Rectangle {
color: "lightgrey"
width: units.gu(45)
height: units.gu(80)

Tabs {
ItemStyle.class: "new-tabs"
anchors.fill: parent

Tab {
title: "Components"
page: Flickable {
clip: true
width: units.gu(45)
height: units.gu(80)

contentWidth: width
contentHeight: background.height

Rectangle {
id: background
width: parent.width
height: childrenRect.height
color: "#e6e6e6"

Column {
width: parent.width
height: childrenRect.height

ListItem.SingleControl {
control: Button {
anchors {
margins: units.gu(1)
fill: parent
}
text: i18n.tr("Button")
}
}
ListItem.Standard {
text: i18n.tr("Checkbox")
control: CheckBox { }
}
ListItem.Standard {
text: i18n.tr("Switch")
control: Switch { }
}
ListItem.Header { text: i18n.tr("Slider") }
ListItem.SingleControl {
control: Slider {
anchors {
margins: units.gu(1)
fill: parent
}
value: 50
}
}
ListItem.Empty {
highlightWhenPressed: false
Label {
anchors.left: parent.left
text: i18n.tr("Activity indicator")
anchors {
verticalCenter: parent.verticalCenter
margins: units.gu(1)
}
}
ActivityIndicator {
running: true
anchors {
margins: units.gu(1)
right: parent.right
verticalCenter: parent.verticalCenter
}
}
}
ListItem.Header { text: i18n.tr("Progress bar") }
ListItem.Empty {
highlightWhenPressed: false
ProgressBar {
id: progress
anchors.centerIn: parent
value: progress.minimumValue

SequentialAnimation on value {
loops: Animation.Infinite
NumberAnimation {
from: progress.minimumValue
to: progress.maximumValue
duration: 2000
}
PauseAnimation {duration: 1000}
ScriptAction { script: progress.indeterminate = true; }
PauseAnimation {duration: 2000}
ScriptAction {
script: {
progress.indeterminate = false
progress.value = progress.minimumValue
}
}
}
}
}
ListItem.Header {
text: "Old-style tabs"
}
ListItem.Empty {
height: units.gu(40)
highlightWhenPressed: false
Tabs {
anchors {
fill: parent
margins: units.gu(1)
}
Tab {
title: i18n.tr("Tab") + " 1"
page: Rectangle {
anchors.fill: parent
color: "#eeeeee"
Label {
anchors.centerIn: parent
text: i18n.tr("This is the first tab.")
color: "#757373"
}
}
}
Tab {
iconSource: "call_icon.png"
page: Rectangle {
anchors.fill: parent
color: "#e4e4e4"
Label {
anchors.centerIn: parent
text: i18n.tr("This is the second tab.")
color: "#757373"
}
}
}
Tab {
title: i18n.tr("Tab") + " 3"
iconSource: "call_icon.png"
page: Qt.resolvedUrl("MyCustomPage.qml")
}
}

}
ListItem.Empty {
highlightWhenPressed: false
TextField {
anchors.centerIn: parent
placeholderText: i18n.tr("simple text field")
}
}
}
}
}
}

Tab {
title: "Ubuntu shape"
page: UbuntuShapes {
showHeader: false
}
}
}
}