×
Namespaces

Variants
Actions
(Difference between revisions)

QML List with inline editable items

From Nokia Developer Wiki
Jump to: navigation, search
chintandave_er (Talk | contribs)
(Chintandave er - Edited Keywords in ArticleMetadata)
kkrish (Talk | contribs)
(Kkrish -)
(2 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Draft]][[Category:Qt Quick]][[Category:Code Examples]][[Category:MeeGo]][[Category:Symbian]]
+
[[Category:Qt Quick]][[Category:Code Examples]][[Category:MeeGo Harmattan]][[Category:Symbian]]
 
{{Abstract|This is a simple QML list example in which list items are made editable using a long press. }}  
 
{{Abstract|This is a simple QML list example in which list items are made editable using a long press. }}  
  
{{ArticleMetaData <!-- v1.1 -->
+
{{ArticleMetaData <!-- v1.2 -->
|sourcecode=[[Media:Editablelist.zip]]
+
|sourcecode= [[Media:Editablelist.zip]]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Nokia E7, Nokia N8, Nokia C7-00'
 
|devices= Nokia E7, Nokia N8, Nokia C7-00'
|sdk=[https://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Qt SDK 1.2]
+
|sdk= [https://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Qt SDK 1.2]
|platform= Symbian^3
+
|platform= Symbian^3
 
|devicecompatability= must have Qt
 
|devicecompatability= must have Qt
|dependencies= None  
+
|dependencies= None
 
|signing= Self-Signed
 
|signing= Self-Signed
 
|capabilities= None
 
|capabilities= None
|keywords= ListModel, Component  
+
|keywords= ListModel, Component
|id= <!-- Article Id (Knowledge base articles only) -->
+
 
|language= Lang-English
 
|language= Lang-English
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:kkrish]]-->
 
|update-by= <!-- After significant update: [[User:kkrish]]-->
 
|update-timestamp= <!-- After significant update:20120124 -->
 
|update-timestamp= <!-- After significant update:20120124 -->
|creationdate= 20120124  
+
|creationdate= 20120124
|author=   [[User:kkrish]]
+
|author= [[User:kkrish]]
 
}}
 
}}
  

Revision as of 07:26, 12 July 2012

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: kkrish (12 Jul 2012)

Here you can see the code in action.

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

169 page views in the last 30 days.
×