Basic UI Implementation using Qt Quick Components
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 Example
Tested with
Compatibility
Platform Security
Article
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.
 |
 |
.
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
