diff options
Diffstat (limited to 'examples/declarative')
20 files changed, 146 insertions, 391 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 bddfbee..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 \ @@ -21,7 +21,6 @@ sources.files = \ effects \ fillmode \ focus \ - focusscope \ fonts \ gridview \ layouts \ 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/focusscope/test.qml b/examples/declarative/focusscope/test.qml deleted file mode 100644 index e4332e7..0000000 --- a/examples/declarative/focusscope/test.qml +++ /dev/null @@ -1,76 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - Keys.onDigit9Pressed: console.log("Error - Root") - - FocusScope { - id: myScope - focus: true - - Keys.onDigit9Pressed: console.log("Error - FocusScope") - - Rectangle { - height: 120 - width: 420 - - color: "transparent" - border.width: 5 - border.color: myScope.wantsFocus?"blue":"black" - - Rectangle { - id: item1 - x: 10; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - Keys.onDigit9Pressed: console.log("Top Left"); - KeyNavigation.right: item2 - focus: true - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - - Rectangle { - id: item2 - x: 310; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - KeyNavigation.left: item1 - Keys.onDigit9Pressed: console.log("Top Right"); - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - } - KeyNavigation.down: item3 - } - - Text { x:100; y:170; text: "Blue border indicates scoped focus\nBlack border indicates NOT scoped focus\nRed box indicates active focus\nUse arrow keys to navigate\nPress \"9\" to print currently focused item" } - - Rectangle { - id: item3 - x: 10; y: 300 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - - Keys.onDigit9Pressed: console.log("Bottom Left"); - KeyNavigation.up: myScope - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - -} diff --git a/examples/declarative/focusscope/test2.qml b/examples/declarative/focusscope/test2.qml deleted file mode 100644 index 5b6971a..0000000 --- a/examples/declarative/focusscope/test2.qml +++ /dev/null @@ -1,40 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - Text { text: "All five rectangles should be red" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - } - } - } - } - } - -} diff --git a/examples/declarative/focusscope/test3.qml b/examples/declarative/focusscope/test3.qml deleted file mode 100644 index 9344d07..0000000 --- a/examples/declarative/focusscope/test3.qml +++ /dev/null @@ -1,52 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - ListModel { - id: model - ListElement { name: "1" } - ListElement { name: "2" } - ListElement { name: "3" } - ListElement { name: "4" } - ListElement { name: "5" } - ListElement { name: "6" } - ListElement { name: "6" } - ListElement { name: "8" } - ListElement { name: "9" } - } - - Component { - id: verticalDelegate - FocusScope { - id: root - width: 50; height: 50; - Keys.onDigit9Pressed: console.log("Error - " + name) - Rectangle { - focus: true - Keys.onDigit9Pressed: console.log(name) - width: 50; height: 50; - color: root.ListView.isCurrentItem?"red":"green" - Text { text: name; anchors.centerIn: parent } - } - } - } - - ListView { - width: 800; height: 50; orientation: "Horizontal" - focus: true - model: model - delegate: verticalDelegate - preferredHighlightBegin: 100 - preferredHighlightEnd: 100 - highlightRangeMode: "StrictlyEnforceRange" - } - - - Text { - y: 100; x: 50 - text: "Currently selected element should be red\nPressing \"9\" should print the number of the currently selected item\nBe sure to scroll all the way to the right, pause, and then all the way to the left." - } -} diff --git a/examples/declarative/focusscope/test4.qml b/examples/declarative/focusscope/test4.qml deleted file mode 100644 index cc96df9..0000000 --- a/examples/declarative/focusscope/test4.qml +++ /dev/null @@ -1,75 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - Keys.onDigit9Pressed: console.log("Error - Root") - - FocusScope { - id: myScope - - Keys.onDigit9Pressed: console.log("Error - FocusScope") - - Rectangle { - height: 120 - width: 420 - - color: "transparent" - border.width: 5 - border.color: myScope.wantsFocus?"blue":"black" - - Rectangle { - id: item1 - x: 10; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - Keys.onDigit9Pressed: console.log("Error - Top Left"); - KeyNavigation.right: item2 - focus: true - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - - Rectangle { - id: item2 - x: 310; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - KeyNavigation.left: item1 - Keys.onDigit9Pressed: console.log("Error - Top Right"); - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - } - KeyNavigation.down: item3 - } - - Text { x:100; y:170; text: "There should be no blue borders, or red squares.\nPressing \"9\" should do nothing.\nArrow keys should have no effect." } - - Rectangle { - id: item3 - x: 10; y: 300 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - - Keys.onDigit9Pressed: console.log("Error - Bottom Left"); - KeyNavigation.up: myScope - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - -} diff --git a/examples/declarative/focusscope/test5.qml b/examples/declarative/focusscope/test5.qml deleted file mode 100644 index da98350..0000000 --- a/examples/declarative/focusscope/test5.qml +++ /dev/null @@ -1,83 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - Keys.onReturnPressed: console.log("Error - Root") - - FocusScope { - id: myScope - focus: true - - Keys.onReturnPressed: console.log("Error - FocusScope") - - Rectangle { - height: 120 - width: 420 - - color: "transparent" - border.width: 5 - border.color: myScope.wantsFocus?"blue":"black" - - Rectangle { - x: 10; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: item1.wantsFocus?"blue":"black" - } - - TextEdit { - id: item1 - x: 20; y: 20 - width: 90; height: 90 - color: "white" - font.pixelSize: 20 - Keys.onReturnPressed: console.log("Top Left"); - KeyNavigation.right: item2 - focus: true - wrap: true - text: "Box 1" - } - - Rectangle { - id: item2 - x: 310; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - KeyNavigation.left: item1 - Keys.onReturnPressed: console.log("Top Right"); - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - } - KeyNavigation.down: item3 - } - - Text { x:100; y:170; text: "Blue border indicates scoped focus\nBlack border indicates NOT scoped focus\nRed box or flashing cursor indicates active focus\nUse arrow keys to navigate\nPress Ctrl-Return to print currently focused item" } - - Rectangle { - x: 10; y: 300 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: item3.wantsFocus?"blue":"black" - } - - TextEdit { - id: item3 - x: 20; y: 310 - width: 90; height: 90 - color: "white" - font.pixelSize: 20 - text: "Box 3" - - Keys.onReturnPressed: console.log("Bottom Left"); - KeyNavigation.up: myScope - wrap: true - } -} 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" + } + } +} |
