[Qt-qml] Applying common behaviour to a group of elements

[alan.westbrook at nokia.com]

Interesting problem.

I haven't seen anything that is designed for this type of thing, perhaps the guys in Brisbane have an idea for that.

But, I have an idea for a way to do it:

 * Se up Element A onOpacityChanged to start playing sound
 * Know (before hand) how long the audio clip is.

Widget {
	id: elementA
	opacity: 0
	onOpacityChanged: { if (1 == opacity) { soundElement.play() } }
}

SequentialAnimation {
	NumberAnimation { target: elementA; opacity: 1 }
	PauseAnimation { duration: soundLength }
	NumberAnimation { target: elementX: opacity: 1 }
}

Kinda hacky, but it could work.

Alan

On Aug 4, 2010, at 3:38 PM, ext Alex wrote:

> Thanks, Alan.
> 
> I have another question related to my example.
> 
> As you saw, I am using SequentialAnimation to sequence animations, but
> what if I want a non-animation in the sequence?
> 
> For example, assume I've exposed a C++ "MediaPlayer" component to QML,
> which has a playFile(path) slot and playbackCompleted() signal.
> 
> Is there a declarative approach for me to express the following?
> 
> 1.  animate fade-in for element A
> 2.  play sound(S) and wait for completion
> 3.  animate fade-in for element B
> 
> Cheers,
> Alex
> 
> 
> On Wed, Aug 4, 2010 at 2:51 PM,  <alan.westbrook at nokia.com> wrote:
>> I'm not sure if there is an easy declarative way to do that.
>> 
>> You could probably write a javascript function that would take care of some of the typing, something like:
>> 
>> Component.onCompleted: {
>>        for(var i = 0; i < target_id_list.count(); ++i)
>>        {
>>                var obj = numberAnimationComponent.create(animations)
>>                obj.target = target_id_list[i]
>>                var pause = pauseAnimationComponent.create(animation)
>>        }
>> 
>>        animations.start()
>> }
>> 
>> Probably best not to cut and paste that, my javascript skillz are lacking.
>> 
>> You could probably write a C++ class that iterates over all it's child items and does the same thing when it becomes visible, or some other method is called though.
>> 
>> HTH!
>> Alan
>> 
>> 
>> On Aug 4, 2010, at 11:42 AM, ext Alex wrote:
>> 
>>> Hi Alan,
>>> 
>>> Sorry for not being more clear.
>>> 
>>> I have a large number of pages, with each page containing several
>>> elements.  The "fading in" behaviour applies to the elements on a
>>> given page.
>>> 
>>> The large number of pages is my motivation for encapsulating this
>>> behaviour, so I don't have to re-implement it on every page.
>>> 
>>> For example, I currently have a page that has 4 elements, and I fade
>>> them in as follows:
>>> 
>>>    SequentialAnimation {
>>>        id: animations
>>>        NumberAnimation { target: e1; property: "opacity"; from: 0;
>>> to: 1; duration: 600 }
>>>        PauseAnimation { duration: 1000 }
>>>        NumberAnimation { target: e2; property: "opacity"; from: 0;
>>> to: 1; duration: 600 }
>>>        PauseAnimation { duration: 1000 }
>>>        NumberAnimation { target: e3; property: "opacity"; from: 0;
>>> to: 1; duration: 600 }
>>>        PauseAnimation { duration: 1000 }
>>>        NumberAnimation { target: e4; property: "opacity"; from: 0;
>>> to: 1; duration: 600 }
>>>    }
>>> 
>>> For this to work, I also set opacity to 0 in the definitions of e1,
>>> e2, e3, and e4.
>>> 
>>> If I were using an imperative language, I would do something like:
>>> 
>>> Fader fader;
>>> fader.setFadeDuration(600)
>>> fader.setPauseDuration(1000)
>>> fader.addElement(e1)
>>> fader.addElement(e2)
>>> etc
>>> fader.start()
>>> 
>>> Is there an idiomatic way to do something similar in QML?
>>> 
>>> Cheers,
>>> Alex
>>> 
>>> 
>>> 
>>> On Wed, Aug 4, 2010 at 11:24 AM,  <alan.westbrook at nokia.com> wrote:
>>>> So it's a slideshow and each element is a page, and you have hundreds of pages?
>>>> 
>>>> Or do you have a few pages each with a bunch of elements?
>>>> 
>>>> Or do you have hundreds of elements which pop in and out on a single page?
>>>> 
>>>> Depending on what you mean, you could try putting your elements in a model and iterating over them setting opacity. You can also use a Behavior on opacity to enable fade in and out in the element definition.
>>>> 
>>>> Or you can fade each page in and out, all child elements will follow the opacity of it's parent page.
>>>> 
>>>> Alan
>>>> 
>>>> On Aug 4, 2010, at 11:14 AM, ext Alex wrote:
>>>> 
>>>>> Hi all,
>>>>> 
>>>>> I am building an application that has a PowerPoint-like informational
>>>>> component. To this end, I have a bunch of QML files that display
>>>>> content progressively, with items fading in one at a time.
>>>>> 
>>>>> In my current implementation, I give each object an id and set opacity
>>>>> to 0. I then have a SequentialAnimation block that uses a
>>>>> PropertyAnimation, individually referencing each id, to bring the
>>>>> opacity to 1.
>>>>> 
>>>>> This approach works but it is suboptimal (from a development point of
>>>>> view), considering that I will have hundreds of these QML files. Is
>>>>> there a better way to abstract/automate this behaviour?
>>>>> 
>>>>> Thanks,
>>>>> Alex
>>>>> _______________________________________________
>>>>> Qt-qml mailing list
>>>>> Qt-qml at trolltech.com
>>>>> http://lists.trolltech.com/mailman/listinfo/qt-qml
>>>> 
>>>> 
>> 
>>