Peter M. Groen / dali-demo

Commit 917cdd7856fd36426339b0af9197bb6fdee94d11

Authored by Adeel Kazmi
Committed by Gerrit Code Review
2 parents 2fed89ad 2c54b5f6

Merge "Updated shadow-button transition demo to use states and sub-states" into devel/master

Inline Side-by-side
Showing 3 changed files with 377 additions and 445 deletions
examples/transitions/transition-application.cpp
  View file @917cdd7
@@ -24,6 +24,7 @@ @@ -24,6 +24,7 @@
24 24
25 // External includes 25 // External includes
26 #include <dali-toolkit/dali-toolkit.h> 26 #include <dali-toolkit/dali-toolkit.h>
  27 +#include <dali-toolkit/devel-api/controls/control-devel.h>
27 #include <dali-toolkit/devel-api/visuals/visual-properties-devel.h> 28 #include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
28 #include <dali-toolkit/devel-api/visuals/text-visual-properties.h> 29 #include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
29 #include "shadow-button.h" 30 #include "shadow-button.h"
@@ -110,6 +111,9 @@ void TransitionApplication::Create( Application&amp; application ) @@ -110,6 +111,9 @@ void TransitionApplication::Create( Application&amp; application )
110 mShadowButton.SetAnchorPoint( AnchorPoint::CENTER ); 111 mShadowButton.SetAnchorPoint( AnchorPoint::CENTER );
111 mShadowButton.SetParentOrigin( ParentOrigin::CENTER ); 112 mShadowButton.SetParentOrigin( ParentOrigin::CENTER );
112 mShadowButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); 113 mShadowButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  114 + mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::DISABLED );
  115 + mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "UNCHECKED" );
  116 +
113 buttonLayout.AddChild( mShadowButton, TableView::CellPosition(1, 1) ); 117 buttonLayout.AddChild( mShadowButton, TableView::CellPosition(1, 1) );
114 118
115 TableView actionButtonLayout = TableView::New( 1, NUMBER_OF_ACTION_BUTTONS+1 ); 119 TableView actionButtonLayout = TableView::New( 1, NUMBER_OF_ACTION_BUTTONS+1 );
@@ -135,7 +139,7 @@ void TransitionApplication::Create( Application&amp; application ) @@ -135,7 +139,7 @@ void TransitionApplication::Create( Application&amp; application )
135 mActionButtons[i].ClickedSignal().Connect( this, &TransitionApplication::OnActionButtonClicked ); 139 mActionButtons[i].ClickedSignal().Connect( this, &TransitionApplication::OnActionButtonClicked );
136 actionButtonLayout.AddChild( mActionButtons[i], TableView::CellPosition( 0, 1+i ) ); 140 actionButtonLayout.AddChild( mActionButtons[i], TableView::CellPosition( 0, 1+i ) );
137 } 141 }
138 - SetLabelText( mActionButtons[0], "Activate" ); 142 + SetLabelText( mActionButtons[0], "Enable" );
139 SetLabelText( mActionButtons[1], "Check" ); 143 SetLabelText( mActionButtons[1], "Check" );
140 mActionButtons[1].SetProperty( Button::Property::DISABLED, true ); 144 mActionButtons[1].SetProperty( Button::Property::DISABLED, true );
141 145
@@ -154,11 +158,13 @@ bool TransitionApplication::OnActionButtonClicked( Button button ) @@ -154,11 +158,13 @@ bool TransitionApplication::OnActionButtonClicked( Button button )
154 mShadowButton.SetActiveState( ! activeState ); 158 mShadowButton.SetActiveState( ! activeState );
155 if( activeState ) 159 if( activeState )
156 { 160 {
157 - SetLabelText( button, "Activate" ); 161 + SetLabelText( button, "Enable" );
  162 + mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::DISABLED );
158 } 163 }
159 else 164 else
160 { 165 {
161 - SetLabelText( button, "Deactivate" ); 166 + SetLabelText( button, "Disable" );
  167 + mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::NORMAL );
162 } 168 }
163 mActionButtons[1].SetProperty( Button::Property::DISABLED, activeState ); 169 mActionButtons[1].SetProperty( Button::Property::DISABLED, activeState );
164 break; 170 break;
@@ -170,10 +176,12 @@ bool TransitionApplication::OnActionButtonClicked( Button button ) @@ -170,10 +176,12 @@ bool TransitionApplication::OnActionButtonClicked( Button button )
170 if( checkState ) 176 if( checkState )
171 { 177 {
172 SetLabelText( button, "Check" ); 178 SetLabelText( button, "Check" );
  179 + mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "UNCHECKED" );
173 } 180 }
174 else 181 else
175 { 182 {
176 SetLabelText( button, "Uncheck" ); 183 SetLabelText( button, "Uncheck" );
  184 + mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "CHECKED" );
177 } 185 }
178 break; 186 break;
179 } 187 }
resources/style/mobile/style-example-theme-one.json.in
  View file @917cdd7
