×
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 02:15.
114 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.

×