~oif-team/ubuntu/natty/qt4-x11/xi2.1

« back to all changes in this revision

Viewing changes to doc/html/draganddrop-draggableicons.html

  • Committer: Bazaar Package Importer
  • Author(s): Adam Conrad
  • Date: 2005-08-24 04:09:09 UTC
  • Revision ID: james.westby@ubuntu.com-20050824040909-xmxe9jfr4a0w5671
Tags: upstream-4.0.0
ImportĀ upstreamĀ versionĀ 4.0.0

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<?xml version="1.0" encoding="iso-8859-1"?>
 
2
<!DOCTYPE html
 
3
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
 
4
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
5
<!-- /tmp/qt-4.0.0-espenr-1119621036935/qt-x11-opensource-desktop-4.0.0/doc/src/examples/draggableicons.qdoc -->
 
6
<head>
 
7
    <title>Qt 4.0: Draggable Icons Example</title>
 
8
    <style>h3.fn,span.fn { margin-left: 1cm; text-indent: -1cm; }
 
9
a:link { color: #004faf; text-decoration: none }
 
10
a:visited { color: #672967; text-decoration: none }
 
11
td.postheader { font-family: sans-serif }
 
12
tr.address { font-family: sans-serif }
 
13
body { background: #ffffff; color: black; }</style>
 
14
</head>
 
15
<body>
 
16
<table border="0" cellpadding="0" cellspacing="0" width="100%">
 
17
<tr>
 
18
<td align="left" valign="top" width="32"><img src="images/qt-logo.png" align="left" width="32" height="32" border="0" /></td>
 
19
<td width="1">&nbsp;&nbsp;</td><td class="postheader" valign="center"><a href="index.html"><font color="#004faf">Home</font></a>&nbsp;&middot; <a href="classes.html"><font color="#004faf">All&nbsp;Classes</font></a>&nbsp;&middot; <a href="mainclasses.html"><font color="#004faf">Main&nbsp;Classes</font></a>&nbsp;&middot; <a href="annotated.html"><font color="#004faf">Annotated</font></a>&nbsp;&middot; <a href="groups.html"><font color="#004faf">Grouped&nbsp;Classes</font></a>&nbsp;&middot; <a href="functions.html"><font color="#004faf">Functions</font></a></td>
 
20
<td align="right" valign="top" width="230"><img src="images/trolltech-logo.png" align="right" width="203" height="32" border="0" /></td></tr></table><h1 align="center">Draggable Icons Example</h1>
 
21
<p>Files:</p>
 
22
<ul>
 
23
<li><a href="draganddrop-draggableicons-dragwidget-cpp.html">draganddrop/draggableicons/dragwidget.cpp</a></li>
 
24
<li><a href="draganddrop-draggableicons-dragwidget-h.html">draganddrop/draggableicons/dragwidget.h</a></li>
 
25
<li><a href="draganddrop-draggableicons-main-cpp.html">draganddrop/draggableicons/main.cpp</a></li>
 
26
<li><a href="draganddrop-draggableicons-draggableicons-qrc.html">draganddrop/draggableicons/draggableicons.qrc</a></li>
 
27
</ul>
 
28
<p>The Draggable Icons example shows how to drag and drop image data between widgets in the same application, and between different applications.</p>
 
29
<center><img src="images/draggableicons-example.png" /></center><p>In many situations where drag and drop is used, the user starts dragging from a particular widget and drops the payload onto another widget. In this example, we subclass <a href="qlabel.html">QLabel</a> to create labels that we use as drag sources, and place them inside <a href="qwidget.html">QWidget</a>s that serve as both containers and drop sites.</p>
 
30
<p>In addition, when a drag and drop operation occurs, we want to send more than just an image. We also want to send information about where the user clicked in the image so that the user can place it precisely on the drop target. This level of detail means that we must create a custom MIME type for our data.</p>
 
31
<a name="dragwidget-class-definition"></a>
 
32
<h2>DragWidget Class Definition</h2>
 
33
<p>The icon widgets that we use to display icons are subclassed from <a href="qlabel.html">QLabel</a>:</p>
 
34
<pre>&nbsp;   class DragWidget : public QFrame
 
35
    {
 
36
    public:
 
37
        DragWidget(QWidget *parent=0);
 
38
 
 
39
    protected:
 
40
        void dragEnterEvent(QDragEnterEvent *event);
 
41
        void dropEvent(QDropEvent *event);
 
42
        void mousePressEvent(QMouseEvent *event);
 
43
    };</pre>
 
44
<p>Since the <a href="qlabel.html">QLabel</a> class provides most of what we require for the icon, we only need to reimplement the <a href="qwidget.html#mousePressEvent">QWidget::mousePressEvent</a>() to provide drag and drop facilities.</p>
 
45
<a name="dragwidget-class-implementation"></a>
 
46
<h2>DragWidget Class Implementation</h2>
 
47
<p>The <tt>DragWidget</tt> constructor sets an attribute on the widget that ensures that it will be deleted when it is closed:</p>
 
48
<pre>&nbsp;   DragWidget::DragWidget(QWidget *parent)
 
49
        : QFrame(parent)
 
50
    {
 
51
        setMinimumSize(200, 200);
 
52
        setFrameStyle(QFrame::Sunken | QFrame::StyledPanel);
 
53
        setAcceptDrops(true);
 
54
 
 
55
        QLabel *boatIcon = new QLabel(this);
 
56
        boatIcon-&gt;setPixmap(QPixmap(&quot;:/images/boat.png&quot;));
 
57
        boatIcon-&gt;move(20, 20);
 
58
        boatIcon-&gt;show();
 
59
        boatIcon-&gt;setAttribute(Qt::WA_DeleteOnClose);
 
60
 
 
61
        QLabel *carIcon = new QLabel(this);
 
62
        carIcon-&gt;setPixmap(QPixmap(&quot;:/images/car.png&quot;));
 
63
        carIcon-&gt;move(120, 20);
 
64
        carIcon-&gt;show();
 
65
        carIcon-&gt;setAttribute(Qt::WA_DeleteOnClose);
 
66
 
 
67
        QLabel *houseIcon = new QLabel(this);
 
68
        houseIcon-&gt;setPixmap(QPixmap(&quot;:/images/house.png&quot;));
 
69
        houseIcon-&gt;move(20, 120);
 
70
        houseIcon-&gt;show();
 
71
        houseIcon-&gt;setAttribute(Qt::WA_DeleteOnClose);
 
72
    }</pre>
 
73
<p>To enable dragging from the icon, we need to act on a mouse press event. We do this by reimplementing <a href="qwidget.html#mousePressEvent">QWidget::mousePressEvent</a>() and setting up a <a href="qdrag.html">QDrag</a> object.</p>
 
74
<pre>&nbsp;   void DragWidget::mousePressEvent(QMouseEvent *event)
 
75
    {
 
76
        QLabel *child = static_cast&lt;QLabel*&gt;(childAt(event-&gt;pos()));
 
77
        if (!child)
 
78
            return;
 
79
 
 
80
        QPixmap pixmap = *child-&gt;pixmap();
 
81
 
 
82
        QByteArray itemData;
 
83
        QDataStream dataStream(&amp;itemData, QIODevice::WriteOnly);
 
84
        dataStream &lt;&lt; pixmap &lt;&lt; QPoint(event-&gt;pos() - child-&gt;pos());</pre>
 
85
<p>Since we will be sending pixmap data for the icon and information about the user's click in the icon widget, we construct a <a href="qbytearray.html">QByteArray</a> and package up the details using a <a href="qdatastream.html">QDataStream</a>.</p>
 
86
<p>For interoperability, drag and drop operations describe the data they contain using MIME types. In Qt, we describe this data using a <a href="qmimedata.html">QMimeData</a> object:</p>
 
87
<pre>&nbsp;       QMimeData *mimeData = new QMimeData;
 
88
        mimeData-&gt;setData(&quot;application/x-dnditemdata&quot;, itemData);</pre>
 
89
<p>We choose an unofficial MIME type for this purpose, and supply the <a href="qbytearray.html">QByteArray</a> to the MIME data object.</p>
 
90
<p>The drag and drop operation itself is handled by a <a href="qdrag.html">QDrag</a> object:</p>
 
91
<pre>&nbsp;       QDrag *drag = new QDrag(this);
 
92
        drag-&gt;setMimeData(mimeData);
 
93
        drag-&gt;setPixmap(pixmap);
 
94
        drag-&gt;setHotSpot(event-&gt;pos() - child-&gt;pos());</pre>
 
95
<p>Here, we pass the data to the drag object, set a pixmap that will be shown alongside the cursor during the operation, and define the position of a hot spot that places the position of this pixmap under the cursor.</p>
 
96
<p /><address><hr /><div align="center">
 
97
<table width="100%" cellspacing="0" border="0"><tr class="address">
 
98
<td width="30%">Copyright &copy; 2005 <a href="trolltech.html">Trolltech</a></td>
 
99
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
 
100
<td width="30%" align="right"><div align="right">Qt 4.0.0</div></td>
 
101
</tr></table></div></address></body>
 
102
</html>