qt-components-ubuntu を Gentoo Linux で動かしてみた
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
}
}
}
}
