← Back to branch summary

~saviq/ubuntu/saucy/qtdeclarative-opensource-src/add-qtquick-delegate-range

« back to all changes in this revision

Viewing changes to tests/testapplications/listview/viewTransitions.qml

  • Committer: Package Import Robot
  • Author(s): Timo Jyrinki
  • Date: 2013-02-05 14:17:19 UTC
  • Revision ID: package-import@ubuntu.com-20130205141719-qqeyml8wslpyez52
Tags: upstream-5.0.1
Import upstream version 5.0.1

Show diffs side-by-side

added added

removed removed

Lines of Context:
tests/testapplications/listview/viewTransitions.qml
 
1
/****************************************************************************
 
2
**
 
3
** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
 
4
** Contact: http://www.qt-project.org/legal
 
5
**
 
6
** This file is part of the test suite of the Qt Toolkit.
 
7
**
 
8
** $QT_BEGIN_LICENSE:BSD$
 
9
** You may use this file under the terms of the BSD license as follows:
 
10
**
 
11
** "Redistribution and use in source and binary forms, with or without
 
12
** modification, are permitted provided that the following conditions are
 
13
** met:
 
14
**   * Redistributions of source code must retain the above copyright
 
15
**     notice, this list of conditions and the following disclaimer.
 
16
**   * Redistributions in binary form must reproduce the above copyright
 
17
**     notice, this list of conditions and the following disclaimer in
 
18
**     the documentation and/or other materials provided with the
 
19
**     distribution.
 
20
**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
 
21
**     of its contributors may be used to endorse or promote products derived
 
22
**     from this software without specific prior written permission.
 
23
**
 
24
**
 
25
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 
26
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 
27
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 
28
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 
29
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 
30
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 
31
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 
32
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 
33
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 
34
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 
35
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
 
36
**
 
37
** $QT_END_LICENSE$
 
38
**
 
39
****************************************************************************/
 
40
 
 
41
import QtQuick 2.0
 
42
import QtQuick.Particles 2.0
 
