<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- todos.qdoc --> <title>Enginio QML Examples - Todos | Enginio Manual 1.6.3</title> <link rel="stylesheet" type="text/css" href="style/offline-simple.css" /> <script type="text/javascript"> document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css"); // loading style sheet breaks anchors that were jumped to before // so force jumping to anchor again setTimeout(function() { var anchor = location.hash; // need to jump to different anchor first (e.g. none) location.hash = "#"; setTimeout(function() { location.hash = anchor; }, 0); }, 0); </script> </head> <body> <div class="header" id="qtdocheader"> <div class="main"> <div class="main-rounded"> <div class="navigationbar"> <table><tr> <td >Qt 1.6</td><td >Enginio Manual</td><td >Enginio QML Examples - Todos</td></tr></table><table class="buildversion"><tr> <td id="buildversion" width="100%" align="right">Qt 1.6.3 Reference Documentation</td> </tr></table> </div> </div> <div class="content"> <div class="line"> <div class="content mainContent"> <div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div> <h1 class="title">Enginio QML Examples - Todos</h1> <span class="subtitle"></span> <!-- $$$todos-brief --> <p>The Todo example shows the <a href="qml-enginio-enginiomodel.html">EnginioModel</a> usage in Qt Quick.</p> <!-- @@@todos --> <!-- $$$todos-description --> <div class="descr"> <a name="details"></a> <p>In this example a simple list of objects is displayed in a ListView. Each item in the list is a "To Do" object which can be <i>done</i> or <i>not yet done</i>. Todos can be added and removed (when hovering with the mouse).</p> <p class="centerAlign"><img src="images/todolist.png" alt="" /></p><p>In this simple schema, the objects will only have two properties that are added to the default properties (such as creation date, which always exists): a string <code>title</code> and a bool <code>completed</code>. The object type will be created when a call to create, or, in this case, a call to <a href="qml-enginio-enginiomodel.html#append-method">EnginioModel::append()</a> is made.</p> <p>A todo object will look like this in <a href="http://json.org">JSON</a>:</p> <pre class="cpp"> { <span class="string">"title"</span>: <span class="string">"Buy Milk"</span><span class="operator">,</span> <span class="string">"completed"</span>: <span class="keyword">false</span> } </pre> <p>The example uses Qt Quick Controls, Layouts, and Enginio.</p> <pre class="qml"> import Enginio 1.0 </pre> <p>The first step is to create an <a href="qml-enginio-enginiomodel.html">Enginio model</a> and its <a href="qml-enginio-enginioclient.html">Enginio client</a> with the backend configuration. To get nice debug output in case something goes wrong, the client's <a href="qml-enginio-enginioclient.html#error-signal">onError</a> signal handler is implented. Since the error is a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.12">JSON object</a>, JSON.stringify is used to format it to a string.</p> <pre class="qml"> EnginioModel { id: enginioModel client: EnginioClient { backendId: backendHelper.backendId onError: console.log("Enginio error:", JSON.stringify(reply.data)) } query: {"objectType": "objects.todos" } } </pre> <p>A ListView is used to display the list of Todos. In the delegate, the properties of the Enginio objects are used.</p> <pre class="qml"> ListView { id: listview model: enginioModel delegate: listItemDelegate anchors.top: header.bottom anchors.bottom: footer.top width: parent.width clip: true // Animations add: Transition { NumberAnimation { properties: "y"; from: root.height; duration: 250 } } removeDisplaced: Transition { NumberAnimation { properties: "y"; duration: 150 } } remove: Transition { NumberAnimation { property: "opacity"; to: 0; duration: 150 } } } </pre> <p>It is easy to add a new Todo object to the model using a TextInput. By implementing the onAccepted signal handler, the Todo data is appended to the model. After appending the new Todo, the text property is cleared so that the next Todo can be entered.</p> <pre class="qml"> BorderImage { anchors.left: parent.left anchors.right: addButton.left anchors.verticalCenter: parent.verticalCenter anchors.margins: 16 source:"images/textfield.png" border.left: 14 ; border.right: 14 ; border.top: 8 ; border.bottom: 8 TextInput{ id: textInput anchors.fill: parent clip: true anchors.leftMargin: 14 anchors.rightMargin: 14 verticalAlignment: Text.AlignVCenter font.pixelSize: 22 Text { id: placeholderText anchors.fill: parent verticalAlignment: Text.AlignVCenter visible: !(parent.text.length || parent.inputMethodComposing) font: parent.font text: "New todo..." color: "#aaa" } onAccepted: { enginioModel.append({"title": textInput.text, "completed": false}) textInput.text = "" } } } Item { id: addButton width: 40 ; height: 40 anchors.margins: 20 anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter enabled: textInput.text.length Image { source: addMouseArea.pressed ? "qrc:icons/add_icon_pressed.png" : "qrc:icons/add_icon.png" anchors.centerIn: parent opacity: enabled ? 1 : 0.5 } MouseArea { id: addMouseArea anchors.fill: parent onClicked: textInput.accepted() } } } </pre> <p>Inside the delegate, the data for the index is available by using the property names (<i>title</i> and <i>completed</i>). The <i>title</i> property is directly assigned to the text displayed on each list item. The <i>completed</i> boolean is used to display the item with a strikeout font and a light color.</p> <pre class="qml"> Text { id: todoText text: title font.pixelSize: 26 color: "#333" anchors.verticalCenter: parent.verticalCenter anchors.left: checkbox.right anchors.right: parent.right anchors.leftMargin: 12 anchors.rightMargin: 40 elide: Text.ElideRight } </pre> <p>The <a href="qml-enginio-enginiomodel.html#setProperty-method">Enginio::EnginioModel::setProperty</a>() function is called to update the data in the Enginio backend.</p> <pre class="qml"> MouseArea { id: mouse anchors.fill: parent hoverEnabled: true onClicked: { if (index !== -1 && _synced) { enginioModel.setProperty(index, "completed", !completed) } } } </pre> <p>The <code>_synced</code> property can be used to ascertain whether an item has been synced or not. It is always available in the delegate, and may be used, for example, to disable the user interface until syncing has completed.</p> <pre class="qml"> Image { id: removeIcon source: removeMouseArea.pressed ? "qrc:icons/delete_icon_pressed.png" : "qrc:icons/delete_icon.png" anchors.margins: 20 anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right opacity: enabled ? 1 : 0.5 Behavior on opacity {NumberAnimation{duration: 100}} MouseArea { id: removeMouseArea anchors.fill: parent onClicked: enginioModel.remove(index) } } </pre> <p>Finally, a remove button is visible when hovering over an item with the mouse. Removal is implemented by calling <a href="qml-enginio-enginiomodel.html#remove-method">EnginioModel::remove()</a> with the row of the item.</p> <pre class="qml"> MouseArea { id: removeMouseArea anchors.fill: parent onClicked: enginioModel.remove(index) } </pre> <p>Files:</p> <ul> <li><a href="qtenginioqml-todos-todo-qml.html">todos/todo.qml</a></li> <li><a href="qtenginioqml-todos-todo-qrc.html">todos/todo.qrc</a></li> <li><a href="qtenginioqml-todos-todos-pro.html">todos/todos.pro</a></li> </ul> </div> <!-- @@@todos --> </div> </div> </div> </div> </div> <div class="footer"> <p> <acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd. 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/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners. </p> </div> </body> </html>