Dynamically loading multiple QML Files

  • Hi all,

    we are new to QML and are now starting to build a business application. The app is complex and the main feature should be the ability to dynamically load modules/plugins. So there is a main app which is just a container. In there you have a navigation and a content area. When click a link/button in the navigation, a new module/plugin should be loaded in the content area. The modules/plugins contains a least a qml file for the view and a cpp file for the logic. Each module/plugin should be independable from each other. So summarized it is a kind of Netbeans/Eclipse RCP System.

    Now i found to ways to load the qml dynamically:

    1. Load with Javascript

    var component;
    var sprite;

    component = Qt.createComponent("MyModule.qml");

    // mainApp ist the main application, the coordinates define the content area
    sprite = component.createObject(mainApp, {"x": 100, "y": 0});

    This works fine. But how do I connect the loaded view with a given cpp file which handles all the complex logic. The created view has only a reference to the main app cpp file. But it is clear that i can't put all the logic in there. This leads me to the second approach.

    1. Load the QML File from Code

    // main App
    QDeclarativeView *mainView = new QDeclarativeView;
    mainView ->setSource(QUrl::fromLocalFile("mainApp.qml"));
    mainView ->show();

    // load another qml file with reference to the main App
    QDeclarativeView *moduleView = new QDeclarativeView;
    moduleView ->setSource(QUrl::fromLocalFile("MyModule.qml"));
    moduleView ->setParent(mainView);
    moduleView ->show();

    Now here is my problem that the Module QML ist loaded an shown, but i layed over the main app and i don't know how to position the module view.

    1. Load the QML in a QT app

    This would mean i have a QT app with a menu and a content area where the qml files are loaded in. I did not manage to get it work yet. And of course we would like to have a QML only app. But if this works best, it would be ok

    Any help or hints would be nice.


  • Moderators

    A few more ideas for you to consider:

    use "Loader":http://developer.qt.nokia.com/doc/qt-4.8/qml-loader.html element (very similar to your first option)

    QML supports a curious way of forward-declaring. In a QML file you can make references to children that are NOT there yet, but are loaded later, in a derivative file

    this is probably the most important thought for you - you can add CPP logic to your modules using "qmlRegisterType()":http://developer.qt.nokia.com/doc/qt-4.8/qtbinding.html method

  • Hi sierdzio,

    thanks for the fast answer.

    The third or your ideas using qmlRegisterType() leads in the right direction, but is not quite the thing we are searching for. With this approach, the main qml still have to import the custom type. But ideally, the main app should not know anything about the modules/plugins.

    Imagine you have a development IDE and you have a menu with 3 Enties: lets say C++, Python and PHP. A the start of the IDE, you have just the menu and an empty content area. Thats all the main app knows so far. Now you click C++ in the menu, an a C++ editor is loaded in the content area. So the main app does something like this

    go to folder mainApp/Modules
    search folder c++
    open folder c++
    load c++Module.qml

    And the c++Module.qml itself contains the whole module UI with a editor, a own menu and so on. And of course some cpp code files for all the logic.

    In the end and at optimum stage, the main app just knows that there is a Modules folder. It creates the Menu on startup on the fly creating menu entries from the module folder names. So after copying a new module folder to the mainApp/Modules folder i just have to restart the app and then there is an new menu entry with the module folder name and when clicking it the module loads.

    We did the same in WPF/.NET with MEF and now we want to find out if we can do something similiar in Qt/QML.

  • Moderators

    Don't forget that QML is mostly for UI development. You can handle qmlRegisterType() in your C++ so that the module is loaded conditionally. Anything possible in C++ remains possible with QML :)

    Try making some proof of concept apps and it might clear up. QML uses different philosophy than Qt/C++, it takes some time to get used to - but once you do that, it totally rocks! I would point you to my current project, but it's close sourced as of today (might change in the future).

    Ah, another thing I forgot about. You can create QML plugins. I have not tried that way myself, so I can't help much, but here's some more info: "link":http://developer.qt.nokia.com/doc/qt-4.8/qdeclarativeextensionplugin.html and "link":http://developer.qt.nokia.com/doc/qt-4.8/qml-extending-tutorial-index.html.

Log in to reply