0

I am trying to implement a medications page using Ubuntu SDK. I am trying to get data from a SQL Lite db and populate a list when I load a page. I can do it if I use a Row with text and buttons, but not if I try to use a ListItem.

This works:

page: Page {
    id: drugPage
    Component.onCompleted: {
        var d = Drugs.getDrugs();
        Drugs.fillDrugList(d);
    }
    Column {
        id: lstDrugs
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            margins: units.gu(2)
        }
        spacing: units.gu(2)

        ListModel {
            id: mdlDrugs
        }
        Component {
             id: delDrugs
             Row {
                 spacing: units.gu(6)
                 //width: parent.width
                 Text {
                     id: txtDrug
                     text: name
                 }
                 Text {
                     id: txtDose
                     text: dose
                     //width: units.gu(4)
                 }
                 Text {
                     id: txFrequency
                     text: frequency
                 }
            }
        }

        ListView {
            id: viewDrugs
            model: mdlDrugs
            delegate: delDrugs
            height: parent.height
            width: parent.width
        }
    }
}

But this doesn't work:

page: Page {
    id: drugPage
    Component.onCompleted: {
        var d = Drugs.getDrugs();
        Drugs.fillDrugList(d);
    }
    Column {
        id: lstDrugs
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            margins: units.gu(2)
        }
        spacing: units.gu(2)

        ListModel {
            id: mdlDrugs
        }
        ListItem.Subtitled {
            id: delDrugs
            visible: true
            width: parent.width
            height: units.gu(5)
            text: "Drug:" + name + " " + dose
            subText: "Frequency: " + frequency
        }

        ListView {
            id: viewDrugs
            model: mdlDrugs
            delegate: delDrugs
            height: parent.height
            width: parent.width
        }
    }
}

A list item is present in the ui but it is not populated with the data.

The error I get is: ReferenceError: name is not defined ReferenceError: frequency is not defined What am I missing here?

Andrew
  • 13
  • 4
  • What's not working? I'd say your ListView needs a width, at a glance. – Mitch Oct 25 '14 at 19:27
  • Thanks Mitch. List items seem to be present ( I can see the dividing line ) but they are not populated with the data. If I use a row, instead of a ListItem, the data populates the Row Text items no problem. – Andrew Oct 25 '14 at 20:22
  • refer to [this](http://stackoverflow.com/questions/22249521/is-it-possible-to-use-qabstracttablemodel-with-tableview-from-qtquick-controls) you'll find the right path – Redanium Oct 26 '14 at 09:36

1 Answers1

0

I found the answer in the QML documentation here: http://developer.ubuntu.com/api/qml/sdk-14.04/QtQml.ListModel/ The trick is to wrap the ListItem in a Repeater like so. ListView is not required.

        ListModel {
            id: mdlDrugs
        }
        Repeater {
            model: mdlDrugs
            ListItem.Subtitled {
                text: "Drug:" + name + " " + dose
                subText: "Frequency: " + frequency
            }
        }
Andrew
  • 13
  • 4