×
Namespaces

Variants
Actions
(Difference between revisions)

QML List with inline editable items

From Nokia Developer Wiki
Jump to: navigation, search
kkrish (Talk | contribs)
(Kkrish -)
 
kkrish (Talk | contribs)
(Kkrish -)
Line 1: Line 1:
 
[[Category:Draft]][[Category:Qt]][[Category:Qt Quick]][[Category:MeeGo]][[Category:Code Examples]][[Category:Code Snippet]]
 
[[Category:Draft]][[Category:Qt]][[Category:Qt Quick]][[Category:MeeGo]][[Category:Code Examples]][[Category:Code Snippet]]
''Delete instructional text in italic''
+
{{Abstract|This article explains how to ... }}
 
+
{{Abstract|This article explains how to ... }} ''Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.''
+
 
+
''Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use''
+
 
{{ArticleMetaData <!-- v1.1 -->
 
{{ArticleMetaData <!-- v1.1 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.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= <!-- Devices tested against - e.g. ''devices=Nokia E7, Nokia N8, Nokia C7-00'') -->
+
|devices= ''devices=Nokia E7, Nokia N8, Nokia C7-00''
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
+
|sdk= https://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html-->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
+
|devicecompatability= must have Qt
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
+
|dependencies= None
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= Self-Signed
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|capabilities= None
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
+
|keywords=QML editable list view
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
+
|language= Lang-English
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-from-title= <!-- Title only -->  
 
|translated-from-title= <!-- Title only -->  
Line 26: Line 22:
 
|update-timestamp= <!-- After significant update:20120124 -->
 
|update-timestamp= <!-- After significant update:20120124 -->
 
|creationdate= <!-- Format 20120124 -->
 
|creationdate= <!-- Format 20120124 -->
|author= <!-- Display as link [[User:kkrish]] -->
+
|author= kkrish
 
}}
 
}}
  

Revision as of 13:08, 24 January 2012

This article explains how to ...

Article Metadata
Tested with
Devices(s): devices=Nokia E7, Nokia N8, Nokia C7-00
Compatibility
Platform(s):
Symbian
Device(s): must have Qt
Dependencies: None
Platform Security
Signing Required: Self-Signed
Capabilities: None
Article
Keywords: QML editable list view
Created: kkrish (10 Feb 2012)
Last edited: kkrish (24 Jan 2012)

Introduction

This is a simple QML list example. User can edit list item by long tap on the list item, after long press list will be in editable mode and user can enter anything and press ok button to modify the list.

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
}
}

Summary

Add categories below. Remove Category:Draft when the page is complete or near complete

155 page views in the last 30 days.
×