Hello!
I want to create a QML application where I have a bunch of Buttons that you
can click on. These Buttons are categorized into groups.
At the top of the page there are CategoryButtons. When you click on one of
the CategoryButtons all the Buttons in that category appear on the page.
The Buttons not in that category remain hidden.
To accomplish this I have created two ListModels, one for the
CategoryButtons and one for the Buttons:
ListModel {
id: categoryButtonsModel
ListElement {
name: "Super Awesome Category"
filterKey: "super"
}
ListElement {
name: "Slightly More Awesome Category"
filterKey: "slight"
}
}
ListModel {
id: buttonsModel
ListElement {
name: "Cool Button"
filterKey: "super"
}
ListElement {
name: "Geek Button"
filterKey: "super"
}
ListElement {
name: "Hipster Button"
filterKey: "slight"
}
}
I have added a property to all of these called filterKey. I want all
Buttons to be in the category that has the same filterKey that they have.
Then created the views:
ListView {
id: categoryButtonsView
model: categoryButtonsModel
delegate: Button {
text: name
onClicked: buttonsDelegateModel.filterOnGroup = filterKey
}
orientation: Qt.Horizontal
height: 50
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
}
ListView {
id: buttonsView
model: buttonsDelegateModel
anchors.top: categoryButtonsView.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
Then I have added a DelegateModel to filter my buttons:
DelegateModel {
id: buttonsDelegateModel
model: buttonsModel
delegate: Button {
text: name
}
filterOnGroup: "super"
groups: [
DelegateModelGroup {
includeByDefault: false
name: "super"
Component.onCompleted: {
for (var i = 0; i < buttonsModel.count; i++ ) {
var entry = buttonsModel.get(i);
if(entry.filterKey === name) insert(entry);
}
}
},
DelegateModelGroup {
includeByDefault: false
name: "slight"
Component.onCompleted: {
for (var i = 0; i < buttonsModel.count; i++ ) {
var entry = buttonsModel.get(i);
if(entry.filterKey === name) insert(entry);
}
}
}
]
}
This code works perfectly. I have one problem only:
The groups property of the above DelegateModel is basically some generic
code and the filterKeys in CategoryButtonsModel. I want to generate groups
based on CategoryButtonsModel so I don't have to specify the same things
two times.
I have tried using a Repeater but it does not seem to generate a list?
I have tried some javascript like this, but it is full of problems: :)
groups: {
var result = [];
var component = Qt.createComponent(DelegateModelGroup);
for(var i=0; i<categoryButtonsModel.count; ++i) {
var curr = component.createObject(buttonsDelegateModel, {
"includeByDefault": false,
"name":
categoryButtonsModel.get(i).filterKey,
});
curr.Component.onCompleted = fillGroupFromModel(curr);
result.push(curr);
}
return result;
}
function fillGroupFromModel(group) {
for (var i = 0; i < gridModel.count; i++ ) {
var entry = gridModel.get(i);
if(entry.filterKey === group.name) group.insert(entry);
}
}
When I run this version I get a Component is not ready error. And this
looks like overcomplicating the problem.
How can I generate the groups list from CategoryButtonsModel dynamically?
Thank you for your time.
Regards,
Viki
_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest
