howtos/dynamic/faq1.rst


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

..
    ---------------------------------------------------------------------------
    Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
    All rights reserved.
    This work, unless otherwise expressly stated, is licensed under a
    Creative Commons Attribution-ShareAlike 2.5.
    The full license document is available from
    http://creativecommons.org/licenses/by-sa/2.5/legalcode .
    ---------------------------------------------------------------------------

FAQ: How can I load QML components dynamically?
===============================================

You can use the  Qt.createComponent(url) function on the QML Global Object

.. code-block:: js

    import QtQuick 1.1

    Item {
        id: root
        width: 300; height: 300

        function loadMyComponent() {
            var component = Qt.createComponent("MyComponent.qml");

            if (component.status == Component.Ready) {
                print("Component loaded successfully!")
            }
        }

        Component.onCompleted: loadMyComponent()
    }

This is the ``MyComponent`` component.

.. code-block:: js

    import QtQuick 1.1

    Rectangle {
        width: 100
        height: 62
        color: "red"
    }


In the example above, a component is loaded inside the `loadMyComponent()` javascript function.