[Solved] How to reload QML file with ApplicationWindow object?

shav

Hi guys,

I develop application with QML Desktop Component and can't understand how to refresh main window from QML or C++ code.
I created a class which created a main window by code
@
bool QtQuick2ApplicationViewer::showQmlFile(QString file)
{
m_qmlFile = file;
m_mainComponent->loadUrl(QUrl(m_qmlFile));
if(!m_mainComponent->isReady())
{
qWarning("%s", qPrintable(m_mainComponent->errorString()));
return false;
}
QObject *topLevel = m_mainComponent->create();
m_mainWindow = qobject_cast<QQuickWindow *>(topLevel);
if(!m_mainWindow)
{
qWarning("Error: Your root item has to be a Window.");
return false;
}

QObject* obj = m_mainWindow->findChild<QObject*>("logManager");
connect(obj, SIGNAL(reload(QString)), SLOT(reload(QString)));

m_mainWindow->showMaximized();

return true;

}
@

I want choosing file from menu and the refresh QML elements. If I understand correctly I must reload QML file, but I don't know how I can do it? Maybe exist some way how to reload QML elements from QML?
@
import QtQuick 2.0
import com.shav.mdl 1.0 //My custom plugin for QML 2.0
import QtDesktop 1.0
import Qt.labs.folderlistmodel 1.0

ApplicationWindow {
id: mainWindow
width: 1024
height: 768
title: "Mobile Debug Log Viewer"

property alias manager: logManager

About {
    id: aboutWindow
    title: "About"
}

Preferences {
    id: preferencesWindow
    title: "Settings"
}

Simulator {
    id: iphoneWindow
    title: "iPhone 4S"
}

MdlManager {  //Create a object from plugin which must work with file.
    id: logManager

    signal reload(string logFile);

    objectName: "logManager"
    onMdlLogParserDidFinished: {
        console.debug("File '"+parser.logFilePath+"' was parsed");
        //Must reload interface components for setting a new data from file.
    }
}

FileDialog {
    id: openMdlFile
    title: "Open Log file"
    nameFilters: ["*.mdl"]
    selectMultiple: false
    onAccepted: {
        logManager.reload(filePath);
    }
}

menuBar: MenuBar {
    Menu {
        text: "File"

        MenuItem {
            text: "Open Log..."
            shortcut: "Ctrl+O"
            onTriggered: {
                openMdlFile.open();
            }
        }
    }
    Menu {
        text: "Simulators"

        Menu {
            text: "iPhone"

            MenuItem {
                text: "iPhone 4S"

                onTriggered: {
                    iphoneWindow.showNormal();
                }
            }
        }

/* Menu {
text: "iPad"
enabled: false
visible: false
}*/

        Separator { }

        MenuItem {
            text: "Enabled Brodcast Images"
            checkable: true

            onCheckedChanged: {
                if(checked)
                {
                    //Enabled
                }
                else
                {
                    //Disabled
                }
            }
        }
    }
    Menu {
        text: "Preferences"

        MenuItem {
            text: "Settings"
            onTriggered: {
                preferencesWindow.showNormal();
            }
        }
    }
    Menu {
        text: "Help"

        MenuItem {
            text: "About..."
            onTriggered: {
                aboutWindow.showNormal();
            }
        }
    }
}

ServerInformation {
    id: serverList
    anchors {verticalCenter: parent.verticalCenter}
    width: 400
    height: parent.height - 100
    x: -(serverList.width - 40)
    opacity: 0.0
    bookmarkImage: "images/art-add-bookmark.png"

    NumberAnimation {
        id: serverListShow
        running: false
        target: serverList
        property: "opacity"
        duration: 1000
        easing.type: Easing.InOutBack
        to: 1.0
    }
}

Rectangle {
    anchors {top: mainWindow.bottom}
    color: "transparent"
    clip: true
    width: parent.width
    height: parent.height

    LeftSideBar {   //This must be reloaded
        id: leftBar
        color: "black"
        width: 400
        height: parent.height
        x: -leftBar.width

        NumberAnimation {
            running: true
            target: leftBar
            property: "x"
            duration: 700
            easing.type: Easing.InOutBack
            to: 0
        }
     }

    ContentView { //This must be reloaded

id:contentView
width: parent.width - 400
height: parent.height
x: leftBar.width
y: -parent.width
color: "transparent"

        NumberAnimation {
            running: true
            target: contentView
            property: "y"
            duration: 1000
            easing.type: Easing.InOutBack
            to: 0
            onRunningChanged: {
                serverListShow.start();
            }
        }
    }
}

}
@

If somebody know how I can reload elements from QML/C++, please help me. Thanks!

shav

Ok, I read docs and found this "page":http://doc.qt.digia.com/qt/qdeclarativedynamicobjects.html. But when I try to use example code from article I received error like this:
@
QQmlComponent: Created graphical object was not placed in the graphics scene.
@

The code which I use looks like:
@
MdlManager {
id: logManager

    signal reload(string logFile);

    objectName: "logManager"
    //mdlFilePath: ""
    onMdlLogParserDidFinished: {

        console.debug("File '"+parser.logFilePath+"' was parsed");

        var component = Qt.createComponent("CentralWidget.qml");
        var obj = component.createObject(mainWindow, {"width":mainWindow.width, "height":mainWindow.height});
        if (obj === null)
        {
            console.log("Error creating object");
        }
    }
}

@

What I do wrong?

P.S. I known what I read a docs for Qt 4.7 and QML 1.x, but I can't find any docs for Qt 5 and QML 2.x in official docs. If somebody know where I can found any information about my problem please tell me. Thanks.

shav

Hi everybody!

I've found solution of my problem. But I not sure what this is a best way to solving the problem. If somebody found a simple way please tell me. Thanks.

The solution:
I've created the JS script like this:
@
/** The global component for save a centeral widget.*/
var centeralWidget = null;

/** Create a center widget with show data from MDL file.

@param qmlFile The full path to centeralWidget QML file.
@param parent The parent object on which centeral widget will be shown.
@author Andrew Shapovalov.*/
function createCenteralWidget(qmlFile, parent)
{
if(centeralWidget !== null)
{
centeralWidget.opacity = 0.0;
centeralWidget.destroy();
}

var tmp = Qt.createComponent(qmlFile);
var options = {"id": "widget",
"anchors": {"top": parent.bottom},
"width": parent.width,
"height": parent.height};
centeralWidget = tmp.createObject(parent, options);

if(centeralWidget === null)
{
return false;
}

return true;
}
@

And Using it in my QML code:
@
MdlManager {
id: logManager

    signal reload(string logFile);

    objectName: "logManager"
    onMdlLogParserDidFinished: {
        if(!QmlCreator.createCenteralWidget("qrc:/qml/MdlViewer/CentralWidget.qml", center))
        {
            console.debug("ERROR: Can't create a QML object.");
        }
    }
}

@

Now, when user choose file the application will recreating the central object and reload content.

Hi,

I was also looking for a similar solution.

Thank you

Qt World Summit: Submit your Presentation

[Solved] How to reload QML file with ApplicationWindow object?