I am trying to create a component with certain properties I've set. The sounds location and name are given by a C++ function that is actually working because the console.log() shows so:
qml: Adding /home/vitimiti/.local/share/com.ubuntu.developer.vitimiti.irc-app/sounds/Amsterdam.ogg sound
qml: Adding /home/vitimiti/.local/share/com.ubuntu.developer.vitimiti.irc-app/sounds/Blip.ogg sound
qml: Adding /home/vitimiti/.local/share/com.ubuntu.developer.vitimiti.irc-app/sounds/Mallet.ogg sound
qml: Adding /home/vitimiti/.local/share/com.ubuntu.developer.vitimiti.irc-app/sounds/Positive.ogg sound
qml: Adding /home/vitimiti/.local/share/com.ubuntu.developer.vitimiti.irc-app/sounds/Rhodes.ogg sound
qml: Adding /home/vitimiti/.local/share/com.ubuntu.developer.vitimiti.irc-app/sounds/Slick.ogg sound
qml: Adding /home/vitimiti/.local/share/com.ubuntu.developer.vitimiti.irc-app/sounds/Soft delay.ogg sound
qml: Adding /home/vitimiti/.local/share/com.ubuntu.developer.vitimiti.irc-app/sounds/Xylo.ogg sound
The problem is that, when trying to set the properties to a ListElement, it will simply leave the ListView empty, as if it didn't recognize the properties.
Here is my JavasCript Functions in a file:
var component;
var element;
function createElement(soundName, soundLocation) {
component = Qt.createComponent("../AlertsSettingsSounds.qml")
if (component.status === Component.Ready)
finishCreation(soundName, soundLocation)
else
component.statusChanged.connect(finishCreation)
}
function finishCreation(soundName, soundLocation) {
if (component.status === Component.Ready) {
element = component.createObject(alertsModel, {
"Name": soundName,
"Sound": soundLocation});
if (element === null)
// Error Handling
console.log("Error creating object");
} else if (component.status === Component.Error)
// Error Handling
console.log("Error loading component: ", component.errorString());
}
Here is the page that is used:
import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem
import Irc_App 0.1
import "../components"
// Mobile (small screen) layout
Page {
id: alertsSettingsPage
objectName: "alertSettingsPage"
title: i18n.tr("Alerts")
Row {
id: muteRow
objectName: "muteRow"
anchors {
left: parent.left
leftMargin: root.margins
top: parent.top
topMargin: root.margins
right: parent.right
rightMargin: root.margins
}
spacing: root.spacing
Label {
id: muteLabel
objectName: "muteLabel"
width: parent.width - muteCheckBox.width
text: i18n.tr("<b>Mute</b> notifications")
}
CheckBox {
id: muteCheckBox
objectName: "muteCheckBox"
checked: false
onCheckedChanged: {
if (checked === true)
soundsComponent.volume = 0
else
soundsComponent.volume = 1
}
}
}
Flickable {
id: soundsFlickable
objectName: "soundsFlickable"
anchors {
left: parent.left
leftMargin: root.margins
top: muteRow.bottom
right: parent.right
rightMargin: root.margins
bottom: parent.bottom
bottomMargin: root.margins
}
clip: true
contentHeight: soundsColumn.height
contentWidth: parent.width
flickableDirection: Flickable.VerticalFlick
Column {
id: soundsColumn
objectName: "soundsColumn"
width: parent.width
spacing: root.spacing
// One item selector for each notification there is.
ListItem.ItemSelector {
id: highlightAlertSelector
objectName: "highlightAlertSelector"
text: i18n.tr("Highlight Alert")
expanded: false
model: alertsSettingsComponent
onSelectedChanged: {
console.log(selectedIndex + " selected")
}
delegate: OptionSelectorDelegate {
text: name
onClicked: {
// This functions are local and to make the alerts
// sound as they ought to. They will write the
// configuration to the xml file and, from there,
// the program will start with those options set
// and the events will read such file to set again the
// Audio component and make it work for just the event.
if (name === "Muted") {
console.log("Muting sound for highlights")
soundsComponent.source = ""
} else {
console.log("Starting sound " + name +
" for highlights")
console.log("Setting sound option " + name +
" for highlights")
soundsComponent.source =
soundsHandler.soundsLocation + "/" + name
soundsComponent.play()
}
}
}
Component.onCompleted: {
// Set the muteCheckBox as it is in the configuration
// Set the sounds as they are in the configuration file
}
}
ListItem.ItemSelector {
id: kickedAlertsSelector
objectName: "kickedAlertsSelector"
text: i18n.tr("Kicked Alert")
expanded: false
model: alertsSettingsComponent
onSelectedChanged: {
console.log(selectedIndex + " selected")
}
delegate: OptionSelectorDelegate {
text: name
onClicked: {
if (name === "Muted") {
console.log("Muting sound for kicked event")
soundsComponent.source = ""
} else {
console.log("Starting sound " + name +
" for kicked event")
console.log("Setting sound option " + name +
" for kicked event")
soundsComponent.source =
soundsHandler.soundsLocation + "/" + name
soundsComponent.play()
}
}
}
Component.onCompleted: {
// Set the muteCheckBox as it is in the configuration
// Set the sounds as they are in the configuration file
}
}
}
}
AlertsSettingsComponent {
id: alertsSettingsComponent
objectName: "alertsSettings_component"
}
SoundsComponent {
id: soundsComponent
objectName: "sounds_component"
}
}
Here is the component used for the List Selectors, which is the one that should be working with the JS functions:
import QtQuick 2.0
import Irc_App 0.1
import "../js/AlertsSettingsFunctions.js" as AlertsSettingsFunction
// Using the sounds from the folder
ListModel{
id: alertsModel
objectName: "alertsModel"
Component.onCompleted: {
for (var i = 0; i < soundsHandler.sounds.length; i++) {
AlertsSettingsFunction.createElement(soundsHandler.sounds[i],
soundsHandler.soundsLocation + "/"
+ soundsHandler.sounds[i])
console.log("Adding", soundsHandler.soundsLocation + "/"
+ soundsHandler.sounds[i], "sound")
}
}
}
And here is the ListElement that defines the Name and Sound properties used in the JS file:
ListElement {
id: soundsListElement
objectName: "soundsListElement"
property string Name
property string Sound
name: Name
sound: Sound
}
So my problem is that the JS doesn't seem to understand that Name and Sound are string properties for the ListElement and that it should set them with the given soundName and soundLocation in the function present in the ListView component, so as to show it in the page. Instead, the Item Selectors appear completely empty.
I can't find out what I'm doing wrong, any help would be much appreciated.