diff options
Diffstat (limited to 'examples/declarative')
55 files changed, 571 insertions, 367 deletions
diff --git a/examples/declarative/animations/color-animation.qml b/examples/declarative/animations/color-animation.qml index 7171a69..6740522 100644 --- a/examples/declarative/animations/color-animation.qml +++ b/examples/declarative/animations/color-animation.qml @@ -10,7 +10,7 @@ Item { gradient: Gradient { GradientStop { position: 0.0 - color: SequentialAnimation { + SequentialAnimation on color { repeat: true ColorAnimation { from: "DeepSkyBlue"; to: "#0E1533"; duration: 5000 } ColorAnimation { from: "#0E1533"; to: "DeepSkyBlue"; duration: 5000 } @@ -18,7 +18,7 @@ Item { } GradientStop { position: 1.0 - color: SequentialAnimation { + SequentialAnimation on color { repeat: true ColorAnimation { from: "SkyBlue"; to: "#437284"; duration: 5000 } ColorAnimation { from: "#437284"; to: "SkyBlue"; duration: 5000 } @@ -31,7 +31,7 @@ Item { Item { width: parent.width; height: 2 * parent.height transformOrigin: Item.Center - rotation: NumberAnimation { from: 0; to: 360; duration: 10000; repeat: true } + NumberAnimation on rotation { from: 0; to: 360; duration: 10000; repeat: true } Image { source: "images/sun.png"; y: 10; anchors.horizontalCenter: parent.horizontalCenter transformOrigin: Item.Center; rotation: -3 * parent.rotation @@ -44,7 +44,7 @@ Item { x: 0; y: parent.height/2; width: parent.width; height: parent.height/2 source: "images/star.png"; angleDeviation: 360; velocity: 0 velocityDeviation: 0; count: parent.width / 10; fadeInDuration: 2800 - opacity: SequentialAnimation { + SequentialAnimation on opacity { repeat: true NumberAnimation { from: 0; to: 1; duration: 5000 } NumberAnimation { from: 1; to: 0; duration: 5000 } @@ -58,7 +58,7 @@ Item { gradient: Gradient { GradientStop { position: 0.0 - color: SequentialAnimation { + SequentialAnimation on color { repeat: true ColorAnimation { from: "ForestGreen"; to: "#001600"; duration: 5000 } ColorAnimation { from: "#001600"; to: "ForestGreen"; duration: 5000 } diff --git a/examples/declarative/animations/property-animation.qml b/examples/declarative/animations/property-animation.qml index 537ee26..4428f34 100644 --- a/examples/declarative/animations/property-animation.qml +++ b/examples/declarative/animations/property-animation.qml @@ -42,7 +42,7 @@ Item { // Animate the y property. Setting repeat to true makes the // animation repeat indefinitely, otherwise it would only run once. - y: SequentialAnimation { + SequentialAnimation on y { repeat: true // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function diff --git a/examples/declarative/aspectratio/face_fit_animated.qml b/examples/declarative/aspectratio/face_fit_animated.qml index 90ea516..79e99e9 100644 --- a/examples/declarative/aspectratio/face_fit_animated.qml +++ b/examples/declarative/aspectratio/face_fit_animated.qml @@ -18,7 +18,7 @@ Rectangle { source: "pics/face.png" x: (parent.width-width*scale)/2 y: (parent.height-height*scale)/2 - scale: SpringFollow { + SpringFollow on scale { source: Math.max(Math.min(face.parent.width/face.width*1.333,face.parent.height/face.height), Math.min(face.parent.width/face.width,face.parent.height/face.height*1.333)) spring: 1 diff --git a/examples/declarative/behaviours/behavior.qml b/examples/declarative/behaviours/behavior.qml index 2732c0a..c84bf62 100644 --- a/examples/declarative/behaviours/behavior.qml +++ b/examples/declarative/behaviours/behavior.qml @@ -50,12 +50,12 @@ Rectangle { radius: 5 border.width: 10; border.color: "white"; x: 100-37; y: 100-25 - x: Behavior { NumberAnimation { duration: 300 } } - y: Behavior { NumberAnimation { duration: 300 } } + Behavior on x { NumberAnimation { duration: 300 } } + Behavior on y { NumberAnimation { duration: 300 } } Text { id: focusText text: focusRect.text; - text: Behavior { + Behavior on text { SequentialAnimation { NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 } PropertyAction {} diff --git a/examples/declarative/behaviours/test.qml b/examples/declarative/behaviours/test.qml deleted file mode 100644 index 8fffd59..0000000 --- a/examples/declarative/behaviours/test.qml +++ /dev/null @@ -1,102 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "lightsteelblue" - width: 800 - height: 600 - id: page - MouseArea { - anchors.fill: parent - onClicked: { bluerect.parent = page; console.log(mouseX); bluerect.x = mouseX; } - } - MyRect { - color: "green" - x: 200 - y: 200 - } - MyRect { - color: "red" - x: 400 - y: 200 - } - MyRect { - color: "yellow" - x: 400 - y: 400 - } - MyRect { - color: "orange" - x: 400 - y: 500 - } - MyRect { - color: "pink" - x: 400 - y: 0 - } - MyRect { - color: "lightsteelblue" - x: 100 - y: 500 - } - MyRect { - color: "black" - x: 0 - y: 200 - } - MyRect { - color: "white" - x: 400 - y: 0 - } - Rectangle { - color: "blue" - x: 0 - y: 0 - width: 100 - height: 100 - id: bluerect - x: Behavior { - ParallelAnimation { - SequentialAnimation { - NumberAnimation { - target: bluerect - property: "y" - from: 0 - to: 10 - easing.type: "OutBounce" - easing.amplitude: 30 - duration: 250 - } - NumberAnimation { - target: bluerect - property: "y" - from: 10 - to: 0 - easing.type: "OutBounce" - easing.amplitude: 30 - duration: 250 - } - } - NumberAnimation { duration: 500 } - } - } - parent: Behavior { - SequentialAnimation { - NumberAnimation { - target: bluerect - property: "opacity" - to: 0 - duration: 150 - } - PropertyAction {} - NumberAnimation { - target: bluerect - property: "opacity" - to: 1 - duration: 150 - } - } - } - } -} diff --git a/examples/declarative/border-image/content/MyBorderImage.qml b/examples/declarative/border-image/content/MyBorderImage.qml index ca886e9..5621e18 100644 --- a/examples/declarative/border-image/content/MyBorderImage.qml +++ b/examples/declarative/border-image/content/MyBorderImage.qml @@ -17,13 +17,13 @@ Item { BorderImage { id: image; x: container.width / 2 - width / 2; y: container.height / 2 - height / 2 - width: SequentialAnimation { + SequentialAnimation on width { repeat: true NumberAnimation { from: container.minWidth; to: container.maxWidth; duration: 2000; easing.type: "InOutQuad"} NumberAnimation { from: container.maxWidth; to: container.minWidth; duration: 2000; easing.type: "InOutQuad" } } - height: SequentialAnimation { + SequentialAnimation on height { repeat: true NumberAnimation { from: container.minHeight; to: container.maxHeight; duration: 2000; easing.type: "InOutQuad"} NumberAnimation { from: container.maxHeight; to: container.minHeight; duration: 2000; easing.type: "InOutQuad" } diff --git a/examples/declarative/clocks/content/Clock.qml b/examples/declarative/clocks/content/Clock.qml index 0c6836f..75a1cf5 100644 --- a/examples/declarative/clocks/content/Clock.qml +++ b/examples/declarative/clocks/content/Clock.qml @@ -34,7 +34,7 @@ Item { transform: Rotation { id: hourRotation origin.x: 7.5; origin.y: 73; angle: 0 - angle: SpringFollow { + SpringFollow on angle { spring: 2; damping: 0.2; modulus: 360 source: (clock.hours * 30) + (clock.minutes * 0.5) } @@ -48,7 +48,7 @@ Item { transform: Rotation { id: minuteRotation origin.x: 6.5; origin.y: 83; angle: 0 - angle: SpringFollow { + SpringFollow on angle { spring: 2; damping: 0.2; modulus: 360 source: clock.minutes * 6 } @@ -62,7 +62,7 @@ Item { transform: Rotation { id: secondRotation origin.x: 2.5; origin.y: 80; angle: 0 - angle: SpringFollow { + SpringFollow on angle { spring: 5; damping: 0.25; modulus: 360 source: clock.seconds * 6 } diff --git a/examples/declarative/colorbrowser/colorbrowser.qml b/examples/declarative/colorbrowser/colorbrowser.qml new file mode 100644 index 0000000..421ae07 --- /dev/null +++ b/examples/declarative/colorbrowser/colorbrowser.qml @@ -0,0 +1,101 @@ +import Qt 4.6 +import 'qml' + +Rectangle { + id: mainWindow + width: 800; height: 480; color: '#454545' + + VisualDataModel { id: colorsVisualModel; delegate: colorsDelegate; model: ColorsModel } + + Component { + id: colorsDelegate + Package { + + Item { + Package.name: 'grid' + GridView { + id: gridView; model: visualModel.parts.grid; width: mainWindow.width; height: mainWindow.height + cellWidth: 160; cellHeight: 160; interactive: false + onCurrentIndexChanged: listView.positionViewAtIndex(currentIndex) + } + } + + Item { + Package.name: 'fullscreen' + ListView { + id: listView; model: visualModel.parts.list; orientation: Qt.Horizontal + width: mainWindow.width; height: mainWindow.height; interactive: false + onCurrentIndexChanged: gridView.positionViewAtIndex(currentIndex) + highlightRangeMode: ListView.StrictlyEnforceRange; snapMode: ListView.SnapOneItem + } + } + + Item { + Package.name: 'stack' + id: wrapper + width: 260; height: 240 + + VisualDataModel { id: visualModel; model: colors; delegate: ColorDelegate {} } + + PathView { + id: pathView; model: visualModel.parts.stack; anchors.centerIn: parent + pathItemCount: 3 + path: Path { + PathAttribute { name: 'z'; value: 9999.0 } + PathLine { x: 1; y: 1 } + PathAttribute { name: 'z'; value: 0.0 } + } + } + + Item { + anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom; anchors.bottomMargin: 20 + width: albumTitle.width + 20 ; height: albumTitle.height + 4 + Text { id: albumTitle; text: name; color: 'white'; font.bold: true; anchors.centerIn: parent } + } + + MouseArea { anchors.fill: parent; onClicked: wrapper.state = 'inGrid' } + + states: [ + State { + name: 'inGrid' + PropertyChanges { target: gridView; interactive: true } + PropertyChanges { target: shade; opacity: 1 } + }, + State { + name: 'fullscreen'; extend: 'inGrid' + PropertyChanges { target: gridView; interactive: false } + PropertyChanges { target: listView; interactive: true } + PropertyChanges { target: infobox; opacity: 1 } + } + ] + + transitions: [ + Transition { + from: ''; to: 'inGrid'; reversible: true + NumberAnimation { target: shade; properties: 'opacity'; duration: 300 } + }, + Transition { + from: 'inGrid'; to: 'fullscreen'; reversible: true + SequentialAnimation { + PauseAnimation { duration: 300 } + NumberAnimation { target: infobox; properties: 'opacity'; duration: 300 } + } + } + ] + } + } + } + + GridView { width: parent.width; height: parent.height; cellWidth: 260; cellHeight: 240; model: colorsVisualModel.parts.stack } + Rectangle { id: shade; color: '#454545'; width: parent.width; height: parent.height; opacity: 0 } + ListView { anchors.fill: parent; model: colorsVisualModel.parts.grid; interactive: false } + ListView { anchors.fill: parent; model: colorsVisualModel.parts.fullscreen; interactive: false } + Item { id: foreground; anchors.fill: parent } + + Column { + id: infobox; opacity: 0 + anchors { left: parent.left; leftMargin: 20; bottom: parent.bottom; bottomMargin: 20 } + Text { id: infoColorName; color: '#eeeeee'; style: Text.Outline; styleColor: '#222222'; font.pointSize: 18 } + Text { id: infoColorHex; color: '#eeeeee'; style: Text.Outline; styleColor: '#222222'; font.pointSize: 14 } + } +} diff --git a/examples/declarative/colorbrowser/dummydata/ColorsModel.qml b/examples/declarative/colorbrowser/dummydata/ColorsModel.qml new file mode 100644 index 0000000..eefbcfe --- /dev/null +++ b/examples/declarative/colorbrowser/dummydata/ColorsModel.qml @@ -0,0 +1,96 @@ +import Qt 4.6 + +ListModel { + id: colorsModel + + ListElement { + name: "Reds" + colors: [ + ListElement { name: "Fire Brick"; hex: "#B22222" }, + ListElement { name: "Fire Brick 1"; hex: "#FF3030" }, + ListElement { name: "Fire Brick 2"; hex: "#EE2C2C" }, + ListElement { name: "Fire Brick 3"; hex: "#CD2626" }, + ListElement { name: "Fire Brick 4"; hex: "#8B1A1A" }, + ListElement { name: "Red"; hex: "#FF0000" }, + ListElement { name: "Red 2"; hex: "#EE0000" }, + ListElement { name: "Red 3"; hex: "#CD0000" }, + ListElement { name: "Red 4"; hex: "#8B0000" }, + ListElement { name: "Tomato"; hex: "#FF6347" }, + ListElement { name: "Tomato 2"; hex: "#EE5C42" }, + ListElement { name: "Tomato 3"; hex: "#CD4F39" }, + ListElement { name: "Tomato 4"; hex: "#8B3626" }, + ListElement { name: "Orange Red"; hex: "#FF4500" }, + ListElement { name: "Orange Red 2"; hex: "#EE4000" }, + ListElement { name: "Orange Red 3"; hex: "#CD3700" }, + ListElement { name: "Orange Red 4"; hex: "#8B2500" }, + ListElement { name: "Indian Red 2"; hex: "#EE6363" }, + ListElement { name: "Indian Red 3"; hex: "#CD5555" }, + ListElement { name: "Indian Red 4"; hex: "#8B3A3A" }, + ListElement { name: "Brown"; hex: "#A52A2A" }, + ListElement { name: "Brown 1"; hex: "#FF4040" }, + ListElement { name: "Brown 2"; hex: "#EE3B3B" }, + ListElement { name: "Brown 3"; hex: "#CD3333" }, + ListElement { name: "Brown 4"; hex: "#8B2323" } + ] + } + ListElement { + name: "Greens" + colors: [ + ListElement { name: "Green"; hex: "#008000" }, + ListElement { name: "Green 2"; hex: "#00EE00" }, + ListElement { name: "Green 3"; hex: "#00CD00" }, + ListElement { name: "Green 4"; hex: "#008B00" }, + ListElement { name: "Dark Green"; hex: "#006400" }, + ListElement { name: "Sap Green"; hex: "#308014" }, + ListElement { name: "Medium Spring Green"; hex: "#00FA9A" }, + ListElement { name: "Spring Green"; hex: "#00FF7F" }, + ListElement { name: "Spring Green 1"; hex: "#00EE76" }, + ListElement { name: "Spring Green 2"; hex: "#00CD66" }, + ListElement { name: "Spring Green 3"; hex: "#008B45" }, + ListElement { name: "Medium Sea Green"; hex: "#3CB371" }, + ListElement { name: "Sea Green 1"; hex: "#54FF9F" }, + ListElement { name: "Sea Green 2"; hex: "#4EEE94" }, + ListElement { name: "Sea Green 3"; hex: "#43CD80" }, + ListElement { name: "Sea Green 4"; hex: "#2E8B57" }, + ListElement { name: "Emerald Green"; hex: "#00C957" }, + ListElement { name: "Mint"; hex: "#BDFCC9" }, + ListElement { name: "Cobalt Green"; hex: "#3D9140" }, + ListElement { name: "Dark Sea Green"; hex: "#8FBC8F" }, + ListElement { name: "Dark Sea Green 1"; hex: "#C1FFC1" }, + ListElement { name: "Dark Sea Green 2"; hex: "#B4EEB4" }, + ListElement { name: "Dark Sea Green 3"; hex: "#9BCD9B" }, + ListElement { name: "Dark Sea Green 4"; hex: "#698B69" }, + ListElement { name: "Lime Green"; hex: "#00FF00" } + ] + } + ListElement { + name: "Blues" + colors: [ + ListElement { name: "Dark Slate Blue"; hex: "#483D8B" }, + ListElement { name: "Light Slate Blue"; hex: "#8470FF" }, + ListElement { name: "Medium Slate Blue"; hex: "#7B68EE" }, + ListElement { name: "Slate Blue"; hex: "#6A5ACD" }, + ListElement { name: "Blue"; hex: "#0000FF" }, + ListElement { name: "Midnight Blue"; hex: "#191970" }, + ListElement { name: "Cobalt"; hex: "#3D59AB" }, + ListElement { name: "Royal Blue"; hex: "#4169E1" }, + ListElement { name: "Corn Flower Blue"; hex: "#6495ED" }, + ListElement { name: "Light Steel Blue"; hex: "#B0C4DE" }, + ListElement { name: "Light Steel Blue 1"; hex: "#CAE1FF" }, + ListElement { name: "Light Steel Blue 2"; hex: "#BCD2EE" }, + ListElement { name: "Light Steel Blue 3"; hex: "#A2B5CD" }, + ListElement { name: "Dodger Blue"; hex: "#1E90FF" }, + ListElement { name: "Dodger Blue 2"; hex: "#1C86EE" }, + ListElement { name: "Dodger Blue 3"; hex: "#1874CD" }, + ListElement { name: "Dodger Blue 4"; hex: "#104E8B" }, + ListElement { name: "Steel Blue"; hex: "#4682B4" }, + ListElement { name: "Light Sky Blue"; hex: "#87CEFA" }, + ListElement { name: "Sky Blue"; hex: "#87CEEB" }, + ListElement { name: "Peacock"; hex: "#33A1C9" }, + ListElement { name: "Light Blue"; hex: "#ADD8E6" }, + ListElement { name: "Powder Blue"; hex: "#B0E0E6" }, + ListElement { name: "Cadet Blue"; hex: "#5F9EA0" }, + ListElement { name: "Cyan"; hex: "#00FFFF" } + ] + } +} diff --git a/examples/declarative/colorbrowser/qml/ColorDelegate.qml b/examples/declarative/colorbrowser/qml/ColorDelegate.qml new file mode 100644 index 0000000..c123d12 --- /dev/null +++ b/examples/declarative/colorbrowser/qml/ColorDelegate.qml @@ -0,0 +1,114 @@ +import Qt 4.6 + +Package { + Item { id: stack; Package.name: 'stack'; width: 110; height: 110; z: stack.PathView.z } + Item { id: list; Package.name: 'list'; width: mainWindow.width + 4; height: 110 } + Item { id: grid; Package.name: 'grid'; width: 110; height: 110 } + + Item { + id: delegate + + property double randomAngle: Math.random() * (2 * 8 + 1) - 8 + property bool open: false + + width: 110; height: 110; z: stack.PathView.z + + Image { x: -6; y: -5; source: 'box-shadow.png'; smooth: true; } + Rectangle { color: hex; anchors.fill: parent; smooth: true } + Image { id: box; source: 'box.png'; smooth: true; anchors.fill: parent } + + Binding { + target: infoColorName; property: 'text' + value: name; when: delegate.open && list.ListView.isCurrentItem + } + + Binding { + target: infoColorHex; property: 'text' + value: hex; when: delegate.open && list.ListView.isCurrentItem + } + + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.RightButton | Qt.LeftButton + onClicked: { + if (wrapper.state == 'inGrid' && mouse.button == Qt.RightButton) { + wrapper.state = '' + } else if (wrapper.state == 'inGrid') { + grid.GridView.view.currentIndex = index; + wrapper.state = 'fullscreen' + } else { + grid.GridView.view.currentIndex = index; + wrapper.state = 'inGrid' + } + } + } + + states: [ + State { + name: 'stacked'; when: wrapper.state == '' + ParentChange { target: delegate; parent: stack; x: 0; y: 0; rotation: delegate.randomAngle } + PropertyChanges { target: delegate; visible: stack.PathView.onPath ? 1.0 : 0.0 } + }, + State { + name: 'inGrid'; when: wrapper.state == 'inGrid' + ParentChange { target: delegate; parent: grid; x: 24; y: 24 } + PropertyChanges { target: delegate; open: true } + }, + State { + name: 'fullscreen'; when: wrapper.state == 'fullscreen' + ParentChange { target: delegate; parent: list; x: 0; y: 0; width: mainWindow.width; height: mainWindow.height } + PropertyChanges { target: box; opacity: 0 } + PropertyChanges { target: delegate; open: true } + } + ] + + transitions: [ + Transition { + from: 'stacked'; to: 'inGrid' + SequentialAnimation { + PauseAnimation { duration: 20 * index } + ParentAnimation { + target: delegate; via: foreground + NumberAnimation { targets: delegate; properties: 'x,y,width,height,rotation'; duration: 600; easing.type: 'OutBack' } + } + } + }, + Transition { + from: 'inGrid'; to: 'stacked' + ParentAnimation { + target: delegate; via: foreground + NumberAnimation { properties: 'x,y,width,height,rotation'; duration: 300; easing.type: 'InOutQuad' } + } + }, + Transition { + from: 'inGrid'; to: 'fullscreen' + SequentialAnimation { + PauseAnimation { duration: grid.GridView.isCurrentItem ? 0 : 300 } + ParentAnimation { + target: delegate; via: foreground + NumberAnimation { + properties: 'x,y,width,height,opacity' + duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad' + } + } + } + }, + Transition { + from: 'fullscreen'; to: 'inGrid' + SequentialAnimation { + PauseAnimation { duration: grid.GridView.isCurrentItem ? 3 : 0 } + ParallelAnimation { + ParentAnimation { + target: delegate; via: foreground + NumberAnimation { + properties: 'x,y,width,height' + duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad' + } + } + NumberAnimation { properties: 'opacity'; duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad' } + } + } + } + ] + } +} diff --git a/examples/declarative/colorbrowser/qml/box-shadow.png b/examples/declarative/colorbrowser/qml/box-shadow.png Binary files differnew file mode 100644 index 0000000..3281a37 --- /dev/null +++ b/examples/declarative/colorbrowser/qml/box-shadow.png diff --git a/examples/declarative/colorbrowser/qml/box.png b/examples/declarative/colorbrowser/qml/box.png Binary files differnew file mode 100644 index 0000000..86538aa --- /dev/null +++ b/examples/declarative/colorbrowser/qml/box.png diff --git a/examples/declarative/connections/connections.qml b/examples/declarative/connections/connections.qml index 4692343..c35bda5 100644 --- a/examples/declarative/connections/connections.qml +++ b/examples/declarative/connections/connections.qml @@ -10,7 +10,7 @@ Rectangle { Image { id: image; source: "content/bg1.jpg"; anchors.centerIn: parent; transformOrigin: Item.Center rotation: window.angle - rotation: Behavior { NumberAnimation { easing.type: "OutCubic"; duration: 300 } } + Behavior on rotation { NumberAnimation { easing.type: "OutCubic"; duration: 300 } } } Button { diff --git a/examples/declarative/dial/content/Dial.qml b/examples/declarative/dial/content/Dial.qml index 6fd0f39..ad4717a 100644 --- a/examples/declarative/dial/content/Dial.qml +++ b/examples/declarative/dial/content/Dial.qml @@ -26,7 +26,7 @@ Item { id: needleRotation origin.x: 7; origin.y: 65 angle: -130 - angle: SpringFollow { + SpringFollow on angle { spring: 1.4 damping: .15 source: Math.min(Math.max(-130, root.value*2.6 - 130), 133) diff --git a/examples/declarative/dynamic/qml/Sun.qml b/examples/declarative/dynamic/qml/Sun.qml index 796a370..81b6e9b 100644 --- a/examples/declarative/dynamic/qml/Sun.qml +++ b/examples/declarative/dynamic/qml/Sun.qml @@ -11,14 +11,14 @@ Image { //x and y get set when instantiated //head offscreen - y: NumberAnimation { - to: parent.height; - duration: 10000; + NumberAnimation on y { + to: window.height / 2; running: created + onRunningChanged: if (running) duration = (window.height - sun.y) * 10; else state = "OffScreen"; } states: State { - name: "OffScreen"; when: created && y > window.height / 2;//Below the ground + name: "OffScreen"; StateChangeScript { script: { sun.created = false; sun.destroy() } } } } diff --git a/examples/declarative/effects/effects.qml b/examples/declarative/effects/effects.qml index 0674433..997d7de 100644 --- a/examples/declarative/effects/effects.qml +++ b/examples/declarative/effects/effects.qml @@ -11,7 +11,7 @@ Rectangle { source: "pic.png" effect: Blur { - blurRadius: NumberAnimation { + NumberAnimation on blurRadius { id: blurEffect running: false from: 0; to: 10 @@ -33,7 +33,7 @@ Rectangle { effect: DropShadow { blurRadius: 3 offset.x: 3 - offset.y: NumberAnimation { id: dropShadowEffect; from: 0; to: 10; duration: 1000; running: false; repeat: true; } + NumberAnimation on offset.y { id: dropShadowEffect; from: 0; to: 10; duration: 1000; running: false; repeat: true; } } MouseArea { anchors.fill: parent; onClicked: dropShadowEffect.running = !dropShadowEffect.running } diff --git a/examples/declarative/fillmode/fillmode.qml b/examples/declarative/fillmode/fillmode.qml index ec3717f..ab0f81c 100644 --- a/examples/declarative/fillmode/fillmode.qml +++ b/examples/declarative/fillmode/fillmode.qml @@ -4,7 +4,7 @@ Image { width: 400 height: 250 source: "face.png" - fillMode: SequentialAnimation { + SequentialAnimation on fillMode { repeat: true PropertyAction { value: Image.Stretch } PropertyAction { target: label; property: "text"; value: "Stretch" } diff --git a/examples/declarative/focusscope/test5.qml b/examples/declarative/focusscope/test5.qml new file mode 100644 index 0000000..da98350 --- /dev/null +++ b/examples/declarative/focusscope/test5.qml @@ -0,0 +1,83 @@ +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/fonts/banner.qml b/examples/declarative/fonts/banner.qml index 00b8660..7989f80 100644 --- a/examples/declarative/fonts/banner.qml +++ b/examples/declarative/fonts/banner.qml @@ -10,7 +10,7 @@ Rectangle { Row { y: -screen.height / 4.5 - x: NumberAnimation { from: 0; to: -text.width; duration: 6000; repeat: true } + NumberAnimation on x { from: 0; to: -text.width; duration: 6000; repeat: true } Text { id: text; font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text } Text { font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text } Text { font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text } diff --git a/examples/declarative/fonts/hello.qml b/examples/declarative/fonts/hello.qml index fcc9580..334409e 100644 --- a/examples/declarative/fonts/hello.qml +++ b/examples/declarative/fonts/hello.qml @@ -9,7 +9,7 @@ Rectangle { id: text; color: "white"; anchors.centerIn: parent text: "Hello world!"; font.pixelSize: 60 - font.letterSpacing: SequentialAnimation { + SequentialAnimation on font.letterSpacing { repeat: true; NumberAnimation { from: 100; to: 300; easing.type: "InQuad"; duration: 3000 } ScriptAction { script: { @@ -17,7 +17,7 @@ Rectangle { container.x = (screen.width / 4) + (Math.random() * screen.width / 2) } } } - opacity: SequentialAnimation { + SequentialAnimation on opacity { repeat: true; NumberAnimation { from: 1; to: 0; duration: 2600 } PauseAnimation { duration: 400 } diff --git a/examples/declarative/imageprovider/ImageProviderCore/qmldir b/examples/declarative/imageprovider/ImageProviderCore/qmldir new file mode 100644 index 0000000..1028590 --- /dev/null +++ b/examples/declarative/imageprovider/ImageProviderCore/qmldir @@ -0,0 +1,2 @@ +plugin imageprovider + diff --git a/examples/declarative/imageprovider/main.cpp b/examples/declarative/imageprovider/imageprovider.cpp index d9d4c1a..253dbf5 100644 --- a/examples/declarative/imageprovider/main.cpp +++ b/examples/declarative/imageprovider/imageprovider.cpp @@ -39,7 +39,8 @@ ** ****************************************************************************/ -#include <QApplication> + +#include <qdeclarativeextensionplugin.h> #include <qdeclarativeengine.h> #include <qdeclarativecontext.h> @@ -70,29 +71,37 @@ public: } }; -int main(int argc, char ** argv) + +class ImageProviderExtensionPlugin : public QDeclarativeExtensionPlugin { - QApplication app(argc, argv); + Q_OBJECT +public: + void registerTypes(const char *uri) { + Q_UNUSED(uri); + + } - QDeclarativeView view; + void initializeEngine(QDeclarativeEngine *engine, const char *uri) { + Q_UNUSED(uri); - view.engine()->addImageProvider("colors", new ColorImageProvider); + engine->addImageProvider("colors", new ColorImageProvider); - QStringList dataList; - dataList.append("image://colors/red"); - dataList.append("image://colors/green"); - dataList.append("image://colors/blue"); - dataList.append("image://colors/brown"); - dataList.append("image://colors/orange"); - dataList.append("image://colors/purple"); - dataList.append("image://colors/yellow"); + QStringList dataList; + dataList.append("image://colors/red"); + dataList.append("image://colors/green"); + dataList.append("image://colors/blue"); + dataList.append("image://colors/brown"); + dataList.append("image://colors/orange"); + dataList.append("image://colors/purple"); + dataList.append("image://colors/yellow"); - QDeclarativeContext *ctxt = view.rootContext(); - ctxt->setContextProperty("myModel", QVariant::fromValue(dataList)); + QDeclarativeContext *ctxt = engine->rootContext(); + ctxt->setContextProperty("myModel", QVariant::fromValue(dataList)); + } - view.setSource(QUrl("qrc:view.qml")); - view.show(); +}; + +#include "imageprovider.moc" + +Q_EXPORT_PLUGIN(ImageProviderExtensionPlugin); - return app.exec(); -} -//![0] diff --git a/examples/declarative/imageprovider/imageprovider.pro b/examples/declarative/imageprovider/imageprovider.pro index 60423ab..e403bf8 100644 --- a/examples/declarative/imageprovider/imageprovider.pro +++ b/examples/declarative/imageprovider/imageprovider.pro @@ -1,9 +1,11 @@ -TEMPLATE = app -TARGET = imageprovider -DEPENDPATH += . -INCLUDEPATH += . +TEMPLATE = lib +TARGET = imageprovider QT += declarative +CONFIG += qt plugin + +TARGET = $$qtLibraryTarget($$TARGET) +DESTDIR = ImageProviderCore # Input -SOURCES += main.cpp -RESOURCES += imageprovider.qrc +SOURCES += imageprovider.cpp + diff --git a/examples/declarative/imageprovider/view.qml b/examples/declarative/imageprovider/imageprovider.qml index 2ab729d..f899b1e 100644 --- a/examples/declarative/imageprovider/view.qml +++ b/examples/declarative/imageprovider/imageprovider.qml @@ -1,4 +1,5 @@ import Qt 4.6 +import "ImageProviderCore" //![0] ListView { width: 100 diff --git a/examples/declarative/imageprovider/imageprovider.qrc b/examples/declarative/imageprovider/imageprovider.qrc deleted file mode 100644 index 17e9301..0000000 --- a/examples/declarative/imageprovider/imageprovider.qrc +++ /dev/null @@ -1,5 +0,0 @@ -<!DOCTYPE RCC><RCC version="1.0"> -<qresource> - <file>view.qml</file> -</qresource> -</RCC> diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml index accd969..4b2a3f8 100644 --- a/examples/declarative/layouts/layouts.qml +++ b/examples/declarative/layouts/layouts.qml @@ -1,5 +1,5 @@ import Qt 4.6 - +import Qt.widgets 4.6 Item { id: resizable width:400 diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml index 7146702..bce53bd 100644 --- a/examples/declarative/layouts/positioners.qml +++ b/examples/declarative/layouts/positioners.qml @@ -21,11 +21,11 @@ Rectangle { } Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 } } @@ -45,11 +45,11 @@ Rectangle { } Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { id: blueH1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { id: blueH2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 } } @@ -113,15 +113,15 @@ Rectangle { Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueG1; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueG2; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueG3; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } @@ -147,15 +147,15 @@ Rectangle { } Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueF1; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueF2; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueF3; color: "lightsteelblue"; width: 40; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 } } diff --git a/examples/declarative/listview/content/ClickAutoRepeating.qml b/examples/declarative/listview/content/ClickAutoRepeating.qml index 0850f4e..5240e65 100644 --- a/examples/declarative/listview/content/ClickAutoRepeating.qml +++ b/examples/declarative/listview/content/ClickAutoRepeating.qml @@ -10,7 +10,7 @@ Item { signal released signal clicked - isPressed: SequentialAnimation { + SequentialAnimation on isPressed { running: false id: autoRepeat PropertyAction { target: page; property: "isPressed"; value: true } diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml index be1f62d..5e4911d 100644 --- a/examples/declarative/listview/highlight.qml +++ b/examples/declarative/listview/highlight.qml @@ -44,7 +44,7 @@ Rectangle { id: petHighlight Rectangle { width: 200; height: 50; color: "#FFFF88" - y: SpringFollow { source: list1.currentItem.y; spring: 3; damping: 0.1 } + SpringFollow on y { source: list1.currentItem.y; spring: 3; damping: 0.1 } } } ListView { diff --git a/examples/declarative/package/Delegate.qml b/examples/declarative/package/Delegate.qml index 4109633..f35314f 100644 --- a/examples/declarative/package/Delegate.qml +++ b/examples/declarative/package/Delegate.qml @@ -2,24 +2,26 @@ import Qt 4.6 //![0] Package { - Text { id: listDelegate; width: 200; height: 25; text: "Empty"; Package.name: "list" } - Text { id: gridDelegate; width: 100; height: 50; text: "Empty"; Package.name: "grid" } + Text { id: listDelegate; width: 200; height: 25; text: 'Empty'; Package.name: 'list' } + Text { id: gridDelegate; width: 100; height: 50; text: 'Empty'; Package.name: 'grid' } Rectangle { id: wrapper width: 200; height: 25 - color: "lightsteelblue" + color: 'lightsteelblue' + Text { text: display; anchors.centerIn: parent } - MouseRegion { + MouseArea { anchors.fill: parent onClicked: { - if (wrapper.state == "inList") - wrapper.state = "inGrid"; + if (wrapper.state == 'inList') + wrapper.state = 'inGrid'; else - wrapper.state = "inList"; + wrapper.state = 'inList'; } } - state: "inList" + + state: 'inList' states: [ State { name: 'inList' @@ -27,15 +29,17 @@ Package { }, State { name: 'inGrid' - ParentChange { target: wrapper; parent: gridDelegate } - PropertyChanges { target: wrapper; x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height } + ParentChange { + target: wrapper; parent: gridDelegate + x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height + } } ] + transitions: [ Transition { - SequentialAnimation { - ParentAction { target: wrapper } - NumberAnimation { targets: wrapper; properties: 'x,y,width,height'; duration: 300 } + ParentAnimation { + NumberAnimation { properties: 'x,y,width,height'; duration: 300 } } } ] diff --git a/examples/declarative/parallax/qml/ParallaxView.qml b/examples/declarative/parallax/qml/ParallaxView.qml index 5e58100..08193ae 100644 --- a/examples/declarative/parallax/qml/ParallaxView.qml +++ b/examples/declarative/parallax/qml/ParallaxView.qml @@ -25,6 +25,7 @@ Item { anchors.fill: parent model: VisualItemModel { id: visualModel } + highlightRangeMode: ListView.StrictlyEnforceRange snapMode: ListView.SnapOneItem } diff --git a/examples/declarative/parallax/qml/Smiley.qml b/examples/declarative/parallax/qml/Smiley.qml index 81eadda..4442d5e 100644 --- a/examples/declarative/parallax/qml/Smiley.qml +++ b/examples/declarative/parallax/qml/Smiley.qml @@ -24,7 +24,7 @@ Item { // Animate the y property. Setting repeat to true makes the // animation repeat indefinitely, otherwise it would only run once. - y: SequentialAnimation { + SequentialAnimation on y { repeat: true // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function diff --git a/examples/declarative/progressbar/content/ProgressBar.qml b/examples/declarative/progressbar/content/ProgressBar.qml index bfc801c..65c80b2 100644 --- a/examples/declarative/progressbar/content/ProgressBar.qml +++ b/examples/declarative/progressbar/content/ProgressBar.qml @@ -21,7 +21,7 @@ Item { id: highlight; radius: 1 anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom anchors.leftMargin: 3; anchors.topMargin: 3; anchors.bottomMargin: 3 - width: EaseFollow { source: highlight.widthDest; velocity: 1200 } + EaseFollow on width { source: highlight.widthDest; velocity: 1200 } gradient: Gradient { GradientStop { id: g1; position: 0.0 } GradientStop { id: g2; position: 1.0 } diff --git a/examples/declarative/progressbar/progressbars.qml b/examples/declarative/progressbar/progressbars.qml index 6530c3d..a66d544 100644 --- a/examples/declarative/progressbar/progressbars.qml +++ b/examples/declarative/progressbar/progressbars.qml @@ -14,9 +14,9 @@ Rectangle { ProgressBar { property int r: Math.floor(Math.random() * 5000 + 1000) width: main.width - 20 - value: NumberAnimation { duration: r; from: 0; to: 100; repeat: true } - color: ColorAnimation { duration: r; from: "lightsteelblue"; to: "thistle"; repeat: true } - secondColor: ColorAnimation { duration: r; from: "steelblue"; to: "#CD96CD"; repeat: true } + NumberAnimation on value { duration: r; from: 0; to: 100; repeat: true } + ColorAnimation on color { duration: r; from: "lightsteelblue"; to: "thistle"; repeat: true } + ColorAnimation on secondColor { duration: r; from: "steelblue"; to: "#CD96CD"; repeat: true } } } } diff --git a/examples/declarative/snow/ImageBatch.qml b/examples/declarative/snow/ImageBatch.qml deleted file mode 100644 index c2a2674..0000000 --- a/examples/declarative/snow/ImageBatch.qml +++ /dev/null @@ -1,72 +0,0 @@ -import Qt 4.6 - -GridView { - id: grid - property int offset: 0 - property var ref - property bool isSelected: ref.selectedItemColumn >= offset && ref.selectedItemColumn < offset + 5 - - currentIndex: (ref.selectedItemColumn - offset) + ref.selectedItemRow * 5 - - property int imageWidth: ref.imageWidth - property int imageHeight: ref.imageHeight - - width: 5 * imageWidth - height: 4 * imageHeight - cellWidth: imageWidth - cellHeight: imageHeight - - states: State { - name: "selected"; when: grid.isSelected - PropertyChanges { target: grid; z: 150 } - } - transitions: Transition { - SequentialAnimation { - PauseAnimation { duration: 150 } - PropertyAction { properties: "z" } - } - } - model: XmlListModel { - property string tags : "" - source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2" - query: "/rss/channel/item" - namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";" - - XmlRole { name: "url"; query: "media:content/@url/string()" } - } - - delegate: Item { - id: root - property bool isSelected: GridView.isCurrentItem && grid.isSelected - transformOrigin: Item.Center - width: grid.imageWidth; height: grid.imageHeight; - - Image { id: flickrImage; source: url; fillMode: Image.PreserveAspectFit; smooth: true; anchors.fill: parent; - opacity: (status == Image.Ready)?1:0; opacity: Behavior { NumberAnimation { } } } - Loading { anchors.centerIn: parent; visible: flickrImage.status!=1 } - - states: State { - name: "selected" - when: root.isSelected - PropertyChanges { target: root; scale: 3; z: 100 } - } - transitions: [ - Transition { - to: "selected" - SequentialAnimation { - PauseAnimation { duration: 150 } - PropertyAction { properties: "z" } - NumberAnimation { properties: "scale"; duration: 150; } - } - }, - Transition { - from: "selected" - SequentialAnimation { - NumberAnimation { properties: "scale"; duration: 150 } - PropertyAction { properties: "z" } - } - } - ] - } -} - diff --git a/examples/declarative/snow/Loading.qml b/examples/declarative/snow/Loading.qml deleted file mode 100644 index 238d9c7..0000000 --- a/examples/declarative/snow/Loading.qml +++ /dev/null @@ -1,8 +0,0 @@ -import Qt 4.6 - -Image { - id: loading; source: "pics/loading.png"; transformOrigin: Item.Center - rotation: NumberAnimation { - id: rotationAnimation; from: 0; to: 360; running: loading.visible == true; repeat: true; duration: 900 - } -} diff --git a/examples/declarative/snow/create.js b/examples/declarative/snow/create.js deleted file mode 100644 index 2bdae4a..0000000 --- a/examples/declarative/snow/create.js +++ /dev/null @@ -1,12 +0,0 @@ -var myComponent = null; - -function createNewBlock() { - if (myComponent == null) - myComponent = createComponent("ImageBatch.qml"); - - var obj = myComponent.createObject(); - obj.parent = layout; - obj.offset = maximumColumn + 1; - obj.ref = imagePanel; - maximumColumn += 5; -} diff --git a/examples/declarative/snow/pics/loading.png b/examples/declarative/snow/pics/loading.png Binary files differdeleted file mode 100644 index 0296cfe..0000000 --- a/examples/declarative/snow/pics/loading.png +++ /dev/null diff --git a/examples/declarative/snow/snow.qml b/examples/declarative/snow/snow.qml deleted file mode 100644 index 39c9c43..0000000 --- a/examples/declarative/snow/snow.qml +++ /dev/null @@ -1,69 +0,0 @@ -import Qt 4.6 - -Rectangle { - id: imagePanel - width: 1024 - height: 768 - color: "black" - - property int maximumColumn: 4 - property int selectedItemRow: 0 - property int selectedItemColumn: 0 - - Script { source: "create.js" } - - onSelectedItemColumnChanged: if (selectedItemColumn == maximumColumn) createNewBlock(); - - property int imageWidth: 200 - property int imageHeight: 200 - - property int selectedX: selectedItemColumn * imageWidth - property int selectedY: selectedItemRow * imageHeight - - Item { - anchors.centerIn: parent - Row { - id: layout - property real targetX: -(selectedX + imageWidth / 2) - - property real targetDeform: 0 - property bool slowDeform: true - - property real deform: 0 - deform: SpringFollow { - id: deformFollow; source: layout.targetDeform; velocity: layout.slowDeform?0.1:2 - onSyncChanged: if(inSync) { layout.slowDeform = true; layout.targetDeform = 0; } - } - - ImageBatch { offset: 0; ref: imagePanel } - - x: SpringFollow { source: layout.targetX; velocity: 1000 } - y: SpringFollow { source: -(selectedY + imageHeight / 2); velocity: 500 } - } - - transform: Rotation { - axis.y: 1; axis.z: 0 - angle: layout.deform * -100 - } - } - - Script { - function left() { - if (selectedItemColumn <= 0) return; - selectedItemColumn -= 1; - layout.slowDeform = false; - layout.targetDeform = Math.max(Math.min(layout.deform - 0.1, -0.1), -0.4); - } - function right() { - selectedItemColumn += 1; - layout.slowDeform = false; - layout.targetDeform = Math.min(Math.max(layout.deform + 0.1, 0.1), 0.4); - } - } - - focus: true - Keys.onLeftPressed: "left()" - Keys.onRightPressed: "right()" - Keys.onUpPressed: "if (selectedItemRow > 0) selectedItemRow = selectedItemRow - 1" - Keys.onDownPressed: "if (selectedItemRow < 3) selectedItemRow = selectedItemRow + 1" -} diff --git a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml index 9d35832..36178ec 100644 --- a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml +++ b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml @@ -14,7 +14,7 @@ Rectangle { signal closed(); color: "white"; border.width: 1; width: myText.width + 20; height: 60; opacity: 0 - opacity: Behavior { + Behavior on opacity { NumberAnimation { duration: 1000 } } Text { id: myText; anchors.centerIn: parent; text: "Hello World!" } diff --git a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml index 85c2c93..9ef455a 100644 --- a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml +++ b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml @@ -8,8 +8,8 @@ Item { id:block property int targetX: 0 property int targetY: 0 - x: SpringFollow { enabled: spawned; source: targetX; spring: 2; damping: 0.2 } - y: SpringFollow { source: targetY; spring: 2; damping: 0.2 } + SpringFollow on x { enabled: spawned; source: targetX; spring: 2; damping: 0.2 } + SpringFollow on y { source: targetY; spring: 2; damping: 0.2 } //![1] //![2] @@ -24,7 +24,7 @@ Item { id:block } } opacity: 0 - opacity: Behavior { NumberAnimation { properties:"opacity"; duration: 200 } } + Behavior on opacity { NumberAnimation { properties:"opacity"; duration: 200 } } anchors.fill: parent } //![2] diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml index ed9fd32..831c03b 100644 --- a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml +++ b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml @@ -13,7 +13,7 @@ Rectangle { signal closed(); color: "white"; border.width: 1; width: myText.width + 20; height: 60; opacity: 0 - opacity: Behavior { + Behavior on opacity { NumberAnimation { duration: 1000 } } Text { id: myText; anchors.centerIn: parent; text: "Hello World!" } diff --git a/examples/declarative/tvtennis/tvtennis.qml b/examples/declarative/tvtennis/tvtennis.qml index 4bd5319..6022a15 100644 --- a/examples/declarative/tvtennis/tvtennis.qml +++ b/examples/declarative/tvtennis/tvtennis.qml @@ -1,4 +1,5 @@ import Qt 4.6 +import Qt.multimedia 4.7 Rectangle { id: page @@ -15,27 +16,30 @@ Rectangle { color: "Lime" x: 20; width: 20; height: 20; z: 1 + SoundEffect { id: paddle; source: "paddle.wav" } + SoundEffect { id: wall; source: "click.wav" } + // Move the ball to the right and back to the left repeatedly - x: SequentialAnimation { + SequentialAnimation on x { repeat: true NumberAnimation { to: page.width - 40; duration: 2000 } - ScriptAction { script: Qt.playSound('paddle.wav') } + ScriptAction { script: paddle.play() } PropertyAction { target: ball; property: "direction"; value: "left" } NumberAnimation { to: 20; duration: 2000 } - ScriptAction { script: Qt.playSound('paddle.wav') } + ScriptAction { script: paddle.play() } PropertyAction { target: ball; property: "direction"; value: "right" } } // Make y follow the target y coordinate, with a velocity of 200 - y: SpringFollow { source: ball.targetY; velocity: 200 } + SpringFollow on y { source: ball.targetY; velocity: 200 } // Detect the ball hitting the top or bottom of the view and bounce it onYChanged: { if (y <= 0) { - Qt.playSound('click.wav'); + wall.play(); targetY = page.height - 20; } else if (y >= page.height - 20) { - Qt.playSound('click.wav'); + wall.play(); targetY = 0; } } @@ -47,7 +51,7 @@ Rectangle { id: leftBat color: "Lime" x: 2; width: 20; height: 90 - y: SpringFollow { + SpringFollow on y { source: ball.y - 45; velocity: 300 enabled: ball.direction == 'left' } @@ -56,7 +60,7 @@ Rectangle { id: rightBat color: "Lime" x: page.width - 22; width: 20; height: 90 - y: SpringFollow { + SpringFollow on y { source: ball.y-45; velocity: 300 enabled: ball.direction == 'right' } diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml index c39f99b..7424f60 100644 --- a/examples/declarative/velocity/Day.qml +++ b/examples/declarative/velocity/Day.qml @@ -24,7 +24,7 @@ Rectangle { id: stickyPage x: Math.random() * 200 + 100 y: Math.random() * 300 + 50 - rotation: SpringFollow { + SpringFollow on rotation { source: -flickable.horizontalVelocity / 100 spring: 2.0; damping: 0.1 } diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml index 74c6844..3c00ee6 100644 --- a/examples/declarative/webview/autosize.qml +++ b/examples/declarative/webview/autosize.qml @@ -1,4 +1,5 @@ import Qt 4.6 +import org.webkit 1.0 // The WebView size is determined by the width, height, // preferredWidth, and preferredHeight properties. diff --git a/examples/declarative/webview/content/FieldText.qml b/examples/declarative/webview/content/FieldText.qml index 19b6acc..d282209 100644 --- a/examples/declarative/webview/content/FieldText.qml +++ b/examples/declarative/webview/content/FieldText.qml @@ -85,7 +85,7 @@ Item { font.bold: true text: label opacity: textEdit.text == '' ? 1 : 0 - opacity: Behavior { + Behavior on opacity { NumberAnimation { property: "opacity" duration: 250 diff --git a/examples/declarative/webview/content/Mapping/Map.qml b/examples/declarative/webview/content/Mapping/Map.qml index 2e98940..6c3b021 100644 --- a/examples/declarative/webview/content/Mapping/Map.qml +++ b/examples/declarative/webview/content/Mapping/Map.qml @@ -1,4 +1,5 @@ import Qt 4.6 +import org.webkit 1.0 Item { id: page diff --git a/examples/declarative/webview/evalandattach.qml b/examples/declarative/webview/evalandattach.qml index 94301cd..d219d84 100644 --- a/examples/declarative/webview/evalandattach.qml +++ b/examples/declarative/webview/evalandattach.qml @@ -1,4 +1,5 @@ import Qt 4.6 +import org.webkit 1.0 Item { height: 640 diff --git a/examples/declarative/webview/googleMaps.qml b/examples/declarative/webview/googleMaps.qml index 1886961..a04fecb 100644 --- a/examples/declarative/webview/googleMaps.qml +++ b/examples/declarative/webview/googleMaps.qml @@ -6,6 +6,7 @@ // order to create a Map. import Qt 4.6 +import org.webkit 1.0 import "content/Mapping" Map { diff --git a/examples/declarative/webview/inline-html.qml b/examples/declarative/webview/inline-html.qml index 23b4555..41dfec3 100644 --- a/examples/declarative/webview/inline-html.qml +++ b/examples/declarative/webview/inline-html.qml @@ -1,4 +1,5 @@ import Qt 4.6 +import org.webkit 1.0 // Inline HTML with loose formatting can be // set on the html property. diff --git a/examples/declarative/webview/newwindows.qml b/examples/declarative/webview/newwindows.qml index 5dd4cd5..c62aba6 100644 --- a/examples/declarative/webview/newwindows.qml +++ b/examples/declarative/webview/newwindows.qml @@ -4,6 +4,7 @@ // allow it on WebView with settings.javascriptCanOpenWindows: true import Qt 4.6 +import org.webkit 1.0 Grid { columns: 3 diff --git a/examples/declarative/webview/qdeclarative-in-html.qml b/examples/declarative/webview/qdeclarative-in-html.qml index 77180ec..172ea4b 100644 --- a/examples/declarative/webview/qdeclarative-in-html.qml +++ b/examples/declarative/webview/qdeclarative-in-html.qml @@ -1,4 +1,5 @@ import Qt 4.6 +import org.webkit 1.0 // The WebView supports QML data through the HTML OBJECT tag Rectangle { diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml index 9332f3e..5530819 100644 --- a/examples/declarative/webview/transparent.qml +++ b/examples/declarative/webview/transparent.qml @@ -1,4 +1,5 @@ import Qt 4.6 +import org.webkit 1.0 // The WebView background is transparent // if the HTML does not specify a background diff --git a/examples/declarative/workerlistmodel/dataloader.js b/examples/declarative/workerlistmodel/dataloader.js new file mode 100644 index 0000000..eac7478 --- /dev/null +++ b/examples/declarative/workerlistmodel/dataloader.js @@ -0,0 +1,14 @@ +// ![0] +WorkerScript.onMessage = function(msg) { + console.log("Worker told to", msg.action); + + if (msg.action == 'appendCurrentTime') { + var data = {'time': new Date().toTimeString()}; + msg.model.append(data); + msg.model.sync(); // updates the changes to the list + + var msgToSend = {'msg': 'Model updated!'}; + WorkerScript.sendMessage(msgToSend); + } +} +// ![0] diff --git a/examples/declarative/workerlistmodel/timedisplay.qml b/examples/declarative/workerlistmodel/timedisplay.qml new file mode 100644 index 0000000..3bf2630 --- /dev/null +++ b/examples/declarative/workerlistmodel/timedisplay.qml @@ -0,0 +1,33 @@ +// ![0] +import Qt 4.6 + +ListView { + width: 200 + height: 300 + + model: listModel + delegate: Component { + Text { text: time } + } + + WorkerListModel { id: listModel } + + WorkerScript { + id: worker + source: "dataloader.js" + onMessage: { + console.log("Worker said", messageObject.msg); + } + } + + Timer { + id: timer + interval: 2000; repeat: true; running: true; triggeredOnStart: true + + onTriggered: { + var msg = {'action': 'appendCurrentTime', 'model': listModel}; + worker.sendMessage(msg); + } + } +} +// ![0] |
