/usr/share/qt5/doc/qtlocation/qtlocation-places-example.html is in qtlocation5-doc-html 5.2.1-1ubuntu2.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- declarative-places.qdoc -->
<title>Places (QML) | QtLocation 5.2</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.2</li>
<li><a href="qtlocation-index.html">Qt Location</a></li>
<li>Places (QML)</li>
<li id="buildversion">
Qt 5.2.1 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#overview">Overview</a></li>
<li class="level1"><a href="#displaying-categories">Displaying Categories</a></li>
<li class="level1"><a href="#presenting-search-suggestions">Presenting Search Suggestions</a></li>
<li class="level1"><a href="#searching-for-places">Searching for Places</a></li>
<li class="level1"><a href="#displaying-place-content">Displaying Place Content</a></li>
<li class="level1"><a href="#place-and-category-creation">Place and Category Creation</a></li>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
</ul>
</div>
<h1 class="title">Places (QML)</h1>
<span class="subtitle"></span>
<!-- $$$places-description -->
<div class="descr"> <a name="details"></a>
<p>The Places example demonstrates how to search for Places and access related content.<p class="centerAlign"><img src="images/qml-places.png" alt="" /></p><a name="overview"></a>
<h2>Overview</h2>
<p>The Places example presents an application window displaying a map. At the top of the window is a search box, which is used to enter a place search query. To search for a place enter a search term into the text box and click the magnifying glass icon. To search for a place by category, click the category icon to display the list of available categories and select the desired category. The place search query will be for places that are near the current location shown on the map.</p>
<p>The search box provides search term suggestions when three or more characters are entered. Selecting one of the suggestions will cause a place search to be performed with the selected search text.</p>
<p>Search results are available from the slide out tab on the left. Clicking on a search result will display details about the place. If a places has rich content (editorials, reviews and images), these can be accessed by the buttons on the details page. To find similar places click the "Find similar" button. If the current Geo service provider supports it, buttons to edit and remove a place will also be available.</p>
<p>The geo service provider can be changed by accessing the "Provider" menu at the bottom of the window. Depending on the features supported by the provider, the "New" menu allows creating new Places and Categories. To create a new place, select "Place" from the "New" menu and fill in the fields. Click "Go!" to save the place. To create a new category, select "Category" from the "New" menu and fill in the fields. Click "Go!" to save the category.</p>
<p>The Places example can work with any of the available geo services plugins. However, some plugins may require additional <a href="qml-qtlocation-pluginparameter.html">plugin parameters</a> in order to function correctly. <a href="qml-qtlocation-pluginparameter.html">Plugin parameters</a> can be passed on the command line using the <tt>--plugin</tt> argument, which takes the form:</p>
<pre class="cpp"><span class="operator">-</span><span class="operator">-</span>plugin<span class="operator">.</span><span class="operator"><</span>parameter name<span class="operator">></span> <span class="operator"><</span>parameter value<span class="operator">></span></pre>
<p>Refer to the documentation for each of the geo services plugins for details on what plugin parameters they support. The Nokia services plugin supplied with Qt requires an <i>app_id</i> and <i>token</i> pair. See "<a href="location-plugin-nokia.html">Qt Location Nokia Plugin</a>" for details.</p>
<a name="displaying-categories"></a>
<h2>Displaying Categories</h2>
<p>Before search by category can be performed, the list of available categories needs to be retrieved. This is achieved by creating a <a href="qml-qtlocation-categorymodel.html">CategoryModel</a>.</p>
<pre class="qml"><span class="type"><a href="qml-qtlocation-categorymodel.html">CategoryModel</a></span> {
<span class="name">id</span>: <span class="name">categoryModel</span>
<span class="name">plugin</span>: <span class="name">placesPlugin</span>
<span class="name">hierarchical</span>: <span class="number">true</span>
}</pre>
<p>The <a href="qml-qtlocation-categorymodel.html">CategoryModel</a> type provides a model of the available categories. It can provide either a flat list or a hierarchical tree model. In this example, we use a hierarchical tree model, by setting the <a href="qml-qtlocation-categorymodel.html#hierarchical-prop">hierarchical</a> property to <i>true</i>. The <a href="qml-qtlocation-categorymodel.html#plugin-prop">plugin</a> property is set to <i>placesPlugin</i> which is the <i>identifier</i> of the <a href="qml-qtlocation-plugin.html">Plugin</a> object used for place search throughout the example.</p>
<p>Next we create a view to display the category model.</p>
<pre class="qml"><span class="type">ListView</span> {
<span class="name">id</span>: <span class="name">root</span>
property <span class="type">bool</span> <span class="name">showSave</span>: <span class="number">true</span>
property <span class="type">bool</span> <span class="name">showRemove</span>: <span class="number">true</span>
property <span class="type">bool</span> <span class="name">showChildren</span>: <span class="number">true</span>
signal <span class="type">categoryClicked</span>(variant category)
signal <span class="type">editClicked</span>(variant category)
<span class="name">header</span>: <span class="name">IconButton</span> {
<span class="name">source</span>: <span class="string">"../../resources/left.png"</span>
<span class="name">pressedSource</span>: <span class="string">"../../resources/left_pressed.png"</span>
<span class="name">onClicked</span>: <span class="name">categoryListModel</span>.<span class="name">rootIndex</span> <span class="operator">=</span> <span class="name">categoryListModel</span>.<span class="name">parentModelIndex</span>()
}
<span class="name">model</span>: <span class="name">VisualDataModel</span> {
<span class="name">id</span>: <span class="name">categoryListModel</span>
<span class="name">model</span>: <span class="name">categoryModel</span>
<span class="name">delegate</span>: <span class="name">CategoryDelegate</span> {
<span class="name">id</span>: <span class="name">categoryDelegate</span>
<span class="name">showSave</span>: <span class="name">root</span>.<span class="name">showSave</span>
<span class="name">showRemove</span>: <span class="name">root</span>.<span class="name">showRemove</span>
<span class="name">showChildren</span>: <span class="name">root</span>.<span class="name">showChildren</span>
<span class="name">onClicked</span>: <span class="name">root</span>.<span class="name">categoryClicked</span>(<span class="name">category</span>);
<span class="name">onArrowClicked</span>: <span class="name">categoryListModel</span>.<span class="name">rootIndex</span> <span class="operator">=</span> <span class="name">categoryListModel</span>.<span class="name">modelIndex</span>(<span class="name">index</span>)
<span class="name">onCrossClicked</span>: <span class="name">category</span>.<span class="name">remove</span>();
<span class="name">onEditClicked</span>: <span class="name">root</span>.<span class="name">editClicked</span>(<span class="name">category</span>);
}
}
}</pre>
<p>Because a hierarchical model is being used, a VisualDataModel is needed to provide navigation functionality. If flat list model was being used the view could use the <a href="qml-qtlocation-categorymodel.html">CategoryModel</a> directly.</p>
<p>The view contains a header item that is used as a back button to navigate up the category tree. The <i>onClicked</i> handler sets the root index of the VisualDataModel to the parent of the current index. Categories are displayed by the <i>CategoryDelegate</i>, which provides four signals. The <i>onArrowClicked</i> handler sets the root index to the current index causing the sub categories of the selected category to be displayed. The <i>onClicked</i> handler emits the <b>categoryClicked()</b> signal with a category parameter indicating which specific category has been chosen. The <i>onCrossClicked</i> handler will invoke the categories <a href="qml-qtlocation-category.html#remove-method">remove()</a> method. The <i>onEditClicked</i> handler invokes the <b>editClicked()</b> signal of the root item, this is used to notify which particular category is to be edited.</p>
<p>The <i>CategoryDelegate</i> displays the category name and emits the <i>clicked</i> signal when the text is clicked:</p>
<pre class="qml"><span class="type">Text</span> {
<span class="name">id</span>: <span class="name">name</span>
<span class="name">anchors</span>.left: <span class="name">icon</span>.<span class="name">right</span>
<span class="name">anchors</span>.verticalCenter: <span class="name">parent</span>.<span class="name">verticalCenter</span>
<span class="name">anchors</span>.right: <span class="name">parent</span>.<span class="name">right</span>
<span class="name">verticalAlignment</span>: <span class="name">Text</span>.<span class="name">AlignVCenter</span>
<span class="name">text</span>: <span class="name">category</span>.<span class="name">name</span>
<span class="name">elide</span>: <span class="name">Text</span>.<span class="name">ElideRight</span>
}
<span class="type">MouseArea</span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: <span class="name">root</span>.<span class="name">clicked</span>()
}</pre>
<p>The <i>CategoryDelegate</i> also displays icons for editing, removing and displaying child categories. These icons are shown as desired when the <i>showSave</i> and <i>showRemove</i> and <i>showChildren</i> properties are set and only then in cases where the function is supported.</p>
<pre class="qml"><span class="type">IconButton</span> {
<span class="name">id</span>: <span class="name">edit</span>
<span class="name">anchors</span>.right: <span class="name">cross</span>.<span class="name">left</span>
<span class="name">anchors</span>.verticalCenter: <span class="name">parent</span>.<span class="name">verticalCenter</span>
<span class="name">visible</span>: (<span class="name">placesPlugin</span>.<span class="name">name</span> <span class="operator">!=</span> <span class="string">""</span> ? <span class="name">placesPlugin</span>.<span class="name">supportsPlaces</span>(<span class="name">Plugin</span>.<span class="name">SaveCategoryFeature</span>) : <span class="number">false</span>)
<span class="operator">&&</span> <span class="name">showSave</span>
<span class="name">source</span>: <span class="string">"../../resources/pencil.png"</span>
<span class="name">hoveredSource</span>: <span class="string">"../../resources/pencil_hovered.png"</span>
<span class="name">pressedSource</span>: <span class="string">"../../resources/pencil_pressed.png"</span>
<span class="name">onClicked</span>: <span class="name">root</span>.<span class="name">editClicked</span>()
}
<span class="type">IconButton</span> {
<span class="name">id</span>: <span class="name">cross</span>
<span class="name">anchors</span>.right: <span class="name">arrow</span>.<span class="name">left</span>
<span class="name">anchors</span>.verticalCenter: <span class="name">parent</span>.<span class="name">verticalCenter</span>
<span class="name">visible</span>: (<span class="name">placesPlugin</span>.<span class="name">name</span> <span class="operator">!=</span> <span class="string">""</span> ? <span class="name">placesPlugin</span>.<span class="name">supportsPlaces</span>(<span class="name">Plugin</span>.<span class="name">RemoveCategoryFeature</span>) : <span class="number">false</span>)
<span class="operator">&&</span> <span class="name">showRemove</span>
<span class="name">source</span>: <span class="string">"../../resources/cross.png"</span>
<span class="name">hoveredSource</span>: <span class="string">"../../resources/cross_hovered.png"</span>
<span class="name">pressedSource</span>: <span class="string">"../../resources/cross_pressed.png"</span>
<span class="name">onClicked</span>: <span class="name">root</span>.<span class="name">crossClicked</span>()
}
<span class="type">IconButton</span> {
<span class="name">id</span>: <span class="name">arrow</span>
<span class="name">anchors</span>.right: <span class="name">parent</span>.<span class="name">right</span>
<span class="name">anchors</span>.verticalCenter: <span class="name">parent</span>.<span class="name">verticalCenter</span>
<span class="name">visible</span>: <span class="name">model</span>.<span class="name">hasModelChildren</span> <span class="operator">&&</span> <span class="name">showChildren</span>
<span class="name">source</span>: <span class="string">"../../resources/right.png"</span>
<span class="name">pressedSource</span>: <span class="string">"../../resources/right_pressed.png"</span>
<span class="name">onClicked</span>: <span class="name">root</span>.<span class="name">arrowClicked</span>()
}</pre>
<a name="presenting-search-suggestions"></a><a name="presenting-search-suggestions"></a>
<h2>Presenting Search Suggestions</h2>
<p>The <a href="qml-qtlocation-placesearchsuggestionmodel.html">PlaceSearchSuggestionModel</a> type is used to fetch suggested search terms based on a partially entered search term.</p>
<p>A new suggestion search is triggered whenever the entered search term is changed.</p>
<pre class="qml"><span class="name">onTextChanged</span>: {
<span class="keyword">if</span> (<span class="name">searchRectangle</span>.<span class="name">suggestionsEnabled</span>) {
<span class="keyword">if</span> (<span class="name">text</span>.<span class="name">length</span> <span class="operator">>=</span> <span class="number">3</span>) {
<span class="keyword">if</span> (<span class="name">suggestionModel</span> <span class="operator">!=</span> <span class="number">null</span>) {
<span class="name">suggestionModel</span>.<span class="name">searchTerm</span> <span class="operator">=</span> <span class="name">text</span>;
<span class="name">suggestionModel</span>.<span class="name">update</span>();
}
} <span class="keyword">else</span> {
<span class="name">searchRectangle</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">""</span>;
}
}
}</pre>
<p>The <i>suggestionsEnabled</i> property is used to temporarily disable search suggestions when a suggestion is selected (selecting it updates the search term text). Suggestions are only queried if the length of the search term is three or more characters, otherwise the search boxes state is reset.</p>
<p>When the status of the <a href="qml-qtlocation-placesearchsuggestionmodel.html">PlaceSearchSuggestionModel</a> changes, the state of the search box is changed to display the search suggestions.</p>
<pre class="qml"><span class="type"><a href="qml-qtlocation-placesearchsuggestionmodel.html">PlaceSearchSuggestionModel</a></span> {
<span class="name">id</span>: <span class="name">suggestionModel</span>
<span class="name">plugin</span>: <span class="name">placesPlugin</span>
<span class="name">searchArea</span>: <span class="name">placeSearchModel</span>.<span class="name">searchArea</span>
<span class="name">onStatusChanged</span>: {
<span class="keyword">if</span> (<span class="name">status</span> <span class="operator">==</span> <span class="name">PlaceSearchSuggestionModel</span>.<span class="name">Ready</span>)
<span class="name">searchRectangle</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">"SuggestionsShown"</span>;
}
}</pre>
<p>The main object in the "SuggestionsShown" state is the ListView showing the search suggestions.</p>
<pre class="qml"><span class="type">ListView</span> {
<span class="name">id</span>: <span class="name">suggestionView</span>
<span class="name">model</span>: <span class="name">suggestionModel</span>
<span class="name">delegate</span>: <span class="name">Text</span> {
<span class="name">text</span>: <span class="name">suggestion</span>
<span class="name">width</span>: <span class="name">parent</span>.<span class="name">width</span>
<span class="type">MouseArea</span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: {
<span class="name">suggestionsEnabled</span> <span class="operator">=</span> <span class="number">false</span>;
<span class="name">searchBox</span>.<span class="name">text</span> <span class="operator">=</span> <span class="name">suggestion</span>;
<span class="name">suggestionsEnabled</span> <span class="operator">=</span> <span class="number">true</span>;
<span class="name">placeSearchModel</span>.<span class="name">searchForText</span>(<span class="name">suggestion</span>);
<span class="name">searchRectangle</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">""</span>;
}
}
}
}</pre>
<p>A Text object is used as the delegate to display the suggestion text. Clicking on the suggested search term updates the search term and triggers a place search using the search suggestion.</p>
<a name="searching-for-places"></a>
<h2>Searching for Places</h2>
<p>The <a href="qml-qtlocation-placesearchmodel.html">PlaceSearchModel</a> type is used to search for places.</p>
<pre class="qml"><span class="type"><a href="qml-qtlocation-placesearchmodel.html">PlaceSearchModel</a></span> {
<span class="name">id</span>: <span class="name">placeSearchModel</span>
<span class="name">plugin</span>: <span class="name">placesPlugin</span>
<span class="name">searchArea</span>: <span class="name">searchRegion</span>
<span class="keyword">function</span> <span class="name">searchForCategory</span>(<span class="name">category</span>) {
<span class="name">searchTerm</span> <span class="operator">=</span> <span class="string">""</span>;
<span class="name">categories</span> <span class="operator">=</span> <span class="name">category</span>;
<span class="name">recommendationId</span> <span class="operator">=</span> <span class="string">""</span>;
<span class="name">searchArea</span> <span class="operator">=</span> <span class="name">searchRegion</span>
<span class="name">limit</span> <span class="operator">=</span> -<span class="number">1</span>;
<span class="name">offset</span> <span class="operator">=</span> <span class="number">0</span>;
<span class="name">update</span>();
}
<span class="keyword">function</span> <span class="name">searchForText</span>(<span class="name">text</span>) {
<span class="name">searchTerm</span> <span class="operator">=</span> <span class="name">text</span>;
<span class="name">categories</span> <span class="operator">=</span> <span class="number">null</span>;
<span class="name">recommendationId</span> <span class="operator">=</span> <span class="string">""</span>;
<span class="name">searchArea</span> <span class="operator">=</span> <span class="name">searchRegion</span>
<span class="name">limit</span> <span class="operator">=</span> -<span class="number">1</span>;
<span class="name">offset</span> <span class="operator">=</span> <span class="number">0</span>;
<span class="name">update</span>();
}
<span class="keyword">function</span> <span class="name">searchForRecommendations</span>(<span class="name">placeId</span>) {
<span class="name">searchTerm</span> <span class="operator">=</span> <span class="string">""</span>;
<span class="name">categories</span> <span class="operator">=</span> <span class="number">null</span>;
<span class="name">recommendationId</span> <span class="operator">=</span> <span class="name">placeId</span>;
<span class="name">searchArea</span> <span class="operator">=</span> <span class="number">null</span>;
<span class="name">limit</span> <span class="operator">=</span> -<span class="number">1</span>;
<span class="name">offset</span> <span class="operator">=</span> <span class="number">0</span>;
<span class="name">update</span>();
}
<span class="keyword">function</span> <span class="name">previousPage</span>() {
<span class="keyword">if</span> (<span class="name">limit</span> <span class="operator">===</span> -<span class="number">1</span>)
<span class="name">limit</span> <span class="operator">=</span> <span class="name">count</span>;
<span class="name">offset</span> <span class="operator">=</span> <span class="name">Math</span>.<span class="name">max</span>(<span class="number">0</span>, <span class="name">offset</span> <span class="operator">-</span> <span class="name">limit</span>);
<span class="name">update</span>();
}
<span class="keyword">function</span> <span class="name">nextPage</span>() {
<span class="keyword">if</span> (<span class="name">limit</span> <span class="operator">===</span> -<span class="number">1</span>)
<span class="name">limit</span> <span class="operator">=</span> <span class="name">count</span>;
<span class="name">offset</span> <span class="operator">+=</span> <span class="name">limit</span>;
<span class="name">update</span>();
}
<span class="name">onStatusChanged</span>: {
<span class="keyword">switch</span> (<span class="name">status</span>) {
<span class="keyword">case</span> <span class="name">PlaceSearchModel</span>.<span class="name">Ready</span>:
<span class="name">searchResultView</span>.<span class="name">showSearchResults</span>();
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="name">PlaceSearchModel</span>.<span class="name">Error</span>:
<span class="name">console</span>.<span class="name">log</span>(<span class="name">errorString</span>());
}
}
}</pre>
<p>First some of the model's properties are set, which will be used to form the search request. The <a href="qml-qtlocation-placesearchmodel.html#searchArea-prop">searchArea</a> property is set to the <i>searchRegion</i> object which is a GeoCircle with a center that is linked to the current location displayed on the <a href="qml-qtlocation-map.html">Map</a>.</p>
<p>Finally, we define two helper functions <b>searchForCategory()</b> and <b>searchForText()</b>, which set either the <a href="qml-qtlocation-placesearchmodel.html#categories-prop">categories</a> or <a href="qml-qtlocation-placesearchmodel.html#searchTerm-prop">searchTerm</a> properties and invokes the <a href="qml-qtlocation-placesearchmodel.html#update-method">update()</a> method to start the place search. The search results are displayed in a ListView.</p>
<pre class="qml"><span class="type">ListView</span> {
<span class="name">id</span>: <span class="name">searchView</span>
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">model</span>: <span class="name">placeSearchModel</span>
<span class="name">delegate</span>: <span class="name">SearchResultDelegate</span> {
<span class="name">onDisplayPlaceDetails</span>: <span class="name">showPlaceDetails</span>(<span class="name">data</span>)
<span class="name">onSearchFor</span>: <span class="name">placeSearchModel</span>.<span class="name">searchForText</span>(<span class="name">query</span>);
}
<span class="name">footer</span>: <span class="name">Item</span> {
<span class="name">width</span>: <span class="name">searchView</span>.<span class="name">width</span>
<span class="name">height</span>: <span class="name">childrenRect</span>.<span class="name">height</span>
<span class="type">Button</span> {
<span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">"Previous"</span>)
<span class="name">onClicked</span>: <span class="name">placeSearchModel</span>.<span class="name">previousPage</span>()
<span class="name">anchors</span>.left: <span class="name">parent</span>.<span class="name">left</span>
}
<span class="type">Button</span> {
<span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">"Clear"</span>)
<span class="name">onClicked</span>: <span class="name">placeSearchModel</span>.<span class="name">reset</span>()
<span class="name">anchors</span>.horizontalCenter: <span class="name">parent</span>.<span class="name">horizontalCenter</span>
}
<span class="type">Button</span> {
<span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">"Next"</span>)
<span class="name">onClicked</span>: <span class="name">placeSearchModel</span>.<span class="name">nextPage</span>()
<span class="name">anchors</span>.right: <span class="name">parent</span>.<span class="name">right</span>
}
}
}</pre>
<p>The delegate used in the ListView, <i>SearchResultDelegate</i>, is designed to handle multiple search result types via a Loader object. For results of type <i>PlaceResult</i> the delegate is:</p>
<pre class="qml"><span class="type">Component</span> {
<span class="name">id</span>: <span class="name">placeComponent</span>
<span class="type">Item</span> {
<span class="name">id</span>: <span class="name">placeRoot</span>
<span class="name">height</span>: <span class="name">childrenRect</span>.<span class="name">height</span>
<span class="name">width</span>: <span class="name">parent</span>.<span class="name">width</span>
<span class="type">Rectangle</span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">color</span>: <span class="string">"#dbffde"</span>
<span class="name">visible</span>: <span class="name">model</span>.<span class="name">sponsored</span> <span class="operator">!==</span> <span class="name">undefined</span> ? <span class="name">model</span>.<span class="name">sponsored</span> : <span class="number">false</span>
<span class="type">Text</span> {
<span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">"Sponsored result"</span>)
<span class="name">horizontalAlignment</span>: <span class="name">Text</span>.<span class="name">AlignRight</span>
<span class="name">anchors</span>.right: <span class="name">parent</span>.<span class="name">right</span>
<span class="name">anchors</span>.bottom: <span class="name">parent</span>.<span class="name">bottom</span>
<span class="name">font</span>.pixelSize: <span class="number">8</span>
<span class="name">visible</span>: <span class="name">model</span>.<span class="name">sponsored</span> <span class="operator">!==</span> <span class="name">undefined</span> ? <span class="name">model</span>.<span class="name">sponsored</span> : <span class="number">false</span>
}
}
<span class="type">Row</span> {
<span class="type">Image</span> {
<span class="name">source</span>: <span class="name">place</span>.<span class="name">favorite</span> ? <span class="string">"../../resources/star.png"</span> : <span class="name">place</span>.<span class="name">icon</span>.<span class="name">url</span>()
}
<span class="type">Column</span> {
<span class="name">anchors</span>.verticalCenter: <span class="name">parent</span>.<span class="name">verticalCenter</span>
<span class="type">Text</span> {
<span class="name">id</span>: <span class="name">placeName</span>
<span class="name">text</span>: <span class="name">place</span>.<span class="name">favorite</span> ? <span class="name">place</span>.<span class="name">favorite</span>.<span class="name">name</span> : <span class="name">place</span>.<span class="name">name</span>
}
<span class="type">Text</span> {
<span class="name">id</span>: <span class="name">distanceText</span>
<span class="name">font</span>.italic: <span class="number">true</span>
<span class="name">text</span>: <span class="name">PlacesUtils</span>.<span class="name">prettyDistance</span>(<span class="name">distance</span>)
}
}
}
<span class="type">MouseArea</span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onPressed</span>: <span class="name">placeRoot</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">"Pressed"</span>
<span class="name">onReleased</span>: <span class="name">placeRoot</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">""</span>
<span class="name">onCanceled</span>: <span class="name">placeRoot</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">""</span>
<span class="name">onClicked</span>: {
<span class="keyword">if</span> (<span class="name">model</span>.<span class="name">type</span> <span class="operator">===</span> <span class="name">undefined</span> <span class="operator">||</span> <span class="name">type</span> <span class="operator">===</span> <span class="name">PlaceSearchModel</span>.<span class="name">PlaceResult</span>) {
<span class="keyword">if</span> (!<span class="name">place</span>.<span class="name">detailsFetched</span>)
<span class="name">place</span>.<span class="name">getDetails</span>();
<span class="name">root</span>.<span class="name">displayPlaceDetails</span>({
distance: <span class="name">model</span>.<span class="name">distance</span>,
place: <span class="name">model</span>.<span class="name">place</span>,
});
}
}
}
<span class="name">states</span>: [
<span class="type">State</span> {
<span class="name">name</span>: <span class="string">""</span>
},
<span class="type">State</span> {
<span class="name">name</span>: <span class="string">"Pressed"</span>
<span class="type">PropertyChanges</span> { <span class="name">target</span>: <span class="name">placeName</span>; <span class="name">color</span>: <span class="string">"#1C94FC"</span>}
<span class="type">PropertyChanges</span> { <span class="name">target</span>: <span class="name">distanceText</span>; <span class="name">color</span>: <span class="string">"#1C94FC"</span>}
}
]
}
}</pre>
<a name="displaying-place-content"></a>
<h2>Displaying Place Content</h2>
<p>Places can have additional rich content, including editorials, reviews and images. Rich content is accessed via a set of models. Content models are generally not created directly by the application developer, instead models are obtained from the <a href="qml-qtlocation-place.html#editorialModel-prop">editorialModel</a>, <a href="qml-qtlocation-place.html#reviewModel-prop">reviewModel</a> and <a href="qml-qtlocation-place.html#imageModel-prop">imageModel</a> properties of the <a href="qml-qtlocation-place.html">Place</a> type.</p>
<pre class="qml"><span class="type">ListView</span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">model</span>: <span class="name">place</span>.<span class="name">editorialModel</span>
<span class="name">delegate</span>: <span class="name">EditorialDelegate</span> { }
}</pre>
<a name="place-and-category-creation"></a>
<h2>Place and Category Creation</h2>
<p>Some backends may support creation and saving of new places and categories. Plugin support can be checked an run-time with the <a href="qml-qtlocation-plugin.html#supportsPlaces-method">Plugin::supportsPlaces</a>() method.</p>
<p>To save a new place, first create a new <a href="qml-qtlocation-place.html">Place</a> object, using the Qt.createQmlObject() method. Assign the appropriate plugin and place properties and invoke the <a href="qml-qtlocation-place.html#save-method">save()</a> method.</p>
<pre class="qml"> <span class="name">locationPlace</span>.<span class="name">plugin</span> <span class="operator">=</span> <span class="name">placesPlugin</span>;
<span class="name">locationPlace</span>.<span class="name">name</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">0</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">location</span>.<span class="name">address</span>.<span class="name">street</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">1</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">location</span>.<span class="name">address</span>.<span class="name">district</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">2</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">location</span>.<span class="name">address</span>.<span class="name">city</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">3</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">location</span>.<span class="name">address</span>.<span class="name">county</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">4</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">location</span>.<span class="name">address</span>.<span class="name">state</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">5</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">location</span>.<span class="name">address</span>.<span class="name">countryCode</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">6</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">location</span>.<span class="name">address</span>.<span class="name">country</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">7</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">location</span>.<span class="name">address</span>.<span class="name">postalCode</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">8</span>).<span class="name">inputText</span>;
var <span class="name">c</span> = <span class="name">QtPositioning</span>.<span class="name">coordinate</span>(<span class="name">parseFloat</span>(<span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">9</span>).<span class="name">inputText</span>),
<span class="name">parseFloat</span>(<span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">10</span>).<span class="name">inputText</span>));
<span class="name">locationPlace</span>.<span class="name">location</span>.<span class="name">coordinate</span> <span class="operator">=</span> <span class="name">c</span>;
var <span class="name">phone</span> = <span class="name">Qt</span>.<span class="name">createQmlObject</span>(<span class="string">'import QtLocation 5.0; ContactDetail { }'</span>, <span class="name">locationPlace</span>);
<span class="name">phone</span>.<span class="name">label</span> <span class="operator">=</span> <span class="string">"Phone"</span>;
<span class="name">phone</span>.<span class="name">value</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">11</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">contactDetails</span>.<span class="name">phone</span> <span class="operator">=</span> <span class="name">phone</span>;
var <span class="name">fax</span> = <span class="name">Qt</span>.<span class="name">createQmlObject</span>(<span class="string">'import QtLocation 5.0; ContactDetail { }'</span>, <span class="name">locationPlace</span>);
<span class="name">fax</span>.<span class="name">label</span> <span class="operator">=</span> <span class="string">"Fax"</span>;
<span class="name">fax</span>.<span class="name">value</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">12</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">contactDetails</span>.<span class="name">fax</span> <span class="operator">=</span> <span class="name">fax</span>;
var <span class="name">email</span> = <span class="name">Qt</span>.<span class="name">createQmlObject</span>(<span class="string">'import QtLocation 5.0; ContactDetail { }'</span>, <span class="name">locationPlace</span>);
<span class="name">email</span>.<span class="name">label</span> <span class="operator">=</span> <span class="string">"Email"</span>;
<span class="name">email</span>.<span class="name">value</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">13</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">contactDetails</span>.<span class="name">email</span> <span class="operator">=</span> <span class="name">email</span>;
var <span class="name">website</span> = <span class="name">Qt</span>.<span class="name">createQmlObject</span>(<span class="string">'import QtLocation 5.0; ContactDetail { }'</span>, <span class="name">locationPlace</span>);
<span class="name">website</span>.<span class="name">label</span> <span class="operator">=</span> <span class="string">"Website"</span>;
<span class="name">website</span>.<span class="name">value</span> <span class="operator">=</span> <span class="name">dataFieldsModel</span>.<span class="name">get</span>(<span class="number">14</span>).<span class="name">inputText</span>;
<span class="name">locationPlace</span>.<span class="name">contactDetails</span>.<span class="name">website</span> <span class="operator">=</span> <span class="name">website</span>;
<span class="name">locationPlace</span>.<span class="name">categories</span> <span class="operator">=</span> <span class="name">__categories</span>;
<span class="name">locationPlace</span>.<span class="name">statusChanged</span>.<span class="name">connect</span>(<span class="name">processStatus</span>);
<span class="name">locationPlace</span>.<span class="name">save</span>();</pre>
<p>Category creation is similar:</p>
<pre class="qml"><span class="name">onGoButtonClicked</span>: {
var <span class="name">modifiedCategory</span> = <span class="name">category</span> ? <span class="name">category</span> : <span class="name">Qt</span>.<span class="name">createQmlObject</span>(<span class="string">'import QtLocation 5.0; Category { }'</span>, <span class="name">page</span>);
<span class="name">modifiedCategory</span>.<span class="name">plugin</span> <span class="operator">=</span> <span class="name">placesPlugin</span>;
<span class="name">modifiedCategory</span>.<span class="name">name</span> <span class="operator">=</span> <span class="name">dialogModel</span>.<span class="name">get</span>(<span class="number">0</span>).<span class="name">inputText</span>;
<span class="name">category</span> <span class="operator">=</span> <span class="name">modifiedCategory</span>;
<span class="name">category</span>.<span class="name">save</span>();
}</pre>
<p>Support for place and category removal can be checked at run-time by using the <a href="qml-qtlocation-plugin.html#supportsPlaces-method">Plugin::supportsPlaces</a> method, passing in a <a href="qml-qtlocation-plugin.html#supportsPlaces-method">Plugin::PlacesFeatures</a> flag and getting back <i>true</i> if the feature is supported. For example one would invoke <i>supportsPlaces(Plugin.RemovePlaceFeature)</i> to check if the <i>Plugin.RemovePlaceFeature</i> is supported.</p>
<p>To remove a place, invoke its <a href="qml-qtlocation-place.html#remove-method">remove()</a> method. To remove a category, invoke its <a href="qml-qtlocation-category.html#remove-method">remove()</a> method.</p>
<a name="running-the-example"></a>
<h2>Running the Example</h2>
<p>The example detects which plugins are available and has an option to show them in the via the Provider button.</p>
<p>Files:</p>
<ul>
<li><a href="qtlocation-places-places-qml.html">places/places.qml</a></li>
<li><a href="qtlocation-places-qmlplaceswrapper-cpp.html">places/qmlplaceswrapper.cpp</a></li>
<li><a href="qtlocation-places-content-places-categorydelegate-qml.html">places/content/places/CategoryDelegate.qml</a></li>
<li><a href="qtlocation-places-content-places-categorydialog-qml.html">places/content/places/CategoryDialog.qml</a></li>
<li><a href="qtlocation-places-content-places-categoryview-qml.html">places/content/places/CategoryView.qml</a></li>
<li><a href="qtlocation-places-content-places-editorialdelegate-qml.html">places/content/places/EditorialDelegate.qml</a></li>
<li><a href="qtlocation-places-content-places-editorialpage-qml.html">places/content/places/EditorialPage.qml</a></li>
<li><a href="qtlocation-places-content-places-group-qml.html">places/content/places/Group.qml</a></li>
<li><a href="qtlocation-places-content-places-mapcomponent-qml.html">places/content/places/MapComponent.qml</a></li>
<li><a href="qtlocation-places-content-places-optionsdialog-qml.html">places/content/places/OptionsDialog.qml</a></li>
<li><a href="qtlocation-places-content-places-placedelegate-qml.html">places/content/places/PlaceDelegate.qml</a></li>
<li><a href="qtlocation-places-content-places-placedialog-qml.html">places/content/places/PlaceDialog.qml</a></li>
<li><a href="qtlocation-places-content-places-placeeditorials-qml.html">places/content/places/PlaceEditorials.qml</a></li>
<li><a href="qtlocation-places-content-places-placeimages-qml.html">places/content/places/PlaceImages.qml</a></li>
<li><a href="qtlocation-places-content-places-placereviews-qml.html">places/content/places/PlaceReviews.qml</a></li>
<li><a href="qtlocation-places-content-places-placesutils-js.html">places/content/places/PlacesUtils.js</a></li>
<li><a href="qtlocation-places-content-places-ratingview-qml.html">places/content/places/RatingView.qml</a></li>
<li><a href="qtlocation-places-content-places-reviewdelegate-qml.html">places/content/places/ReviewDelegate.qml</a></li>
<li><a href="qtlocation-places-content-places-reviewpage-qml.html">places/content/places/ReviewPage.qml</a></li>
<li><a href="qtlocation-places-content-places-searchbox-qml.html">places/content/places/SearchBox.qml</a></li>
<li><a href="qtlocation-places-content-places-searchresultdelegate-qml.html">places/content/places/SearchResultDelegate.qml</a></li>
<li><a href="qtlocation-places-content-places-searchresultview-qml.html">places/content/places/SearchResultView.qml</a></li>
<li><a href="qtlocation-places-places-pro.html">places/places.pro</a></li>
<li><a href="qtlocation-places-placeswrapper-qrc.html">places/placeswrapper.qrc</a></li>
</ul>
</div>
<!-- @@@places -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|