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
    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:

    id: aWebTable
    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.

  • 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

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


    @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 if we have a XMLRole called name
    {name of model}.{function to get Roles}.{Role Name}
    //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.