×
Namespaces

Variants
Actions
Revision as of 04:20, 11 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Basic UI Implementation using Qt Quick Components

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to use Menu, BusyIndicator and Signal and Handler Event System of Qt Quick Components to create basic UI elements.

Article Metadata
Code ExampleTested with
Devices(s): N8
Compatibility
Platform(s): Symbian^3 and later, Qt 4.7.3 and later
Symbian
Dependencies: Flickr Photo API
Platform Security
Signing Required: Self-Signed
Capabilities: NetworkServices
Article
Keywords: Busy Indicator, Menu, UI
Created: somnathbanik (18 Jan 2014)
Last edited: hamishwillee (11 Oct 2012)

Contents

Introduction

In most of our application we need certain UI implementation which is common to all our applications. This UI component creates a better interaction with the user. It educates the user about the present status of the application and its expected result. To archive this we will use Qt Quick Components to implement some of the UI element for user notification which is easy, fast and elegant. We will create a Flickr Photo Search application that can search images from Flickr and display on the screen. The Flickr search box is being created using QML TextField Element, to refresh flilckr images a menu item is added in the ToolBar using QML Menu Element, to observe the loading process of the Flickr data a busy indicator is added using QML BusyIndicator Element. When the data are loaded the busy indicator goes off and this is taken care with the help of QML Signal and Handler Event System.


Loading Flickr Images
Flickr Images

.

Implementation

First we create an empty “Hello World” project selecting “Qt Quick Component for Symbian” template. This empty project will have the basic look and feel of the Qt Quick Components for Symbian application, including the StatusBar and ToolBar.

Now first we will create a Model using XmlListModel to store the parsed Flickr data and display it in GridView.

XmlListModel {
id: feedModel
property string searchText: ""
source: "http://api.flickr.com/services/feeds/photos_public.gne?tag="+searchText+"&format=rss2"
query: "/rss/channel/item" //
namespaceDeclarations: "declare namespace media=\'http://search.yahoo.com/mrss/\';"
XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" }
onStatusChanged: {
if (status === XmlListModel.Ready) {
console.log("xmlModel OK - count =", count);
indicatorItem.xmlReady();
}
}
}

Until the data are loaded in the model the BusyIndicator keeps on running.

  BusyIndicator
{
id: indicator
running: true
width: 100
height: 100
}

When the data loading is being completed in the model onStatusChanged checks the status and calls the signal xmlReady which then controls the BusyIndicator to stop running.

signal xmlReady
//Calls when XmlListModel is ready
onXmlReady:
{
indicator.running = false
indicatorItem.visible=false
}

We display the images in a GridView.

GridView {
id: grid; model: feedModel; delegate: Delegate {}
cacheBuffer: 100
cellWidth: (parent.width-2)/3; cellHeight: cellWidth;
width: parent.width;
height: parent.height
}

We also add a menu item in the ToolBar to refresh the searched item.

  // Menu defination
Menu {
id: mainMenu
content: MenuLayout {
MenuItem {
text: "Refresh"
onClicked: feedModel.refreshFlickrSearch();
}
}
}
// Toolbar
ToolBar {
id: toolBar
anchors.bottom: window.bottom
tools: ToolBarLayout {
id: toolBarLayout
ToolButton {
flat: true
iconSource: "toolbar-back"
onClicked: pageStack.depth <= 1 ? Qt.quit() : pageStack.pop()
}
ToolButton {
iconSource: "toolbar-menu"
onClicked: mainMenu.open()
}
}
}

To create the Flickr search box we used QML TextFiled Element.

TextField {
id: searchOperation
text: "Flickr Search..."
platformLeftMargin: search.width + platformStyle.paddingSmall
width: 300
font.italic: true
anchors.top: statusBar.bottom
anchors.horizontalCenter: parent.horizontalCenter
//Search Image on the search box
Image {
id: search
anchors { top: parent.top; left: parent.left; margins: platformStyle.paddingMedium }
smooth: true
fillMode: Image.PreserveAspectFit
source: "search-icon.png"
height: parent.height - platformStyle.paddingMedium * 2
width: parent.height - platformStyle.paddingMedium * 2
}
}

Summary

This is a beginner level article which explains the usability and features of Qt Quick Components. To know more about Qt Quick Components refer to :

Source Code

The full source code of the example is available here: File:BusyIndicatorQML.zip

This page was last modified on 11 October 2012, at 04:20.
83 page views in the last 30 days.
×