QML Google Suggest: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
=Google Suggest=
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]
 
[toc align_right=&quot;yes&amp;quot; depth=&quot;2&amp;quot;]
 
= Google Suggest =


This snippet article shows how to make a Google Suggest component to be used in conjunction with a TextInput element.
This snippet article shows how to make a Google Suggest component to be used in conjunction with a TextInput element.
Line 5: Line 9:
This is what it looks like:
This is what it looks like:


[[Image:gssnapshot.png|Google Suggest]]
[[Image:http://img21.imageshack.us/img21/9472/gssnapshot.png|Google Suggest]]
 
= Implementation =
 
<code>// GoogleSuggest.qml<br />import QtQuick 1.1
 
Rectangle {<br /> id: googleSuggest<br /> property string textToSugget<br /> property string dsParam<br /> property bool timeToDie: false<br /> property int rowHeight: 30<br /> width: parent.width<br /> height: rowHeight*listView.count<br /> anchors.top: parent.bottom<br /> anchors.left: parent.left<br /> anchors.topMargin: 5
 
signal itemChoosen(string suggestion);
 
onTimeToDieChanged: googleSuggest.destroy();
 
XmlListModel {<br /> id: xmlModel<br /> source: &quot;http://suggestqueries.google.com/complete/search?output=toolbar&amp;quot;+<br /> (dsParam!==&quot;&quot; ? &quot;&amp;ds=&quot;''dsParam : &quot;&quot;)''<br /> &quot;&amp;q=&quot;+textToSugget
 
query: &quot;/toplevel/CompleteSuggestion&amp;quot;
 
XmlRole { name: &quot;suggestion&amp;quot;; query: &quot;suggestion/</code>data/string()&quot; }<br /> XmlRole { name: &quot;num_queries&amp;quot;; query: &quot;num_queries/<code>int/string()&quot; }<br /> }


=Implementation=
ListView {<br /> id: listView<br /> anchors.fill: parent<br /> cacheBuffer: 10<br /> highlight: Rectangle { color: Qt.rgba(0,0,1,0.3); radius: 8; z: listView.z+10 }<br /> highlightFollowsCurrentItem: true<br /> interactive: false<br /> currentIndex: <s>1
<br /> model: xmlModel<br /> delegate: Rectangle {<br /> id: resultRow
<br /> width: parent.width<br /> height: rowHeight<br /> color: (index % 2 === 0 ? &quot;#ffffff&amp;quot; : &quot;#eeeeff&amp;quot;)<br /> border.color: &quot;#000000&amp;quot;<br /> border.width: 1<br /> radius: 8
<br /> Text {<br /> id: result<br /> anchors.verticalCenter: parent.verticalCenter<br /> anchors.left: parent.left<br /> anchors.leftMargin: 5<br /> anchors.right: numberOfResults.left<br /> anchors.rightMargin: 10<br /> font.pixelSize: 15<br /> font.bold: true<br /> text: suggestion<br /> clip: true<br /> }<br /> Text {<br /> id: numberOfResults<br /> anchors.verticalCenter: parent.verticalCenter<br /> anchors.right: parent.right<br /> anchors.rightMargin: 5<br /> font.pixelSize: 12<br /> font.italic: true<br /> text: num_queries<br /> }
<br /> }
<br /> MouseArea {<br /> anchors.fill: listView<br /> onMouseYChanged: {<br /> listView.currentIndex = Math.floor((mouseY+rowHeight) / rowHeight)</s> 1;<br /> }<br /> onReleased: {<br /> googleSuggest.itemChoosen(xmlModel.get(listView.currentIndex).suggestion);<br /> timeToDie = true;<br /> }<br /> }<br /> }<br />}<br /></code>


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


=Usage=
<code>// gs.js<br />var componentGS;<br />var objectGS;
 
// dsParam = &quot;yt&amp;quot; only for YouTube suggest else it is empty<br />function popupGoogleSuggest ( callerItem, textString, dsParam ) {
 
deleteGoogleSuggest();<br /> componentGS = Qt.createComponent(&quot;GoogleSuggest.qml&amp;quot;);<br /> objectGS = componentGS.createObject(callerItem);<br /> if (objectGS === null) {<br /> console.log(&quot;Error creating GoogleSuggest.qml&amp;quot;, componentGS.errorString());<br /> } else {<br /> objectGS.textToSugget = textString;<br /> objectGS.dsParam = dsParam;<br /> }<br /> return objectGS;<br />}
 
function deleteGoogleSuggest()<br />{<br /> if (componentGS[[Image:==null &amp;&amp; objectGS|==null &amp;&amp; objectGS]]==undefined) {<br /> objectGS.timeToDie = true;<br /> }<br />}</code>
 
= Usage =
 
<code>import QtQuick 1.1<br />import &quot;gs.js&amp;quot; as Functions
 
Rectangle {<br /> id: main<br /> width: 360<br /> height: 360
 
Rectangle {<br /> id: textContainer<br /> x: 0; y:0; width: 250; height: 30<br /> color: &quot;#ffffff&amp;quot;<br /> border.color: &quot;#000000&amp;quot;<br /> border.width: 1
 
TextInput {<br /> id: textInput<br /> property GoogleSuggest gsComponent<br /> anchors.centerIn: parent<br /> selectByMouse: true<br /> text: &quot;write here&amp;quot;
 
// Used to prevent predictive text to pop up while typing in a TextInput<br /> // component. Else onTextChanged event isn't rised:<br /> // https://bugreports.qt.nokia.com/browse/QTBUG-22298<br /> inputMethodHints: Qt.ImhNoPredictiveText
 
function googleSuggest_item_choosen(text)<br /> {<br /> textInput.text=text;<br /> }


===Categories:===
Timer {<br /> id: timerPopupGS<br /> running: false<br /> interval: 300<br /> repeat: false<br /> triggeredOnStart: false<br /> onTriggered: {<br /> if (textInput.focus &amp;&amp; textInput.text !== &quot;&quot; &amp;&amp; textInput.text.length &gt; 2) {<br /> // Pop up GoogleSuggest and catch itemChoosen signal<br /> textInput.gsComponent = Functions.popupGoogleSuggest(textContainer, textInput.text, &quot;&quot;);<br /> textInput.gsComponent.itemChoosen.connect(textInput.googleSuggest_item_choosen);<br /> }<br /> if (textInput.text.length&amp;lt;3) Functions.deleteGoogleSuggest();<br /> }<br /> }


* [[:Category:Developing with Qt|Developing_with_Qt]]
onTextChanged: {<br /> timerPopupGS.restart();<br /> if (text.length&amp;lt;3) Functions.deleteGoogleSuggest();<br /> }<br /> onAccepted: {<br /> // eventually close VK<br /> closeSoftwareInputPanel();<br /> Functions.deleteGoogleSuggest();<br /> }<br /> onFocusChanged: {<br /> if (!focus) closeSoftwareInputPanel();<br /> if (!textInput.focus) {<br /> Functions.deleteGoogleSuggest();<br /> }<br /> }<br /> }
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
* [[:Category:Developing with Qt::Qt-Quick::QML|QML]]


* [[:Category:HowTo|HowTo]]
}<br />}</code>
* [[:Category:snippets|snippets]]

Revision as of 10:45, 24 February 2015




[toc align_right="yes&quot; depth="2&quot;]

Google Suggest

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

This is what it looks like:

Google Suggest

Implementation

// GoogleSuggest.qml<br />import QtQuick 1.1

Rectangle {<br /> id: googleSuggest<br /> property string textToSugget<br /> property string dsParam<br /> property bool timeToDie: false<br /> property int rowHeight: 30<br /> width: parent.width<br /> height: rowHeight*listView.count<br /> anchors.top: parent.bottom<br /> anchors.left: parent.left<br /> anchors.topMargin: 5

signal itemChoosen(string suggestion);

onTimeToDieChanged: googleSuggest.destroy();

XmlListModel {<br /> id: xmlModel<br /> source: &quot;http://suggestqueries.google.com/complete/search?output=toolbar&amp;quot;+<br /> (dsParam!==&quot;&quot; ? &quot;&amp;ds=&quot;''dsParam : &quot;&quot;)''<br /> &quot;&amp;q=&quot;+textToSugget

query: &quot;/toplevel/CompleteSuggestion&amp;quot;

XmlRole { name: &quot;suggestion&amp;quot;; query: &quot;suggestion/

data/string()" }
XmlRole { name: "num_queries&quot;; query: "num_queries/

int/string()&quot; }<br /> }

ListView {<br /> id: listView<br /> anchors.fill: parent<br /> cacheBuffer: 10<br /> highlight: Rectangle { color: Qt.rgba(0,0,1,0.3); radius: 8; z: listView.z+10 }<br /> highlightFollowsCurrentItem: true<br /> interactive: false<br /> currentIndex: <s>1
<br /> model: xmlModel<br /> delegate: Rectangle {<br /> id: resultRow
<br /> width: parent.width<br /> height: rowHeight<br /> color: (index % 2 === 0 ? &quot;#ffffff&amp;quot; : &quot;#eeeeff&amp;quot;)<br /> border.color: &quot;#000000&amp;quot;<br /> border.width: 1<br /> radius: 8
<br /> Text {<br /> id: result<br /> anchors.verticalCenter: parent.verticalCenter<br /> anchors.left: parent.left<br /> anchors.leftMargin: 5<br /> anchors.right: numberOfResults.left<br /> anchors.rightMargin: 10<br /> font.pixelSize: 15<br /> font.bold: true<br /> text: suggestion<br /> clip: true<br /> }<br /> Text {<br /> id: numberOfResults<br /> anchors.verticalCenter: parent.verticalCenter<br /> anchors.right: parent.right<br /> anchors.rightMargin: 5<br /> font.pixelSize: 12<br /> font.italic: true<br /> text: num_queries<br /> }
<br /> }
<br /> MouseArea {<br /> anchors.fill: listView<br /> onMouseYChanged: {<br /> listView.currentIndex = Math.floor((mouseY+rowHeight) / rowHeight)</s> 1;<br /> }<br /> onReleased: {<br /> googleSuggest.itemChoosen(xmlModel.get(listView.currentIndex).suggestion);<br /> timeToDie = true;<br /> }<br /> }<br /> }<br />}<br />

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

// gs.js<br />var componentGS;<br />var objectGS;

// dsParam = &quot;yt&amp;quot; only for YouTube suggest else it is empty<br />function popupGoogleSuggest ( callerItem, textString, dsParam ) {

deleteGoogleSuggest();<br /> componentGS = Qt.createComponent(&quot;GoogleSuggest.qml&amp;quot;);<br /> objectGS = componentGS.createObject(callerItem);<br /> if (objectGS === null) {<br /> console.log(&quot;Error creating GoogleSuggest.qml&amp;quot;, componentGS.errorString());<br /> } else {<br /> objectGS.textToSugget = textString;<br /> objectGS.dsParam = dsParam;<br /> }<br /> return objectGS;<br />}

function deleteGoogleSuggest()<br />{<br /> if (componentGS[[Image:==null &amp;&amp; objectGS|==null &amp;&amp; objectGS]]==undefined) {<br /> objectGS.timeToDie = true;<br /> }<br />}

Usage

import QtQuick 1.1<br />import &quot;gs.js&amp;quot; as Functions

Rectangle {<br /> id: main<br /> width: 360<br /> height: 360

Rectangle {<br /> id: textContainer<br /> x: 0; y:0; width: 250; height: 30<br /> color: &quot;#ffffff&amp;quot;<br /> border.color: &quot;#000000&amp;quot;<br /> border.width: 1

TextInput {<br /> id: textInput<br /> property GoogleSuggest gsComponent<br /> anchors.centerIn: parent<br /> selectByMouse: true<br /> text: &quot;write here&amp;quot;

// Used to prevent predictive text to pop up while typing in a TextInput<br /> // component. Else onTextChanged event isn't rised:<br /> // https://bugreports.qt.nokia.com/browse/QTBUG-22298<br /> inputMethodHints: Qt.ImhNoPredictiveText

function googleSuggest_item_choosen(text)<br /> {<br /> textInput.text=text;<br /> }

Timer {<br /> id: timerPopupGS<br /> running: false<br /> interval: 300<br /> repeat: false<br /> triggeredOnStart: false<br /> onTriggered: {<br /> if (textInput.focus &amp;&amp; textInput.text !== &quot;&quot; &amp;&amp; textInput.text.length &gt; 2) {<br /> // Pop up GoogleSuggest and catch itemChoosen signal<br /> textInput.gsComponent = Functions.popupGoogleSuggest(textContainer, textInput.text, &quot;&quot;);<br /> textInput.gsComponent.itemChoosen.connect(textInput.googleSuggest_item_choosen);<br /> }<br /> if (textInput.text.length&amp;lt;3) Functions.deleteGoogleSuggest();<br /> }<br /> }

onTextChanged: {<br /> timerPopupGS.restart();<br /> if (text.length&amp;lt;3) Functions.deleteGoogleSuggest();<br /> }<br /> onAccepted: {<br /> // eventually close VK<br /> closeSoftwareInputPanel();<br /> Functions.deleteGoogleSuggest();<br /> }<br /> onFocusChanged: {<br /> if (!focus) closeSoftwareInputPanel();<br /> if (!textInput.focus) {<br /> Functions.deleteGoogleSuggest();<br /> }<br /> }<br /> }

}<br />}