Breaking up QML into different files. [solved]



  • 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}
    ..........
    .......
    @


  • Moderators

    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.



  • 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.



  • 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()



  • 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()
    @



  • 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.



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.