From b440beba19519e9211752656fdfeda250a35c81f Mon Sep 17 00:00:00 2001 From: Yann Bodson Date: Thu, 18 Mar 2010 14:25:36 +1000 Subject: Fix examples after 47fb07c9fdf47584ae55f3412102bbeef5576b04. --- .../declarative/behaviours/behavior-example.qml | 72 ++++++++++++++++++++ examples/declarative/behaviours/behavior.qml | 72 -------------------- .../connections/connections-example.qml | 27 ++++++++ examples/declarative/connections/connections.qml | 27 -------- examples/declarative/dial/dial-example.qml | 35 ++++++++++ examples/declarative/dial/dial.qml | 35 ---------- examples/declarative/flipable/flipable-example.qml | 37 +++++++++++ examples/declarative/flipable/flipable.qml | 37 ----------- examples/declarative/gridview/gridview-example.qml | 38 +++++++++++ examples/declarative/gridview/gridview.qml | 38 ----------- .../imageprovider/imageprovider-example.qml | 23 +++++++ .../declarative/imageprovider/imageprovider.qml | 23 ------- examples/declarative/listview/listview-example.qml | 77 ++++++++++++++++++++++ examples/declarative/listview/listview.qml | 77 ---------------------- 14 files changed, 309 insertions(+), 309 deletions(-) create mode 100644 examples/declarative/behaviours/behavior-example.qml delete mode 100644 examples/declarative/behaviours/behavior.qml create mode 100644 examples/declarative/connections/connections-example.qml delete mode 100644 examples/declarative/connections/connections.qml create mode 100644 examples/declarative/dial/dial-example.qml delete mode 100644 examples/declarative/dial/dial.qml create mode 100644 examples/declarative/flipable/flipable-example.qml delete mode 100644 examples/declarative/flipable/flipable.qml create mode 100644 examples/declarative/gridview/gridview-example.qml delete mode 100644 examples/declarative/gridview/gridview.qml create mode 100644 examples/declarative/imageprovider/imageprovider-example.qml delete mode 100644 examples/declarative/imageprovider/imageprovider.qml create mode 100644 examples/declarative/listview/listview-example.qml delete mode 100644 examples/declarative/listview/listview.qml diff --git a/examples/declarative/behaviours/behavior-example.qml b/examples/declarative/behaviours/behavior-example.qml new file mode 100644 index 0000000..c84bf62 --- /dev/null +++ b/examples/declarative/behaviours/behavior-example.qml @@ -0,0 +1,72 @@ +import Qt 4.6 + +Rectangle { + color: "black" + width: 400; height: 400 + + Rectangle { + color: "transparent" + anchors.centerIn: parent + width: 200; height: 200 + radius: 30 + border.width: 10; border.color: "white"; + + SideRect { + id: leftRect + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.left + text: "Left" + } + + SideRect { + id: rightRect + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.right + text: "Right" + } + + SideRect { + id: topRect + anchors.verticalCenter: parent.top + anchors.horizontalCenter: parent.horizontalCenter + text: "Top" + } + + SideRect { + id: bottomRect + anchors.verticalCenter: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + text: "Bottom" + } + + + Rectangle { + id: focusRect + + 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 } } + Text { + id: focusText + text: focusRect.text; + Behavior on text { + SequentialAnimation { + NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 } + 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/behaviours/behavior.qml b/examples/declarative/behaviours/behavior.qml deleted file mode 100644 index c84bf62..0000000 --- a/examples/declarative/behaviours/behavior.qml +++ /dev/null @@ -1,72 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "black" - width: 400; height: 400 - - Rectangle { - color: "transparent" - anchors.centerIn: parent - width: 200; height: 200 - radius: 30 - border.width: 10; border.color: "white"; - - SideRect { - id: leftRect - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.left - text: "Left" - } - - SideRect { - id: rightRect - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.right - text: "Right" - } - - SideRect { - id: topRect - anchors.verticalCenter: parent.top - anchors.horizontalCenter: parent.horizontalCenter - text: "Top" - } - - SideRect { - id: bottomRect - anchors.verticalCenter: parent.bottom - anchors.horizontalCenter: parent.horizontalCenter - text: "Bottom" - } - - - Rectangle { - id: focusRect - - 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 } } - Text { - id: focusText - text: focusRect.text; - Behavior on text { - SequentialAnimation { - NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 } - 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/connections/connections-example.qml b/examples/declarative/connections/connections-example.qml new file mode 100644 index 0000000..c35bda5 --- /dev/null +++ b/examples/declarative/connections/connections-example.qml @@ -0,0 +1,27 @@ +import Qt 4.6 +import "content" + +Rectangle { + id: window; color: "#646464" + width: 640; height: 480 + + property int angle: 0 + + Image { + id: image; source: "content/bg1.jpg"; anchors.centerIn: parent; transformOrigin: Item.Center + rotation: window.angle + Behavior on rotation { NumberAnimation { easing.type: "OutCubic"; duration: 300 } } + } + + Button { + id: leftButton; image: "content/rotate-left.png" + anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 10 } + } + Button { + id: rightButton; image: "content/rotate-right.png" + anchors { right: parent.right; bottom: parent.bottom; rightMargin: 10; bottomMargin: 10 } + } + + Connections { target: leftButton; onClicked: window.angle -= 90 } + Connections { target: rightButton; onClicked: window.angle += 90 } +} diff --git a/examples/declarative/connections/connections.qml b/examples/declarative/connections/connections.qml deleted file mode 100644 index c35bda5..0000000 --- a/examples/declarative/connections/connections.qml +++ /dev/null @@ -1,27 +0,0 @@ -import Qt 4.6 -import "content" - -Rectangle { - id: window; color: "#646464" - width: 640; height: 480 - - property int angle: 0 - - Image { - id: image; source: "content/bg1.jpg"; anchors.centerIn: parent; transformOrigin: Item.Center - rotation: window.angle - Behavior on rotation { NumberAnimation { easing.type: "OutCubic"; duration: 300 } } - } - - Button { - id: leftButton; image: "content/rotate-left.png" - anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 10 } - } - Button { - id: rightButton; image: "content/rotate-right.png" - anchors { right: parent.right; bottom: parent.bottom; rightMargin: 10; bottomMargin: 10 } - } - - Connections { target: leftButton; onClicked: window.angle -= 90 } - Connections { target: rightButton; onClicked: window.angle += 90 } -} diff --git a/examples/declarative/dial/dial-example.qml b/examples/declarative/dial/dial-example.qml new file mode 100644 index 0000000..3aed70e --- /dev/null +++ b/examples/declarative/dial/dial-example.qml @@ -0,0 +1,35 @@ +import Qt 4.6 +import "content" + +Rectangle { + color: "#545454" + width: 300; height: 300 + + // Dial with a slider to adjust it + Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } + + Rectangle { + id: container + anchors.bottom: parent.bottom; anchors.bottomMargin: 10 + anchors.left: parent.left; anchors.leftMargin: 20 + anchors.right: parent.right; anchors.rightMargin: 20; height: 16 + gradient: Gradient { + GradientStop { position: 0.0; color: "gray" } + GradientStop { position: 1.0; color: "white" } + } + radius: 8; opacity: 0.7; smooth: true + Rectangle { + id: slider + x: 1; y: 1; width: 30; height: 14 + radius: 6; smooth: true + gradient: Gradient { + GradientStop { position: 0.0; color: "#424242" } + GradientStop { position: 1.0; color: "black" } + } + MouseArea { + anchors.fill: parent + drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 + } + } + } +} diff --git a/examples/declarative/dial/dial.qml b/examples/declarative/dial/dial.qml deleted file mode 100644 index 3aed70e..0000000 --- a/examples/declarative/dial/dial.qml +++ /dev/null @@ -1,35 +0,0 @@ -import Qt 4.6 -import "content" - -Rectangle { - color: "#545454" - width: 300; height: 300 - - // Dial with a slider to adjust it - Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } - - Rectangle { - id: container - anchors.bottom: parent.bottom; anchors.bottomMargin: 10 - anchors.left: parent.left; anchors.leftMargin: 20 - anchors.right: parent.right; anchors.rightMargin: 20; height: 16 - gradient: Gradient { - GradientStop { position: 0.0; color: "gray" } - GradientStop { position: 1.0; color: "white" } - } - radius: 8; opacity: 0.7; smooth: true - Rectangle { - id: slider - x: 1; y: 1; width: 30; height: 14 - radius: 6; smooth: true - gradient: Gradient { - GradientStop { position: 0.0; color: "#424242" } - GradientStop { position: 1.0; color: "black" } - } - MouseArea { - anchors.fill: parent - drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 - } - } - } -} diff --git a/examples/declarative/flipable/flipable-example.qml b/examples/declarative/flipable/flipable-example.qml new file mode 100644 index 0000000..c837ebc --- /dev/null +++ b/examples/declarative/flipable/flipable-example.qml @@ -0,0 +1,37 @@ +//! [0] +import Qt 4.6 + +Flipable { + id: flipable + width: 240 + height: 240 + + 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 + } +} +//! [0] + diff --git a/examples/declarative/flipable/flipable.qml b/examples/declarative/flipable/flipable.qml deleted file mode 100644 index c837ebc..0000000 --- a/examples/declarative/flipable/flipable.qml +++ /dev/null @@ -1,37 +0,0 @@ -//! [0] -import Qt 4.6 - -Flipable { - id: flipable - width: 240 - height: 240 - - 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 - } -} -//! [0] - diff --git a/examples/declarative/gridview/gridview-example.qml b/examples/declarative/gridview/gridview-example.qml new file mode 100644 index 0000000..93931c7 --- /dev/null +++ b/examples/declarative/gridview/gridview-example.qml @@ -0,0 +1,38 @@ +import Qt 4.6 + +Rectangle { + width: 300; height: 400; color: "white" + + ListModel { + id: appModel + ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" } + ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" } + ListElement { name: "Camera"; icon: "pics/Camera_48.png" } + ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" } + ListElement { name: "Messaging"; icon: "pics/EMail_48.png" } + ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } + ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" } + } + + Component { + id: appDelegate + Item { + width: 100; height: 100 + Image { id: myIcon; y: 20; anchors.horizontalCenter: parent.horizontalCenter; source: icon } + Text { anchors.top: myIcon.bottom; anchors.horizontalCenter: parent.horizontalCenter; text: name } + } + } + + Component { + id: appHighlight + Rectangle { width: 80; height: 80; color: "lightsteelblue" } + } + + GridView { + anchors.fill: parent + cellWidth: 100; cellHeight: 100 + model: appModel; delegate: appDelegate + highlight: appHighlight + focus: true + } +} diff --git a/examples/declarative/gridview/gridview.qml b/examples/declarative/gridview/gridview.qml deleted file mode 100644 index 93931c7..0000000 --- a/examples/declarative/gridview/gridview.qml +++ /dev/null @@ -1,38 +0,0 @@ -import Qt 4.6 - -Rectangle { - width: 300; height: 400; color: "white" - - ListModel { - id: appModel - ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" } - ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" } - ListElement { name: "Camera"; icon: "pics/Camera_48.png" } - ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" } - ListElement { name: "Messaging"; icon: "pics/EMail_48.png" } - ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } - ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" } - } - - Component { - id: appDelegate - Item { - width: 100; height: 100 - Image { id: myIcon; y: 20; anchors.horizontalCenter: parent.horizontalCenter; source: icon } - Text { anchors.top: myIcon.bottom; anchors.horizontalCenter: parent.horizontalCenter; text: name } - } - } - - Component { - id: appHighlight - Rectangle { width: 80; height: 80; color: "lightsteelblue" } - } - - GridView { - anchors.fill: parent - cellWidth: 100; cellHeight: 100 - model: appModel; delegate: appDelegate - highlight: appHighlight - focus: true - } -} diff --git a/examples/declarative/imageprovider/imageprovider-example.qml b/examples/declarative/imageprovider/imageprovider-example.qml new file mode 100644 index 0000000..a1f2794 --- /dev/null +++ b/examples/declarative/imageprovider/imageprovider-example.qml @@ -0,0 +1,23 @@ +import Qt 4.6 +import ImageProviderCore 1.0 +//![0] +ListView { + width: 100 + height: 100 + anchors.fill: parent + model: myModel + delegate: Component { + Item { + width: 100 + height: 50 + Text { + text: "Loading..." + anchors.centerIn: parent + } + Image { + source: modelData + } + } + } +} +//![0] diff --git a/examples/declarative/imageprovider/imageprovider.qml b/examples/declarative/imageprovider/imageprovider.qml deleted file mode 100644 index a1f2794..0000000 --- a/examples/declarative/imageprovider/imageprovider.qml +++ /dev/null @@ -1,23 +0,0 @@ -import Qt 4.6 -import ImageProviderCore 1.0 -//![0] -ListView { - width: 100 - height: 100 - anchors.fill: parent - model: myModel - delegate: Component { - Item { - width: 100 - height: 50 - Text { - text: "Loading..." - anchors.centerIn: parent - } - Image { - source: modelData - } - } - } -} -//![0] diff --git a/examples/declarative/listview/listview-example.qml b/examples/declarative/listview/listview-example.qml new file mode 100644 index 0000000..92acce1 --- /dev/null +++ b/examples/declarative/listview/listview-example.qml @@ -0,0 +1,77 @@ +import Qt 4.6 + +Rectangle { + width: 600; height: 300; color: "white" + + // MyPets model is defined in dummydata/MyPetsModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + // This one contains my pets. + // Define a delegate component. A component will be + // instantiated for each visible item in the list. + Component { + id: petDelegate + Item { + width: 200; height: 50 + Column { + Text { text: 'Name: ' + name } + Text { text: 'Type: ' + type } + Text { text: 'Age: ' + age } + } + } + } + + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. + Component { + id: petHighlight + Rectangle { color: "#FFFF88" } + } + + // Show the model in three lists, with different highlight ranges. + // preferredHighlightBegin and preferredHighlightEnd set the + // range in which to attempt to maintain the highlight. + // Note that the second and third ListView + // set their currentIndex to be the same as the first, and that + // the first ListView is given keyboard focus. + // The default mode allows the currentItem to move freely + // within the visible area. If it would move outside the visible + // area, the view is scrolled to keep it visible. + // The second list sets a highlight range which attempts to keep the + // current item within the the bounds of the range, however + // items will not scroll beyond the beginning or end of the view, + // forcing the highlight to move outside the range at the ends. + // The third list sets the highlightRangeMode to StrictlyEnforceRange + // and sets a range smaller than the height of an item. This + // forces the current item to change when the view is flicked, + // since the highlight is unable to move. + // Note that the first ListView sets its currentIndex to be equal to + // the third ListView's currentIndex. By flicking List3 with + // the mouse, the current index of List1 will be changed. + ListView { + id: list1 + width: 200; height: parent.height + model: MyPetsModel; delegate: petDelegate + highlight: petHighlight; currentIndex: list3.currentIndex + focus: true + } + ListView { + id: list2 + x: 200; width: 200; height: parent.height + model: MyPetsModel; delegate: petDelegate; highlight: petHighlight + preferredHighlightBegin: 80 + preferredHighlightEnd: 220 + highlightRangeMode: "ApplyRange" + currentIndex: list1.currentIndex + } + ListView { + id: list3 + x: 400; width: 200; height: parent.height + model: MyPetsModel; delegate: petDelegate; highlight: petHighlight + currentIndex: list1.currentIndex + preferredHighlightBegin: 125 + preferredHighlightEnd: 125 + highlightRangeMode: "StrictlyEnforceRange" + flickDeceleration: 1000 + } +} diff --git a/examples/declarative/listview/listview.qml b/examples/declarative/listview/listview.qml deleted file mode 100644 index 92acce1..0000000 --- a/examples/declarative/listview/listview.qml +++ /dev/null @@ -1,77 +0,0 @@ -import Qt 4.6 - -Rectangle { - width: 600; height: 300; color: "white" - - // MyPets model is defined in dummydata/MyPetsModel.qml - // The viewer automatically loads files in dummydata/* to assist - // development without a real data source. - // This one contains my pets. - // Define a delegate component. A component will be - // instantiated for each visible item in the list. - Component { - id: petDelegate - Item { - width: 200; height: 50 - Column { - Text { text: 'Name: ' + name } - Text { text: 'Type: ' + type } - Text { text: 'Age: ' + age } - } - } - } - - // Define a highlight component. Just one of these will be instantiated - // by each ListView and placed behind the current item. - Component { - id: petHighlight - Rectangle { color: "#FFFF88" } - } - - // Show the model in three lists, with different highlight ranges. - // preferredHighlightBegin and preferredHighlightEnd set the - // range in which to attempt to maintain the highlight. - // Note that the second and third ListView - // set their currentIndex to be the same as the first, and that - // the first ListView is given keyboard focus. - // The default mode allows the currentItem to move freely - // within the visible area. If it would move outside the visible - // area, the view is scrolled to keep it visible. - // The second list sets a highlight range which attempts to keep the - // current item within the the bounds of the range, however - // items will not scroll beyond the beginning or end of the view, - // forcing the highlight to move outside the range at the ends. - // The third list sets the highlightRangeMode to StrictlyEnforceRange - // and sets a range smaller than the height of an item. This - // forces the current item to change when the view is flicked, - // since the highlight is unable to move. - // Note that the first ListView sets its currentIndex to be equal to - // the third ListView's currentIndex. By flicking List3 with - // the mouse, the current index of List1 will be changed. - ListView { - id: list1 - width: 200; height: parent.height - model: MyPetsModel; delegate: petDelegate - highlight: petHighlight; currentIndex: list3.currentIndex - focus: true - } - ListView { - id: list2 - x: 200; width: 200; height: parent.height - model: MyPetsModel; delegate: petDelegate; highlight: petHighlight - preferredHighlightBegin: 80 - preferredHighlightEnd: 220 - highlightRangeMode: "ApplyRange" - currentIndex: list1.currentIndex - } - ListView { - id: list3 - x: 400; width: 200; height: parent.height - model: MyPetsModel; delegate: petDelegate; highlight: petHighlight - currentIndex: list1.currentIndex - preferredHighlightBegin: 125 - preferredHighlightEnd: 125 - highlightRangeMode: "StrictlyEnforceRange" - flickDeceleration: 1000 - } -} -- cgit v0.12