43
Item {
 
44
    id: root
 
45
    width: 450; height: 600
 
46
 
 
47
    property int currentSet: 0
 
48
    property bool useStock: false
 
49
 
 
50
    Component {
 
51
        id: viewDelegate
 
52
 
 
53
        Rectangle {
 
54
            id: item
 
55
            property bool movn: false
 
56
            property int parts: 0
 
57
 
 
58
            width: 225; height: 40
 
59
            border.width: ListView.isCurrentItem ? 3 : 1
 
60
            z: ListView.isCurrentItem ? 100 : 1
 
61
            color: original ? "lightsteelblue" : "yellow"
 
62
            objectName: name
 
63
            Text { x: 10; text: name; font.pixelSize: 20 }
 
64
            MouseArea { anchors.fill: parent; onClicked: listview.currentIndex = index }
 
65
 
 
66
            Emitter {
 
67
                id: emitter
 
68
                system: ps
 
69
                anchors.fill: parent
 
70
                enabled: false
 
71
                velocity: AngleDirection {
 
72
                    angle: 0
 
73
                    angleVariation: 360
 
74
                    magnitude: 50
 
75
                    magnitudeVariation: 50
 
76
                }
 
77
            }
 
78
            Emitter {
 
79
                id: emitter2
 
80
                system: ps
 
81
                anchors.fill: parent
 
82
                enabled: item.movn
 
83
                emitRate: parts
 
84
                velocity: AngleDirection {
 
85
                    angle: 0
 
86
                    angleVariation: 360
 
87
                    magnitude: 2
 
88
                    magnitudeVariation: 5
 
89
                }
 
90
            }
 
91
        }
 
92
    }
 
93
 
 
94
    ListView {
 
95
        id: listview
 
96
        width: 225; height: 500
 
97
        anchors.centerIn: parent
 
98
        delegate: viewDelegate
 
99
        header: Rectangle {
 
100
            height: 50; width: 225
 
101
            color: "blue"
 
102
            Text { anchors.centerIn: parent; text: "Transitions!"; color: "goldenrod" }
 
103
        }
 
104
        model: ListModel {
 
105
            id: a_model
 
106
            ListElement { name: "Item A"; original: true }
 
107
            ListElement { name: "Item B"; original: true }
 
108
            ListElement { name: "Item C"; original: true }
 
109
            ListElement { name: "Item D"; original: true }
 
110
            ListElement { name: "Item E"; original: true }
 
111
            ListElement { name: "Item F"; original: true }
 
112
        }
 
113
        Rectangle {
 
114
            anchors.fill: parent
 
115
            color: "transparent"
 
116
            border.color: "black"
 
117
        }
 
118
 
 
119
    }
 
120
 
 
121
    ParticleSystem {
 
122
        id: ps
 
123
        ImageParticle {
 
124
            id: imageparticle
 
125
            source: "star.png"
 
126
            color: "red"
 
127
        }
 
128
    }
 
129
 
 
130
 
 
131
    /* States (Selected operation Transitions) */
 
132
    states: [
 
133
        State {
 
134
            name: "setA"
 
135
            when: currentSet == 0
 
136
            PropertyChanges {
 
137
                target: listview
 
138
                add: a_add
 
139
                move: a_move
 
140
                remove: a_remove
 
141
                displaced: a_displaced
 
142
            }
 
143
        },
 
144
        State {
 
145
            name: "setB"
 
146
            when: currentSet == 1
 
147
            PropertyChanges {
 
148
                target: listview
 
149
                add: b_add
 
150
                move: b_move
 
151
                remove: b_remove
 
152
                displaced: b_displaced
 
153
            }
 
154
        },
 
155
        State {
 
156
            name: "setC"
 
157
            when: currentSet == 2
 
158
            PropertyChanges {
 
159
                target: listview
 
160
                add: c_add
 
161
                move: c_move
 
162
                remove: c_remove
 
163
                addDisplaced: c_addDisplaced
 
164
                moveDisplaced: c_moveDisplaced
 
165
                removeDisplaced: c_removeDisplaced
 
166
            }
 
167
        },
 
168
        State {
 
169
            name: "setD"
 
170
            when: currentSet == 3
 
171
            PropertyChanges {
 
172
                target: listview
 
173
                move: d_move
 
174
                moveDisplaced: d_moveDisplaced
 
175
            }
 
176
            PropertyChanges {
 
177
                target: root
 
178
                useStock: true
 
179
            }
 
180
        }
 
181
    ]
 
182
 
 
183
    /* Transitions */
 
184
    Transition {
 
185
        id: a_add
 
186
        ParallelAnimation {
 
187
            NumberAnimation { target: a_add.ViewTransition.item; properties: "opacity"; from: 0; to: 1; duration: 1000 }
 
188
        }
 
189
    }
 
190
    Transition {
 
191
        id: a_remove
 
192
        SequentialAnimation {
 
193
            NumberAnimation { target: a_remove.ViewTransition.item; properties: "opacity"; from: 1; to: 0; duration: 1000 }
 
194
        }
 
195
    }
 
196
    Transition {
 
197
        id: a_move
 
198
        ColorAnimation { target: a_move.ViewTransition.item; properties: "color"; to: "lightsteelblue"; duration: 1000 }
 
199
        PathAnimation {
 
200
            duration: 1000
 
201
            target: a_move.ViewTransition.item
 
202
            path: Path {
 
203
                PathCurve { x: a_move.ViewTransition.destination.x + 150; y: a_move.ViewTransition.destination.y + 100 }
 
204
                PathCurve { x: a_move.ViewTransition.destination.x + 150; y: a_move.ViewTransition.destination.y }
 
205
                PathCurve { x: a_move.ViewTransition.destination.x; y: a_move.ViewTransition.destination.y }
 
206
            }
 
207
        }
 
208
    }
 
209
    Transition {
 
210
        id: a_displaced
 
211
        PropertyAction { target: a_displaced.ViewTransition.item; property: "color"; value: "lightsteelblue" }
 
212
        ParallelAnimation {
 
213
            NumberAnimation { target: a_displaced.ViewTransition.item; property: "opacity"; to: 1; duration: 250 }
 
214
            SequentialAnimation {
 
215
                PauseAnimation { duration: a_displaced.ViewTransition.index * 200 }
 
216
                NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutQuad }
 
217
            }
 
218
        }
 
219
    }
 
