Reference error

franziss

Dear all,

I am trying to create a button, which when pressed, will clear my list elements. But, when I pressed it, it has the error

ReferenceError: Can't find variable: MediaIconModel

Why is it so? It can access the MediaIconModel under GridView. THank you for your kind help
@
Component {
id: mediaIconDelegate
Item {
width: grid.cellWidth; height: grid.cellHeight
Column {
anchors.fill: parent
Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter;
width: 64; height: 64
}
Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
}

           MouseArea {
               id: iconMouseArea
               anchors.fill: parent
               width: 64
               height: 64
               hoverEnabled: true

               onEntered: {
                   var iconObj = Qt.createComponent("icon.qml");
                   iconObj.createObject(parent);
               }
           }
       }
   }

   GridView {
       id: grid
       anchors.fill: parent
       cellWidth: 64; cellHeight: 64

       model: MediaIconModel {}
       delegate: mediaIconDelegate
   }

   Image {
       id: clearAllIcon
       y: 200
       width: 64
       height: 64
       source: "clearButton.gif"

       MouseArea {
           id: clearAllIconMouseArea
           anchors.fill: parent
           width: 64
           height: 64

           onClicked: {
               MediaIconModel.clear();
           }
       }
   }

@

Chuck Gao

MediaIconModel is not a member/model's name, it's your custom model's name.

tdmatsu

you can find a simple example here: http://doc.qt.nokia.com/latest/qdeclarativemodels.html

are you trying to use a custom model?

franziss

Yes, MediaIconModel is my custom model's name, which I declared in MediaIconModel.qml

@
import QtQuick 1.0

ListModel {
ListElement {
name: "Add"
portrait: "addButton.jpg"
}
}
@

I could not access mediaIconModel in my main qml Image element. But if instead of declaring mediaIconModel in its own qml, I declare it in my main qml
@
ListModel {
id: mediaIconModel
ListElement {
name: "Jim Williams"
portrait: "liverbird.gif"
}
}
@

And in my main qml GridView element I declare model: mediaIconModel, I can access the Image element. Why is it so?

Chuck Gao

Try this:
@
MediaIconModel {
id: myModel
.......
}

GridView {
id: grid
anchors.fill: parent
cellWidth: 64; cellHeight: 64

model: myModel
delegate: mediaIconDelegate

}
@

franziss

Hi Chuck,

Thank you for your suggestion, but it doesn't work. Let us look at the following demo code. In file main.qml

@
import QtQuick 1.0

Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        fruitModel.clear();
    }
}

Rectangle {
      width: 200; height: 200
     Component {
         id: fruitDelegate
         Row {
                 Text { text: " Fruit: " + name; color: ListView.view.fruit_color }
                 Text { text: " Cost: $" + cost }
                 Text { text: " Language: " + ListView.view.model.language }
         }
     }

     ListView {
         property color fruit_color: "green"
         model: FruitModel {}
         delegate: fruitDelegate
         anchors.fill: parent
     }
 }

}
@

And file FruitModel.qml

@
import QtQuick 1.0

ListModel {
id: fruitModel
property string language: "en"
ListElement {
name: "Apple"
cost: 2.45
}
}
@

How come

@
MouseArea {
anchors.fill: parent
onClicked: {
fruitModel.clear();
}
}
@

Doesn't work in main.qml? Thank you for your help

tdmatsu

ID needs to be defined in the instance, not in the custom component.
You could try something like this:

FruitModel.qml
@
import QtQuick 1.0

ListModel {
property string language: "en"
ListElement {
name: "Apple"
cost: 2.45
}
}
@

main.qml
@
import QtQuick 1.0

Rectangle {
width: 360
height: 360

Component {
id: fruitDelegate
Row {
Text { text: " Fruit: " + name; color: ListView.view.fruit_color }
Text { text: " Cost: $" + cost }
Text { text: " Language: " + ListView.view.model.language }
}
}

ListView {
property color fruit_color: "green"
model: FruitModel {id:fruitModel}
delegate: fruitDelegate
anchors.fill: parent
}

MouseArea {
anchors.fill: parent
onClicked: {
fruitModel.clear();
}
}
}
@

franziss

tdmatsu, you are a genius! Thank you very much for your kind help. Have a nice day! =)

tdmatsu

no problem! have a nice day :)