examples/quick/mousearea/mousearea.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the examples of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:BSD$
   9 ** You may use this file under the terms of the BSD license as follows:
  10 **
  11 ** "Redistribution and use in source and binary forms, with or without
  12 ** modification, are permitted provided that the following conditions are
  13 ** met:
  14 **   * Redistributions of source code must retain the above copyright
  15 **     notice, this list of conditions and the following disclaimer.
  16 **   * Redistributions in binary form must reproduce the above copyright
  17 **     notice, this list of conditions and the following disclaimer in
  18 **     the documentation and/or other materials provided with the
  19 **     distribution.
  20 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  21 **     the names of its contributors may be used to endorse or promote
  22 **     products derived from this software without specific prior written
  23 **     permission.
  24 **
  25 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  26 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  27 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  28 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  29 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  30 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  31 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  32 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  33 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  34 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  35 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  36 **
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40
  41 import QtQuick 2.0
  42
  43 /*!
  44     \title QtQuick Examples - MouseArea
  45     \example quick/mousearea
  46     \brief This is a collection of QML Animation examples.
  47     \image qml-mousearea-example.png
  48
  49     This example shows you how to respond to clicks and drags with a MouseArea.
  50
  51     When you click inside the red square, the Text element will list several properties
  52     of that click which are available to QML.
  53
  54     Signals are emitted by the MouseArea when clicks or other discrete operations occur within it
  55     \snippet examples/quick/mousearea/mousearea.qml clicks
  56
  57     The MouseArea can also be used to drag elements around. By setting the parameters of the drag property,
  58     the target item will be dragged around if the user starts to drag within the MouseArea.
  59     \snippet examples/quick/mousearea/mousearea.qml drag
  60
  61 */
  62
  63 Rectangle {
  64     id: box
  65     width: 320; height: 480
  66
  67     Rectangle {
  68         id: redSquare
  69         width: 120; height: 120
  70         anchors.top: parent.top; anchors.left: parent.left; anchors.margins: 10
  71         color: "red"
  72
  73         Text { text: "Click"; font.pixelSize: 16; anchors.centerIn: parent }
  74
  75         MouseArea {
  76             anchors.fill: parent
  77             hoverEnabled: true
  78             property string buttonID
  79
  80             acceptedButtons: Qt.AllButtons
  81             // Value 'All.Buttons' is eqivalent to:
  82             // 'Qt::LeftButton | Qt::RightButton | Qt::MiddleButton  .... | Qt::ExtraButton24'
  83
  84             onEntered: info.text = 'Entered'
  85             onExited: info.text = 'Exited (pressed=' + pressed + ')'
  86
  87             onPressed: {
  88                 if (mouse.button == Qt.LeftButton)
  89                     buttonID = 'LeftButton'
  90                 else if (mouse.button == Qt.RightButton)
  91                     buttonID = 'RightButton'
  92                 else if (mouse.button == Qt.MidButton)
  93                     buttonID = 'MiddleButton'
  94                 else if (mouse.button == Qt.BackButton)
  95                     buttonID = 'BackButton'
  96                 else if (mouse.button == Qt.ForwardButton)
  97                     buttonID = 'ForwardButton'
  98                 else if (mouse.button == Qt.TaskButton)
  99                     buttonID = 'TaskButton'
 100                 else if (mouse.button == Qt.ExtraButton4)
 101                     buttonID = 'ExtraButton4'
 102                 else if (mouse.button == Qt.ExtraButton5)
 103                     buttonID = 'ExtraButton5'
 104                 else if (mouse.button == Qt.ExtraButton6)
 105                     buttonID = 'ExtraButton6'
 106                 else if (mouse.button == Qt.ExtraButton7)
 107                     buttonID = 'ExtraButton7'
 108                 else if (mouse.button == Qt.ExtraButton8)
 109                     buttonID = 'ExtraButton8'
 110                 else if (mouse.button == Qt.ExtraButton9)
 111                     buttonID = 'ExtraButton9'
 112                 else if (mouse.button == Qt.ExtraButton10)
 113                     buttonID = 'ExtraButton10'
 114                 else if (mouse.button == Qt.ExtraButton11)
 115                     buttonID = 'ExtraButton11'
 116                 else if (mouse.button == Qt.ExtraButton12)
 117                     buttonID = 'ExtraButton12'
 118                 else if (mouse.button == Qt.ExtraButton13)
 119                     buttonID = 'ExtraButton13'
 120                 else if (mouse.button == Qt.ExtraButton14)
 121                     buttonID = 'ExtraButton14'
 122                 else if (mouse.button == Qt.ExtraButton15)
 123                     buttonID = 'ExtraButton15'
 124                 else if (mouse.button == Qt.ExtraButton16)
 125                     buttonID = 'ExtraButton16'
 126                 else if (mouse.button == Qt.ExtraButton17)
 127                     buttonID = 'ExtraButton17'
 128                 else if (mouse.button == Qt.ExtraButton18)
 129                     buttonID = 'ExtraButton18'
 130                 else if (mouse.button == Qt.ExtraButton19)
 131                     buttonID = 'ExtraButton19'
 132                 else if (mouse.button == Qt.ExtraButton20)
 133                     buttonID = 'ExtraButton20'
 134                 else if (mouse.button == Qt.ExtraButton21)
 135                     buttonID = 'ExtraButton21'
 136                 else if (mouse.button == Qt.ExtraButton22)
 137                     buttonID = 'ExtraButton22'
 138                 else if (mouse.button == Qt.ExtraButton23)
 139                     buttonID = 'ExtraButton23'
 140                 else if (mouse.button == Qt.ExtraButton24)
 141                     buttonID = 'ExtraButton24'
 142
 143                 info.text = 'Pressed (' + buttonID + ' shift='
 144                     + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')'
 145                 var posInBox = redSquare.mapToItem(box, mouse.x, mouse.y)
 146                 posInfo.text = + mouse.x + ',' + mouse.y + ' in square'
 147                         + ' (' + posInBox.x + ',' + posInBox.y + ' in window)'
 148             }
 149
 150             onReleased: {
 151                 btn.text = 'Released (isClick=' + mouse.isClick + ' wasHeld=' + mouse.wasHeld + ')'
 152                 posInfo.text = ''
 153             }
 154
 155             //! [clicks]
 156             onPressAndHold: btn.text = 'Press and hold'
 157             onClicked: btn.text = 'Clicked (wasHeld=' + mouse.wasHeld + ')'
 158             onDoubleClicked: btn.text = 'Double clicked'
 159             //! [clicks]
 160         }
 161     }
 162
 163     Rectangle {
 164         id: blueSquare
 165         width: 120; height: 120
 166         x: box.width - width - 10; y: 10    // making this item draggable, so don't use anchors
 167         color: "blue"
 168
 169         Text { text: "Drag"; font.pixelSize: 16; color: "white"; anchors.centerIn: parent }
 170
 171         MouseArea {
 172             anchors.fill: parent
 173             //! [drag]
 174             drag.target: blueSquare
 175             drag.axis: Drag.XandYAxis
 176             drag.minimumX: 0
 177             drag.maximumX: box.width - parent.width
 178             drag.minimumY: 0
 179             drag.maximumY: box.height - parent.width
 180             //! [drag]
 181         }
 182     }
 183
 184     Text {
 185         id: info
 186         anchors.bottom: btn.top; anchors.horizontalCenter: parent.horizontalCenter; anchors.margins: 20
 187
 188         onTextChanged: console.log(text)
 189     }
 190
 191     Text {
 192         id: btn
 193         anchors.bottom: posInfo.top; anchors.horizontalCenter: parent.horizontalCenter; anchors.margins: 20
 194     }
 195
 196     Text {
 197         id: posInfo
 198         anchors.bottom: parent.bottom; anchors.horizontalCenter: parent.horizontalCenter; anchors.margins: 20
 199     }
 200 }