what is QML for?

[happyvalley]

tried some qml samples with qmlviewer, pretty fancy UI...
wonder how qml is integrated with other C++ parts?, saw that qml can be loaded into QmlView, but how to link the qml UI to business logic in an application. saw the calculator sample has a js file? is it?

don't see where QML fit in the whole picture...

any light on this?

[franz]

With QML you can design user interfaces without having to adapt your source code. That means that you could hire a user interface developer who will focus on just the UI. QML (declarative UI) is supposed to help you separate your GUI from the actual functionality. In my view QML isn't supposed to really integrate with C++ code.



Declarative UI is a way of making fluid user interfaces by describing them in terms of simple elements (Text, Image, Rect,and other QObjects) that are built up into components. The reason it is “declarative” is that rather than the changes in the UI being expressed as imperative code (”set this, set that, do this, do that, …”), they are instead expressed as sets of QObject property expressions (”this width is always half that width”), grouped into states (”when enabled, the properties are …, when disabled, they are …”). The language that enables this is named QML. QML is simple yet powerful. Most of a user interface is described by a simple tree structure of property bindings:


import Qt 4.6

Rectangle {
width: 200
height: 200
color: "white"
Text {
text: "Hello World"
anchors.centerIn: parent
}
}



You might want to read the whole blog there.

[happyvalley]

thanks, franz
ya, read the blog more carefully this time, was looking for how the controls defined with qml can be linked to the functions,
for example, on a page, with qml,. could create a fancy button on it, but when I click on it how to trigger the event handler.
seems the snippet below answered the question.

---------------------------------
import Qt 4.6
Rectangle {
id: container
property string label
signal clicked
radius: 5; border.color: "black"
color: mouse.pressed ? "steelblue" : "lightsteelblue"
gradient: Gradient {
GradientStop { position: mouse.pressed ? 1.0 : 0.0; color: "steelblue" }
GradientStop { position: mouse.pressed ? 0.0 : 1.0; color: "lightsteelblue" }
}
MouseRegion { id: mouse; anchors.fill: parent; onClicked: container.clicked() }
Text { anchors.fill: parent; text: container.label; anchors.centerIn: parent }
}

QmlComponent component(qmlEngine, "Button.qml");
QObject *button = component.create();
button->setProperty("label", tr("Press Me!"));
connect(button, SIGNAL(clicked()), this, SIGNAL(buttonClicked()));