How to dynamic display & control ComboBox data from a XML file using XmlListModel ,QtQuick



  • Hi,everyone. I am new to QtQuick. I have some problem in using it. Here is my requirement and I try to write some code to achieve it.
    simple workflow:
    Open XML files =>analyze and display in a tableview =>add ,delete or edit the row in tableview => generate a new XML file

    I want to display the element from attributes.xml. I need a ComboBox to show the attributes name depend on attributes.xml and the name cannot exist twice. And,I want each row in tableview will show the the associate name in each ComboBox depend on attributes.xml. i.e. first row in combobox will show
    "Model Name" and the 2th will show "Device ID" and so on.
    just like:
    "initial view":http://i.imgur.com/jYwlx1d.jpg

    Due to the requirement :the name cannot exist twice
    To achieve it, in my imagination, it will maximum have 4 rows in tablebiew depend on 4 names in XML.
    The combobox in each row will dynamic contain the name itself and the name which have not been selected yet.
    For example:In the beginning , it will have 4 rows in tableview and each combobox only contain the name itself. Until I delete 1 row(ex:Battery), each combobox in the remainder row will dynamic change to the name itself and the name "Battery". Further,when I add one new row , the combobox contains only "Battery".

    I write some code below,but I don't know how to achieve my requirement.Can anyone give me some suggestion ?

    Thank you!

    attributes.xml
    @
    <Attributes>
    <Attribute id="01" name="Model Name"></Attribute>
    <Attribute id="02" name="Device ID"></Attribute>
    <Attribute id="03" name="Software Version"></Attribute>
    <Attribute id="04" name="Battery"></Attribute>
    </Attributes>
    @

    main.qml
    @
    import QtQuick 2.0
    import QtQuick.Controls 1.1
    import QtQuick.Dialogs 1.0
    import QtQuick.XmlListModel 2.0
    Rectangle {
    id: rectangle
    width: 560
    height: 560
    FileDialog { id: fileDialog}
    ListModel { id: bookModel }
    ListModel {id: author1}

    XmlListModel {
        id: xmlModel      
        source: fileDialog.fileUrl
        query: "/Attributes/Attribute"
        XmlRole { name: "id"; query: "@name/string()" }
        XmlRole { name: "attribute"; query: "@id/string()" }       
        onStatusChanged: {
            if (status == XmlListModel.Ready) {
                for (var i = 0; i < count; ++i) {
                    var item = get(i)
                    bookModel.append({id: item.id,attribute: item.attribute})
                    author1.append({attribute: item.attribute})                   
                }
            }
    
        }
    }
    Button {
        id: button1
        x: 143
        y: 40
        text: qsTr("Add")
        onClicked: { bookModel .append({id: "qqq", attribute: "abc"})} //test
    }
    Button {
        id: button2
        x: 248
        y: 40
        text: qsTr("Delete")
        onClicked: {bookModel .remove(bookTable.currentRow)}
    }
    Button {
        id: button3
        x: 51
        y: 40
        text: qsTr("Open file")
        onClicked: fileDialog.open()
    }
    
    TableView {
        id: bookTable
        x: 16
        y: 94
        width: 430
        height: 420
        anchors.verticalCenterOffset: 24
        anchors.horizontalCenterOffset: 1
        anchors.centerIn: rectangle
         model: bookModel
    
         TableViewColumn {role: "id";title: "attribute ID";width: 100}
       
    
        TableViewColumn{
            role: "attribute"
            title: "attribute"
            width: 180
            delegate:
                Rectangle {
                ComboBox {
                    id:combo   
                    model:author1     //While I use bookModel here,the process crash when I click delete
                    textRole: "attribute"
                    anchors.fill: parent   
                }
            }
        }        
    
        TableViewColumn{
            role: "value"
            title: "Value"
            width: 200
            delegate: Rectangle {
                TextField {                  
                    text: styleData.value
                    anchors.fill: parent
                }
            }
        }
    }
    

    }
    @



  • ohm...
    After some study. Maybe I should use the QAbstractItemModel ?
    Only QML thinks can't achieve my requirement.
    And, according to parse XML, I have found this "Simple DOM Model Example":http://qt-project.org/doc/qt-5/qtwidgets-itemviews-simpledommodel-example.html .
    I am not sure the exist class above link provide is what I need.

    I have kept studying the QAbstractItemModel.
    Can any one give me some suggestion or examples in QAbstractItemModel + QML to parse XML file?
    Or maybe it has another approach to achieve my requirement?
    Thank you!


Log in to reply
 

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