1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0052)http://kenneth.christiansen.googlepages.com/DUI.html -->
<HTML><HEAD><TITLE>A look at Qt's Declarative UI and CSS3 Animations</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2900.3627" name=GENERATOR></HEAD>
<BODY>
<H1>A look at Qt's Declarative UI and CSS3 Animations</H1><I>By Kenneth Rohde
Christiansen, INdT OpenBossa Labs</I>
<H3>Disclaimer:</H3>
<P>The following article takes a look at two technologies which are both work in
progress. Comparing such technologies can be difficult due to the lack on
documentation as well as daily changes.
<P>The CSS3 support is pretty much specified and as the standard it derives from
WebKit, the support in WebKit could be considered 100%.
<P>QML on the other hand, is in rapid development and most documentation is
found in the source code itself.
<P>Both lack examples and tutorials.
<H1>Declarative UI</H1>
<P>Developing software for embedded devices such as mobile phones is quite hard,
as consumers demand more and more features, which have to be integrated and fit
onto a relatively small screen.
<P>Due to this a lot of research has been going on, on how to improve the user
experience by adding more customized interfaces than with common toolkits, that
better use the screen realestate available. The iPhone was one of the first
phones that showed, that with a bit more processing power and a touch screen,
you can actually make a truly amazing interface.
<P>At INdT we have spend the last three years working on various interfaces that
fit into this above description, and we found a huge performance boost when we
started using a declarative description language for building our user
interfaces. Let's call this Declarative UI (DUI, for short)
<H2>So, what is a declarative UI?</H2>
<P>Declarative UI is a way of making this kind of user interfaces by describing
them in terms of simple elements; text, image, rectangle, and well as other
objects. These are then build into components.
<P>The reason why it is called declarative is that the UI is expressed as sets
of property expressions, like, the x value of RectA is equal to the half of the
width of RectB. These properties can then also be grouped into states, so for
instance when a button is in Selected state the button image, which is a
property as well, might be different.
<P>This is different to imperative programming where you would normally give
orders like, set this, set that, then do this, etc...
<P>Declarative UI is very "designer like", as it makes it possible for you to do
things like, add a rectangle that fits the whole screen, add a rectangle as a
child inside the other one, add another rectangle to the right of the first
child (with it x value being equal to the x value + the width of the former one)
<P>A great declarative language would be rather simple, but still powerful
enough to cover most use cases.
<H2>The WebKit Stack</H2>
<P>During the last, at least 5 years, a lot of research has gone into developing
web applications. Not just websites, but apps that act like real applications.
<P>Google was one of the first companies bringing this to the mass market, by
developing GMail as well as Google Maps.
<P>Since then developing such apps has become easier, with the introduction of
JavaScript libraries such as jQuery, as well as faster JavaScript
implementations.
<P>Things are looking really good actually as a lot of work has gone into
developing a new HTML standard, mostly based on work by the WHATWG which is
backed by Apple, Opera, Mozilla and more. This has let into the HTML5 standard
which is work in progress.
<P>As part of Apple's Dashboard support for Mac OS X, Apple developed a canvas
extension to WebKit, which showed a lot of promise. Flash has long been hated by
many users and web developers as it doesn't integrate with the web, breaks tab
focusing, and is proprietary. It has been obvious that Apple is also not a bit
fan of Flash, and they even opted to ship the iPhone with no Flash support
whatever.
<P>On the other hand, their developers looked at what was needed to provide the
web developers with some of the features found in Flash, and came up with four
CSS extensions, CSS3 Transitions, CSS3 Animations, CSS3 2D and 3D
transformations, which are now all part of the CSS3 draft and supported in
WebKit, using the -webkit- prefix.
<P>Doing declarative UI with CSS3 only is not possible, you'll have to combine
it with other web technologies such as at HTML. Actually HTML + CSS3 allows you
to do many things, but combining the former with JavaScript makes the abbilities
almost limitless, without that meaning that it is feasable without lots of
coding.
<H2>The Qt Declarative UI</H2>
<P>In the upcoming version 4.6 of Qt, the toolkit will bring declarativity to
Qt.
<P>The language that enables this is named QML and is a simple but yet powerful
language.
<P>Most of a user interface is described by a simple tree structure of property
bindings. The power is that those property values can be any JavaScript
expression - and because it’s a binding rather than just an assignment, the
expressions are re-evaluated whenever their dependencies change. Very similar to
web technologies.
<H1>Comparing the Two</H1>
<P>Generally speaking, QML is made for making declarative user interfaces, where
as CSS3 provides a very nice transition and animation framework to the already
well proved web technologies.
<P>Using the web for making actual mobile web applications hasn't been done much
in the past, but developers showed that you could make applications for the
iPhone that were quite native looking. These applications were still very simple
in nature, but with the announcement that Palm would be bringing a phone to the
market only based on web apps caught many peoples attention.
<P>In this section we will look at the basic concepts of CSS3 and QML to see
where they are similar in nature and where they differ. We will then conclude
whether you would be able to accomplish almost when same using CSS3 as with QML,
investing the same amount of efforts, or whether that is just not the case.
<P>As QML is still in early development, we will also see if there are some
ideas in CSS3 that could be applied to QML to make it better.
<H2>Concepts</H2>
<P>The basic building block in QML and the WebKit stack, is the element; an HTML
element in WebKit and a FxItem in Qt.
<P>The most important block is the rectangle, the image as well as text.
<P>In QML these are the Rect, the Image and the Text items, where as in WebKit
these would be a div, an img (or div with image applied) as well as a text
block, probably wrapped in a div.
<H3>Image</H3>
<P>QML supports bordered images, which means that you can define a border area
of an image that should be scaled differently when the image is scaled. You can
think of it as the image split into 9 parts: <PRE><CODE>
TOPLEFT | TOP | TOPRIGHT
-------------------------------------------
LEFT | MIDDLE | RIGHT
-------------------------------------------
BOTTOMLEFT | BOTTOM | BOTTOMRIGHT
</CODE>
</PRE>
<P>Top left, top right, bottom left and bottom right are never scaled, where as
top for instance would only be scaled horizontally, and left only vertically.
<P>This leaves borders intact, which is really useful if you for instance used
an image for painting a bottom and you want it to always have the same border.
<P>In QML this is accomplished by using the scaleGrid properties of the Image <PRE><CODE>
Image {
id: "borderedImage"
width: 100
height: 160
source: "label_keyboard.png"
scaleGrid.left: 15
scaleGrid.right: 17
scaleGrid.top: 15
scaleGrid.bottom: 17
}
</CODE>
</PRE>
<P>WebKit supports the same by using a div with the CSS property border-image: <PRE><CODE>
<div style=
"width: 68px;
height: 128px;
border-width: 15 17 15 17;
-webkit-border-image: url(label_keyboard.png) 15 17 15 17 stretch stretch;">
</div>
</CODE>
</PRE>
<P>Notice that in the above example the border goes beyond the image width, thus
width: 68 + 15 + 17 makes up the width of 100 in the QML example.
<H3>Layout Support</H3>
<P>Layout support in QML and WebKit is a bit different. QML is very toolkit like
and provides ways of boxing the components, and in the near future it will even
support anchorlayout, where you can anchor the sides of elements to others, and
make the resizing respect their min, max and preferred size values. A very
powerful construct is being developed here at INdT in cooperation with Qt
Software.
<P>WebKit on the other hand is a web contents rendering engine, and as such
supports the layout system of HTML and CSS. This is a very powerful system, but
there is one conceptual difference, in that it is based on the layout of
variable sized contents, mostly text. If the text grows, everything relayouts.
<P>Normally when developing an interface with QML you want it the other way
around: show text in this box, and if it doesn't fit, crop it, adding '...'.
<P>CSS3 provides some of the former by introducing the CSS flex box, though we
haven't confirmed whether this is yet supported by WebKit.
<P>In WebKit and QML, by default children are relative to their parents, but in
WebKit you can specify absolute position, where as in QML you can use the
binding system and make the children relative to almost whatever you want.
<H3>Animation Support</H3>
<P>Visual clues and animations can make a user interface a lot more welcoming,
and after the launch of the iPhone, it is obvious that this is what the users
want.
<P>Both CSS3 as well as QML support animations, and we will try show how to
accomplish various kind of animations with the two.
<H4>Fixed Animations</H4>
<P>Fixed animations are animations that run some fixed animation, once or
repeatingly.
<P>Such animations are easy to do with QML, so let's look at an example and go
on from there. Then later see how to accomplish the same with CSS3.
<P>First of all, let's animate a rectangle from left to right, repeatingly: <PRE><CODE>
Rect {
width: 400
height: 200
color: "white"
Rect {
width: 40
height: 40
y: 80
color: "red"
x: SequentialAnimation {
running: true
repeat: true
NumericAnimation {
from: 0
to: 360
easing: "easeInOut"
duration: 500
}
}
}
}
</CODE>
</PRE>
<P>The code is quite simple. First we create a rectangle of size (400, 200) and
put a red rectangle inside it, which autoloads (running: true) and loops forever
(repeat: true). This rectangle animates from 0 to 360 pixel along the x-axis,
using an easy-in-out curve.
<P>If not setting repeat and running, the above could be activated by using a
trigger, leading us to talk about trigger actions.
<P>CSS3 supports transitions and animations and those two are different as
transitions are mostly used for trigger actions and animations are used for
fixed animations.
<P>Transitions in CSS3 are behaviour dependent. You do not define the actual
animation, but a transition/animation that is applied when the values are
changed! This is very web like, as in the web you will most likely start
animations when the mouse is above a div, or a div received a click.
<P>As CSS3 transition are the most simple, we will start by having a quick look
at those. So let's see how to make a trigger action of the above, triggered on
mouse over. <PRE><CODE>
<html>
<head></head>
<body>
<div style="background-color: red; -webkit-border-radius: 0.7em;
width: 40; height: 40;
position: absolute; top: 80px; left: 0px;
-webkit-transition-property: left;
-webkit-transition-duration: 0.5s;"
onmouseover="this.style.left = 360"
onmouseout="this.style.left = 0">
</div>
</body>
</html>
</CODE>
</PRE>
<P>It is clear in the above that this is behavior dependent. It is simple an
animation that is applied to a transtition when the style values are changed.
<P>Something very powerful about this is that you can apply the same transition
to any property of the element. Thus, we could have written: <PRE><CODE>
-webkit-transition-property: left, color;
</CODE>
</PRE>
<P>and if we did <EM>onmouseover="this.style.left = 360; this.style.color =
green"</EM>, the same transition would be applied to both properties.
<P>So, let's see how we accomplish the same as in the QML example, using CSS3.
In order to do this, we would need to define an animation. An animation is
defined using keyframes: <PRE><CODE>
@-webkit-keyframes animation-name {
from { left: 0px; }
to { left: 360px; }
}
</CODE>
</PRE>
<P>and as you can see it is not a behaviour dependent animation, as we will have
to specify the properties we want to change. You can also specify the transition
function by adding <EM>-webkit-animation-timing-function:</EM> to one of the
keyframes (<EM>from: to:</EM> or any percentage) <PRE><CODE>
@-webkit-keyframes animation-name {
0% { left: 0px; -webkit-animation-timing-function: ease-out; }
100% { left: 360px; -webkit-animation-timing-function: ease-in; }
}
</CODE>
</PRE>
<P>It is here important to notice that QML supports like 40 different kinds of
animation timing functions where as CSS3 only supports: <EM>ease, linear,
ease-in, ease-out, ease-in-out</EM> and <EM>cubic-bezier</EM>. The latter is
very powerful though, as it makes you able to define a curve; powerful, but not
easy to use.
<P>The code that matches the behaviour of the QML example amounts to: <PRE><CODE>
<html>
<head>
<style>
@-webkit-keyframes left-animation {
from { left: 0px; }
to { left: 360px; }
}
</style>
</head>
<body>
<div style="background-color: red; -webkit-border-radius: 0.7em;
width: 40; height: 40;
position: absolute; top: 80px; left: 0px;
-webkit-animation-name: left-animation;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;">
</div>
</body>
</html>
</CODE>
</PRE>
<P>With the key frame and the transition support in CSS3, it is possible to do
parallel animations. With transitions, we would just apply the transition to
move properties and change them in parallel, like what we showed earlier. With
animations we would just apply the animation to more properties: <PRE><CODE>
@-webkit-keyframes left-animation {
from { left: 0px; background-color: red; }
to { left: 360px; background-color: blue; }
}
</CODE>
</PRE>
<P>QML supports parallel and sequential animations in conjunction, thus you can
add parallel animations inside a sequential animation. We do not see any way to
do this with CSS3, but CSS3 does support sequential animations by using the
keyframes support.
<P>Let's improve our first example by changing the color as well as adding a
sequential animation: <PRE><CODE>
x: SequentialAnimation {
running: true
repeat: true
NumericAnimation {
from: 0
to: 360
easing: "easeInOutQuad"
duration: 1000
}
PauseAnimation {
duration: 1000
}
NumericAnimation {
from: 360
to: 0
easing: "easeInOutElastic"
duration: 2000
}
}
color: SequentialAnimation {
running: true
repeat: true
ColorAnimation {
from: "#FF0000"
to: "#00FF00"
duration: 2000
}
ColorAnimation {
from: "#00FF00"
to: "#FF0000"
duration: 2000
}
}
</CODE>
</PRE>
<P>As seen, we now have an animation that takes 4 seconds in total and changes
color and the x value (left in CSS).
<P>Doing the same with CSS can be accomplished by using the keyframes: <PRE><CODE>
@-webkit-keyframes left-animation {
0% { left: 0px; color: red;
-webkit-animation-timing-function: ease-in-out;
}
25% { left: 360px; }
50% { left: 360px; }
100% { left: 0px; color: green;
-webkit-animation-timing-function: ease-in-out;
}
}
</CODE>
</PRE>
<P>One difference here is that the keyframes work almost as some kind of
animation timing function, and can be reused for different durations, where as
in QML the time is fixed.
<P>Lets set it to 4 seconds as well: <PRE><CODE>
-webkit-animation-name: left-animation;
-webkit-animation-duration: 4s;
</CODE>
</PRE>
<P>One thing that we see here is that the CSS3 animation is somewhat simpler. We
dont define the animation type at all, just as with transitions. It will find
out how to interpolate and anime color and left. You can even try to anime
something that doesn't support animation and it will just change the value
without animation. This is not possible with QML as far as we can tell.
<P>It would be very nice if I could do something similar with QML, but it would
need some more thoughts. <PRE><CODE>
KeyFrameAnimation {
running: true
repeat: true
duration: 4000
Frame(0) {
x: 0
color: red
easing: "easeInOutQuad"
}
Frame(25) {
x: 360
}
Frame(50) {
x: 360 // x will stay at the current position
}
Frame(100) {
x: 0 // back to start position
color: green
easing: "easeInOutElastic"
}
}
</CODE>
</PRE>
<P>Also, we do not like that you need to specify the kind of animation,
NumericAnimation, ColorAnimation etc, and would like some dynamic support here
as in CSS3, where it will just anime what it supports.
<P>Doing <EM>color: ColorAnimation { ... }</EM> we are already operating on
color, so no need to tell it that it is a color animation. The cool thing with
this is that if supported behavior/transition animations like CSS3 (it does and
we will come back to that) we could reuse the same animation for color and x, as
we are the ones changing the values. <PRE><CODE>
x, color: Animation {
duration: 2000
easing: "easeInOutElastic"
}
</CODE>
</PRE>
<P>instead of doing: <PRE><CODE>
x: NumericAnimation {
duration: 2000;
easing: "easeInOutElastic"
}
color: ColorAnimation {
duration: 2000;
easing: "easeInOutElastic"
}
</CODE>
</PRE>
<P>QML supports using different animations for color and x at the same time,
with different durations (notice the changed durations!): <PRE><CODE>
x: SequentialAnimation {
running: true
repeat: true
NumericAnimation {
from: 0
to: 360
easing: "easeInOutQuad"
duration: 500
}
PauseAnimation {
duration: 1000
}
NumericAnimation {
from: 360
to: 0
easing: "easeInOutElastic"
duration: 200
}
}
color: SequentialAnimation {
running: true
repeat: true
ColorAnimation {
from: "#FF0000"
to: "#00FF00"
duration: 5000
}
ColorAnimation {
from: "#00FF00"
to: "#FF0000"
duration: 5000
}
}
</CODE>
</PRE>
<P>We wondered how to do this with CSS3 or whether it is possible, and it indeed
is. All you need to do it to define two keyframes animations and apply them with
varying duration. <PRE><CODE>
@-webkit-keyframes left-animation {
0% { left: 0px; -webkit-animation-timing-function: ease-in-out; }
18% { left: 360px; }
25% { left: 360px; }
100% { left: 0px; -webkit-animation-timing-function: ease-in-out; }
}
@-webkit-keyframes color-animation {
from { background-color: red; }
50% { background-color: green; }
to { background-color: red;}
}
</CODE>
</PRE>
<P>and on the element: <PRE><CODE>
-webkit-animation-name: left-animation, color-animation;
-webkit-animation-duration: 2.7s, 10s;
-webkit-animation-iteration-count: infinite, infinite;
</CODE>
</PRE>
<H4>Triggered Animations</H4>
<P>It it our experience that when using touch devices, the click position isn't
that precise because of big and/or shaking fingers, and it is normal to define
invisible areas as even proxies.
<P>For instance you have a button, but you actually want to make the area that
captures button clicks larger than the actual button. In CSS3 we do not see any
obvious way of acomplishing this, but with QML you can define event regions as
shown below, using MouseRegion: <PRE><CODE>
Rect {
y: 100
width: 50
height: 50
color: "blue"
MouseRegion {
anchors.fill: parent
}
}
</CODE>
</PRE>
<P>A MouseRegion supports function properties such as on Pressed, onReleased,
etc: <PRE><CODE>
onPressed: {
print('press (x: ' + mouse.x + ' y: ' + mouse.y + ')')
print(mouseButton)
if(mouseButton=='Right') {
parent.color = 'blue'
} else {
parent.color = "red"
}
}
onReleased: {
print('release (x: ' + mouse.x + ' y: ' + mouse.y
+ ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')')
}
onClicked: {
print('click (x: ' + mouse.x + ' y: ' + mouse.y
+ ' wasHeld: ' + mouse.wasHeld + ')')
}
onDoubleClicked: {
print('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')')
}
onPressAndHold: {
print('press and hold')
}
onExitedWhilePressed: {
print('exiting while pressed')
}
onReenteredWhilePressed: {
print('reentering while pressed')
}
</CODE>
</PRE>
<P>We find this support really useful and important.
<H4>Behaviour Dependent Animations</H4>
<P>Now that we have already touched CSS3 transition and mentioned that QML has
something similar, it is time to have a look. Remember our earlier example: <PRE><CODE>
-webkit-transition-property: left;
-webkit-transition-duration: 0.5s;"
onmouseover="this.style.left = 360px";
</CODE>
</PRE>
<P>We set a transition with duration 500 ms for when ever the property left is
changed.
<P>you can do this with QML by using Behaviour: <PRE><CODE>
x: Behaviour {
NumericAnimation {
property: "x"
duration: 500
}
}
MouseRegion {
anchors.fill: parent
onClicked: { x = mouseX; }
}
</CODE>
</PRE>
<P>Recall that we proposed the below a bit earlier <PRE><CODE>
x, color: Animation {
duration: 2000
easing: "easeInOutElastic"
}
</CODE>
</PRE>
<P>Modifying this to the behaviour syntax would result in something along the
lines of: <PRE><CODE>
x, color: Behavior {
Animation {
duration: 500
}
}
MouseRegion {
anchors.fill: parent
onClicked: {
x = mouseX;
if (color != blue) {
color = blue;
} else {
color = red;
}
}
}
</CODE>
</PRE>
<P>and it would just anime automatically, without having to do special
declarations for x and color, using NumericAnimation and ColorAnimation.
<H3>Dragables and Slides</H3>
<P>When designing user interfaces, slides, song trackers, volume bars etc are
quite useful. Being able to make a rectangle dragable is very useful for this
reason.
<P>CSS supports dragable div elements, but we couldnt find an easy way to
restrict the drag to a specific area, or fixed its draggability to just one
axis, which is very useful when designing sliders. We would say this is one of
the areas where CSS3 really fails for designing declarative user interfaces.
<P>QML has good support for this, again using the MouseRegion. <PRE><CODE>
Rect {
id: Slider
x: 10
y: 10
width: 30
height: 12
color: "lightgray"
radius: 6
MouseRegion {
anchors.fill: parent
drag.target: parent
drag.axis: "x"
drag.xmin: 10
drag.xmax: page.width - 120
}
}
</CODE>
</PRE>
<P>Another place where CSS fails is that it doesn't have the bindability of QML.
Yes, sure you can apply JavaScript magic to accomplish the same, but it is not
easy and it will make the code less readable.
<P>With the above QML code we would make an image slide along with the slider,
thus if I move the slider, the image resizes! Cool stuff. <PRE><CODE>
Image {
id: "image"
x: 10
y:50
width: 100 + Slider.x // NOTICE THE SLIDER HERE!
height: 160
source: "box.png"
}
</CODE>
</PRE>
<H3>States</H3>
<P>One of the most useful and most powerful things in QML is the support of
states and transitions. We will not go into details about this as it is not
directly supported by CSS3 and would have to be coded with JavaScript.
<H1>Conclusion</H1>
<P>Having looked at CSS3 support in WebKit and the upcoming Qt Declarative UI
format, it is clear that while both add support for animations, Qt's QML is
better for developing real application user interfaces, where as CSS3's support
currently seem to just add animation support to html based content; just as
animation triggers on mouse over, clicks etc, and some fixed animations that
could be used to replace Flash ads. It is a very valuable addition, though.
<P>QML on the other hand, has really amazed us. It is very well thought out, and
the binding and javascript support (each property is a javascript expression)
has really amazed us.
<P>We were able to implement a song tracker that would modify the label showing
the remaining time, in a few lines of code. The below code shows the code needed
to show the remaining time. <PRE><CODE>
Text {
id: TotalTime
x: parent.width + 20 // BINDING!
font.size: 12
font.bold: true
color: "white"
text: "-" + Math.floor((354 - Knob.x + 13) / 60) + ":"
+ Math.floor((354 - Knob .x + 13) % 60) // JAVASCRIPT!
}
</CODE>
</PRE>
<P>QML also has some support for loading it on demand over HTTP, much like
Flash, and it seems that it has the potential for becoming a Flash killer with
time.
<P>A web browser plugin could easily be developed and Nokia could support it
directly on all its S60 phones, when the Qt S60 port is ready. This way, third
parties could develop applications that you run remotely and where you always
would run the latest release! </P></BODY></HTML>
|
