Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
QML Google Suggest: Difference between revisions
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="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 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: "http://suggestqueries.google.com/complete/search?output=toolbar&quot;+<br /> (dsParam!=="" ? "&ds="''dsParam : "")''<br /> "&q="+textToSugget | |||
query: "/toplevel/CompleteSuggestion&quot; | |||
XmlRole { name: "suggestion&quot;; query: "suggestion/</code>data/string()" }<br /> XmlRole { name: "num_queries&quot;; query: "num_queries/<code>int/string()" }<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 ? "#ffffff&quot; : "#eeeeff&quot;)<br /> border.color: "#000000&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 = "yt&quot; only for YouTube suggest else it is empty<br />function popupGoogleSuggest ( callerItem, textString, dsParam ) { | |||
deleteGoogleSuggest();<br /> componentGS = Qt.createComponent("GoogleSuggest.qml&quot;);<br /> objectGS = componentGS.createObject(callerItem);<br /> if (objectGS === null) {<br /> console.log("Error creating GoogleSuggest.qml&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 && objectGS|==null && objectGS]]==undefined) {<br /> objectGS.timeToDie = true;<br /> }<br />}</code> | |||
= Usage = | |||
<code>import QtQuick 1.1<br />import "gs.js&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: "#ffffff&quot;<br /> border.color: "#000000&quot;<br /> border.width: 1 | |||
TextInput {<br /> id: textInput<br /> property GoogleSuggest gsComponent<br /> anchors.centerIn: parent<br /> selectByMouse: true<br /> text: "write here&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 && textInput.text !== "" && textInput.text.length > 2) {<br /> // Pop up GoogleSuggest and catch itemChoosen signal<br /> textInput.gsComponent = Functions.popupGoogleSuggest(textContainer, textInput.text, "");<br /> textInput.gsComponent.itemChoosen.connect(textInput.googleSuggest_item_choosen);<br /> }<br /> if (textInput.text.length&lt;3) Functions.deleteGoogleSuggest();<br /> }<br /> } | |||
onTextChanged: {<br /> timerPopupGS.restart();<br /> if (text.length&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 />}</code> | |||
Revision as of 10:45, 24 February 2015
[toc align_right="yes" depth="2"]
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:
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: "http://suggestqueries.google.com/complete/search?output=toolbar&quot;+<br /> (dsParam!=="" ? "&ds="''dsParam : "")''<br /> "&q="+textToSugget
query: "/toplevel/CompleteSuggestion&quot;
XmlRole { name: "suggestion&quot;; query: "suggestion/
data/string()" }
XmlRole { name: "num_queries"; query: "num_queries/
int/string()" }<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 ? "#ffffff&quot; : "#eeeeff&quot;)<br /> border.color: "#000000&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 = "yt&quot; only for YouTube suggest else it is empty<br />function popupGoogleSuggest ( callerItem, textString, dsParam ) {
deleteGoogleSuggest();<br /> componentGS = Qt.createComponent("GoogleSuggest.qml&quot;);<br /> objectGS = componentGS.createObject(callerItem);<br /> if (objectGS === null) {<br /> console.log("Error creating GoogleSuggest.qml&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 && objectGS|==null && objectGS]]==undefined) {<br /> objectGS.timeToDie = true;<br /> }<br />}
Usage
import QtQuick 1.1<br />import "gs.js&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: "#ffffff&quot;<br /> border.color: "#000000&quot;<br /> border.width: 1
TextInput {<br /> id: textInput<br /> property GoogleSuggest gsComponent<br /> anchors.centerIn: parent<br /> selectByMouse: true<br /> text: "write here&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 && textInput.text !== "" && textInput.text.length > 2) {<br /> // Pop up GoogleSuggest and catch itemChoosen signal<br /> textInput.gsComponent = Functions.popupGoogleSuggest(textContainer, textInput.text, "");<br /> textInput.gsComponent.itemChoosen.connect(textInput.googleSuggest_item_choosen);<br /> }<br /> if (textInput.text.length&lt;3) Functions.deleteGoogleSuggest();<br /> }<br /> }
onTextChanged: {<br /> timerPopupGS.restart();<br /> if (text.length&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 />}