Qml + js [SOLVED]



  • 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.



  • 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.



  • 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



  • @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
            }
        }
    }
    

Log in to reply
 

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