QML: Bouncing Hello World

Now that we have seen how to write a Hello World Program, its time to proceed forward and understand the power of QML.

The following example takes the normal Hello World example and converts it to a bouncing rectangle that contains the "Hello MeeGo" text inside.

Observe the use of the Animations and MouseArea. It took me 15 mins to get this working ... just imagine, how much you would require to make this work in any other language.

import Qt 4.7

Rectangle {
width: 400
height: 800

Rectangle {

id: rect1
width: 200
height: 100
x: 60
color: "lightgreen"
border.width: 2
border.color: "black"
radius: 10


Text {
x: 25
y: 40
font.bold: true
font.pointSize: 20
style: Text.Outline
styleColor: "yellow"
color: "magenta"
text: "Hello MeeGo"
}

// Animation to make the rectangle bounce down and go back up
SequentialAnimation on y {
NumberAnimation { from: 50; to: 700; easing.type: Easing.OutBounce; duration: 2000 }
loops: Animation.Infinite
PauseAnimation { duration: 200 }
NumberAnimation { to: 50; easing.type: Easing.OutQuad; duration: 1000 }
}
}

// clicking on the view will change the color of the smaller rectangle
MouseArea {
anchors.fill: parent
onClicked: {rect1.color = "lightblue"}
}

// Animation to chnage the color of the outter rectangle
ColorAnimation on color { from: "red"; to: "yellow"; duration: 2000; loops: Animation.Infinite }

}