QML App with toolbar and subView?

[ChriD]

Hi,

I am creating my first QML application and i am a Little bit confused.
i want to have an application window with a toolbar and a Container where i can Show "SUB" views (maybe StackView as container) which will Show me other views which i want to load via C++

So i am able to create an Application Window with the QQmlApplicationEngine (with QQuickView i can't create a Toolbar because the view itself creates an application window) and to load my main.qml file.
The Toolbar is shown. Thats good.
Now i want to add the "Container view" which should show qml files i want to set/load with C++
That means first i will show a ListView, after a list view item is clicked i want to show another view, aso...

Each qml view should have a C++ Class derived from QObject and this class will handle the signals from the current qml file loaded in the "Container view"

an example with pseudo code:

QML
ApplicationWindow {
 toolBar: Rectangle {
    ...
    }
 
 ContentView {
   id: containerView
  }
 
 }

QML
ApplicationWindow {
 toolBar: Rectangle {
    ...
    }
 
 ContentView {
   id: containerView
  }

 }

To copy to clipboard, switch view to plain text mode 

C++
QQmlApplicationEngine engine
appEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
// is it possible to have something like a Container view ant to get it from the appEngine?
containerView = appEngine.getObject("containerView");
 
// ist it possible to set the dataContext for the load qml for the view model?
context = new DateContext();
containerView.setSource("qml", context);
 
// is it possible to connect the signals from the qml to a C++ object ??
 QObject::connect(qtVewObject, SIGNAL(sigTest(QString)), classObjectWithReceivesSignals, SLOT(slotSignalTest(QString)));

C++
QQmlApplicationEngine engine
appEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
// is it possible to have something like a Container view ant to get it from the appEngine?
containerView = appEngine.getObject("containerView");

// ist it possible to set the dataContext for the load qml for the view model?
context = new DateContext();
containerView.setSource("qml", context);

// is it possible to connect the signals from the qml to a C++ object ??
 QObject::connect(qtVewObject, SIGNAL(sigTest(QString)), classObjectWithReceivesSignals, SLOT(slotSignalTest(QString)));

To copy to clipboard, switch view to plain text mode 

Is there a nice way to achieve this.
I've looked around in the Internet but i dont really understand if there is such thing like a "Container view" which i can embedd in the main QML and where i can load other qml files.
Maybe i can use a StackView for the Container view but i do not Need the ability of pushing an popping views (i will do that by my own)

Are there any suggestions for me?
THANKS!

[anda_skoa]

A Loader element can load any QML file and will resize that QML file's root item to its own size.

You can easily export a C++ object with a property that holds that QML file name and bind the loader's source property to it.
The Loader will load the new file whenver the C++ object changes the property.

Cheers,
_

[ChriD]

Hi, Thank You for your answer!
So it should be something like this?!

C++
class View : public QObject
        {
            Q_OBJECT
            Q_PROPERTY( QString qmlViewPath READ getQmlViewPath )
 
            public:
                explicit View(QObject *parent = 0);
                virtual QString getQmlViewPath();
        };
    }
 
 
 
void main()
{
    View firstView;
    View secondView;
    QQmlApplicationEngine appEngine;
    appEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    // Show view 1
    appEngine.rootContext()->setContextProperty("viewClassObject", (QObject *)&firstView);
    // ...
    // Show view 2
    appEngine.rootContext()->setContextProperty("viewClassObject", (QObject *)&secondView);
    // ...
 
}

C++
class View : public QObject
        {
            Q_OBJECT
            Q_PROPERTY( QString qmlViewPath READ getQmlViewPath )

            public:
                explicit View(QObject *parent = 0);
                virtual QString getQmlViewPath();
        };
    }



void main()
{
    View firstView;
    View secondView;
    QQmlApplicationEngine appEngine;
    appEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    // Show view 1
    appEngine.rootContext()->setContextProperty("viewClassObject", (QObject *)&firstView);
    // ...
    // Show view 2
    appEngine.rootContext()->setContextProperty("viewClassObject", (QObject *)&secondView);
    // ...

}

To copy to clipboard, switch view to plain text mode 

QML
ApplicationWindow {
    visible: true
 
    toolBar: Rectangle{
        ....
    }
 
    Loader {     
        id: loaderViewContainer
        anchors.fill: parent
        focus: true
        source: viewClassObject.qmlViewPath
    }
 
}

QML
ApplicationWindow {
    visible: true

    toolBar: Rectangle{
        ....
    }

    Loader {     
        id: loaderViewContainer
        anchors.fill: parent
        focus: true
        source: viewClassObject.qmlViewPath
    }
    
}

To copy to clipboard, switch view to plain text mode 

Would the change of the context of the root force the loader to load/reload the qml?
Or would it be better to create a "ViewController" class which contains all the viewsClasses with their contexts so i only have to set the root context (ViewController) once and then set the current view context for each view
e.g.:

void main()
{
    ViewController viewController;
    QQmlApplicationEngine appEngine;
    appEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    // Show view which is provided by the viewControllerClass as property
    appEngine.rootContext()->setContextProperty("viewControllerObject", (QObject *)&viewController);
}
 
 
changeViewSignalReceipt()
{
    // view will be changed automatically by property of   the view Controller, but we have to set the context for the loaded view
    appEngine.rootContext()->setContextProperty("viewClassObject", (QObject *)&secondView);
    // or do i have to set the "view class" context to the loaderObject?
}

void main()
{
    ViewController viewController;
    QQmlApplicationEngine appEngine;
    appEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    // Show view which is provided by the viewControllerClass as property
    appEngine.rootContext()->setContextProperty("viewControllerObject", (QObject *)&viewController);
}


changeViewSignalReceipt()
{
    // view will be changed automatically by property of   the view Controller, but we have to set the context for the loaded view
    appEngine.rootContext()->setContextProperty("viewClassObject", (QObject *)&secondView);
    // or do i have to set the "view class" context to the loaderObject?
}

To copy to clipboard, switch view to plain text mode 

Is it possible to set multiple ContextProperties to the rootContext, or do i have to get the Loader Object and set the view Context there?
And how would i get the loader Object from the QML to set its context. Or can i bind the context of the loader object from the viewController?

[anda_skoa]

So it should be something like this?!

Not quite.
Instead of setting a second object with the same id, you would change the value of the property of the already exported object.
The Q_PROPERTY will need a NOTIFY signal so that the C++ object can tell teh QML engine that the property has to be re-read.

Is it possible to set multiple ContextProperties to the rootContext, or do i have to get the Loader Object and set the view Context there?

You can set many objects as long as their "names" are unique (basically like id values in QML).
You can also export a list of objects or even a model.

And how would i get the loader Object from the QML to set its context. Or can i bind the context of the loader object from the viewController?

I don't quite get what you mean there.
What you do internally in your exported object when it changes the view path is up to you.

Cheers,
_