From 4e5cf3f0936ed921973e451e23414059e1a9fc6b Mon Sep 17 00:00:00 2001 From: Yann Bodson Date: Wed, 3 Mar 2010 14:36:48 +1000 Subject: add colorbrowser qml example This example shows how to use qml packages to animate between pathview, gridview and listview. --- examples/declarative/colorbrowser/colorbrowser.qml | 101 ++++++++++++++++++ .../colorbrowser/dummydata/ColorsModel.qml | 96 +++++++++++++++++ .../declarative/colorbrowser/qml/ColorDelegate.qml | 114 +++++++++++++++++++++ .../declarative/colorbrowser/qml/box-shadow.png | Bin 0 -> 871 bytes examples/declarative/colorbrowser/qml/box.png | Bin 0 -> 765 bytes 5 files changed, 311 insertions(+) create mode 100644 examples/declarative/colorbrowser/colorbrowser.qml create mode 100644 examples/declarative/colorbrowser/dummydata/ColorsModel.qml create mode 100644 examples/declarative/colorbrowser/qml/ColorDelegate.qml create mode 100644 examples/declarative/colorbrowser/qml/box-shadow.png create mode 100644 examples/declarative/colorbrowser/qml/box.png diff --git a/examples/declarative/colorbrowser/colorbrowser.qml b/examples/declarative/colorbrowser/colorbrowser.qml new file mode 100644 index 0000000..ebd49c6 --- /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 } + } + + MouseRegion { 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..605e45b --- /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 + } + + MouseRegion { + 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 new file mode 100644 index 0000000..3281a37 Binary files /dev/null and b/examples/declarative/colorbrowser/qml/box-shadow.png differ diff --git a/examples/declarative/colorbrowser/qml/box.png b/examples/declarative/colorbrowser/qml/box.png new file mode 100644 index 0000000..86538aa Binary files /dev/null and b/examples/declarative/colorbrowser/qml/box.png differ -- cgit v0.12 From 2ef17050f740b4e0debc43f66f26f419b317b7ab Mon Sep 17 00:00:00 2001 From: Aaron Kennedy Date: Wed, 3 Mar 2010 15:15:47 +1000 Subject: QDeclarativeGuard should handle objects being deleted --- src/declarative/qml/qdeclarativedeclarativedata_p.h | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/declarative/qml/qdeclarativedeclarativedata_p.h b/src/declarative/qml/qdeclarativedeclarativedata_p.h index a7a73bc..ae40130 100644 --- a/src/declarative/qml/qdeclarativedeclarativedata_p.h +++ b/src/declarative/qml/qdeclarativedeclarativedata_p.h @@ -120,6 +120,11 @@ public: template void QDeclarativeGuard::addGuard() { + if (QObjectPrivate::get(o)->wasDeleted) { + if (prev) remGuard(); + return; + } + QDeclarativeDeclarativeData *data = QDeclarativeDeclarativeData::get(o, true); next = data->guards; if (next) reinterpret_cast *>(next)->prev = &next; -- cgit v0.12