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

Relational database plugin for QML

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

This plugin allows you to access relational database in QML.

import QtQuick 2.0
import me.qtquick.Database 0.1

Item {
id: root
width: 400
height: 300

Database {
id: db
connectionName: 'test'
type: "QSQLITE"
databaseName: ":memory:"

TableModel {
id: table
tableName: 'Test'
primaryKey: 'key'
property int key
property string value
}

SqlModel {
id: select
query: "SELECT COUNT(key) as keys FROM Test WHERE value LIKE ?"
params: ['%Qt%'] }
}

Rectangle {
id: header
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 2
height: field.font.pixelSize * 1.5

border.color: 'gray'
border.width: 1

TextInput {
id: field
anchors.fill: parent
anchors.margins: 2
focus: true


Keys.onReturnPressed: {
select.select = false
table.insert({'value': field.text})
field.text = ''
select.select = true
}
}
}

Flickable {
anchors.top: header.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: footer.top
contentWidth: width
contentHeight: contents.height
Grid {
id: contents
width: parent.width
flow: Grid.TopToBottom
rows: table.count + 1
Text {
width: 100
text: 'key'
}

Repeater {
model: table
Text {
text: model.key
}
}
Text {
text: 'value'
}

Repeater {
model: table
Text {
text: model.value
MouseArea {
anchors.fill: parent
onClicked: {
select.select = false
table.remove({'key': model.key})
select.select = true
}
}
}
}
}
}
Text {
id: footer
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
text: 'the number of values that contains "Qt" is %1.'.arg(select.count > 0 ? select.get(0).keys : '0')
}

}

Continue reading...

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...