Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 01: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 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
Platform(s): Symbian^3 and later, Qt 4.7.3 and later
Dependencies: Flickr Photo API
Platform Security
Signing Required: Self-Signed
Capabilities: NetworkServices
Keywords: Busy Indicator, Menu, UI
Created: somnathbanik (18 Jan 2015)
Last edited: hamishwillee (11 Oct 2012)



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



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: ""+searchText+"&format=rss2"
query: "/rss/channel/item" //
namespaceDeclarations: "declare namespace media=\'\';"
XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" }
onStatusChanged: {
if (status === XmlListModel.Ready) {
console.log("xmlModel OK - count =", count);

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

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
indicator.running = 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"

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 statusBar.bottom
anchors.horizontalCenter: parent.horizontalCenter
//Search Image on the search box
Image {
id: search
anchors { 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


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:

This page was last modified on 11 October 2012, at 01:20.
58 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.