[Solved]Qt Quick Application and QML



  • Hey everyone,

    I am new to Qt/QML however I am a computer programmer so I am familiar with C++.

    My question is this:

    I have a Qt Quick Application on Ubuntu 11.10 using Qt Creator, however after adding a lot of functionality to main.qml it is getting pretty lengthy, what is the best/proper/best-practice solution to splitting up my main.qml into other files?

    Currently I am just messing around with QProcess in the C++ end, and the TabWidget control from the Qt Examples, as well as the GridView example which I want to display inside each of the tabs in the TabWidget.

    Any help would be appreciated!

    Thanks,
    Shifty

    Simple View of my main.qml:

    @Rect {
    TabWidget { // I would like this in it's own file
    Rect{
    GridView { // I would like this in it's own file, and accessible to TabWidget
    }
    }
    Rect{
    GridView {
    }
    }
    }
    }@



  • I think it's just a matter of taking everything between the braces of GridView and putting it into a file called GridView.qml, and remove the content of the other GridView references, then extract the remaining content between the braces of TabWidget and save it into a file called TabWidget.qml.

    I'm just a Lab Rat so I could be way off base without testing a real example.



  • Yeah, whenever I tried doing that I was getting an error similar to: "component recursively defined"

    I need a way to reuse some of it's logic but none of it's appearance, and in at least one cases not even a model

    Edit:
    "https://github.com/Shifty0x88/RaspPiAppLauncher":https://github.com/Shifty0x88/RaspPiAppLauncher if you wanna take a look at my problem. I know there is a better way then to just replicate like half of the main code 3 times, one for each tab if I expand it


  • Moderators

    I've never got that error myself, usually splitting into separate files is pretty easy. Judging from the word "recursive" it may be that you try to:
    a) create a file for new element, say "MyGridView.qml" - for example
    b) in that file, you create a top element of with "MyGridView".

    If that is what you are doing, then that is the source of your problem. QML parser reads file MyGridView, but inside it finds an element of type "MyGridView", so it parses the file again just to find the tag... I guess you get the picture.

    So, in order to fix, apply a), but don't do b). Instead, in your new, shiny file, proceed with standard item declaration; use "Item", "Rectngle" , "GridView" or anything else that is already well defined as the root element.

    But, that is only a guess, as you did not specify, how you attempted to create the split files.



  • hi all,

    i am facing a problem with my QML UI. please go through this thread and help me to solve my problem.

    Thank you

    https://developer.qt.nokia.com/forums/viewthread/12229/



  • My idea is ...

    In main.qml :
    @
    Item {
    MyTableWidget {
    ....
    MyItemGridView {
    ...
    }
    MyItem2GridView {
    ...
    }
    ...
    }
    }
    @

    In MyTableWidget.qml
    @
    MyTableWidget {
    ...
    }
    @

    In MyItemGridView.qml
    @
    MyItemGridView {
    model: MyItemGridModel {};
    delegate: MyItemGridDelegate {};
    ....
    }
    @

    In MyItem2GridView.qml
    @
    MyItem2GridView {
    model: MyItem2GridModel {};
    delegate: MyItem2GridDelegate {};
    ....
    }
    @

    In MyItemGridModel.qml
    @
    MyItemGridModel {
    ListModel {
    ListElement { ... }
    }
    }
    @

    In MyItemGridDelegate.qml
    @
    MyItemGridDelegate {
    Component {
    Item {
    // your delegate code...~
    }
    }
    }
    @

    Something like these... : )


  • Moderators

    Yeah, you are making exactly the error I warned you about in my previous post.

    To give a concrete example:
    In MyItemGridDelegate.qml you should NOT use the name of the file as the root item (or, to be exact, anywhere inside that file). Correct code is:
    @
    Item {
    Component {
    Item {
    // your delegate code...~
    }
    }
    }
    @

    Or even shorter, depending on your implementation details:
    @
    Component {
    Item {
    // your delegate code...~
    }
    }
    @


  • Moderators

    Damn, I did not warn YOU, it was another person... use Gravatars, guys, it would be easier to spot that someone else is "hijacking" the thread :)



  • Yep, your right, I post it too soon.
    It only need Component {} as a root component in your MyItemGridDelegate.qml.
    Thanks, sierdzio :)



  • Ooooohhhhh poooo I was trying to figure that out for forever!

    Thanks sierdzio, nice catch on the bug with like no information! You are a Qt Guru!!!! =D Thank you!

    Thanks guys I will try to update my code soon to reflect these suggestions. Awesome!


  • Moderators

    Haha, thank you, and you are indeed welcome! :)

    Don't count on me being a real guru, though. I still have lots, and lots, and then a bit more, to learn.



  • Awesome, that solved all of my headaches. Now to figure out all the scoping changes I have to make


Log in to reply
 

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