/usr/share/qt5/doc/qtdoc/qtquick-usecase-userinput.html is in qt5-doc-html 5.3.2-3.
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 | <?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" />
<!-- userinput.qdoc -->
<title>Use Case - Responding To User Input in QML | QtDoc 5.3</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><a href="index.html">Qt 5.3</a></li>
<li>Use Case - Responding To User Input in QML</li>
<li id="buildversion">
Qt 5.3.2 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="#supported-types-of-user-input">Supported Types of User Input</a></li>
<li class="level2"><a href="#mouse-and-touch-events">Mouse and Touch Events</a></li>
<li class="level2"><a href="#keyboard-and-button-events">Keyboard and Button Events</a></li>
</ul>
</div>
<h1 class="title">Use Case - Responding To User Input in QML</h1>
<span class="subtitle"></span>
<!-- $$$qtquick-usecase-userinput.html-description -->
<div class="descr"> <a name="details"></a>
<a name="supported-types-of-user-input"></a>
<h2>Supported Types of User Input</h2>
<p>The <a href="../qtquick/qtquick-index.html">Qt Quick</a> module provides support for the most common types of user input, including mouse and touch events, text input and key-press events. Other modules provide support for other types of user input (for example, the <a href="../qtsensors/qtsensors-index.html">Qt Sensors</a> module provides support for shake-gestures in QML applications).</p>
<p>This article covers how to handle basic user input; for further information about motion-gesture support, please see the <a href="../qtsensors/qtsensors-index.html">Qt Sensors</a> documentation. For information about audio-visual input, please see the <a href="../qtmultimedia/qtmultimedia-index.html">Qt Multimedia</a> documentation.</p>
<a name="mouse-and-touch-events"></a>
<h3>Mouse and Touch Events</h3>
<p>The <a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a> type allows mouse and touch events to be handled in a QML application. A <a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a> can be combined with either an <a href="../qtquick/qml-qtquick-image.html">Image</a> or a <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a> and <a href="../qtquick/qml-qtquick-text.html">Text</a> object to implement a simple button.</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</a></span> {
<span class="name">id</span>: <span class="name">root</span>
<span class="name">width</span>: <span class="number">320</span>
<span class="name">height</span>: <span class="number">480</span>
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"#272822"</span>
<span class="name">width</span>: <span class="number">320</span>
<span class="name">height</span>: <span class="number">480</span>
}
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">rectangle</span>
<span class="name">x</span>: <span class="number">40</span>
<span class="name">y</span>: <span class="number">20</span>
<span class="name">width</span>: <span class="number">120</span>
<span class="name">height</span>: <span class="number">120</span>
<span class="name">color</span>: <span class="string">"red"</span>
<span class="type"><a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: <span class="name">rectangle</span>.<span class="name">width</span> <span class="operator">+=</span> <span class="number">10</span>
}
}
}</pre>
<p>For more advanced use cases requiring multiple touch points, please read the documentation for the <a href="../qtquick/qml-qtquick-multipointtoucharea.html">MultiPointTouchArea</a> type and the <a href="../qtquick/qml-qtquick-pincharea.html">PinchArea</a> type.</p>
<p>Note that some types have their own built in input handling. For example, <a href="../qtquick/qml-qtquick-flickable.html">Flickable</a> responds to mouse dragging, mouse wheel scrolling, touch dragging, and touch flicking by default.</p>
<a name="keyboard-and-button-events"></a>
<h3>Keyboard and Button Events</h3>
<p>Button and key presses, from buttons on a device, a keypad, or a keyboard, can all be handled using the <a href="../qtquick/qml-qtquick-keys.html">Keys</a> attached property. This attached property is available on all <a href="../qtquick/qml-qtquick-item.html">Item</a> derived types, and works with the <a href="../qtquick/qml-qtquick-item.html#focus-prop">Item::focus</a> property to determine which type receives the key event. For simple key handling, you can set the focus to true on a single <a href="../qtquick/qml-qtquick-item.html">Item</a> and do all your key handling there.</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</a></span> {
<span class="name">id</span>: <span class="name">root</span>
<span class="name">width</span>: <span class="number">320</span>
<span class="name">height</span>: <span class="number">480</span>
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"#272822"</span>
<span class="name">width</span>: <span class="number">320</span>
<span class="name">height</span>: <span class="number">480</span>
}
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">rectangle</span>
<span class="name">x</span>: <span class="number">40</span>
<span class="name">y</span>: <span class="number">20</span>
<span class="name">width</span>: <span class="number">120</span>
<span class="name">height</span>: <span class="number">120</span>
<span class="name">color</span>: <span class="string">"red"</span>
<span class="name">focus</span>: <span class="number">true</span>
<span class="name">Keys</span>.onUpPressed: <span class="name">rectangle</span>.<span class="name">y</span> <span class="operator">-=</span> <span class="number">10</span>
<span class="name">Keys</span>.onDownPressed: <span class="name">rectangle</span>.<span class="name">y</span> <span class="operator">+=</span> <span class="number">10</span>
<span class="name">Keys</span>.onLeftPressed: <span class="name">rectangle</span>.<span class="name">x</span> <span class="operator">+=</span> <span class="number">10</span>
<span class="name">Keys</span>.onRightPressed: <span class="name">rectangle</span>.<span class="name">x</span> <span class="operator">-=</span> <span class="number">10</span>
}
}</pre>
<p>For text input the <a href="../qtquick/qtquick-index.html">Qt Quick</a> module provides several built-in types. In particular, the <a href="../qtquick/qml-qtquick-textinput.html">TextInput</a> and <a href="../qtquick/qml-qtquick-textedit.html">TextEdit</a> types allow for single-line entry and multi-line editing respectively.</p>
<p>Here is all you need to get a working <a href="../qtquick/qml-qtquick-textinput.html">TextInput</a>:</p>
<pre class="cpp">import <span class="type"><a href="../qtquick/qtquick-module.html">QtQuick</a></span> <span class="number">2.3</span>
TextInput {
focus: <span class="keyword">true</span>
text: <span class="string">"Initial Text"</span>
}</pre>
</div>
<!-- @@@qtquick-usecase-userinput.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2014 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>
|