How can I have multiple QML files in my QtQuick2 project ?



  • I am totally new to Qt and QML
    I am practicing to write QML2 code for user interface.
    I made a QtQuick project using QML2 and wrote some qml code in my project main file
    I want shrink my main.qml file and break it into several different qml files residing in same project directory.
    Not all the qml files contain a visual component
    As an example let's assume in my main.qml file I have a table and I want to define the Table model in a separate
    qml file.
    So I will add a TableModel.qml file into the project and put some code as following:

    @
    //--> Inside TableModel.qml file
    XmlListModel{
    id: tableModel
    source: "a_web_page"
    query: "/rss/channel/item"
    namespaceDeclarations: "some_declaration";"
    XmlRole { name: "title"; query: "something1" }
    XmlRole { name: "date"; query: "something2" }
    XmlRole { name: "source"; query: "something3" }
    }
    //--> End of TableModel.qml file @

    In my main.qml file I have a part of my code as follows:

    @TableView{
    id: aWebTable
    TableViewColumn{
    title: "First Column"
    role: "title"
    }
    model: tableModel
    }
    .....@

    I get following error:

    ReferenceError: tableModel is not defined
    But as soon as I copy and paste the file contents to the end of the main.qml file it works

    Is there any clever way to deal with the problem since I want to have the main qml file concise and having different qml files for coding simplification and reusability

    I would be happy if one could write a detailed answer with examples since I am very new to Qt/QML and I want to give a try to fix the problem.
    Thanks



  • define:
    @TableModel {
    id: tableModel
    }@

    in your main.qml



  • Make your Model and add the js function on statuschanged Notice the variant getMe and the string source for wen calling in other pages

    MyModel.qml
    @Item{
    id: tableModelItem
    property string source
    property variant getMe: null
    XmlListModel{
    id: tableModel
    source: tableModelItem.source
    ....
    XmlRole { name: "title"; query: "something1" }
    ......
    onStatusChanged: {
    if(status === XmlListModel.Loading){
    console.log("loading")
    }
    if(status === XmlListModel.Error){
    console.log("Error \t"+ errorString())
    }
    if(status === XmlListModel.Ready){
    if (count >0 )
    tableModelItem.getMe = tableModel.get(0)
    }
    }
    }@

    Something.qml

    @Item {
    ..
    Text {
    ...
    /* look how we are using the getMe it is like this
    / modelname: (in are case models)
    getMe: we made this in are xmllistmodel file to call each data (xmlrole)
    name/title: the query name in are XmlRoles
    /
    text: models.getMe.title
    /

    this could be models.getMe.name if we have a XMLRole called name
    {name of model}.{function to get Roles}.{Role Name}
    */
    }
    MyModel{
    //give a id so we can call on it
    id: models ;
    // add a source so that the model can load something
    source: "somesource to some api or xml file"}
    }
    @

    This is just one way of doing this so you do not need to include your model in a View. but rather call on each thing as you want.


Log in to reply
 

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