×
Namespaces

Variants
Actions

MeeGo Style Search Bar

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to implement search bar in QML that matches that used in other Nokia N950/N9 applications

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

Contents

Introduction

This article will help developers to implement a search bar in the manner implemented in most of the inbuilt applications like Contacts, Videos in an Nokia N950/N9. Search Bar is not visible in the normal state of the view, in normal state, only listview is completely visible. When user scrolls down the listview to a particular level then only search bar is visible for some period of time. This sort of implementation improves the user experience as the search bar is not always visible, but is visible when required.

How to do this? Lets think a bit

Implementing the above mentioned idea is very simple with the help of QML. There can be different ways to implement this ideology. But I have used a QML Flickable Element component along with QML TextField Element to implement this idea. Following is the approach to implement this idea:

  • Keep your scrollable component plus the search bar in a Flickable.
  • Bind the visibility property to bool property of the item, using which you can toggle the visibility of search bar which atlast we need to achieve.
  • Use onContentYChanged to toggle the visibility property of the search bar.

Ok now lets have a watch on the QML code we have written.

QML Components Used

This article uses following MeeGo Harmattan Qt Quick Component


SimpleListView.qml

This is a simple qml file which contains list of items, at present these items are loaded from a static model, in an actual application the same model can be loaded from a dynamic database or from some remote source.

import QtQuick 1.1 
 
Item{
id:sampleListItem
x:parent.x; y:parent.y; width: parent.width; height: parent.height
Component{
id:listviewDelegate
Item{
id:singleListItem
height: sampleListItem.height/10; width: sampleListItem.width
Row{
anchors.fill: singleListItem
spacing: 10
Image {
id: iconImage
source: "qrc:/hellomeego64.png"
height: singleListItem.height-20
}
Text {
id: listtitle
text: qsTr("Title For Index")+index
color: "black"
font.pointSize: 26
anchors.verticalCenter: singleListItem.verticalCenter
}
}
}
}
ListView{
anchors.fill: sampleListItem
model:10
delegate: listviewDelegate
interactive: false
}
}

MainPage.qml

This qml file is the heart of the application, this wraps the TextField with the SampleListView Component presented above in a QML Flickable Element.

And we write our simple logic on the signals of this QML Flickable Element.

import QtQuick 1.1 
import com.nokia.meego 1.0
 
Page{
id: mainPage
tools: commonTools
property bool updateItemVisibleState:false
Timer{
id:searchTimer
interval: 5000
repeat:false
onTriggered: {
console.log("timer triggered")
mainPage.updateItemVisibleState = false
}
}
Flickable{
id:sampleFlickable
x:mainPage.x; y:mainPage.y; width: mainPage.width; height:mainPage.height - 40
contentWidth: mainPage.width; contentHeight:samplecolumn.height
clip:true
Column {
id:samplecolumn
spacing: 20
TextField {
id:redRect;
width: mainPage.width; height: mainPage.height/14
visible:updateItemVisibleState?true:false
placeholderText: "Search"
}
SampleListView{
id:sampleListView
width: mainPage.width; height:(mainPage.height/10)*10
}
}
onMovementEnded: {
console.log("Movement Ended");
searchTimer.start()
}
onContentYChanged: {
console.log("content y changed"+sampleFlickable.contentY);
if(sampleFlickable.contentY < -100){
mainPage.updateItemVisibleState = true
}
}
}
}

main.qml

This is the launching qml file for the whole application this contains a QML PageStackWindow Element which loads our MainPage.qml

PageStackWindow
 
{
id: appWindow
initialPage: mainPage
MainPage {
id: mainPage
}
ToolBarLayout {
id: commonTools
visible: true
ToolIcon {
platformIconId: "toolbar-view-menu"
anchors.right: (parent === undefined) ? undefined : parent.right
onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close()
}
}
Menu {
id: myMenu
visualParent: pageStack
MenuLayout {
MenuItem { text: qsTr("Sample menu item") }
}
}
}

ScreenShots

ScreenShots of the application running on Nokia N950 MeeGo-Harmattan Developer Device.

Meego SearchBar 01.png MeeGo SearchBar 02.png MeeGo SearchBar 03.png


Summary

This sort of simple functionality enhances the user experience in an application.

This page was last modified on 13 June 2012, at 13:55.
39 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.

×