Results 1 to 8 of 8

Thread: QML App with toolbar and subView?

  1. #1
    Join Date
    Dec 2015
    Location
    Austria
    Posts
    23
    Thanks
    7
    Thanked 1 Time in 1 Post
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Windows Android

    Default QML App with toolbar and subView?

    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:

    Qt Code:
    1. QML
    2. ApplicationWindow {
    3. toolBar: Rectangle {
    4. ...
    5. }
    6.  
    7. ContentView {
    8. id: containerView
    9. }
    10.  
    11. }
    To copy to clipboard, switch view to plain text mode 

    Qt Code:
    1. C++
    2. QQmlApplicationEngine engine
    3. appEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    4. // is it possible to have something like a Container view ant to get it from the appEngine?
    5. containerView = appEngine.getObject("containerView");
    6.  
    7. // ist it possible to set the dataContext for the load qml for the view model?
    8. context = new DateContext();
    9. containerView.setSource("qml", context);
    10.  
    11. // is it possible to connect the signals from the qml to a C++ object ??
    12. 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!
    Last edited by ChriD; 20th January 2016 at 16:33.

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: QML App with toolbar and subView?

    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,
    _

  3. The following user says thank you to anda_skoa for this useful post:

    ChriD (21st January 2016)

  4. #3
    Join Date
    Dec 2015
    Location
    Austria
    Posts
    23
    Thanks
    7
    Thanked 1 Time in 1 Post
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Windows Android

    Default Re: QML App with toolbar and subView?

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


    Qt Code:
    1. C++
    2. class View : public QObject
    3. {
    4. Q_OBJECT
    5. Q_PROPERTY( QString qmlViewPath READ getQmlViewPath )
    6.  
    7. public:
    8. explicit View(QObject *parent = 0);
    9. virtual QString getQmlViewPath();
    10. };
    11. }
    12.  
    13.  
    14.  
    15. void main()
    16. {
    17. View firstView;
    18. View secondView;
    19. QQmlApplicationEngine appEngine;
    20. appEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    21. // Show view 1
    22. appEngine.rootContext()->setContextProperty("viewClassObject", (QObject *)&firstView);
    23. // ...
    24. // Show view 2
    25. appEngine.rootContext()->setContextProperty("viewClassObject", (QObject *)&secondView);
    26. // ...
    27.  
    28. }
    To copy to clipboard, switch view to plain text mode 

    Qt Code:
    1. QML
    2. ApplicationWindow {
    3. visible: true
    4.  
    5. toolBar: Rectangle{
    6. ....
    7. }
    8.  
    9. Loader {
    10. id: loaderViewContainer
    11. anchors.fill: parent
    12. focus: true
    13. source: viewClassObject.qmlViewPath
    14. }
    15.  
    16. }
    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.:

    Qt Code:
    1. void main()
    2. {
    3. ViewController viewController;
    4. QQmlApplicationEngine appEngine;
    5. appEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    6. // Show view which is provided by the viewControllerClass as property
    7. appEngine.rootContext()->setContextProperty("viewControllerObject", (QObject *)&viewController);
    8. }
    9.  
    10.  
    11. changeViewSignalReceipt()
    12. {
    13. // view will be changed automatically by property of the view Controller, but we have to set the context for the loaded view
    14. appEngine.rootContext()->setContextProperty("viewClassObject", (QObject *)&secondView);
    15. // or do i have to set the "view class" context to the loaderObject?
    16. }
    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?

  5. #4
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: QML App with toolbar and subView?

    Quote Originally Posted by ChriD View Post
    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.

    Quote Originally Posted by ChriD View Post
    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.

    Quote Originally Posted by ChriD View Post
    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,
    _

  6. The following user says thank you to anda_skoa for this useful post:

    ChriD (21st January 2016)

  7. #5
    Join Date
    Dec 2015
    Location
    Austria
    Posts
    23
    Thanks
    7
    Thanked 1 Time in 1 Post
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Windows Android

    Default Re: QML App with toolbar and subView?

    Thank you very much for the info

    I managed to create a "viewController" Class which will be the context of the main qml and where the loader source is binded to an Attribute of the class and it works nice.

    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.
    Due the fact that i can set multiple context on a qml view i do not have to get the Loader element to set the data context to the "subView"
    So this question is outdated

    But now i have another Problem
    I have a QML which is loaded in the LOader element and this contains a ListView with a Delegate and a Model which is given from C++ Class
    This works. Now i am trying to get a Signal from the listView to the C++ Object

    i have added a Signal in the ListView-Delegate and i emit the signal when i am doing a click on an item

    Qt Code:
    1. QML FILE: StandardListViewDelegate
    2. Item {
    3. id: listViewDelegateRoot
    4. width: parent.width
    5. height: 88
    6.  
    7. property alias itemId: itemId.itemId
    8.  
    9. signal sigItemClicked(var _itemId)
    10.  
    11. ...
    12.  
    13. Item {
    14. id: itemId
    15. property string itemId: modelData
    16. }
    17.  
    18. MouseArea {
    19. id: mouse
    20. anchors.fill: parent
    21. onClicked: listViewDelegateRoot.sigItemClicked(itemId)
    22.  
    23. }
    24.  
    25. }
    To copy to clipboard, switch view to plain text mode 

    Do i have to connect to the Signal in the main QML file so that i can connect it to the C++ Object Slot like eg.:
    (But that code throws me the error: "Cannot assign to non-existent property "sigItemClicked""
    Qt Code:
    1. Rectangle {
    2. Id: subView
    3.  
    4. signal sigModuleSelected(var _moduleId)
    5.  
    6. ListView {
    7. model: moduleListObject
    8. anchors.fill: parent
    9. delegate: StandardListViewDelegate {
    10. itemId: model.modelData.moduleId
    11. itemText: model.modelData.name
    12. sigItemClicked: sigModuleSelected(_itemId)
    13. }
    14. }
    15. }
    To copy to clipboard, switch view to plain text mode 


    Or can i connect the Delegate Signal directly to a c++ Slot with Object::connect

    And the main question is... How do i get the rootObjec(Qobject) where i have to connect to?!
    I have the "QQmlApplicationEngine" object where i can get all Objects but should i do something like?

    Qt Code:
    1. C++
    2. QObject *subViewObject= object->findChild<QObject*>("subView");
    3. QObject::connect(subViewObject, SIGNAL(sigModuleSelected(QString)), this, SLOT(onModuleSelected(QString)));
    To copy to clipboard, switch view to plain text mode 


    i know i am not very good in explaining things that i want to do but i hope you can understand my question


    Added after 1 16 minutes:


    Okay,

    I managed to do some stuff by myself
    The only Problem that persists is that i want to Redirect a Signal from a ListView delegate to ist parent Container
    I don't know how to do that


    Added after 23 minutes:


    Ahhh damit
    I've found my Problem.

    Instead of doing this

    Qt Code:
    1. Rectangle {
    2.  
    3. signal sigModuleSelected(string _moduleId)
    4.  
    5. ListView {
    6. id: moduleListViewObject
    7. model: moduleListObject
    8. anchors.fill: parent
    9. delegate: StandardListViewDelegate {
    10. id: moduleListViewDelegate
    11. itemId: model.modelData.moduleId
    12. itemText: model.modelData.name
    13. sigItemClicked: { sigModuleSelected(_itemId) }
    14. }
    15. }
    To copy to clipboard, switch view to plain text mode 

    i have to use

    Qt Code:
    1. Rectangle {
    2.  
    3. signal sigModuleSelected(string _moduleId)
    4.  
    5. ListView {
    6. id: moduleListViewObject
    7. model: moduleListObject
    8. anchors.fill: parent
    9. delegate: StandardListViewDelegate {
    10. id: moduleListViewDelegate
    11. itemId: model.modelData.moduleId
    12. itemText: model.modelData.name
    13. onSigItemClicked: { sigModuleSelected(_itemId) }
    14. }
    15. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by ChriD; 21st January 2016 at 17:53.

  8. #6
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: QML App with toolbar and subView?

    In any case you don't need to connect any signal.
    A signal automatically gets a signal handler on the element it can be emitted from.
    You can easily call the C++ slot from there.

    Cheers,
    _

  9. The following user says thank you to anda_skoa for this useful post:

    ChriD (22nd January 2016)

  10. #7
    Join Date
    Dec 2015
    Location
    Austria
    Posts
    23
    Thanks
    7
    Thanked 1 Time in 1 Post
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Windows Android

    Default Re: QML App with toolbar and subView?

    Thank you very much!
    Is there a way to Close the Thread or to mark it as Solved?

  11. #8
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: QML App with toolbar and subView?

    No, just leave it as it is.

    Cheers,
    _

Similar Threads

  1. About Qt Toolbar
    By korg1988 in forum Qt Programming
    Replies: 5
    Last Post: 10th February 2013, 20:12
  2. Replies: 5
    Last Post: 11th September 2010, 15:29
  3. Toolbar order
    By wconstan in forum Newbie
    Replies: 1
    Last Post: 19th December 2009, 22:21
  4. Toolbar
    By assismvla in forum Qt Programming
    Replies: 1
    Last Post: 17th July 2008, 18:42
  5. right justify toolbar
    By magland in forum Qt Programming
    Replies: 5
    Last Post: 16th April 2008, 19:36

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.