QML List with inline editable items

Comments

Vineet.jain - Kkrish- Regarding Qt SDK link

Hi Kkrish, the Qt SDK link mentioned in the articles metadata was re-directing to a 'Not found page'. I have added link for Qt SDK 1.1.2, if you think the app will work with latest Qt SDK as well then please edit that link.

Thanks

Vineet

vineet.jain 13:01, 10 February 2012 (EET)

Kkrish - Hi

Hi Vineet,

I have made the changes :)

Thanks.

Br,

KKrish

kkrish 13:43, 29 February 2012 (EET)

Hamishwillee - Meant to still be in draft?

Hi Kkrish

Nice job - is this still meant to be in Draft category? If not, can you please remove. I've removed Qt category, as this is implied by the Qt Quick category, and Code Snippet as this is implied by the Code Example (ie it has a downloadable Zip file).

My first thought on this is that I might like to use the idea, but I'd want to use it with existing Qt Quick components. At the moment the construction of the list is monolithic - what would be great is if you separated the button item into its own QML file and based this on the QML List item - with editable as a property of the item.

In any case, I think this would be better split into components from a documentation point of view. Then you can explain any special parts of it. For example, what you're doing with the innermousearea. At the moment this is useful for people who understand QML, but you could with a little work also teach people who don't know so much.

Regards

Hamish

hamishwillee 05:36, 7 March 2012 (EET)

Kkrish -

Hi Hamish,

Thanks for comment. I really like your idea to make this as an component. Sure I will modify this soon.

Thanks.

Br,

KKrish

kkrish 06:34, 7 March 2012 (EET)

Log in or Join to leave comments.

This is a simple QML list example in which list items are made editable using a long press.

Article Metadata

---

Code Example

Source file: Media:Editablelist.zip

---

Tested with

SDK: Qt SDK 1.2

Devices(s): Nokia E7, Nokia N8, Nokia C7-00'

---

Compatibility

Platform(s): Symbian^3

Device(s): must have Qt

Dependencies: None

---

Platform Security

Signing Required: Self-Signed

Capabilities: None

---

Article

Keywords: ListModel, Component

Created: kkrish (24 Jan 2012)

Last edited: hamishwillee (30 Jan 2013)

Here you can see the code in action. The media player is loading...

Source code

import QtQuick 1.1
 
Rectangle {
    id: root
    property int indextoEdit: -1
    height: 640
    width: 360
    ListModel {
        id: listModel
        ListElement {
            contactName: "Rozer"
            editable: 1
        }
        ListElement {
            contactName: "Smith"
            editable: 1
        }
        ListElement {
            contactName: "David"
            editable: 1
        }
        ListElement {
            contactName: "John"
            editable: 1
        }
        ListElement {
            contactName: "Smith"
            editable: 1
        }
        ListElement {
            contactName: "Aany"
            editable: 1
        }
        ListElement {
            contactName: "Harry"
            editable: 1
        }
        ListElement {
            contactName: "Bob"
            editable: 1
        }
        ListElement {
            contactName: "Rozer"
            editable: 1
        }
        ListElement {
            contactName: "Abrahim"
            editable: 1
        }
        ListElement {
            contactName: "Jorden"
            editable: 1
        }
        ListElement {
            contactName: "Nick"
            editable: 1
        }
        ListElement {
            contactName: "Peter"
            editable: 1
        }
    }
 
    //ListView delegate
    Component {
        id: contactDelegate
        Rectangle {
            id: contactDelegateRectangle
            height: 80
            width: parent.width
            border.width: 2
 
            Item {
                id: contactDelegateTextRect
                height: parent.height
                width: parent.width
                opacity: editable == 1 ? 1 : 0
                Text {
                    id: contactDelegateText
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    text: index + ". " + contactName
                    color: "red"
                }
            }
 
            Item{
                id: contactDelegateEditRect
                height: parent.height
                width: parent.width
                anchors.left: parent.left
                opacity: editable == 0 ? 1 : 0
                z: 1
                TextInput{
                    id: contactDelegateEdit
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    text: contactName
                    width:parent.width - 80
                    z: 1
                }
                Rectangle{
                    id: contactDelegatebtn
                    height: parent.height
                    width: 80
                    anchors.right: parent.right
                    color: "black"
                    border.width: 5
                    Text {
                        id: btnText
                        text: "Ok"
                        color: "white"
                        anchors.fill: parent
                        anchors.centerIn: parent.Center
 
                    }
                    MouseArea {
                        id: innermousearea
                        anchors.fill: parent
                        enabled: true
                        onClicked: {
                            innermousearea.enabled = false
                            mousearea.enabled = true
                            console.log("innermousearea : " + root.indextoEdit)
                            listModel.set(root.indextoEdit, {"editable" : 1, "contactName" : contactDelegateEdit.text})
                            root.indextoEdit = -1
                        }
                    }
                }
            }
            MouseArea {
                id: mousearea
                anchors.fill: parent
                enabled: true
                onClicked: {
                    console.log("index : " + index + " root.indextoEdit : "+ root.indextoEdit)
                }
 
                onPressAndHold: {
                    if(root.indextoEdit == -1){
                        root.indextoEdit = index
                        listModel.set(index, {"editable" : 0})
                        innermousearea.enabled = true
                        mousearea.enabled =false
                    }
                }
            }
 
            states: [
                State {
                    name: "selected"
                    when: mousearea.pressed
                    PropertyChanges {target: contactDelegateRectangle; color: "lightblue"}
                }
            ]
        }
    }
 
//ListView
    ListView {
        id: contactList
        anchors.fill: parent
        model: listModel
        delegate: contactDelegate
    }
}

Source Code

You can download the source code from this zip file. File:Editablelist.zip