@@ -117,264 +117,226 @@ @@ -117,264 +117,226 @@
117 }, 117 },
118 "ShadowButton": 118 "ShadowButton":
119 { 119 {
120 - "backgroundVisual":{  
121 - "visualType":"IMAGE",  
122 - "url":"{STYLE_DIR}/images/shadowButtonBg.9.png",  
123 - "mixColor":[1,1,1,0]  
124 - },  
125 - "checkboxBgVisual":{  
126 - "visualType":"IMAGE",  
127 - "url":"{STYLE_DIR}/images/CheckBg.png",  
128 - "transform":{  
129 - "size":[0.09, 0.28],  
130 - "offset":[30,0],  
131 - "offsetSizeMode":[1,1,0,0],  
132 - "origin":"CENTER_BEGIN",  
133 - "anchorPoint":"CENTER_BEGIN"  
134 - }  
135 - },  
136 - "checkboxFgVisual":{  
137 - "visualType":"IMAGE",  
138 - "url":"{STYLE_DIR}/images/Tick.png",  
139 - "transform":{  
140 - "size":[0.09, 0.28],  
141 - "offset":[30,0],  
142 - "offsetSizeMode":[1,1,0,0],  
143 - "origin":"CENTER_BEGIN",  
144 - "anchorPoint":"CENTER_BEGIN"  
145 - }  
146 - },  
147 - "labelVisual":{  
148 - "visualType":"TEXT",  
149 - "text":"Don't show again",  
150 - "pointSize":8,  
151 - "horizontalAlignment":"END",  
152 - "verticalAlignment":"CENTER",  
153 - "textColor":[1,1,1,1],  
154 - "mixColor":[0.3, 0.3, 0.3, 1],  
155 - "transform":{  
156 - "size":[0.9, 0.9],  
157 - "offset":[-30,0],  
158 - "offsetSizeMode":[1,1,0,0],  
159 - "origin":"CENTER_END",  
160 - "anchorPoint":"CENTER_END"  
161 - }  
162 - },  
163 - "activeTransition":  
164 - [  
165 - {  
166 - "target":"checkboxBgVisual",  
167 - "property":"size",  
168 - "initialValue":[0.09, 0.28],  
169 - "targetValue":[0.12, 0.37],  
170 - "animator":  
171 - {  
172 - "alphaFunction":"EASE_OUT_BACK",  
173 - "timePeriod":  
174 - {  
175 - "duration":0.8,  
176 - "delay":0  
177 - }  
178 - }  
179 - }, 120 + "states":
  121 + {
  122 + "NORMAL":
180 { 123 {
181 - "target":"backgroundVisual",  
182 - "property":"mixColor",  
183 - "initialValue":[1,1,1,0],  
184 - "targetValue":[1,1,1,1],  
185 - "animator": 124 + "visuals":
186 { 125 {
187 - "alphaFunction":"EASE_OUT_BACK",  
188 - "timePeriod":  
189 - {  
190 - "duration":0.8,  
191 - "delay":0 126 + "backgroundVisual":{
  127 + "visualType":"IMAGE",
  128 + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png"
  129 + },
  130 +
  131 + "checkboxBgVisual":{
  132 + "visualType":"IMAGE",
  133 + "url":"{STYLE_DIR}/images/CheckBg.png",
  134 + "transform":{
  135 + "size":[0.09, 0.28],
  136 + "offset":[30,0],
  137 + "offsetSizeMode":[1,1,0,0],
  138 + "origin":"CENTER_BEGIN",
  139 + "anchorPoint":"CENTER_BEGIN"
  140 + }
  141 + },
  142 +
  143 + "labelVisual":{
  144 + "visualType":"TEXT",
  145 + "text":"Don't show again",
  146 + "pointSize":8,
  147 + "horizontalAlignment":"END",
  148 + "verticalAlignment":"CENTER",
  149 + "textColor":[1,1,1,1],
  150 + "mixColor":[0, 0, 0, 1],
  151 + "transform":{
  152 + "size":[0.9, 0.9],
  153 + "offset":[-30,0],
  154 + "offsetSizeMode":[1,1,0,0],
  155 + "origin":"CENTER_END",
  156 + "anchorPoint":"CENTER_END"
  157 + }
192 } 158 }
193 - }  
194 - },  
195 - {  
196 - "target":"backgroundVisual",  
197 - "property":"size",  
198 - "initialValue":[0.9, 0.9],  
199 - "targetValue":[1, 1],  
200 - "animator": 159 + },
  160 +
  161 + "states":
201 { 162 {
202 - "alphaFunction":"EASE_OUT_BACK",  
203 - "timePeriod": 163 + "CHECKED":
204 { 164 {
205 - "duration":0.8,  
206 - "delay":0  
207 - }  
208 - }  
209 - },  
210 - {  
211 - "target":"checkboxFgVisual",  
212 - "property":"size",  
213 - "initialValue":[0.09, 0.28],  
214 - "targetValue":[0.12, 0.37],  
215 - "animator":  
216 - {  
217 - "alphaFunction":"EASE_OUT_BACK",  
218 - "timePeriod": 165 + "visuals":
  166 + {
  167 + "checkboxFgVisual":{
  168 + "visualType":"IMAGE",
  169 + "url":"{STYLE_DIR}/images/Tick.png",
  170 + "transform":{
  171 + "size":[0.09, 0.28],
  172 + "offset":[30,0],
  173 + "offsetSizeMode":[1,1,0,0],
  174 + "origin":"CENTER_BEGIN",
  175 + "anchorPoint":"CENTER_BEGIN"
  176 + }
  177 + }
  178 + },
  179 + "entryTransition":
  180 + [
  181 + {
  182 + "target":"checkboxFgVisual",
  183 + "property":"pixelArea",
  184 + "initialValue":[0.0, 0.0, 0.0, 1.0],
  185 + "targetValue":[0.0, 0.0, 1.0, 1.0],
  186 + "animator":
  187 + {
  188 + "alphaFunction":"EASE_IN",
  189 + "timePeriod":
  190 + {
  191 + "duration":0.4,
  192 + "delay":0
  193 + }
  194 + }
  195 + },
  196 + {
  197 + "target":"checkboxFgVisual",
  198 + "property":"size",
  199 + "initialValue":[0.0, 0.37],
  200 + "targetValue":[0.12, 0.37],
  201 + "animator":
  202 + {
  203 + "alphaFunction":"EASE_IN",
  204 + "timePeriod":
  205 + {
  206 + "duration":0.4,
  207 + "delay":0
  208 + }
  209 + }
  210 + }
  211 + ],
  212 + "exitTransition":
  213 + [
  214 + {
  215 + "target":"checkboxFgVisual",
  216 + "property":"pixelArea",
  217 + "initialValue":[0.0, 0.0, 1.0, 1.0],
  218 + "targetValue":[0.0, 0.0, 0.0, 1.0],
  219 + "animator":
  220 + {
  221 + "alphaFunction":"EASE_OUT",
  222 + "timePeriod":
  223 + {
  224 + "duration":0.4,
  225 + "delay":0
  226 + }
  227 + }
  228 + },
  229 + {
  230 + "target":"checkboxFgVisual",
  231 + "property":"size",
  232 + "targetValue":[0.0, 0.37],
  233 + "animator":
  234 + {
  235 + "alphaFunction":"EASE_OUT",
  236 + "timePeriod":
  237 + {
  238 + "duration":0.4,
  239 + "delay":0
  240 + }
  241 + }
  242 + }
  243 + ]
  244 + },
  245 + "UNCHECKED":
219 { 246 {
220 - "duration":0.8,  
221 - "delay":0  
222 } 247 }
223 } 248 }
224 }, 249 },
  250 + //"FOCUSED"
  251 + "DISABLED":
225 { 252 {
226 - "target":"labelVisual",  
227 - "property":"mixColor",  
228 - "initialValue":[0.2, 0.2, 0.2, 1.0],  
229 - "targetValue":[0, 0, 0, 1],  
230 - "animator": 253 + "visuals":
231 { 254 {
232 - "alphaFunction":"EASE_OUT_BACK",  
233 - "timePeriod":  
234 - {  
235 - "duration":0.8,  
236 - "delay":0 255 + "checkboxBgVisual":{
  256 + "visualType":"IMAGE",
  257 + "url":"{STYLE_DIR}/images/CheckBg.png",
  258 + "transform":{
  259 + "size":[0.09, 0.28],
  260 + "offset":[30,0],
  261 + "offsetSizeMode":[1,1,0,0],
  262 + "origin":"CENTER_BEGIN",
  263 + "anchorPoint":"CENTER_BEGIN"
  264 + }
  265 + },
  266 +
  267 + "checkboxFgVisual":{
  268 + "visualType":"IMAGE",
  269 + "url":"{STYLE_DIR}/images/Tick.png",
  270 + "transform":{
  271 + "size":[0.09, 0.28],
  272 + "offset":[30,0],
  273 + "offsetSizeMode":[1,1,0,0],
  274 + "origin":"CENTER_BEGIN",
  275 + "anchorPoint":"CENTER_BEGIN"
  276 + }
  277 + },
  278 +
  279 + "labelVisual":{
  280 + "visualType":"TEXT",
  281 + "text":"Don't show again",
  282 + "pointSize":8,
  283 + "horizontalAlignment":"END",
  284 + "verticalAlignment":"CENTER",
  285 + "textColor":[1,1,1,1],
  286 + "mixColor":[0.3, 0.3, 0.3, 1],
  287 + "transform":{
  288 + "size":[0.9, 0.9],
  289 + "offset":[-30,0],
  290 + "offsetSizeMode":[1,1,0,0],
  291 + "origin":"CENTER_END",
  292 + "anchorPoint":"CENTER_END"
  293 + }
237 } 294 }
238 } 295 }
239 } 296 }
240 - ],  
241 - "inactiveTransition": 297 + },
  298 + "transitions":
242 [ 299 [
243 { 300 {
244 - "target":"checkboxBgVisual",  
245 - "property":"size",  
246 - "initialValue":[0.12, 0.37],  
247 - "targetValue":[0.09, 0.28], 301 + "from":"DISABLED",
  302 + "to":"NORMAL",
  303 + "visualName":"backgroundVisual",
  304 + "effect":"FADE_IN",
248 "animator": 305 "animator":
249 { 306 {
250 "alphaFunction":"EASE_OUT_BACK", 307 "alphaFunction":"EASE_OUT_BACK",
251 - "timePeriod":  
252 - {  
253 - "duration":0.8,  
254 - "delay":0  
255 - } 308 + "duration":0.8
256 } 309 }
257 }, 310 },
258 { 311 {
259 - "target":"backgroundVisual",  
260 - "property":"mixColor",  
261 - "targetValue":[1,1,1,0], 312 + "from":"DISABLED",
  313 + "to":"NORMAL",
  314 + "visualName":"*",
262 "animator": 315 "animator":
263 { 316 {
264 "alphaFunction":"EASE_OUT_BACK", 317 "alphaFunction":"EASE_OUT_BACK",
265 - "timePeriod":  
266 - {  
267 - "duration":0.8,  
268 - "delay":0  
269 - } 318 + "duration":0.8
270 } 319 }
271 }, 320 },
272 { 321 {
273 - "target":"checkboxFgVisual",  
274 - "property":"size",  
275 - "initialValue":[0.12, 0.37],  
276 - "targetValue":[0.09, 0.28], 322 + "from":"NORMAL",
  323 + "to":"DISABLED",
  324 + "visualName":"backgroundVisual",
  325 + "effect":"FADE_OUT",
277 "animator": 326 "animator":
278 { 327 {
279 "alphaFunction":"EASE_OUT_BACK", 328 "alphaFunction":"EASE_OUT_BACK",
280 - "timePeriod":  
281 - {  
282 - "duration":0.8,  
283 - "delay":0  
284 - } 329 + "duration":0.8
285 } 330 }
286 }, 331 },
287 { 332 {
288 - "target":"labelVisual",  
289 - "property":"mixColor",  
290 - "targetValue":[0.4, 0.4, 0.4, 1.0], 333 + "from":"NORMAL",
  334 + "to":"DISABLED",
  335 + "visualName":"*",
291 "animator": 336 "animator":
292 { 337 {
293 "alphaFunction":"EASE_OUT_BACK", 338 "alphaFunction":"EASE_OUT_BACK",
294 - "timePeriod":  
295 - {  
296 - "duration":0.8,  
297 - "delay":0  
298 - }  
299 - }  
300 - },  
301 - {  
302 - "target":"backgroundVisual",  
303 - "property":"size",  
304 - "targetValue":[0.9, 0.9],  
305 - "animator":  
306 - {  
307 - "alphaFunction":"EASE_OUT_BACK",  
308 - "timePeriod":  
309 - {  
310 - "duration":0.8,  
311 - "delay":0  
312 - }  
313 - }  
314 - }  
315 - ],  
316 - "checkTransition":  
317 - [  
318 - {  
319 - "target":"checkboxFgVisual",  
320 - "property":"pixelArea",  
321 - "initialValue":[0.0, 0.0, 0.0, 1.0],  
322 - "targetValue":[0.0, 0.0, 1.0, 1.0],  
323 - "animator":  
324 - {  
325 - "alphaFunction":"EASE_IN",  
326 - "timePeriod":  
327 - {  
328 - "duration":0.4,  
329 - "delay":0  
330 - }  
331 - }  
332 - },  
333 - {  
334 - "target":"checkboxFgVisual",  
335 - "property":"size",  
336 - "initialValue":[0.0, 0.37],  
337 - "targetValue":[0.12, 0.37],  
338 - "animator":  
339 - {  
340 - "alphaFunction":"EASE_IN",  
341 - "timePeriod":  
342 - {  
343 - "duration":0.4,  
344 - "delay":0  
345 - }  
346 - }  
347 - }  
348 - ],  
349 - "uncheckTransition":  
350 - [  
351 - {  
352 - "target":"checkboxFgVisual",  
353 - "property":"pixelArea",  
354 - "initialValue":[0.0, 0.0, 1.0, 1.0],  
355 - "targetValue":[0.0, 0.0, 0.0, 1.0],  
356 - "animator":  
357 - {  
358 - "alphaFunction":"EASE_OUT",  
359 - "timePeriod":  
360 - {  
361 - "duration":0.4,  
362 - "delay":0  
363 - }  
364 - }  
365 - },  
366 - {  
367 - "target":"checkboxFgVisual",  
368 - "property":"size",  
369 - "targetValue":[0.0, 0.37],  
370 - "animator":  
371 - {  
372 - "alphaFunction":"EASE_OUT",  
373 - "timePeriod":  
374 - {  
375 - "duration":0.4,  
376 - "delay":0  
377 - } 339 + "duration":0.8
378 } 340 }
379 } 341 }
380 ] 342 ]
resources/style/style-example-theme-one.json.in
  View file @917cdd7
@@ -117,264 +117,226 @@ @@ -117,264 +117,226 @@
117 }, 117 },
118 "ShadowButton": 118 "ShadowButton":
119 { 119 {
120 - "backgroundVisual":{  
121 - "visualType":"IMAGE",  
122 - "url":"{STYLE_DIR}/images/shadowButtonBg.9.png",  
123 - "mixColor":[1,1,1,0]  
124 - },  
125 - "checkboxBgVisual":{  
126 - "visualType":"IMAGE",  
127 - "url":"{STYLE_DIR}/images/CheckBg.png",  
128 - "transform":{  
129 - "size":[0.09, 0.28],  
130 - "offset":[30,0],  
131 - "offsetSizeMode":[1,1,0,0],  
132 - "origin":"CENTER_BEGIN",  
133 - "anchorPoint":"CENTER_BEGIN"  
134 - }  
135 - },  
136 - "checkboxFgVisual":{  
137 - "visualType":"IMAGE",  
138 - "url":"{STYLE_DIR}/images/Tick.png",  
139 - "transform":{  
140 - "size":[0.09, 0.28],  
141 - "offset":[30,0],  
142 - "offsetSizeMode":[1,1,0,0],  
143 - "origin":"CENTER_BEGIN",  
144 - "anchorPoint":"CENTER_BEGIN"  
145 - }  
146 - },  
147 - "labelVisual":{  
148 - "visualType":"TEXT",  
149 - "text":"Don't show again",  
150 - "pointSize":20,  
151 - "horizontalAlignment":"END",  
152 - "verticalAlignment":"CENTER",  
153 - "textColor":[1,1,1,1],  
154 - "mixColor":[0.3, 0.3, 0.3, 1],  
155 - "transform":{  
156 - "size":[0.9, 0.9],  
157 - "offset":[-30,0],  
158 - "offsetSizeMode":[1,1,0,0],  
159 - "origin":"CENTER_END",  
160 - "anchorPoint":"CENTER_END"  
161 - }  
162 - },  
163 - "activeTransition":  
164 - [  
165 - {  
166 - "target":"checkboxBgVisual",  
167 - "property":"size",  
168 - "initialValue":[0.09, 0.28],  
169 - "targetValue":[0.12, 0.37],  
170 - "animator":  
171 - {  
172 - "alphaFunction":"EASE_OUT_BACK",  
173 - "timePeriod":  
174 - {  
175 - "duration":0.8,  
176 - "delay":0  
177 - }  
178 - }  
179 - }, 120 + "states":
  121 + {
  122 + "NORMAL":
180 { 123 {
181 - "target":"backgroundVisual",  
182 - "property":"mixColor",  
183 - "initialValue":[1,1,1,0],  
184 - "targetValue":[1,1,1,1],  
185 - "animator": 124 + "visuals":
186 { 125 {
187 - "alphaFunction":"EASE_OUT_BACK",  
188 - "timePeriod":  
189 - {  
190 - "duration":0.8,  
191 - "delay":0 126 + "backgroundVisual":{
  127 + "visualType":"IMAGE",
  128 + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png"
  129 + },
  130 +
  131 + "checkboxBgVisual":{
  132 + "visualType":"IMAGE",
  133 + "url":"{STYLE_DIR}/images/CheckBg.png",
  134 + "transform":{
  135 + "size":[0.09, 0.28],
  136 + "offset":[30,0],
  137 + "offsetSizeMode":[1,1,0,0],
  138 + "origin":"CENTER_BEGIN",
  139 + "anchorPoint":"CENTER_BEGIN"
  140 + }
  141 + },
  142 +
  143 + "labelVisual":{
  144 + "visualType":"TEXT",
  145 + "text":"Don't show again",
  146 + "pointSize":20,
  147 + "horizontalAlignment":"END",
  148 + "verticalAlignment":"CENTER",
  149 + "textColor":[1,1,1,1],
  150 + "mixColor":[0, 0, 0, 1],
  151 + "transform":{
  152 + "size":[0.9, 0.9],
  153 + "offset":[-30,0],
  154 + "offsetSizeMode":[1,1,0,0],
  155 + "origin":"CENTER_END",
  156 + "anchorPoint":"CENTER_END"
  157 + }
192 } 158 }
193 - }  
194 - },  
195 - {  
196 - "target":"backgroundVisual",  
197 - "property":"size",  
198 - "initialValue":[0.9, 0.9],  
199 - "targetValue":[1, 1],  
200 - "animator": 159 + },
  160 +
  161 + "states":
201 { 162 {
202 - "alphaFunction":"EASE_OUT_BACK",  
203 - "timePeriod": 163 + "CHECKED":
204 { 164 {
205 - "duration":0.8,  
206 - "delay":0  
207 - }  
208 - }  
209 - },  
210 - {  
211 - "target":"checkboxFgVisual",  
212 - "property":"size",  
213 - "initialValue":[0.09, 0.28],  
214 - "targetValue":[0.12, 0.37],  
215 - "animator":  
216 - {  
217 - "alphaFunction":"EASE_OUT_BACK",  
218 - "timePeriod": 165 + "visuals":
  166 + {
  167 + "checkboxFgVisual":{
  168 + "visualType":"IMAGE",
  169 + "url":"{STYLE_DIR}/images/Tick.png",
  170 + "transform":{
  171 + "size":[0.09, 0.28],
  172 + "offset":[30,0],
  173 + "offsetSizeMode":[1,1,0,0],
  174 + "origin":"CENTER_BEGIN",
  175 + "anchorPoint":"CENTER_BEGIN"
  176 + }
  177 + }
  178 + },
  179 + "entryTransition":
  180 + [
  181 + {
  182 + "target":"checkboxFgVisual",
  183 + "property":"pixelArea",
  184 + "initialValue":[0.0, 0.0, 0.0, 1.0],
  185 + "targetValue":[0.0, 0.0, 1.0, 1.0],
  186 + "animator":
  187 + {
  188 + "alphaFunction":"EASE_IN",
  189 + "timePeriod":
  190 + {
  191 + "duration":0.4,
  192 + "delay":0
  193 + }
  194 + }
  195 + },
  196 + {
  197 + "target":"checkboxFgVisual",
  198 + "property":"size",
  199 + "initialValue":[0.0, 0.37],
  200 + "targetValue":[0.12, 0.37],
  201 + "animator":
  202 + {
  203 + "alphaFunction":"EASE_IN",
  204 + "timePeriod":
  205 + {
  206 + "duration":0.4,
  207 + "delay":0
  208 + }
  209 + }
  210 + }
  211 + ],
  212 + "exitTransition":
  213 + [
  214 + {
  215 + "target":"checkboxFgVisual",
  216 + "property":"pixelArea",
  217 + "initialValue":[0.0, 0.0, 1.0, 1.0],
  218 + "targetValue":[0.0, 0.0, 0.0, 1.0],
  219 + "animator":
  220 + {
  221 + "alphaFunction":"EASE_OUT",
  222 + "timePeriod":
  223 + {
  224 + "duration":0.4,
  225 + "delay":0
  226 + }
  227 + }
  228 + },
  229 + {
  230 + "target":"checkboxFgVisual",
  231 + "property":"size",
  232 + "targetValue":[0.0, 0.37],
  233 + "animator":
  234 + {
  235 + "alphaFunction":"EASE_OUT",
  236 + "timePeriod":
  237 + {
  238 + "duration":0.4,
  239 + "delay":0
  240 + }
  241 + }
  242 + }
  243 + ]
  244 + },
  245 + "UNCHECKED":
219 { 246 {
220 - "duration":0.8,  
221 - "delay":0  
222 } 247 }
223 } 248 }
224 }, 249 },
  250 + //"FOCUSED"
  251 + "DISABLED":
225 { 252 {
226 - "target":"labelVisual",  
227 - "property":"mixColor",  
228 - "initialValue":[0.2, 0.2, 0.2, 1.0],  
229 - "targetValue":[0, 0, 0, 1],  
230 - "animator": 253 + "visuals":
231 { 254 {
232 - "alphaFunction":"EASE_OUT_BACK",  
233 - "timePeriod":  
234 - {  
235 - "duration":0.8,  
236 - "delay":0 255 + "checkboxBgVisual":{
  256 + "visualType":"IMAGE",
  257 + "url":"{STYLE_DIR}/images/CheckBg.png",
  258 + "transform":{
  259 + "size":[0.09, 0.28],
  260 + "offset":[30,0],
  261 + "offsetSizeMode":[1,1,0,0],
  262 + "origin":"CENTER_BEGIN",
  263 + "anchorPoint":"CENTER_BEGIN"
  264 + }
  265 + },
  266 +
  267 + "checkboxFgVisual":{
  268 + "visualType":"IMAGE",
  269 + "url":"{STYLE_DIR}/images/Tick.png",
  270 + "transform":{
  271 + "size":[0.09, 0.28],
  272 + "offset":[30,0],
  273 + "offsetSizeMode":[1,1,0,0],
  274 + "origin":"CENTER_BEGIN",
  275 + "anchorPoint":"CENTER_BEGIN"
  276 + }
  277 + },
  278 +
  279 + "labelVisual":{
  280 + "visualType":"TEXT",
  281 + "text":"Don't show again",
  282 + "pointSize":20,
  283 + "horizontalAlignment":"END",
  284 + "verticalAlignment":"CENTER",
  285 + "textColor":[1,1,1,1],
  286 + "mixColor":[0.3, 0.3, 0.3, 1],
  287 + "transform":{
  288 + "size":[0.9, 0.9],
  289 + "offset":[-30,0],
  290 + "offsetSizeMode":[1,1,0,0],
  291 + "origin":"CENTER_END",
  292 + "anchorPoint":"CENTER_END"
  293 + }
237 } 294 }
238 } 295 }
239 } 296 }
240 - ],  
241 - "inactiveTransition": 297 + },
  298 + "transitions":
242 [ 299 [
243 { 300 {
244 - "target":"checkboxBgVisual",  
245 - "property":"size",  
246 - "initialValue":[0.12, 0.37],  
247 - "targetValue":[0.09, 0.28], 301 + "from":"DISABLED",
  302 + "to":"NORMAL",
  303 + "visualName":"backgroundVisual",
  304 + "effect":"FADE_IN",
248 "animator": 305 "animator":
249 { 306 {
250 "alphaFunction":"EASE_OUT_BACK", 307 "alphaFunction":"EASE_OUT_BACK",
251 - "timePeriod":  
252 - {  
253 - "duration":0.8,  
254 - "delay":0  
255 - } 308 + "duration":0.8
256 } 309 }
257 }, 310 },
258 { 311 {
259 - "target":"backgroundVisual",  
260 - "property":"mixColor",  
261 - "targetValue":[1,1,1,0], 312 + "from":"DISABLED",
  313 + "to":"NORMAL",
  314 + "visualName":"*",
262 "animator": 315 "animator":
263 { 316 {
264 "alphaFunction":"EASE_OUT_BACK", 317 "alphaFunction":"EASE_OUT_BACK",
265 - "timePeriod":  
266 - {  
267 - "duration":0.8,  
268 - "delay":0  
269 - } 318 + "duration":0.8
270 } 319 }
271 }, 320 },
272 { 321 {
273 - "target":"checkboxFgVisual",  
274 - "property":"size",  
275 - "initialValue":[0.12, 0.37],  
276 - "targetValue":[0.09, 0.28], 322 + "from":"NORMAL",
  323 + "to":"DISABLED",
  324 + "visualName":"backgroundVisual",
  325 + "effect":"FADE_OUT",
277 "animator": 326 "animator":
278 { 327 {
279 "alphaFunction":"EASE_OUT_BACK", 328 "alphaFunction":"EASE_OUT_BACK",
280 - "timePeriod":  
281 - {  
282 - "duration":0.8,  
283 - "delay":0  
284 - } 329 + "duration":0.8
285 } 330 }
286 }, 331 },
287 { 332 {
288 - "target":"labelVisual",  
289 - "property":"mixColor",  
290 - "targetValue":[0.4, 0.4, 0.4, 1.0], 333 + "from":"NORMAL",
  334 + "to":"DISABLED",
  335 + "visualName":"*",
291 "animator": 336 "animator":
292 { 337 {
293 "alphaFunction":"EASE_OUT_BACK", 338 "alphaFunction":"EASE_OUT_BACK",
294 - "timePeriod":  
295 - {  
296 - "duration":0.8,  
297 - "delay":0  
298 - }  
299 - }  
300 - },  
301 - {  
302 - "target":"backgroundVisual",  
303 - "property":"size",  
304 - "targetValue":[0.9, 0.9],  
305 - "animator":  
306 - {  
307 - "alphaFunction":"EASE_OUT_BACK",  
308 - "timePeriod":  
309 - {  
310 - "duration":0.8,  
311 - "delay":0  
312 - }  
313 - }  
314 - }  
315 - ],  
316 - "checkTransition":  
317 - [  
318 - {  
319 - "target":"checkboxFgVisual",  
320 - "property":"pixelArea",  
321 - "initialValue":[0.0, 0.0, 0.0, 1.0],  
322 - "targetValue":[0.0, 0.0, 1.0, 1.0],  
323 - "animator":  
324 - {  
325 - "alphaFunction":"EASE_IN",  
326 - "timePeriod":  
327 - {  
328 - "duration":0.4,  
329 - "delay":0  
330 - }  
331 - }  
332 - },  
333 - {  
334 - "target":"checkboxFgVisual",  
335 - "property":"size",  
336 - "initialValue":[0.0, 0.37],  
337 - "targetValue":[0.12, 0.37],  
338 - "animator":  
339 - {  
340 - "alphaFunction":"EASE_IN",  
341 - "timePeriod":  
342 - {  
343 - "duration":0.4,  
344 - "delay":0  
345 - }  
346 - }  
347 - }  
348 - ],  
349 - "uncheckTransition":  
350 - [  
351 - {  
352 - "target":"checkboxFgVisual",  
353 - "property":"pixelArea",  
354 - "initialValue":[0.0, 0.0, 1.0, 1.0],  
355 - "targetValue":[0.0, 0.0, 0.0, 1.0],  
356 - "animator":  
357 - {  
358 - "alphaFunction":"EASE_OUT",  
359 - "timePeriod":  
360 - {  
361 - "duration":0.4,  
362 - "delay":0  
363 - }  
364 - }  
365 - },  
366 - {  
367 - "target":"checkboxFgVisual",  
368 - "property":"size",  
369 - "targetValue":[0.0, 0.37],  
370 - "animator":  
371 - {  
372 - "alphaFunction":"EASE_OUT",  
373 - "timePeriod":  
374 - {  
375 - "duration":0.4,  
376 - "delay":0  
377 - } 339 + "duration":0.8
378 } 340 }
379 } 341 }
380 ] 342 ]