[Solved] ListElements (ListModel) defined in other qml files?



  • I got a fonctionnal ListModel defined like this :

    @
    ListModel {
    id: leftGrid
    ListElement { icon: "Images/1.png" }
    ListElement { icon: "Images/2.png" }
    ListElement { icon: "Images/3.png" }
    ListElement { icon: "Images/4.png" }
    }
    @

    The thing is that I'd like to define ListElement in separate qml files but I really don't know what to type in these other qml files, and how to call them from the main file...

    Then, I'd like to add some fields to SOME Elements but it won't work with the PathView
    definition :

    @
    Component {
    id: componentDelegate
    Item {
    Image {
    source: icon
    }
    }
    }
    @

    right ?

    Don't know how to deal with this problem too... :(

    Any help with be welcomed, thanks in advance.

    [EDIT: code formatting, please wrap in @-tags, Volker]



  • Hello,

    you can write your model in separate file:

    Data.qml
    @

    import QtQuick 1.0

    ListModel {
    id: leftGrid
    ListElement { icon: "Images/1.png" }
    ListElement { icon: "Images/2.png" }
    ListElement { icon: "Images/3.png" }
    ListElement { icon: "Images/4.png" }
    }
    @

    And than you can use it in other QML file:

    main.qml

    @
    import QtQuick 1.0

    PathView{
    model: Data {}
    }
    @

    I can't understand your second question :( Can you explain a bit more?



  • Hello, and thx for your answer.

    About the first question, what i want to place in qml files are the ListElements, NOT the ListModel. Something like :
    @ListModel {
    id: leftGrid
    ListElement { myWidget1 }
    ListElement { myWidget2 }
    ListElement { myWidget3 }
    ListElement { myWidget4 }
    }@

    or maybe something like :
    @ListModel {
    id: leftGrid
    myWidget1
    myWidget2
    myWidget3
    myWidget4
    }@
    I don't know.. but I want ListElements in qml files

    About the 2nd question, let's consider 2 ListElements (and independantly from question 1). So we got this :
    @ListElement { nb: "3" }
    ListElement { nb: 3
    icon: "Images/2.png" }@

    And then I'd like to do something like :
    @Component {
    id: componentDelegate
    Item {
    Image {
    if icon.isDefined() {
    source: icon
    }
    else {
    source : "Images/DefaultImage.png"
    }
    }
    }
    }@

    Or maybe something like :

    @Image {
        source: icon ? icon : "Images/DefaultImage.png"
    }@
    

    Do you know what I mean ?

    Thx in advance for your help, i'm really lost on it...



  • On second question. AFAIK all ListElements should have equal number of roles so you can write

    @
    ListElement {
    nb: "3"
    icon: ""
    }
    ListElement {
    nb: 3
    icon: "Images/2.png"
    }
    @

    and than check

    @
    Component {
    id: componentDelegate
    Item {
    Image {
    if ( icon != "" ) {
    source: icon
    }
    else {
    source : "Images/DefaultImage.png"
    }
    }
    }
    }
    @

    For first question. What is type of myWidget1? Is it inherits Item?

    I think it is possible to write something like this:
    @
    ListModel {
    id: leftGrid
    ListElement { roleName: myWidget1 }
    ListElement { roleName: myWidget2 }
    ListElement { roleName: myWidget3 }
    ListElement { roleName: myWidget4 }
    }
    @

    and in your delegate:

    @
    Component {
    id: componentDelegate
    Item {
    id: roleName
    }
    }
    @

    but I`m not sure if this works.



  • @Component {
    id: componentDelegate
    Item {
    Image {
    if ( icon != "" ) {
    source: icon
    }
    else {
    source : "Images/DefaultImage.png"
    }
    }
    }
    }@

    gives me the error "Unexpected symbol : if"

    and about the first question, I don't know what the write in myWidget1 :/ That's just the general structure I want to have !

    Some ideas about how to use "if" and about the other question ?

    Thx in advance :)
    Gui


  • Moderators

    In regard to using "if", try:
    @
    Component {
    id: componentDelegate
    Item {
    Image {
    source: (icon !="")?icon:"Images/DefaultImage.png"
    }
    }
    }
    @
    or
    @
    Component {
    id: componentDelegate
    Item {
    Image {
    source: {
    if (icon !="") {
    return icon
    } else {
    return "Images/DefaultImage.png"
    }
    }
    }
    }
    }
    @



  • Ok, it works for the condition statement :)

    So, here is a summary for my main problem :

    I got a fonctionnal ListModel defined like this :

    @ListModel {
    id: leftGrid
    ListElement { icon: "Images/1.png" }
    ListElement { icon: "Images/2.png" }
    }@

    The thing is that I'd like to define ListElement in separate qml files but I really don't know how to do it...

    I wrote the qml like this :

    @//myWidget.qml
    import QtQuick 1.0

    ListElement {
    icon: "Images/X.png"
    }@

    But I don't know how to "invoke" or "instanciate" it in my main file...

    I tried :

    @ListModel {
    id: leftGrid
    ListElement { icon: "Images/1.png" }
    myWidget //qml file
    }@

    and :

    @ListModel {
    id: leftGrid
    ListElement { icon: "Images/1.png" }
    ListElement { myWidget }
    }@

    Both doesn't work...

    Any help with be welcomed, thanks in advance.



  • It seems that it is not possible to have ListElement in separate file. ListElement normally contains a few lines of code. So I don`t see a problem to have ListModel in separate file. If you are trying to create a model that contains some widgets, may be "Reapeater":http://doc.qt.nokia.com/4.7-snapshot/qml-repeater.html will be more convenient.



  • Ok will try it :)
    Thx !


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.