220
 
 
221
 
 
222
    Transition {
 
223
        id: b_add
 
224
        SequentialAnimation {
 
225
            NumberAnimation { target: b_add.ViewTransition.item; properties: "scale"; from: 1; to: 1.3; duration: 100 }
 
226
            NumberAnimation { target: b_add.ViewTransition.item; properties: "scale"; from: 1.3; to: 1; duration: 500; easing.type: Easing.OutBounce }
 
227
        }
 
228
    }
 
229
    Transition {
 
230
        id: b_move
 
231
        SequentialAnimation {
 
232
            PauseAnimation { duration: b_move.ViewTransition.index * 100 }
 
233
            ParallelAnimation {
 
234
                ColorAnimation { target: b_move.ViewTransition.item; properties: "color"; from: "red"; to: "lightsteelblue"; duration: 2000 }
 
235
                SequentialAnimation {
 
236
                    PathAnimation {
 
237
                        duration: 1000
 
238
                        target: b_move.ViewTransition.item
 
239
                        path: Path {
 
240
                            PathCurve { x: b_move.ViewTransition.destination.x + 150; y: b_move.ViewTransition.destination.y + 100 }
 
241
                            PathCurve { relativeX: 30; relativeY: -100 }
 
242
                        }
 
243
                    }
 
244
                    NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
 
245
                }
 
246
            }
 
247
        }
 
248
    }
 
249
    Transition {
 
250
        id: b_remove
 
251
        SequentialAnimation {
 
252
            NumberAnimation { target: b_remove.ViewTransition.item; properties: "opacity"; from: 1; to: 0; duration: 1000 }
 
253
        }
 
254
    }
 
255
    Transition {
 
256
        id: b_displaced
 
257
        PropertyAction { target: b_displaced.ViewTransition.item; property: "color"; value: "lightsteelblue" }
 
258
        SequentialAnimation {
 
259
            PauseAnimation { duration: b_displaced.ViewTransition.item.x == 0 ? b_displaced.ViewTransition.index * 200 : 0 }
 
260
            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
 
261
        }
 
262
    }
 
263
 
 
264
 
 
265
    Transition {
 
266
        id: c_add
 
267
        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
 
268
        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
 
269
        property int xoff
 
270
        xoff: c_add.ViewTransition.index % 2 == 0 ? 200 : -200
 
271
        PathAnimation {
 
272
            duration: 1000
 
273
            path: Path {
 
274
                startX: c_add.ViewTransition.destination.x + c_add.xoff
 
275
                startY: c_add.ViewTransition.destination.y + 200
 
276
                PathCurve { relativeX: -100; relativeY: -50 }
 
277
                PathCurve { relativeX: 50; relativeY: -150 }
 
278
                PathCurve {
 
279
                    x: c_add.ViewTransition.destination.x
 
280
                    y: c_add.ViewTransition.destination.y
 
281
                }
 
282
            }
 
283
        }
 
284
    }
 
285
    Transition {
 
286
        id: c_move
 
287
        ColorAnimation { target: c_move.ViewTransition.item; properties: "color"; from: "red"; to: "lightsteelblue"; duration: 1000 }
 
288
        PathAnimation {
 
289
            duration: 1000
 
290
            target: c_move.ViewTransition.item
 
291
            path: Path {
 
292
                PathCurve { x: c_move.ViewTransition.destination.x + 150; y: c_move.ViewTransition.destination.y + 100 }
 
293
                PathCurve { x: c_move.ViewTransition.destination.x + 150; y: c_move.ViewTransition.destination.y }
 
294
                PathCurve { x: c_move.ViewTransition.destination.x; y: c_move.ViewTransition.destination.y }
 
295
            }
 
296
        }
 
297
    }
 
298
    Transition {
 
299
        id: c_remove
 
300
        PropertyAnimation { target: c_remove.ViewTransition.item; properties: "opacity"; to: 0; duration: 3000; easing.type: Easing.OutInBounce }
 
301
    }
 
