aboutsummaryrefslogtreecommitdiffstats
path: root/doc/src/qml/integrating.qdoc
blob: 83dcaeae74f2a9181dfda88e57eae1bdb7aad19b (plain)
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
/****************************************************************************
**
** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** GNU Free Documentation License
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file.
**
** Other Usage
** Alternatively, this file may be used in accordance with the terms
** and conditions contained in a signed written agreement between you
** and Nokia.
**
**
**
**
**
** $QT_END_LICENSE$
**
****************************************************************************/

/*!
\page qml-integration.html
\ingroup qml-features
\title Integrating QML Code with Existing Qt UI Code
\brief applications with QML and Qt code

There are a number of ways to integrate QML into QWidget-based UI applications,
depending on the characteristics of your existing UI code.


\section1 Integrating with a \l{QWidget}-based UI

If you have an existing QWidget-based UI, QML widgets can be integrated into
it using QQuickView. QQuickView is a subclass of QWidget so you
can add it to your user interface like any other QWidget. Use
QQuickView::setSource() to load a QML file into the view, then add the
view to your UI:

\code
QQuickView *qmlView = new QQuickView;
qmlView->setSource(QUrl::fromLocalFile("myqml.qml"));

QWidget *widget = myExistingWidget();
QVBoxLayout *layout = new QVBoxLayout(widget);
layout->addWidget(qmlView);
\endcode

The one drawback to this approach is that QQuickView is slower to initialize
and uses more memory than a QWidget, and creating large numbers of QQuickView
objects may lead to performance degradation. If this is the case, it may be
better to rewrite your widgets in QML, and load the widgets from a main QML widget
instead of using QQuickView.

Keep in mind that QWidgets were designed for a different type of user interface
than QML, so it is not always a good idea to port a QWidget-based application to
QML. QWidgets are a better choice if your UI is comprised of a small number of
complex and static elements, and QML is a better choice if your UI is comprised of a large number
of simple and dynamic elements.


\section1 Integrating with a QGraphicsView-based UI

\section2 Adding QML widgets to a QGraphicsScene

If you have an existing UI based on the \l{Graphics View Framework},
you can integrate QML widgets directly into your QGraphicsScene. Use
QQmlComponent to create a QGraphicsObject from a QML file, and
place the graphics object into your scene using \l{QGraphicsScene::addItem()}, or
reparent it to an item already in the \l{QGraphicsScene}.

For example:

\code
QGraphicsScene* scene = myExistingGraphicsScene();
QQmlEngine *engine = new QQmlEngine;
QQmlComponent component(engine, QUrl::fromLocalFile("myqml.qml"));
QGraphicsObject *object =
    qobject_cast<QGraphicsObject *>(component.create());
scene->addItem(object);
\endcode

The following QGraphicsView options are recommended for optimal performance
of QML UIs:

\list
\li QGraphicsView::setOptimizationFlags(QGraphicsView::DontSavePainterState)
\li QGraphicsView::setViewportUpdateMode(QGraphicsView::BoundingRectViewportUpdate)
\li QGraphicsScene::setItemIndexMethod(QGraphicsScene::NoIndex)
\endlist

\section2 Loading QGraphicsWidget Objects in QML

An alternative approach is to expose your existing QGraphicsWidget objects to
QML and construct your scene in QML instead. See the \l {declarative-cppextensions-qgraphicslayouts.html}{graphics layouts example}
which shows how to expose Qt's graphics layout classes to QML in order
to use QGraphicsWidget with classes like QGraphicsLinearLayout and QGraphicsGridLayout.

To expose your existing QGraphicsWidget classes to QML, use \l {qmlRegisterType()}.
See \l{Extending QML with C++} for further information on how to use C++ types
in QML.
*/