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