×
Namespaces

Variants
Actions

SectionScoller Component For MeeGo-Harmattan

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to use to understand the new SectionScroller Qt Quick component for MeeGo-Harmattan

Article Metadata
Tested with
Devices(s): N950
Compatibility
Platform(s): MeeGo Harmattan
Article
Keywords: Qt Quick Component for MeeGo Harmattan
Created: gaba88 (30 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

Contents

Introduction

This article will explain the how to use SectionScroller Qt Quick Component. SectionScroller in a very simple but again very useful QML component which helps developer to show long list which needs to be grouped into different section.

For Example if developer needs to show contacts list by sorting the the whole list alphabetically, then SectionScroller will be the most appropriate component to use.

Usage and Implementation

Using SectionScroller Component is very easy, SectionScroller has the listView component and developer need to bind their actual listview with that property.

Apart from that arranging the model is very important in Making a SectionScroller, while implementing the model for a SectionScroller developer needs to categorize the model too in the same way they want to show the model in SectionScroller listview.

And then simply they need to implement the header delegate which will wind up the SectionScroller implementation.

Below mentioned source code and screenshots will make the things more clear.

Code Snippet

import QtQuick 1.1 
 
import com.nokia.meego 1.0
Page {
id:mainPage
tools: commonTools
 
ListModel{
id:sectionScrollerModel
ListElement{name:"800"; brand:"Maruti"}
ListElement{name:"A Star"; brand:"Maruti"}
ListElement{name:"WagnorR"; brand:"Maruti"}
ListElement{name:"Alto"; brand:"Maruti"}
ListElement{name:"Omni"; brand:"Maruti"}
ListElement{name:"Zen Estilo"; brand:"Maruti"}
ListElement{name:"Indica"; brand:"Tata"}
ListElement{name:"Indigo"; brand:"Tata"}
ListElement{name:"Sumo Grand"; brand:"Tata"}
ListElement{name:"Accent"; brand:"Hyundai"}
ListElement{name:"Santro"; brand:"Hyundai"}
ListElement{name:"i10"; brand:"Hyundai"}
ListElement{name:"i20"; brand:"Hyundai"}
ListElement{name:"i30"; brand:"Hyundai"}
ListElement{name:"Sonata"; brand:"Hyundai"}
ListElement{name:"Jazz"; brand:"Honda"}
ListElement{name:"Brio"; brand:"Honda"}
ListElement{name:"Honda City"; brand:"Honda"}
ListElement{name:"Honda Accord"; brand:"Honda"}
ListElement{name:"Honda Civic"; brand:"Honda"}
}
ListView{
id:list
anchors.fill: parent
model:sectionScrollerModel
delegate: Text{
text:name
font.pointSize: 30
}
section {
property:"brand"
criteria: ViewSection.FullString
delegate: Rectangle{
width: list.width; height: 40
color: "lightblue"
Text {
font.pointSize: 24
text: section
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
SectionScroller{
listView: list
}
}

ScreenShots

Meego sectionscroller 01.png Meego sectionscroller-02.png

This page was last modified on 13 June 2012, at 13:58.
39 page views in the last 30 days.
×