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

mongoDB plugin for QML

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

here is the mongoDB plugin for QtQuick

import QtQuick 2.0
import me.qtquick.MongoDB 0.1

Rectangle {
id: root
width: 360
height: 360

Database {
id: db
host: '127.0.0.1'
port: 27017
name: 'test'

property Collection test: Collection { name: 'test' }
}

TextInput {
id: text
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top

Keys.onReturnPressed: {
db.test.insert(JSON.parse(text.text))
text.text = ''
}

Text {
id: placeholder
text: qsTr('enter {"key": "value"} here then press return key')
font: parent.font
color: Qt.lighter(parent.color)
opacity: 0.0

states: State {
when: text.text.length === 0 && !text.focus PropertyChanges {
target: placeholder
opacity: 0.75
}
}

transitions: Transition {
NumberAnimation { property: 'opacity' }
}
}
}

ListView {
anchors.top: text.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
clip: true

// model: db.test.find({x: {$exists: 1}, j: {$exists: 1}}).skip(5).limit(5).sort({j: -1})
model: db.test.find()

delegate: Text {
text: JSON.stringify(model.modelData)
}
}
}

Continue reading...

fluentd plugin for qml

Published: 2013-01-31 / Last modified: 2013-02-19

"Fluentd" is a OSS lightweight and flexible log collector. Fluentd receives logs as JSON streams, buffers them, and sends them to other systems like S3, MongoDB, Hadoop, or other Fluentds.

I've written a tiny plugin to send logs from qml to fluentd like this.

import QtQuick 2.0
import QtFluentd 0.1

Rectangle {
Fluentd {
id: fluentd
}

Component.onCompleted: {
fluentd.send('debug.qml-fluentd', {'event': 'Component.onCompleted'})
}
}

Continue reading...

ズームイン!

Published: 2013-01-29

Qt ロゴをクリックしたときに、そのロゴにズームインしていくような動きを QtQuick で作ってみました。

Continue reading...

silk の MongoDB 対応 0.1

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

MongoDB のプラグイン と、MongoDB にアクセスするサンプル追加

import QtQml 2.0
import Silk.HTML 5.0
import Silk.MongoDB 0.1

Html {

Database {
id: db
host: '127.0.0.1'
port: 27017

property Collection test: Collection { name: 'test' }
}

Ul {
Repeater {
model: db.test.find() // ← ここ!
Component {
Li { text: "{data: %1}".arg(model.data) }
}
}
}
}

.find() は .find({x: {$ne: 1}) のような形式や、.find({x: 1}, {x: true}) な記述にも対応。.skip(n)、.limit(n)、.sort({...}) なども使えるようにしました。

今のところ、データ型の変換のところが int とか string にしか対応していないという状態ですが、QML と MongoDB は相性が良さそうですね。

ListView の最初と最後をつなげて表示する

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

QtQuick 2.0 の ListView で、ListView で最後のアイテムから最初のアイテムにキーでジャンプ のようにすると最初から最後にジャンプをすることができることは分かりましたが、表示的には連続していません。

残念ながら ListView 自体にはこのような機能は実装されていないのですが、PathView を使うことでほぼ同様の機能を簡単に実現することができます。

Continue reading...

PathView のキー操作が期待した動作と異なる

Published: 2013-01-23

QtQuick の ListView は focus: true の場合にキーボードの上下(左右)で操作ができますが、PathView はキーボードでの操作に対応していません。

QtQuick 1.1 のサンプルでは以下のようにキーボードで操作するコードが記述されていますが、期待した動作はしていません(遅い)。

PathView {
Keys.onRightPressed: if (!moving) { incrementCurrentIndex(); console.log(moving) }
Keys.onLeftPressed: if (!moving) decrementCurrentIndex()
...
}

Continue reading...

ListView で最初のアイテムと最後のアイテム間を上下キーで移動する

Published: 2013-01-22 / Last modified: 2013-01-23

import QtQuick 2.0

ListView {
width: 360; height: 360

model: 10
delegate: Item {
width: ListView.view.width
height: 80
Text {
anchors.centerIn: parent
text: model.index
}
}

highlight: Rectangle { color: 'yellow' }

focus: true
keyNavigationWraps: true
}

重要なのは最後の1行。

keyNavigationWraps: true

keyNavigationWraps を true にすると、最初のアイテムがアクティブな状態で上キーを押すと最後のアイテムにジャンプします。キーの長押しの時はジャンプは抑制されます。

プロパティ名が少し分かりにくいけれどとても便利ですね。