302
    Transition {
 
303
        id: c_addDisplaced
 
304
 
 
305
        PropertyAction { property: "color"; value: "lightsteelblue" }
 
306
        PropertyAction { property: "opacity"; value: 1.0 }
 
307
        PropertyAction { property: "scale"; value: 1.0 }
 
308
        SequentialAnimation {
 
309
            PauseAnimation { duration: c_addDisplaced.ViewTransition.index * 200 }
 
310
            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutElastic }
 
311
        }
 
312
 
 
313
    }
 
314
    Transition {
 
315
        id: c_moveDisplaced
 
316
 
 
317
        PropertyAction { property: "color"; value: "lightsteelblue" }
 
318
        PropertyAction { property: "opacity"; value: 1.0 }
 
319
        PropertyAction { property: "scale"; value: 1.0 }
 
320
        SequentialAnimation {
 
321
            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
 
322
        }
 
323
 
 
324
    }
 
325
    Transition {
 
326
        id: c_removeDisplaced
 
327
 
 
328
        PropertyAction { property: "color"; value: "lightsteelblue" }
 
329
        PropertyAction { property: "opacity"; value: 1.0 }
 
330
        PropertyAction { property: "scale"; value: 1.0 }
 
331
        SequentialAnimation {
 
332
            PauseAnimation { duration: (c_removeDisplaced.ViewTransition.index * 200) + 3000 }
 
333
            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutElastic }
 
334
        }
 
335
 
 
336
    }
 
337
    Transition {
 
338
        id: d_move
 
339
        SequentialAnimation {
 
340
            PropertyAction { target: d_move.ViewTransition.item; property: "movn"; value: true }
 
341
            ParallelAnimation {
 
342
                NumberAnimation { target: d_move.ViewTransition.item; properties: "opacity"; to: 0; duration: 2000 }
 
343
                NumberAnimation { target: d_move.ViewTransition.item; properties: "parts"; to: 500; duration: 2000 }
 
344
            }
 
345
            NumberAnimation { properties: "x,y"; duration: 1000*(d_move.ViewTransition.index+1) }
 
346
            ParallelAnimation {
 
347
                NumberAnimation { target: d_move.ViewTransition.item; properties: "opacity"; to: 1; duration: 2000 }
 
348
                NumberAnimation { target: d_move.ViewTransition.item; properties: "parts"; to: 0; duration: 2000 }
 
349
            }
 
350
            PropertyAction { target: d_move.ViewTransition.item; property: "movn"; value: false }
 
351
        }
 
352
    }
 
353
 
 
354
    Transition {
 
355
        id: d_moveDisplaced
 
356
        PropertyAction { target: d_moveDisplaced.ViewTransition.item; property: "color"; value: "lightsteelblue" }
 
357
        SequentialAnimation {
 
358
            PauseAnimation { duration: 500*(d_moveDisplaced.ViewTransition.index+1) }
 
359
            NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutQuad }
 
360
        }
 
361
    }
 
362
 
 
363
    /* Buttons */
 
