Programmatic QML

corrino

I have question about the QML. Is it possible to load All those components like Button{}, Image{}, List{} programmatically and make hierarchy one another of them in the same file? Like, there is a Page{} inside that first page, there would be function which decide whether to add like AppButton{} or Image{} inside that Page{}. Furthermore, the same goes for Button{} or Image{}, to programmatically insert them components.
:)

There would be JSON file with data like:
{"pages":[
{"title":"Page 1", "color":"blue", "elements":[
{"type":"Grid", "someSettings":"setting", "elements":[{"type":"Button","title":"Press me"},
{"type":"Grid", "someSettings":"setting", "elements":[{"type":"Button","title":"Press me"},{"type":"Button","title":"Press me"}]}
]}
]}
]}

All JSON data would be saved in DataModel.qml as array variable.

And with that data QML page with functions constructs:

Page {

Grid {
Button {}

Grid {
Button {}
 Button {}

etc.
}
}
}

shav

Hi,

If I understand correctly you want to load some components dynamically, right? If so you can read this document.

Also you can use Loder component for load QML file dynamically. This component can be use for load qml files from local resource or from public server.

In my application I use this methods for load qml components dynamically:

/** @brief Create dynamic object from QML file.
 *  @param qml Path to QML file.
 *  @param parent Parent instance.
 *  @param options List of options fields.
 *  @param onComplete Callback function which will call when qml component will be loaded.*/
function createComponentFromQMLFile(qml, parent, options, onComplete) {
    if(qml !== null && qml !== undefined && qml.length > 0 &&
            parent !== null && parent !== undefined &&
            options !== null && options !== undefined &&
            onComplete !== null && onComplete !== undefined && onComplete instanceof Function) {
        var tmp = Qt.createComponent(qml);
        if(tmp !== null) {
            if(tmp.status === Component.Ready) {
                var itemInstance = tmp.createObject(parent, options);
                if(itemInstance !== null) {
                    onComplete(itemInstance);
                } else {
                    console.log("[EditorHelper] ERROR: Can't create object.");
                    onComplete(null);
                }
            } else if (tmp.status === Component.Error) {
                console.log("[EditorHelper] ERROR: "+tmp.errorString());
                onComplete(null);
            } else {
                tmp.statusChanged.connect(function () {
                    if (tmp.status === Component.Ready) {
                        var item = tmp.createObject(parent, options);
                        if(item !== null) {
                            onComplete(item);
                        } else {
                            console.log("[EditorHelper] ERROR: Can't create object.");
                            onComplete(null);
                        }
                    } else if (tmp.status === Component.Error) {
                        console.log("[EditorHelper] ERROR: "+tmp.errorString());
                        onComplete(null);
                    }
                });
            }
        } else {
            console.log("[EditorHelper] ERROR: Can't load QML file '"+qml+"'.");
            onComplete(null);
        }
    } else {
        console.log("[EditorHelper] ERROR: Incorrect parameters.");
        onComplete(null);
    }
}

usnig like this:

options = {}; //here you can set any properties from you qml object which need to create.
var qml = "qrc:/qml/Components/ErrorMessageWindow.qml"; //Path to qml file from resources for load.
    //appRootWnd - parent element to which you want to add you dynamic object.
EditorHelper.createComponentFromQMLFile(qml, appRootWnd, options, function(wnd) {
   //here you can set any code which was called when objections will be created and loaded.
    if(wnd) {
        wnd.open();
    }
});