October 4, 2011

Thanana Thanana
Lab Rat
14 posts

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

 

I got a fonctionnal ListModel defined like this :

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

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 :

  1.     Component {
  2.         id: componentDelegate
  3.         Item {
  4.             Image {
  5.                 source: icon
  6.             }
  7.         }
  8.     }

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]

8 replies

October 4, 2011

task_struct task_struct
Hobby Entomologist
344 posts

Hello,

you can write your model in separate file:

Data.qml

  1. import QtQuick 1.0
  2.  
  3. ListModel {
  4.     id: leftGrid
  5.     ListElement { icon: "Images/1.png" }
  6.     ListElement { icon: "Images/2.png" }
  7.     ListElement { icon: "Images/3.png" }
  8.     ListElement { icon: "Images/4.png" }
  9. }

And than you can use it in other QML file:

main.qml

  1. import QtQuick 1.0
  2.  
  3. PathView{
  4.    model: Data {}
  5. }

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

 Signature 

“Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.”
- Linus Torvalds

October 4, 2011

Thanana Thanana
Lab Rat
14 posts

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 :

  1. ListModel {
  2.         id: leftGrid
  3.         ListElement { myWidget1 }
  4.         ListElement { myWidget2 }
  5.         ListElement { myWidget3 }
  6.         ListElement { myWidget4 }
  7.     }

or maybe something like :

  1. ListModel {
  2.         id: leftGrid
  3.         myWidget1
  4.         myWidget2
  5.         myWidget3
  6.         myWidget4
  7.     }

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 :

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

And then I’d like to do something like :

  1. Component {
  2.         id: componentDelegate
  3.         Item {
  4.             Image {
  5.                     if icon.isDefined() {
  6.                         source: icon
  7.                     }
  8.                     else {
  9.                         source : "Images/DefaultImage.png"
  10.                     }
  11.             }
  12.         }
  13.     }

Or maybe something like :

  1. Image {
  2.         source: icon ? icon : "Images/DefaultImage.png"
  3.     }

Do you know what I mean ?

Thx in advance for your help, i’m really lost on it…

October 4, 2011

task_struct task_struct
Hobby Entomologist
344 posts

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

  1. ListElement {
  2.     nb: "3"
  3.     icon: ""
  4. }
  5. ListElement {
  6.     nb: 3
  7.     icon: "Images/2.png"
  8. }

and than check

  1. Component {
  2.         id: componentDelegate
  3.         Item {
  4.             Image {
  5.                     if ( icon != "" ) {
  6.                         source: icon
  7.                     }
  8.                     else {
  9.                         source : "Images/DefaultImage.png"
  10.                     }
  11.             }
  12.         }
  13.     }

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

I think it is possible to write something like this:

  1. ListModel {
  2.         id: leftGrid
  3.         ListElement { roleName: myWidget1 }
  4.         ListElement { roleName: myWidget2 }
  5.         ListElement { roleName: myWidget3 }
  6.         ListElement { roleName: myWidget4 }
  7.     }

and in your delegate:

  1. Component {
  2.         id: componentDelegate
  3.         Item {
  4.             id: roleName
  5.         }
  6. }

but I`m not sure if this works.

 Signature 

“Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.”
- Linus Torvalds

October 4, 2011

Thanana Thanana
Lab Rat
14 posts

  1. Component {
  2.         id: componentDelegate
  3.         Item {
  4.             Image {
  5.                     if ( icon != "" ) {
  6.                         source: icon
  7.                     }
  8.                     else {
  9.                         source : "Images/DefaultImage.png"
  10.                     }
  11.             }
  12.         }
  13.     }

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

October 4, 2011

mlong mlong
Mad Scientist
1517 posts

In regard to using “if”, try:

  1. Component {
  2.     id: componentDelegate
  3.     Item {
  4.         Image {
  5.             source: (icon !="")?icon:"Images/DefaultImage.png"
  6.         }
  7.     }
  8. }

or
  1. Component {
  2.     id: componentDelegate
  3.     Item {
  4.         Image {
  5.             source: {
  6.                 if (icon !="") {
  7.                     return icon
  8.                 } else {
  9.                     return "Images/DefaultImage.png"
  10.                 }
  11.             }
  12.         }
  13.     }
  14. }

 Signature 

Senior Software Engineer
AccuWeather Enterprise Solutions
/* My views and opinions do not necessarily reflect those of my employer.  Void where prohibited. */

October 4, 2011

Thanana Thanana
Lab Rat
14 posts

Ok, it works for the condition statement :)

So, here is a summary for my main problem :

I got a fonctionnal ListModel defined like this :

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

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 :

  1. //myWidget.qml
  2. import QtQuick 1.0
  3.  
  4. ListElement {
  5.     icon: "Images/X.png"
  6. }

But I don’t know how to “invoke” or “instanciate” it in my main file…

I tried :

  1. ListModel {
  2.     id: leftGrid
  3.     ListElement { icon: "Images/1.png" }
  4.     myWidget //qml file
  5. }

and :

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

Both doesn’t work…

Any help with be welcomed, thanks in advance.

October 4, 2011

task_struct task_struct
Hobby Entomologist
344 posts

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 [doc.qt.nokia.com] will be more convenient.

 Signature 

“Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.”
- Linus Torvalds

October 5, 2011

Thanana Thanana
Lab Rat
14 posts

Ok will try it :)
Thx !

 
  ‹‹ [Solved] QFrame not showing up      Web View: setting the url doesn’t always change the page ››

You must log in to post a reply. Not a member yet? Register here!