Breaking up QML into different files. [solved]

dstudentx

How can i break up my project into different files.
for example I'd like to have my animations on one file my states in another and so forth.

so instead of everything on file file I'd like something like

@
//animations.qml
......
.....
ParallelAnimation{
id: up_down
running: false
NumberAnimation { target: movie_global; property: "opacity"; to: 1; duration: 800}
NumberAnimation { target: film_list_background_image; property: "opacity"; to: 1; duration: 2000}
NumberAnimation { target: list_down; properties: "x"; to: 1187; from: 1290; easing.type: Easing.OutBounce; duration: 3500}
.....
.....
@

@
// states.qml
states: [
State {
name: "State1"
PropertyChanges {target: movie_mouse_mm; x: 608; y: 1022}
PropertyChanges {target: mm; x: 760; y: 980}
..........
.......
@

sierdzio

This will not work, especially with states. You can create custom animations, but it still needs to be included in your "main" file.

There is a neat trick to include sub-files by id (that is, use id from "main" file in your sub-file, then include sub in main... that does not sound very clear, does it?), you can try that if you want, but I would recommend just keeping the stuff together.

Gennon

I would just make another qml file (MyParallellAnimation.qml) and then paste in the code:

@
ParallelAnimation{
property alias target_one: one.target
property alias target_two: two.target
property alias target_three: three.target
id: up_down
running: false
NumberAnimation { id: one; property: "opacity"; to: 1; duration: 800}
NumberAnimation { id: two; property: "opacity"; to: 1; duration: 2000}
NumberAnimation { id: three; properties: "x"; to: 1187; from: 1290; easing.type: Easing.OutBounce; duration: 3500}
}
@

Or even make it more generic. That way you could use that component another place later on and just define the targets. Have not tested with animations, but all other stuff works well doing this.

dstudentx

Thanks Gen!
Now how do I call the animations from the file?
I tried making the file but I get a reference error

currently I'm just using up_down.start()

Gennon

First you need to make sure you either have the qml file in the same directory, or that you import it.

@import "path/to/foldercontainingmyqmlfile@

Then I would just make an object in you main qml file , or where you are using the animation.

@
MyParallellAnimation{
id: up_down
target_one: movie_global
target_two: film_list_background_image
target_three: list_down
}
@

And then when your are going to use your animation:

@
up_down.start()
@

dstudentx

Thanks that's what I thought but I get a no such directory error which doesn't make any sense because it's in the same directory as my js files which load and work.

Gennon

Are you using absolute path or relative path?

Be also aware which qml file is loading the other qml file. I have encountered this problem sometimes, you find the file using Qt Creator, but when you are running the application it might be that the main.qml file is using a Component from another qml file ( that is also in another directory), and that Component is using a JS from another directory again.