364
    Column {
 
365
        spacing: 2
 
366
        Rectangle {
 
367
            gradient: Gradient {
 
368
                GradientStop { position: 0.0; color: "darkgray" }
 
369
                GradientStop { position: 0.5; color: "lightgray" }
 
370
                GradientStop { position: 1.0; color: "darkgray" }
 
371
            }
 
372
            radius: 6
 
373
            border.color: "black"
 
374
            height: 50; width: 80
 
375
            Text { anchors.centerIn: parent; text: "To Top" }
 
376
            MouseArea { anchors.fill: parent; onClicked: listview.model.move(listview.currentIndex, 0, 1) }
 
377
        }
 
378
        Rectangle {
 
379
            gradient: Gradient {
 
380
                GradientStop { position: 0.0; color: "darkgray" }
 
381
                GradientStop { position: 0.5; color: "lightgray" }
 
382
                GradientStop { position: 1.0; color: "darkgray" }
 
383
            }
 
384
            radius: 6
 
385
            border.color: "black"
 
386
            height: 50; width: 80
 
387
            Text { anchors.centerIn: parent; text: "Add" }
 
388
            MouseArea {
 
389
                anchors.fill: parent
 
390
                onClicked: listview.model.insert(listview.currentIndex+1, {"name": "New item", "original": false } )
 
391
            }
 
392
        }
 
393
        Rectangle {
 
394
            gradient: Gradient {
 
395
                GradientStop { position: 0.0; color: "darkgray" }
 
396
                GradientStop { position: 0.5; color: "lightgray" }
 
397
                GradientStop { position: 1.0; color: "darkgray" }
 
398
            }
 
399
            radius: 6
 
400
            border.color: "black"
 
401
            height: 50; width: 80
 
402
            Text { anchors.centerIn: parent; text: "Remove" }
 
403
            MouseArea {
 
404
                anchors.fill: parent
 
405
                onClicked: listview.model.remove(listview.currentIndex)
 
406
            }
 
407
        }
 
408
        Rectangle {
 
409
            gradient: Gradient {
 
410
                GradientStop { position: 0.0; color: "darkgray" }
 
411
                GradientStop { position: 0.5; color: "lightgray" }
 
412
                GradientStop { position: 1.0; color: "darkgray" }
 
413
            }
 
414
            radius: 6
 
415
            border.color: "black"
 
416
            height: 50; width: 80
 
417
            Text { anchors.centerIn: parent; text: "Append" }
 
418
            MouseArea {
 
419
                anchors.fill: parent
 
420
                onClicked: listview.model.append({"name": "New item", "original": false })
 
421
            }
 
422
        }
 
423
    }
 
424
    Column {
 
425
        spacing: 2
 
426
        anchors.right: parent.right
 
427
        anchors.rightMargin: 2
 
428
        Rectangle {
 
429
            gradient: Gradient {
 
430
                GradientStop { position: 0.0; color: "darkgray" }
 
431
                GradientStop { position: 0.5; color: currentSet == 0 ? "green" : "lightgray"
 
432
                    ColorAnimation on color { duration: 1000 }
 
433
                }
 
434
                GradientStop { position: 1.0; color: "darkgray" }
 
435
            }
 
436
            radius: 6
 
437
            border.color: "black"
 
438
            height: 50; width: 80
 
439
            Text { anchors.centerIn: parent; text: "Set A" }
 
440
            MouseArea { anchors.fill: parent; onClicked: { currentSet = 0 } }
 
441
        }
 
442
        Rectangle {
 
443
            gradient: Gradient {
 
444
                GradientStop { position: 0.0; color: "darkgray" }
 
445
                GradientStop { position: 0.5; color: currentSet == 1 ? "green" : "lightgray" }
 
446
                GradientStop { position: 1.0; color: "darkgray" }
 
447
            }
 
448
            radius: 6
 
449
            border.color: "black"
 
450
            height: 50; width: 80
 
451
            Text { anchors.centerIn: parent; text: "Set B" }
 
452
            MouseArea { anchors.fill: parent; onClicked: { currentSet = 1 } }
 
453
        }
 
454
        Rectangle {
 
455
            gradient: Gradient {
 
456
                GradientStop { position: 0.0; color: "darkgray" }
 
457
                GradientStop { position: 0.5; color: currentSet == 2 ? "green" : "lightgray" }
 
458
                GradientStop { position: 1.0; color: "darkgray" }
 
459
            }
 
460
            radius: 6
 
461
            border.color: "black"
 
462
            height: 50; width: 80
 
463
            Text { anchors.centerIn: parent; text: "Set C" }
 
464
            MouseArea { anchors.fill: parent; onClicked: { currentSet = 2 } }
 
465
        }
 
466
        Rectangle {
 
467
            gradient: Gradient {
 
468
                GradientStop { position: 0.0; color: "darkgray" }
 
469
                GradientStop { position: 0.5; color: currentSet == 3 ? "green" : "lightgray" }
 
470
                GradientStop { position: 1.0; color: "darkgray" }
 
471
            }
 
472
            radius: 6
 
473
            border.color: "black"
 
474
            height: 50; width: 80
 
475
            Text { anchors.centerIn: parent; text: "Set D" }
 
476
            MouseArea { anchors.fill: parent; onClicked: { currentSet = 3 } }
 
477
        }
 
478
    }
 
479
}