Namespaces

Variants
Actions

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.

Google Suggest using Qt Quick

From 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 10:53.
65 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.

×