OnCompleted doesn't work as expected (??)

skypjack

Hi all,
I'm coding a splash routine for my application.
I would like to launch the animation as soon as the main Page has been loaded.
Splash animation works using States and Transitions.
Using a MouseArea and the buttonClicked event to change state, it works fine.
However, triggering state change using Page onCompleted event doesn't work!!
It seems that the other components are not yet correctly positioned, so anchors and x/y bindings are wrong.
I don't understand why it works in this way.

Any suggestions?

Thanks in advance,
Michele

mbrasser

Do you have a small example you could post showing the problem?

Kypeli

You could try to use Component.onCompleted: { }. That, at least for me, works as expected.

skypjack

Hi mbrasser, sorry but I modified the code because have to do the work!
However, I used Component.onCompleted inside the page Component but it didn't work.

Any ideas?
Components anchors are wrongs moving from "" state to the first state (ie named "first"), as:
Component.onCompleted: splash.state = "first"
That doesn't work as expected.

Do you have a working example that uses images to play a state/transition based splash screen?

Kypeli

Why don't you just initialize the state variable of your component with some state instead of trying to do it in the onCompleted method?

But normally you would not want to initialize the first step to anything, but move to new states as something happens. If you want to go to the default state when something happens in the UI, just set the state to "".

skypjack

I would like to start the splash animation on load, that's why I'm try changing the state with onCompleted. It seems that Page onCompleted call does not mean that internal components are loaded...

mbrasser

Perhaps the Page component itself (or another component involved) also does some work in onCompleted, and its onCompleted is being called after yours?

skypjack

Yes, I think so, too. Do you have a workaround to suggest?

cpscotti

Hey, I have an idea that might solve your problem (solved for me).

Try defining two states on your page, say "bootUp", "splash".
@
//....
states: [
State {
name: "bootUp"
PropertyChanges {
target: basePage
y: -parent.heigth //just hiding the page..
//here you should SET all the proper properties/anchors so that you ENFORCE that
//they are SET before you move to the next state
}
},
State {
name: "splash"
PropertyChanges {
target: basePage
y: 0
}
StateChangeScript {
name: "startSplashAnimation"
script: doAnimation()
}
}
]
@
And then try forcing the state change using either Component.onCompleted:
@
Component.onCompleted: {
state = "bootUp"//this will run all the scripts, set all the properties and etc on the bootUp state
state = "splash"// you'll see that any scripts called from bootUp will be executed before this line
}
@

or if that doesn't work, try (it's ugly but worked better for me)
@
onVisibleChanged: {
if( visible) {
state = "bootUp"
state = "splash"
}
}
@

If your animations are simple, you can even use something like (to avoid using the StateChangeScript):
@
transitions: [
Transition {
from: "bootUp"
to: "splash"
NumberAnimation {
properties: "y"
easing.type: Easing.OutExpo
duration: 400
}
}
]
@

Using some variant of this should make all work. Looks a bit ugly in the beginning but it actually makes sense. Good luck!