2010-08-11

Slitaz -- Qt Quick




Env: WinXP
Qt Quick

The key new feature of the Qt 4.7 and Qt Creator 2.1 releases is Qt Quick (Qt User Interface Creation Kit): a high-level UI technology that allows developers and UI designers to work together to create animated, touch-enabled UIs and lightweight applications. It includes:

1. QML (Qt Meta-Object Language): an easy to use, declarative language
2. New Tools in the Qt Creator IDE: including a preview visual editor that allows UI designers and developers to cooperate, working on the same code in an iterative approach. (Coming in Qt Creator 2.1)
3. QtDeclarative: a new module in the Qt library that enables a new declarative programming approach

And while no C++ programming skills are needed to use Qt Quick, it is 100% based on Qt and can be extended from C++, limited only by your creativity.


googlemaps.qml
// This example demonstrates how Web services such as Google Maps can be
// abstracted as QML types. Here we have a "Mapping" module with a "Map"
// type. The Map type has an address property. Setting that property moves
// the map. The underlying implementation uses WebView and the Google Maps
// API, but users from QML don't need to understand the implementation in
// order to create a Map.

import Qt 4.7
import org.webkit 1.0
import "content/Mapping"

Map {
id: map
width: 300
height: 300
address: "Taipei"

Rectangle {
x: 70
width: input.width + 20
height: input.height + 4
anchors.bottom: parent.bottom; anchors.bottomMargin: 5
radius: 5
opacity: map.status == "Ready" ? 1 : 0

TextInput {
id: input
text: map.address
anchors.centerIn: parent
Keys.onReturnPressed: map.address = input.text
}
}

Text {
id: loading
anchors.centerIn: parent
text: map.status == "Error" ? "Error" : "Loading"
opacity: map.status == "Ready" ? 0 : 1
font.pixelSize: 30

Behavior on opacity { NumberAnimation{} }
}
}
.