diff options
Diffstat (limited to 'examples/declarative')
15 files changed, 146 insertions, 64 deletions
diff --git a/examples/declarative/animations/property-animation.qml b/examples/declarative/animations/property-animation.qml index 401feb5..fd5eb3c 100644 --- a/examples/declarative/animations/property-animation.qml +++ b/examples/declarative/animations/property-animation.qml @@ -40,7 +40,7 @@ Item { anchors.horizontalCenter: parent.horizontalCenter source: "images/face-smile.png"; y: minHeight - // Animate the y property. Setting repeat to true makes the + // Animate the y property. Setting loops to Animation.Infinite makes the // animation repeat indefinitely, otherwise it would only run once. SequentialAnimation on y { loops: Animation.Infinite @@ -50,7 +50,7 @@ Item { from: smiley.minHeight; to: smiley.maxHeight easing.type: "OutExpo"; duration: 300 } - + // Then move back to minHeight in 1 second, using the OutBounce easing function NumberAnimation { from: smiley.maxHeight; to: smiley.minHeight diff --git a/examples/declarative/behaviours/SideRect.qml b/examples/declarative/behaviors/SideRect.qml index 63b7db2..7caac45 100644 --- a/examples/declarative/behaviours/SideRect.qml +++ b/examples/declarative/behaviors/SideRect.qml @@ -5,10 +5,9 @@ Rectangle { property string text - color: "black" - width: 75; height: 50 - radius: 5 - border.width: 10; border.color: "white"; + width: 75; height: 50; radius: 6 + color: "#646464"; border.width: 4; border.color: "white" + MouseArea { anchors.fill: parent hoverEnabled: true diff --git a/examples/declarative/behaviours/behavior-example.qml b/examples/declarative/behaviors/behavior-example.qml index c84bf62..8da1ada 100644 --- a/examples/declarative/behaviours/behavior-example.qml +++ b/examples/declarative/behaviors/behavior-example.qml @@ -1,15 +1,14 @@ import Qt 4.6 Rectangle { - color: "black" - width: 400; height: 400 + color: "#343434" + width: 600; height: 400 Rectangle { - color: "transparent" anchors.centerIn: parent - width: 200; height: 200 - radius: 30 - border.width: 10; border.color: "white"; + width: 200; height: 200; radius: 30 + color: "transparent"; border.width: 4; border.color: "white" + SideRect { id: leftRect @@ -45,27 +44,35 @@ Rectangle { property string text - color: "red" - width: 75; height: 50 - radius: 5 - border.width: 10; border.color: "white"; - x: 100-37; y: 100-25 - Behavior on x { NumberAnimation { duration: 300 } } - Behavior on y { NumberAnimation { duration: 300 } } + color: "firebrick" + x: 62.5; y: 75; width: 75; height: 50 + radius: 6; border.width: 4; border.color: "white" + + // Setting an 'elastic' behavior on the focusRect's x property. + Behavior on x { + NumberAnimation { easing.type: "OutElastic"; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 } + } + + // Setting an 'elastic' behavior on the focusRect's y property. + Behavior on y { + NumberAnimation { easing.type: "OutElastic"; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 } + } + Text { id: focusText - text: focusRect.text; + text: focusRect.text + anchors.centerIn: parent + color: "white"; font.pixelSize: 16; font.bold: true + + // Setting a behavior on the focusText's x property: + // Set the opacity to 0, set the new text value, then set the opacity back to 1. Behavior on text { SequentialAnimation { NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 } - PropertyAction {} + PropertyAction { } NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 150 } } } - anchors.centerIn: parent; - color: "white"; - font.pixelSize: 16 - font.bold: true } } } diff --git a/examples/declarative/clocks/clocks.qml b/examples/declarative/clocks/clocks.qml index 624748a..c5aa1dc 100644 --- a/examples/declarative/clocks/clocks.qml +++ b/examples/declarative/clocks/clocks.qml @@ -2,12 +2,11 @@ import Qt 4.6 import "content" Rectangle { - width: childrenRect.width - height: childrenRect.height + width: 640; height: 240 color: "#646464" - Grid { - columns: 3 + Row { + anchors.centerIn: parent Clock { city: "New York"; shift: -4 } Clock { city: "Mumbai"; shift: 5.5 } Clock { city: "Tokyo"; shift: 9 } diff --git a/examples/declarative/clocks/content/Clock.qml b/examples/declarative/clocks/content/Clock.qml index 75a1cf5..90c6be8 100644 --- a/examples/declarative/clocks/content/Clock.qml +++ b/examples/declarative/clocks/content/Clock.qml @@ -74,7 +74,7 @@ Item { } Text { - id: cityLabel; font.bold: true; font.pixelSize: 14; y:200; color: "white" - anchors.horizontalCenter: parent.horizontalCenter + id: cityLabel; font.bold: true; font.pixelSize: 14; y: 200; color: "white" + anchors.horizontalCenter: parent.horizontalCenter; style: Text.Raised; styleColor: "black" } } diff --git a/examples/declarative/declarative.pro b/examples/declarative/declarative.pro index 0f58738..5fc1cf0 100644 --- a/examples/declarative/declarative.pro +++ b/examples/declarative/declarative.pro @@ -12,7 +12,7 @@ SUBDIRS = \ sources.files = \ animations \ aspectratio \ - behaviours \ + behaviors \ border-image \ clocks \ connections \ diff --git a/examples/declarative/flipable/back.png b/examples/declarative/flipable/back.png Binary files differdeleted file mode 100644 index 0b4cafc..0000000 --- a/examples/declarative/flipable/back.png +++ /dev/null diff --git a/examples/declarative/flipable/content/5_heart.png b/examples/declarative/flipable/content/5_heart.png Binary files differnew file mode 100644 index 0000000..fb59d81 --- /dev/null +++ b/examples/declarative/flipable/content/5_heart.png diff --git a/examples/declarative/flipable/content/9_club.png b/examples/declarative/flipable/content/9_club.png Binary files differnew file mode 100644 index 0000000..2545001 --- /dev/null +++ b/examples/declarative/flipable/content/9_club.png diff --git a/examples/declarative/flipable/content/Card.qml b/examples/declarative/flipable/content/Card.qml new file mode 100644 index 0000000..6b8fa69 --- /dev/null +++ b/examples/declarative/flipable/content/Card.qml @@ -0,0 +1,38 @@ +import Qt 4.6 + +Flipable { + id: container + + property alias image: frontImage.source + property bool flipped: true + property int xAxis: 0 + property int yAxis: 0 + property int angle: 0 + + width: front.width; height: front.height; state: "back" + + front: Image { id: frontImage; smooth: true } + back: Image { source: "back.png"; smooth: true } + + MouseArea { anchors.fill: parent; onClicked: container.flipped = !container.flipped } + + transform: Rotation { + id: rotation; origin.x: container.width / 2; origin.y: container.height / 2 + axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0 + } + + states: State { + name: "back"; when: container.flipped + PropertyChanges { target: rotation; angle: container.angle } + } + + transitions: Transition { + ParallelAnimation { + NumberAnimation { target: rotation; properties: "angle"; duration: 600 } + SequentialAnimation { + NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 } + NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 } + } + } + } +} diff --git a/examples/declarative/flipable/content/back.png b/examples/declarative/flipable/content/back.png Binary files differnew file mode 100644 index 0000000..f715d74 --- /dev/null +++ b/examples/declarative/flipable/content/back.png diff --git a/examples/declarative/flipable/flipable-example.qml b/examples/declarative/flipable/flipable-example.qml index c837ebc..eebc721 100644 --- a/examples/declarative/flipable/flipable-example.qml +++ b/examples/declarative/flipable/flipable-example.qml @@ -1,37 +1,13 @@ -//! [0] import Qt 4.6 +import "content" -Flipable { - id: flipable - width: 240 - height: 240 +Rectangle { + id: window; width: 480; height: 320 + color: "darkgreen" - property int angle: 0 - property bool flipped: false - - front: Image { source: "front.png" } - back: Image { source: "back.png" } - - transform: Rotation { - origin.x: flipable.width/2; origin.y: flipable.height/2 - axis.x: 0; axis.y: 1; axis.z: 0 // rotate around y-axis - angle: flipable.angle - } - - states: State { - name: "back" - PropertyChanges { target: flipable; angle: 180 } - when: flipable.flipped - } - - transitions: Transition { - NumberAnimation { properties: "angle"; duration: 1000 } - } - - MouseArea { - anchors.fill: parent - onClicked: flipable.flipped = !flipable.flipped + Row { + anchors.centerIn: parent; spacing: 30 + Card { image: "content/9_club.png"; angle: 180; yAxis: 1 } + Card { image: "content/5_heart.png"; angle: 540; xAxis: 1 } } } -//! [0] - diff --git a/examples/declarative/flipable/front.png b/examples/declarative/flipable/front.png Binary files differdeleted file mode 100644 index 796b605..0000000 --- a/examples/declarative/flipable/front.png +++ /dev/null diff --git a/examples/declarative/webview/alerts.html b/examples/declarative/webview/alerts.html new file mode 100644 index 0000000..82caddf --- /dev/null +++ b/examples/declarative/webview/alerts.html @@ -0,0 +1,5 @@ +<html> +<body onclick="alert('This is an alert')"> +<p>This is a web page. It fires an alert when clicked. +</body> +</html> diff --git a/examples/declarative/webview/alerts.qml b/examples/declarative/webview/alerts.qml new file mode 100644 index 0000000..ab2e860 --- /dev/null +++ b/examples/declarative/webview/alerts.qml @@ -0,0 +1,58 @@ +import Qt 4.6 +import org.webkit 1.0 + +WebView { + id: webView + onAlert: popup.show(message) + width: 120 + height: 150 + url: "alerts.html" + + Rectangle { + id: popup + + color: "red" + border.color: "black" + border.width: 2 + radius: 4 + + y: parent.height // off "screen" + anchors.horizontalCenter: parent.horizontalCenter + width: label.width+5 + height: label.height+5 + + opacity: 0 + + function show(t) { + label.text = t + popup.state = "visible" + timer.start() + } + states: State { + name: "visible" + PropertyChanges { target: popup; opacity: 1 } + PropertyChanges { target: popup; y: (webView.height-popup.height)/2 } + } + + transitions: [ + Transition { from: ""; PropertyAnimation { properties: "opacity,y"; duration: 65 } }, + Transition { from: "visible"; PropertyAnimation { properties: "opacity,y"; duration: 500 } } + ] + + Timer { + id: timer + interval: 1000 + onTriggered: popup.state = "" + } + + Text { + id: label + anchors.centerIn: parent + color: "white" + font.pixelSize: 20 + width: webView.width*0.75 + wrap: true + horizontalAlignment: "AlignHCenter" + } + } +} |
