×
Namespaces

Variants
Actions

Google Suggest using Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to use Google Suggestion service using Qt Quick.

Article Metadata
Code ExampleCompatibility
Platform(s): Qt 4.7 and later
Symbian
Article
Keywords: Google Suggest
Created: lildeimos (22 Jan 2012)
Last edited: hamishwillee (13 Jun 2012)

Contents

Introduction

This article shows how to make a Google Suggest component to be used in conjunction with a TextInput element.

Gssnapshot.jpg

Implementation

    // GoogleSuggest.qml
import QtQuick 1.1
 
Rectangle {
id: googleSuggest
property string textToSugget
property string dsParam
property bool timeToDie: false
property int rowHeight: 30
width: parent.width
height: rowHeight*listView.count
anchors.top: parent.bottom
anchors.left: parent.left
anchors.topMargin: 5
 
signal itemChoosen(string suggestion);
 
onTimeToDieChanged: googleSuggest.destroy();
 
XmlListModel {
id: xmlModel
source: "http://suggestqueries.google.com/complete/search?output=toolbar"+
(dsParam!=="" ? "&ds="+dsParam : "") +
"&q="+textToSugget
 
query: "/toplevel/CompleteSuggestion"
 
XmlRole { name: "suggestion"; query: "suggestion/@data/string()" }
XmlRole { name: "num_queries"; query: "num_queries/@int/string()" }
}
 
ListView {
id: listView
anchors.fill: parent
cacheBuffer: 10
highlight: Rectangle { color: Qt.rgba(0,0,1,0.3); radius: 8; z: listView.z+10 }
highlightFollowsCurrentItem: true
interactive: false
currentIndex: -1
 
model: xmlModel
delegate: Rectangle {
id: resultRow
 
width: parent.width
height: rowHeight
color: (index % 2 === 0 ? "#ffffff" : "#eeeeff")
border.color: "#000000"
border.width: 1
radius: 8
 
Text {
id: result
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: numberOfResults.left
anchors.rightMargin: 10
font.pixelSize: 15
font.bold: true
text: suggestion
clip: true
}
Text {
id: numberOfResults
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 5
font.pixelSize: 12
font.italic: true
text: num_queries
}
 
}
 
MouseArea {
anchors.fill: listView
onMouseYChanged: {
listView.currentIndex = Math.floor((mouseY+rowHeight) / rowHeight) - 1;
}
onReleased: {
googleSuggest.itemChoosen(xmlModel.get(listView.currentIndex).suggestion);
timeToDie = true;
}
}
}
}

An XmlListModel is used to retrieve the suggestions from Goolge. The query always returns 10 results that are shown in a ListView. When the user clicks on a row, the signal itemChoosen((string) is rised.

The functions below are used to dynamically load and unload the component. For example to pop it up when the user has entered at last 3 chars or unload it when TextInput.onAccept signal is rised.

    // gs.js
var componentGS;
var objectGS;
 
// dsParam = "yt" only for YouTube suggest else it is empty
function popupGoogleSuggest ( callerItem, textString, dsParam ) {
 
deleteGoogleSuggest();
componentGS = Qt.createComponent("GoogleSuggest.qml");
objectGS = componentGS.createObject(callerItem);
if (objectGS === null) {
console.log("Error creating GoogleSuggest.qml", componentGS.errorString());
} else {
objectGS.textToSugget = textString;
objectGS.dsParam = dsParam;
}
return objectGS;
}
 
function deleteGoogleSuggest()
{
if (componentGS!==null && objectGS!==undefined) {
objectGS.timeToDie = true;
}
}

Usage

Inside TextInput component, we use a timer to create the GoogleSuggest component. The dynamic creation is triggered whenever the user has wrote more then 3 chars and it is deleted when the user hits the enter key. Also, if we are on a mobile device, the virtual keyboard must be closed with closeSoftwareInputPanel() function.

    // main.qml
import QtQuick 1.1
import "gs.js" as Functions
 
Rectangle {
id: main
width: 360
height: 360
 
Rectangle {
id: textContainer
x: 0; y:0; width: 250; height: 30
color: "#ffffff"
border.color: "#000000"
border.width: 1
 
TextInput {
id: textInput
property GoogleSuggest gsComponent
anchors.centerIn: parent
selectByMouse: true
text: "write here"
 
// Used to prevent predictive text to pop up while typing in a TextInput
// component. Else onTextChanged event isn't rised:
// https://bugreports.qt.nokia.com/browse/QTBUG-22298
inputMethodHints: Qt.ImhNoPredictiveText
 
function googleSuggest_item_choosen(text)
{
textInput.text=text;
}
 
Timer {
id: timerPopupGS
running: false
interval: 300
repeat: false
triggeredOnStart: false
onTriggered: {
if (textInput.focus && textInput.text !== "" && textInput.text.length > 2) {
// Pop up GoogleSuggest and catch itemChoosen signal
textInput.gsComponent = Functions.popupGoogleSuggest(textContainer, textInput.text, "");
textInput.gsComponent.itemChoosen.connect(textInput.googleSuggest_item_choosen);
}
if (textInput.text.length<3) Functions.deleteGoogleSuggest();
}
}
 
onTextChanged: {
timerPopupGS.restart();
if (text.length<3) Functions.deleteGoogleSuggest();
}
onAccepted: {
// eventually close VK
closeSoftwareInputPanel();
Functions.deleteGoogleSuggest();
}
onFocusChanged: {
if (!focus) closeSoftwareInputPanel();
if (!textInput.focus) {
Functions.deleteGoogleSuggest();
}
}
}
 
}
}

Source Code

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

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

×