×
Namespaces

Variants
Actions

PathView QML Element

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code Example
Source file: Media:PathView.zip
Compatibility
Platform(s):
Symbian
Article
Created: chintandave_er (05 Feb 2011)
Last edited: hamishwillee (24 Jul 2012)

Contents

Introduction

Here is one example of how to use PathView QML Element in your Qt Quick Application. The PathView element lays out model-provided items on a path. A PathView displays data from models created from built-in QML elements like ListModel and XmlListModel, or custom model classes defined in C++ that inherit from QAbstractListModel.

Pathview1.png Pathview2.png

ListView QML File

On this QML File’s ListView you can write the images and text you want to show on pathview.

import Qt 4.7
 
// list of items
ListModel {
ListElement { name: "nerd"; icon: "pics/chat_smiley_nerd.png" }
ListElement { name: "Happy"; icon: "pics/chat_smiley_happy.png" }
ListElement { name: "Frustrated"; icon: "pics/chat_smiley_frustrated.png" }
ListElement { name: "angry"; icon: "pics/chat_smiley_angry.png" }
ListElement { name: "sad"; icon: "pics/chat_smiley_sad.png" }
ListElement { name: "surprised"; icon: "pics/chat_smiley_surprised.png" }
ListElement { name: "tongue"; icon: "pics/chat_smiley_tongue.png" }
}

PathView QML File

Here is the code to show pathview.

import Qt 4.7
 
Rectangle {
id: rect
width: 400; height: 200
radius: 0
 
// bg
color: "gray"
 
Component {
id: appDelegate
Item {
width: 200; height: 200
scale: PathView.iconScale
 
// images
Image {
id: myIcon
y: 40; anchors.horizontalCenter: parent.horizontalCenter
source: icon
smooth: true
}
// bottom lable
Text {
anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
text: name
smooth: true
}
 
MouseArea {
anchors.fill: parent
// here you write the code you want to see on onclick event
onClicked: view.currentIndex = index + 1
}
}
}
 
// bg of listItem/Pathview Item
Component {
id: appHighlight
Rectangle { width: 80; height: 80; color: "Transparent" }
}
 
PathView {
id: view
anchors.fill: parent
highlight: appHighlight
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
focus: true
model: ListViewQML {}
delegate: appDelegate
path: Path {
startX: 20
startY: 50
PathAttribute { name: "iconScale"; value: 0.5 }
PathQuad { x: 200; y: 150; controlX: 50; controlY: 200 }
PathAttribute { name: "iconScale"; value: 1.5 }
PathQuad { x: 390; y: 50; controlX: 350; controlY: 200 }
PathAttribute { name: "iconScale"; value: 0.5 }
}
}
}

Source Code

Here is the Sample source code. You can download it from File:PathView.zip.

~~ chintandave_er 14:35, 5 February 2011 (UTC)

This page was last modified on 24 July 2012, at 05:15.
98 page views in the last 30 days.
×