|
1 /**************************************************************************** |
|
2 ** |
|
3 ** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). |
|
4 ** All rights reserved. |
|
5 ** Contact: Nokia Corporation (qt-info@nokia.com) |
|
6 ** |
|
7 ** This file is part of the QtDeclarative module of the Qt Toolkit. |
|
8 ** |
|
9 ** $QT_BEGIN_LICENSE:BSD$ |
|
10 ** You may use this file under the terms of the BSD license as follows: |
|
11 ** |
|
12 ** "Redistribution and use in source and binary forms, with or without |
|
13 ** modification, are permitted provided that the following conditions are |
|
14 ** met: |
|
15 ** * Redistributions of source code must retain the above copyright |
|
16 ** notice, this list of conditions and the following disclaimer. |
|
17 ** * Redistributions in binary form must reproduce the above copyright |
|
18 ** notice, this list of conditions and the following disclaimer in |
|
19 ** the documentation and/or other materials provided with the |
|
20 ** distribution. |
|
21 ** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor |
|
22 ** the names of its contributors may be used to endorse or promote |
|
23 ** products derived from this software without specific prior written |
|
24 ** permission. |
|
25 ** |
|
26 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
|
27 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
|
28 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
|
29 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
|
30 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
|
31 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
|
32 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
|
33 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
|
34 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
|
35 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
|
36 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." |
|
37 ** $QT_END_LICENSE$ |
|
38 ** |
|
39 ****************************************************************************/ |
|
40 |
|
41 import Qt 4.7 |
|
42 |
|
43 Rectangle { |
|
44 id: page |
|
45 width: 420; height: 420 |
|
46 |
|
47 Column { |
|
48 id: layout1 |
|
49 y: 0 |
|
50 move: Transition { |
|
51 NumberAnimation { properties: "y"; easing.type: Easing.OutBounce } |
|
52 } |
|
53 add: Transition { |
|
54 NumberAnimation { properties: "y"; easing.type: Easing.OutQuad } |
|
55 } |
|
56 |
|
57 Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } |
|
58 |
|
59 Rectangle { |
|
60 id: blueV1 |
|
61 width: 100; height: 50 |
|
62 color: "lightsteelblue" |
|
63 border.color: "black" |
|
64 radius: 15 |
|
65 Behavior on opacity { NumberAnimation {} } |
|
66 } |
|
67 |
|
68 Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 } |
|
69 |
|
70 Rectangle { |
|
71 id: blueV2 |
|
72 width: 100; height: 50 |
|
73 color: "lightsteelblue" |
|
74 border.color: "black" |
|
75 radius: 15 |
|
76 Behavior on opacity { NumberAnimation {} } |
|
77 } |
|
78 |
|
79 Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 } |
|
80 } |
|
81 |
|
82 Row { |
|
83 id: layout2 |
|
84 y: 300 |
|
85 move: Transition { |
|
86 NumberAnimation { properties: "x"; easing.type: Easing.OutBounce } |
|
87 } |
|
88 add: Transition { |
|
89 NumberAnimation { properties: "x"; easing.type: Easing.OutQuad } |
|
90 } |
|
91 |
|
92 Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } |
|
93 |
|
94 Rectangle { |
|
95 id: blueH1 |
|
96 width: 50; height: 100 |
|
97 color: "lightsteelblue" |
|
98 border.color: "black" |
|
99 radius: 15 |
|
100 Behavior on opacity { NumberAnimation {} } |
|
101 } |
|
102 |
|
103 Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 } |
|
104 |
|
105 Rectangle { |
|
106 id: blueH2 |
|
107 width: 50; height: 100 |
|
108 color: "lightsteelblue" |
|
109 border.color: "black" |
|
110 radius: 15 |
|
111 Behavior on opacity { NumberAnimation {} } |
|
112 } |
|
113 |
|
114 Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 } |
|
115 } |
|
116 |
|
117 Button { |
|
118 x: 135; y: 90 |
|
119 text: "Remove" |
|
120 icon: "del.png" |
|
121 |
|
122 onClicked: { |
|
123 blueH2.opacity = 0 |
|
124 blueH1.opacity = 0 |
|
125 blueV1.opacity = 0 |
|
126 blueV2.opacity = 0 |
|
127 blueG1.opacity = 0 |
|
128 blueG2.opacity = 0 |
|
129 blueG3.opacity = 0 |
|
130 blueF1.opacity = 0 |
|
131 blueF2.opacity = 0 |
|
132 blueF3.opacity = 0 |
|
133 } |
|
134 } |
|
135 |
|
136 Button { |
|
137 x: 145; y: 140 |
|
138 text: "Add" |
|
139 icon: "add.png" |
|
140 |
|
141 onClicked: { |
|
142 blueH2.opacity = 1 |
|
143 blueH1.opacity = 1 |
|
144 blueV1.opacity = 1 |
|
145 blueV2.opacity = 1 |
|
146 blueG1.opacity = 1 |
|
147 blueG2.opacity = 1 |
|
148 blueG3.opacity = 1 |
|
149 blueF1.opacity = 1 |
|
150 blueF2.opacity = 1 |
|
151 blueF3.opacity = 1 |
|
152 } |
|
153 } |
|
154 |
|
155 Grid { |
|
156 x: 260; y: 0 |
|
157 columns: 3 |
|
158 |
|
159 move: Transition { |
|
160 NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } |
|
161 } |
|
162 |
|
163 add: Transition { |
|
164 NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } |
|
165 } |
|
166 |
|
167 Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } |
|
168 |
|
169 Rectangle { |
|
170 id: blueG1 |
|
171 width: 50; height: 50 |
|
172 color: "lightsteelblue" |
|
173 border.color: "black" |
|
174 radius: 15 |
|
175 Behavior on opacity { NumberAnimation {} } |
|
176 } |
|
177 |
|
178 Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } |
|
179 |
|
180 Rectangle { |
|
181 id: blueG2 |
|
182 width: 50; height: 50 |
|
183 color: "lightsteelblue" |
|
184 border.color: "black" |
|
185 radius: 15 |
|
186 Behavior on opacity { NumberAnimation {} } |
|
187 } |
|
188 |
|
189 Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } |
|
190 |
|
191 Rectangle { |
|
192 id: blueG3 |
|
193 width: 50; height: 50 |
|
194 color: "lightsteelblue" |
|
195 border.color: "black" |
|
196 radius: 15 |
|
197 Behavior on opacity { NumberAnimation {} } |
|
198 } |
|
199 |
|
200 Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } |
|
201 Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } |
|
202 Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } |
|
203 } |
|
204 |
|
205 Flow { |
|
206 id: layout4 |
|
207 x: 260; y: 250; width: 150 |
|
208 |
|
209 move: Transition { |
|
210 NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } |
|
211 } |
|
212 |
|
213 add: Transition { |
|
214 NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } |
|
215 } |
|
216 |
|
217 Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } |
|
218 |
|
219 Rectangle { |
|
220 id: blueF1 |
|
221 width: 60; height: 50 |
|
222 color: "lightsteelblue" |
|
223 border.color: "black" |
|
224 radius: 15 |
|
225 Behavior on opacity { NumberAnimation {} } |
|
226 } |
|
227 |
|
228 Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 } |
|
229 |
|
230 Rectangle { |
|
231 id: blueF2 |
|
232 width: 60; height: 50 |
|
233 color: "lightsteelblue" |
|
234 border.color: "black" |
|
235 radius: 15 |
|
236 Behavior on opacity { NumberAnimation {} } |
|
237 } |
|
238 |
|
239 Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } |
|
240 |
|
241 Rectangle { |
|
242 id: blueF3 |
|
243 width: 40; height: 50 |
|
244 color: "lightsteelblue" |
|
245 border.color: "black" |
|
246 radius: 15 |
|
247 Behavior on opacity { NumberAnimation {} } |
|
248 } |
|
249 |
|
250 Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 } |
|
251 } |
|
252 |
|
253 } |