Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 04:46, 30 January 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

QML List with inline editable items

From Wiki
Jump to: navigation, search

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

Article Metadata
Code ExampleTested with
Devices(s): Nokia E7, Nokia N8, Nokia C7-00'
Compatibility
Platform(s): Symbian^3
Symbian
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

This page was last modified on 30 January 2013, at 04:46.
119 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×