Qml + js [SOLVED]

[Fogord]

Hi

I build project with QtQuick 1.0 for WinCE 6.0.
I wont build dynamic ListModel from Js but i am not understand how.

Please write some example or show the right path.

[Fogord]

Code

My_Delegate.qml

Rectangle {
    height: 80

    property string r_title: "_title"
    property string r_description: "_description"
    property string r_date: "_date"

    Item{
        Column{
            Text{
                text: r_title
                font.bold: true
                color: "green"
            }
            Text{
                text: r_description
                font.italic: true
                color: "black"
                width: 650
                wrapMode: Text.WordWrap
            }
            Text{
                text: r_date
                color: "blue"
            }
        }
    }
}

main.qml

Rectangle {
    width: 700
    height: 360

    ListModel{
        id: my_model
        ListElement { name: "_1";  description: "1";    date:"***"}
        ListElement { name: "_2";  description: "2";    date:"---"}
        ListElement { name: "_3";  description: "3";    date:"+++"}
    }

    Component{
        id:my_delegate
        My_Delegate{
            r_title: model.name
            r_description: model.description
            r_date: model.date
        }
    }

    ListView{
        id:my_view

        delegate: my_delegate
        model: my_model

        anchors.fill: parent
    }
}

Need add listelement dynamic by Js. Thanks.

[mcosta]

Hi and welcome to devnet,

what do you mean with "I wont build dynamic ListModel"??
If you mean adding items from JavaScript you should have a look to ListModel::append(). Here there's the documentation

[Fogord]

@mcosta
Thanks

Put your example

js object

var exemple = { "store": {
                    "book": [
                        { "category": "reference",
                            "author": "Nigel Rees",
                            "title": "Sayings of the Century",
                            "price": 8.90
                        },
                        { "category": "fiction",
                            "author": "Evelyn Waugh",
                            "title": "Sword of Honour",
                            "price": 12.90
                        },
                        { "category": "fiction",
                            "author": "Herman Melville",
                            "title": "Moby Dick",
                            "isbn": "0-553-21311-3",
                            "price": 8.90
                        },
                        { "category": "fiction",
                            "author": "J. R. R. Tolkien",
                            "title": "The Lord of the Rings",
                            "isbn": "0-395-19395-8",
                            "price": 22.90
                        }]
                }
            }

main.qml

import QtQuick 1.1
import "./data_list.js" as Js

Rectangle {
    id: mainwindow
    width: 700
    height: 360

    property string fontName: "Arial"

   ListModel{
       id: model_l
       ListElement {
           category:"";
           author  :"";
           title   :"";
           price   :"";
       }
   }

   ListView{
       id: view_l
       model: model_l
       delegate: my_delegate
       anchors.fill: parent
   }

   Component {
       id: my_delegate
       PageDele {
           str_p_category: model.category
           str_p_author  : model.author
           str_p_title   : model.title
           str_p_price   : model.price
       }
   }

   Component.onCompleted: {
       model_l.append({ title: "1st title", category: "1st cathegory", author: "1st author" });
       var menu = Js.exemple.store.book;
       for (var i = 0; i < menu.length; i++ ) {
         model_l.append(menu[i]);
       }
       model_l.append({ title: "last title", category: "last cathegory" });
   }


}

PagaDele.qml

import QtQuick 1.1

Rectangle {
    height: 20

    property int marg: 5

    property alias str_p_author: author.text
    property alias str_p_category: category.text
    property alias str_p_title: title.text
    property alias str_p_price: price.text
    Row{
        Text {
            id: author
            font{
                family: mainwindow.fontName
                bold: true
                pixelSize: 14
            }
            color: "black"
            text: ""
            anchors.left: parent.left
            anchors.leftMargin: marg
        }

        Text {
            id: category
            font{
                family: mainwindow.fontName
                bold: true
                pixelSize: 14
            }
            color: "black"
            text: ""
            anchors.left: category.right
            anchors.leftMargin: marg + author.text.length
        }

        Text {
            id: title
            font{
                family: mainwindow.fontName
                bold: true
                pixelSize: 14
            }
            color: "black"
            text: ""
            anchors.left: category.right
            anchors.leftMargin: marg + category.text.length
        }

        Text {
            id: price
            font{
                family: mainwindow.fontName
                bold: true
                pixelSize: 14
            }
            color: "black"
            text: ""
            anchors.left: title.right
            anchors.leftMargin: marg + title.text.length
        }
    }
}